服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

10大原则!教你做好数字产品的自然界面设计(NUI)!

日期: 来源:TCC翻译情报局收集编辑:高畅
点击 "TCC翻译情报局关注,回复 "社群" 加入我们

本文共 3616 字,预计阅读 10 分钟
TCC 情报局的 第 179 篇 干货分享
2023 年的 第 8 

TCC 推荐:大家好,这里是TCC翻译情报局,我是李泽慧。现如今人们的生活已经离不开电子产品了,从触控平板设备到可穿戴智能手表,我们在日常生活中每天也许会花费数个小时在这些设备商。尽管这些智能设备的操作界面大小不一,但一些优秀的应用软件都遵循了相同的法则,从而让用户拥有非常好的交互体验。我们来看一看本文作者总结了哪些能够让你的产品使用体验更加丝滑,更人性化的tips吧!

          


跟随时代的变迁,市场上的智能设备种类一直在逐渐增加。同样,适用于人们日常生活的设备也变得丰富起来。跟随这一趋势,在科技产业领域从业的设计师将扮演越来越重要的角色。当人们的日常生活中开始使用越来越多的设备,人们平均在每个设备上花费的时间也越来越有限。Exploding Topics 公司 2022 年的数据显示,人们每天在手机上花费的时间大概为 3 小时 15 分钟。假设人们总体设备的使用时长不变,但手机的使用时间是减少的。因为人们可能会花费其他时间在智能手表,智能电视,平板电脑以及其他位置设备( 例如集成显示屏 )上。

我在 Quora 上挖掘到一位低调的作者,Dan Saffer,交互设计师兼作家,撰写了《 11个自然交互界面(NUI)的设计准则 》。在浏览这篇文章的过程中,我意识到这就是贯穿设计的黄金法则 —— 即便如今手持或者手腕友好的设备的外形一直在改变。让我们来重温下这些法则并一探究竟。



1.为手指设计,而不是光标

1.Design for Fingers, not Cursors


手指触碰目标理应比桌面图标设计的更大,8-10 毫米适合鼠标,10-14 毫米大小适合手指。

即便是设计网页时,作为设计师我们应该考虑到这些网页在触摸屏设备上打开时是如何进行交互的。许多网页界面瘫痪都是由手机端引起的。这是 因为我们经常随身携带手机设备,相比其他设备而言,手机能为我们提供一个非常舒适便利的使用体验。因此,在设计任何界面的时候,还要考虑触控区域,例如链接,不同类型的按钮,以及滑动区域。像台式机等桌面设备,使用鼠标或触控板来选中 / 点击对象;在笔记本电脑这类设备上的光标,是为了精确而设计,因此仅适合高密度设备。而 手指则适用于那些低精度输入端,例如手机,智能手表和平板这种有触摸屏的设备。



2.生理与人体运动学

2.Remember physiology and kinesiology


不要让用户进行过于夸张或者重复的任务。

不要让用户一遍遍做一样的任务。一个重复多次完成的任务是无聊单调的。作为设计师,需要通过关注数据及用户观点来试探是否可以自动化完成任务,而不是使用规则包含的基础自动化。不需要所有东西都看起来完美,只是要注意那些需要手动重复的工作,用户会在你的产品上滞留更长的时间。



3.拒绝大猩猩手臂

3.No gorilla arm


尽管主流报告并没有提及此观点,但人类的手臂并不适合放在身前长时间作业。

想象一下,在微软平板上呈现你的界面设计,听起来很激动是吧?尽管大尺寸屏幕为设计提供了更多空间,但是用户的手臂也可能难以触及所有界面控件。任何超越简单交互的设计都会让用户感到乏味,疲倦。如果用户长时间伸展手臂在屏幕上进行交互,那么因而引发的疲劳和酸痛被称为“大猩猩手臂”。



4.屏幕遮挡问题

4.No gorilla arm


手指与手掌紧密相连,因而当你在屏幕上做出手势时你的手可以覆盖整块屏幕。尽量 避免将重要元素,比如标签,放在一个控件下面,因为用户的手可能把它盖住。将类似菜单的控件置于屏幕底端可以避免这种现象。

当设计一个按钮交互时,当它以浮动的方式或出现在工具提示中,请牢记用户的手掌大概率会遮盖住手指下方所有的信息。这种问题同样出现在手指肥大的用户身上。反过来讲,设计师若将 所有交互信息都陈列在用户手指周围或上方就能避免这种问题。Pinterest的长按保存灵感的交互设计就是很好的例子。
           
           


5.熟知技术

5.Know the technology


不同的触摸屏,感应器,以及摄像头决定了设计师可以设计哪些交互手势。复杂的交手势意味着有更少的用户能够对其进行操作。

但你在设计一款需要手势交互的产品时,我们建议回溯到用户广泛悉知并能够轻松使用的那些手势。当然,考虑到人口多样统计,你需要始终提供手势提示,并且还要尽可能为有特殊需求的用户提供辅助功能选项,以便他们将手势转换成点击或语音控制。        
           
           

6.反馈提示于用户操作触发时,而不是按下离开后
6.Trigger actions on release, not on the press

在一个用户测试的环节,我注意到那些 老一辈的用户非常担心 在移动电话界面上 触碰到错误的按键或者进行了错误的手势。因为恢复至上一步骤是他们并不习惯的操作方式,只有当他们 确认在完成了正确的操作后才会将手指从屏幕上移开,不然他们会保持手指一直按压在屏幕上。这一观察有特别的意义,提醒我们需要一直关注特殊人群的需要。当用户一直在维持按压的交互行为时,我们需要提示用户已经按下按钮,但是只有当手指移开界面时才会给予反馈。



7.预设吸引力

7.Attraction affordance


利用一个简单的手势让用户开始体验系统。

引导用户熟悉新的体验时,要避免将事物过度复杂化。从简开始,循序渐进的展开让用户逐渐适应你的应用,了解如何在应用上进行操作。你的交互动作设计的越简洁,你的用户对应用就越容易上手。让用户使用起来觉得他们很聪明的体验可以让产品走得很远,反之,愚弄用户和他们感受的产品会迅速流失他们的用户。



8.避免无意识触发

8.Avoid unintentional triggers


用户的各种日常活动也许会意外触发系统,要避免这一点。

尤其是一些大型设备,软件应该考虑意外点击和碰触。基于界面区域,碰触时长,角度以及其他方面的问题,软件应用应当巧妙的避开误触元素,并提供恢复的方法,以防系统将这些失误操作被判定为正确的动作。作为设计师,我注意到随着设备尺寸的变化而增加的可能性,以及像手机这样大小的设备更易于管理。



9.手势与常规按键

9.Gestures and Command Keys


使用简单的方式(按钮,滑块,菜单等)来触发功能,但要利用进阶的可学习的手势作为捷径。

9 宫格的解锁交互就是我以上提到的。对于复杂的手势控制应用来讲,最好提供交替触控和滑动触控的UI操作界面。比如,一个用户可以通过双手指旋转的动作来旋转画布,或者利用点控菜单栏来选择并确认旋转角度。这两个交互行为都是易于掌握,并且大概率对于不同年龄的用户都比较友好。在设计操作手势的过程中,还要考虑到非手势操作的用户。



10.多样化的必要

10.Requisite variety


记住这一点:有很多不同的方式来完成一种操作手势

在操作手势时,要考虑那些同时使用左右手的用户并对其测试。对于那些操作某些具体手势产生困难的用户来讲,他们大概率会把手掌放在屏幕上休息。所有这些都是不同类型的用户在使用触摸屏界面时使用的真实交互模式。作为设计师,在使用简单和复杂的手势时,我们应该考虑到各种运动障碍和不同使用模式的人。



11.根据任务的复杂程度和频率来匹配操作手势

11.Match the complexity of the gesture to the complexity and frequency of the task


简单来讲,经常操作的任务应该使用简单的手势来触发它们

凡是需要两根手指操作的手势对大多数用户来讲都会造成问题。根据这一想法,复杂的手势应该保留给一次性动作。对那些频繁触发的动作,需要依赖简单的单击双击或者滑动手势。因为他们是频繁发生的,所以当用户使用两根手指进行操作时很容易引起疲劳和不适。

原文:https://blog.prototypr.io/10-ways-to-design-for-digital-devices-using-natural-user-interface-patterns-8b99bf43a873
作者:Dhananjay Garg
译者:高畅
审核:徐曼鹭
编辑:孙淑雅、李莉好
本文翻译已获得作者的正式授权(授权截图如下)                 

往期精选文章:

十个技巧帮助你设计一款在线学习 APP

这些色彩心理学知识教你如何传递信息

案例研究|康奈尔大学副业社区网站设计

Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标

网页设计师能从日式美学中学到什么?

案例研究|一款为你带来难忘体验的美食 APP

如何制作打动面试官的作品集,这里有一份完整的指导手册

如何做好用户体验项目?从一个好计划开始

如何建立设计系统

如何把握不同层级用户的需求:回归本质,打磨信息架构

TCC 视野|2021 年用户体验设计趋势分析



- 设计师自习社区 -
TCC 设计情报局欢迎小伙伴加入,一起交流设计知识,了解全球设计资讯,锻炼英文能力,发掘更多可能性~

添加小助手微信,备注「社群」,即可加入读者群。

相关阅读

  • 聚合类工具产品设计指南 - 视觉篇

  • 导语:聚合类工具产品的视觉设计,不仅需要思考如何提升使用效率,帮助产品保持体验的稳定,也需要思考如何让用户更加信任产品。文章以腾讯内部IT工具产品改版为例,通过建立视觉标准
  • 交互设计常见7个误区,你中了几个?

  • Halo,今天为大家分享的是「交互设计误区」。文章来源于交互设计师的探索及日常工作经验的总结,发现了一些交互设计中常见的误区。通过把这些常见误区分享给大家,希望能对即将步
  • 设计风格偏好调研与实践——东南亚市场

  • Trip.com作为携程集团旗下的一款全球旅行产品,身为创意设计师我们身负重任,同时也面临诸多挑战。当我们面临国际化市场不同语种、不同文化差异下的市场营销设计风格如何统一?又
  • 看大厂设计师如何拆解搜索功能

  • 01 项目背景02 发现问题与设计策略03 搜索「建议」页设计04 搜索「联想页」设计05 搜索「结果页」设计06 项目总结搜索是每个产品必不可少的链路,影响着产品的体
  • 如何在交互细节中体现专业性?

  • 悦姐聊设计 一个爱学习和分享的设计专家~本文3072字,阅读时间约8分钟~22年的Flag之一是要输出《交互设计基础课程》,所以计划每周一篇,欢迎大家持续关注和监督
  • 如何写出优秀的UX文案?

  • 悦姐聊设计 一个爱学习和分享的设计专家~本文3619字,阅读时间约9分钟~22年的Flag之一是要输出《交互设计基础课程》,所以计划每周一篇,欢迎大家持续关注和监督
  • 如何进行交互设计改版?

  • 悦姐聊设计 一个爱学习和分享的设计师~本文2743字,阅读时间约6分钟~设计问答来自交互小课堂@宋爽+@咸甜小姐的提问:悦姐,最近遇到一个问题:产品改版了,但用户普遍还是更认
  • 探究“淘宝设计”背后的设计思维和方法

  • 悦姐聊设计 一个爱学习和分享的设计师~本文4079字,阅读时间约10分钟~今年8月去杭州参加了U DESIGN WEEK,对《淘宝2022设计背后的故事》记忆深刻,正好上周我们组内的小伙
  • 9大设计策略,让用户等待不焦虑!

  • 悦姐聊设计 一个爱学习和分享的设计师~本文3659字,阅读时间约10分钟~在上一篇文章《从加载到刷新,信息载入的交互设计》中,我们介绍了用户情绪随等待时间的变化曲线:▲图1

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

  • 2021年TCD作品集展示

  • 2021年悄然离去,2022年刚刚启程。特此献上TCD设计中心的2021年度设计年鉴,感谢一路以来相互信任、共同进步的设计师们。期望未来可以与更多优秀团队、艺术家进行交流,随时欢迎
  • 2022 TCD SHOWREEL-商业化运营设计

  • 我们挑选了部分过去一年的设计成果,整合成了2022年度的 Design Showreel ,包括产品体验设计,商业化运营设计,IP增值设计,内容运营设计等业务领域,涵盖了丰富的设计类型,希望这次能
  • 聚合类工具产品设计指南 - 视觉篇

  • 导语:聚合类工具产品的视觉设计,不仅需要思考如何提升使用效率,帮助产品保持体验的稳定,也需要思考如何让用户更加信任产品。文章以腾讯内部IT工具产品改版为例,通过建立视觉标准