如何设计好用的触控手势

我们生活在一个人机互动频繁,由设备驱动的世界中。

随着触摸屏逐渐成为移动设备的标配,多点触控手势的广泛应用,让我们与手机、平板电脑甚至是笔记本电脑之间建立起了一种更宽广的联系方式。我们通过模拟真实世界的手势与屏幕上的各种元素进行互动,使许多曾经不曾想或者不敢想的人机交互方式变成了现实,同时手势操作的应用降低了人与物理设备之间的沟通的门槛。

如何设计好用的触控手势0

图0. 婴儿几乎无困难的通过屏幕玩游戏

我家那位小P孩,不到2岁就已经能够很自然轻松解锁ipad、翻页找到他喜欢玩的熊猫餐厅,接着熟练地在各种食材选折他喜欢的,制作一份美味的虚拟美食;而我们也乐于买各种大屏手机和平板电脑送给我们的长辈。移动设备及手势交互方式给我们带来革命性体验和便捷,移动的触控时代早已到来,您是否也与时俱进了呢?值得我们每一位设计师反思。

一、什么是触控手势

触控手势是自然用户界面(NUI)的一种表现形式。

自然用户界面(Natural user interface, NUI)是指一类无形的用户界面。NUI则只需要人们以最自然的交流方式(如语言和文字)与机器互动。直观的说,使用NUI的设备不需要键盘或鼠标。特别是触控技术将使人机交互变得更加自然直观,更为人性化。

您的手机、平板电脑还有笔记本拥有识别多点触控输入的功能来帮助你实现对其广泛的运用。这种输入方式帮助我们实现与屏幕内容的交互,而模仿真实中的操作手势可以降低我们对操作屏幕对象的认知障碍。

在PC时代,我们需要他人或者一个说明教程去教会我们怎么使用鼠标,移动屏幕的光标,而这些在现实世界里几乎找不到可相映射的东西,然后学习怎么双击打开一个文件,按住一个文件不放,把它拖动到文件夹里面。

触控手势带来的是自然用户界面,支持触控的移动设备能够自然直观的被所有年龄层,不同技能水平的人所使用。使用Multi-Touch多点触控式接口技术,取代目前所使用的键盘(按键)、鼠标,将进一步体现出人性化操控接口的未来趋势。

1-1

图1. 电容式触摸屏结构原理图

试想一下在那些老套的用户界面里,需要你把鼠标悬停或者邮件点击目标上才能获得更多详细的信息,而这些在手机设备上将不再起作用。如何摆脱这种惯用的设计呢?答案就是,创建移动先行体验

二、触控手势的的使用情景(移动的情景)

移动情景指的是用户使用时的环境和状态——也就是任何可以影响用户与设备进行交互的内容。由于这些情境持续而快速地变化,对移动设备而言就显得尤为重要。我们要考虑用户分心、多任务、手势操作、低电量条件和糟糕的连接条件等复杂环境下的通用设计。

2-1

图2. 移动中的互动语境(出处:Nadav Savio | Giant Ant Design)

各种移动环境下会影响到用户使用触屏设备完成任务的效率和准确度的因素有:

– 移动情景下,注意力容易被分散(如交谈,观察周围环境等)
– 移动情景下,操作手机的时间碎片化(各种事情打断)
– 移动情景下,任务容易被中断(意外情况影响)
– 移动情景下,肢体可能被其他物体被占用(如遛狗、拎包等)
– 移动情景下,噪音分散注意力(车水马龙、人声鼎沸的路边)

三、触控手势的基本操作

banner

图3. 钢铁侠系列电影中的全息触控交互

所谓自然手势就是在真实物理世界中存在或演绎而来的手势。例如上下滑动滚动列表,滑动以平移等。这类手势是自然的,不需要或很少需要用户去学习的。

– 长按以查看更多操作(现在有了3D Touch,同长按操作相比,最大区分是需要是有一定的按压力度)
– 点击执行主操作
– 滑动以平移
– 轻扫以选定,并进行命令操作
– 收缩和拉伸以缩放
– 转动以旋转
– 边缘轻扫以使用系统命令

四、好用的手势是怎样的?

首先我们来看看多点触控的优缺点。

4

那么什么是好用的手势呢?

好用的手势一来简单,二来支持单手操作,它们该如由Tweetie创始人Loren Brichter所开发并获得专利的“下拉刷新”一样受欢迎。或者像 iBook的翻页动作一样自然简单。以下是好用的手势该有的一些特征:

– 简单易用。不仅动作简单,还要能在拥挤的交通工具上单手操作
– 容易记忆。其一手势要好记,其二要让人愿意记住
– 符合认知习惯。也就是说,该手势一方面要遵循人的自然习惯和意识,另一方面要契合手势即将产生的操作
– 实用。手势要让用户感到舒服,少有用户愿意点两次才看到想看的东西,让会让他们感到麻烦
– 愉悦的体验。Winkler 认为好的手势会有神奇的感觉。UX 总是个未知数,而且难于言传。但这恰是我们认识、
享受科技的一种表现
– 及时反馈。反馈就是说用户知道当前正在进行的操作。用户进行完手势操作后有明确的状态信息告知

五、手势设计应用过程中需要注意的点:(手势设计准则)

符合认知习惯

在非概念性项目中使用基础手势(组合)之外的“创新”手势,未建立统一规范的情况下,使用混乱会导致用户困惑,学习成本稿,增加记忆负担,难以引导用户培养使用习惯,技术上的限制可能会使“创新”变成不便。

最终使用者是人,手势操作是基于人的行为来定义的。手势操作是人们现实世界行为的映射,因此,手势设计要符合大多数人的认知习惯,减少用户的认知成本。比如有方向性的手势操作,要尽量符合拇指的活动方向,且要与认知相一致。

5-1 6-1

图4. iBooks的翻页体验与翻实体书

记忆力限制

因为这些手势操作不能明白的显示在界面上,没有代表动作的可视元素,需要用户记住哪种手势对应的是哪些操作,一些不常用的手势操作往往很难发现。如果手势直观常用自然没问题,而如果没有“自然”的手势去代表一个动作,用户就会感到困惑,于是便需要记忆,就像在使用命令行界面时要记住那些命令一样。

一个App中手势数量需保持在5个数量以下,多依赖与界面的引导和暗示,让此类用户根据情境记忆这些手势,从而增加手势的易记忆性。

如果用户对其缺乏认知,这些手势操作就不易被发现,也便不会为人所用,甚至造成操作障碍。(坏的例子,找不到导航栏)

7-1

图5. Mozilla Firefox 4版本右划呼出Tab

不同应用场景采用不同的手势设计

人们会在千奇百怪的环境中使用我们的产品,我们的产品在和周围环境争夺用户的注意力,凭借一个3.5~5寸的屏幕与车水马龙、人声鼎沸的大千世界作斗争,因此在实际的手势设计中还需考虑该应用的使用场景。

效率型和实用型应用,这类应用一般使用场景是在行进间,考虑手机一般随着用户的行进而摇晃,操作效率以及误操作等因素,一遍采用单手操作手机的手势交互。

游戏等屏幕沉浸型应用,一般为休闲且稳定的操作环境,可以适当的设置一些复杂手势配合游戏中的高级操作功能,增加游戏的操作乐趣。

8-1

图6. Clear的手势操作令人印象深刻

适度的应用手势

2014年火得不能再火,一旦开始玩根本停不下来的《Flappy bird》。游戏以简单但有效的方式使用了基本的手势。点击或不点击是唯一的操作手势。玩家可以很快地知道应该使用什么手势以及怎么利用手势去进行游戏。

9-1

图7. Flappy Bird游戏,玩家只需要用一根手指来操控

提供即时反馈

在用户触摸屏幕的时候,立即提供视觉提示,可提高用户的信心。交互操作涉及到的元素可表现为改变颜色、改变大小或发生移动/震动。

10-1

图8. 3D touch的震动反馈

使操作可逆

触控互动操作应该是可逆的。提供视觉反馈来表明当用户抬起手指时会发生什么,同时允许用户反悔,取消操作。这将使你的应用能够安全地使用触控操作进行浏览。

11-1

图9. Wechat取消发送语音

不要让你的手势触发区域远离拇指热区(拇指法则)

Jash Clark在《触动人心-设计优秀的iPhone应用》一书中提到,拇指的活动范围对操作手机的效率以及正确度都有一定的影响。

虽然拇指能够划到整个屏幕,但拇指在所及范围和灵活性上是有限的,只有三分之一的屏幕是真正容易触及的——也就是拇指正对的区域。为了获得舒适的人机体验,应将主要点击目标放置在方便拇指点击的热区内。

12-1

图10. Luke Wroblewski在《移动为先》(Mobile First)

保持手势的全局性

不要让用户在你的应用中适应了你创造的手势后,却又在你的应用中碰壁。

如果用户已经习惯你的手势,觉得你的手势达到了方便快捷的目的,并耗费学习成本掌握并适应了你的手势,那么便意味着你成功了一半。尽量用简单的手势完成常用功能,需要复杂手势操作完成的功能,要有一个方便且更容易发现的方式相配合。尽量使用统一的手势,减少不同手势的切换频率。

13-1

图11. 全局手势在iOS原生应用中的使用场景

写在最后

好用的触控手势是人与设备、应用之间交流的方式。当初创造多点触控技术的人,难能可贵的是细心洞察到了人们细腻的本真行为特征,转而用触屏这一行为自然的映射了出来。

 

参考引用:

Warmthen《给应用加入手势操作需要注意的那些事儿》

Nadav Savio《Design Sketch: The Context of Mobile Interaction》

Rani Molla《What Makes a Good Gesture Control》

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/15176/

(0)
交互精选交互精选
上一篇 2016-05-30
下一篇 2016-05-31

相关推荐

  • 《用户体验可视化指南》视频讲书(3)

    《用户体验可视化指南》书中第一章的第二部分。客户旅程是一条线路,用户地图是多条线路的集中展示,专注于服务蓝图的交互可视线之上的部分。心智模型本质是聚类,空间地图用于更复杂的系统去表达信息流和内容之间的关系。点击视频观看(大约10分钟)兰静同学听后分享这节视频有3个内容,其中有个非常重要的内容,解决了我也疑虑已久的问题:客户旅程图和体验地图,到底有什么区别?视频中详细的说明了二者的区别:一条线和多条线。客户旅程图强调了用户是怎么一步一步做...

    2018-04-01
  • 设计顶峰:如何打造创新有价值的极致体验?

    经常发上手即用的教程和技巧,今天来点不一样的「干货」,聊聊在设计中的价值创新。内文案例丰富,配图生动,也有实战案例,对于「需求」的理解非常到位,来自阿里Heyuchan 同学的分享,如果你恰好是交互设计的,更加不能错过咯。

    2017-05-24
  • 老外看中国的移动App设计精髓-1 ui设计的十大精髓

    摘要:本文作者Dan Grover用最直接的方式体会了中国移动互联网的发展。这是一个外国人眼中的应用UI在中国的趋势,基本反映了当前国内UI设计的状况,从他的所感所想中,认真审视这些在别人看来,我们自己身上所拥有…

    2014-12-11
  • 如何做让老年人也能方便使用的网站【UXRen译#176】

    作者:保罗•克瑞斯顿(Paul Crichton)  |  翻译:阿陌,校审:天蛙   英国有近三分之一的人口都超过50岁。 他们在2015年的网络消费额就达到了14.45万亿英镑。 他们中76%的人会每周至少一次进行网上购物。 50岁以上…

    交互专题 2023-03-03
  • 《用户体验要素》:一张图读懂用户体验五要素

    《用户体验要素》是一本讲产品的好书,作者为我们清晰地介绍了关于用户体验的五个要素,五个要素是按照产品的整个生命过程来描述的。产品设计五要素分别是:战略层、范围层、结构层、框架层、表现层。《用户体验要素》说这本书清晰,是因为五个要素很清楚,按逻辑步骤总结出来的。但,这也是这本书唯一清晰的地方了,因为,这本书在细节描述上还是很凌乱的。产品设计五要素对于读这本书而言,能够领会作者的思想就可以,不必要拘泥于具体的细节。原因有二:一是,这本书的细...

    2018-04-04
  • 用户体验之 iPhone X

    Hello,everybody。今天给大家带来一篇关于iPhone X的用户实际测评。虽然iPhone X已经在国内上市有一段时间了,但是因为其价格也是让许多人叹为观止,今天小编在得到以为苹果手机顾客的同意后将其用户体验整合以后推送给大家,希望大家会满意。好,话不多说,我们马上开始。首先小编先来介绍一下iPhone X的优点吧。iPhone X 首次在手机行业中采用异形全面屏,相对于之前的iPhone,手握尺寸更小,首次采用OLED现实...

    2018-04-13
  • 网页首图抓住用户注意力的8个要点

    Banner 是我们最常聊到的设计元素,它是一个网页的招牌,是用户最容易看到的视觉元素。今天,我们来聊聊Banner中的急先锋,网页首图,它的设计之道。

    2017-05-08
  • 【译文】“防止用户犯错:避免有意识的错误”

    西南航空的手机网站对已经过去的日期使用了灰色的背景,使你明白在预订一个航班时这些日期是不可选择的。不幸的是,对下个月的日期也使用了相同的设计,这意味着不可选。Polarr是IOS系统里很受欢迎的照片编辑工具。右侧的编辑控件(温度,色调等)需要你点击那个方块,然后向左或向右滑动而改变参数。然而,这些控件并没有展示出用户应该如何与其互动,所以新手用户很可能需要试错几次才能明白应该如何正确的使用这些功能。另外的一个交互困难就是:由于控件在屏幕的最右侧,你可以很轻松的向左滑动而减少参数数值,但水平空间有限,当你想向右滑动增加参数数值就会存在困难。IOS 8中,为帮助视力不好的用户阅读体验,提供放大显示图标和文字的功能。但是改变变焦需重新启动手机,这是一个重功能,需要花费一些时间,所以IOS系统会在你使用这个功能前,预览变焦完成后的样子。这个体贴的预览功能可以帮你评估出你是否真的需要操作变焦。Hipmunk提供快速浏览恢复选择机票过程的所需信息,甚至是被打断。在预订过程中的第二步,它清楚地显示了旅行的日期,在机场的问题,最便宜的出发程已被选中,以及用户被要求再选择一个回程航班。即使注意力分散了一段时间后,用户可以简单地恢复这个过程,而不会不小心偏离原本对航班的计划和要求或尝试重复已经完成的步骤。苹果新出的图片软件运用了一个很传统的对话框确认用户是否真的想删除最近爬山旅途中的照片,并且通过highlight 24张照片表示删除范围。更好的是,确认删除操作的按钮清楚地标示是删除,而不是一般的确认。Gmail 提供对破坏行为很有帮助的撤销功能,如误删了92封邮件。这个功能被证明是非常有用的,Gmail现在支持在发送email中允许点击发送键30秒内中撤销。Tweeter的字符限制条件很有名气,他们在用户超过那个字符限制前就会提示用户剩余的字符数。当一个tweet过长是,他会显示出超过的字符,高亮出那些超出的字符,并且使发送键不可使用,以让用户明白他们需要如何修复错误。

    2017-05-30
  • 用户体验交付中心,最美不过回家路

    众意,坚持为中国高品质整装奋斗不歇!长按识别二维码即可预约体验爆款福利已经在向你挥手了戳阅读原文,报名预约抢豪礼!

    2018-03-12
  • 设计师个人品牌的建立

    个人品牌是人们将自己和事业作为一个品牌推广出去。如今,空有一门好手艺已经不够了,独特和真实可信方可过关,但前提是人们得知道你。正如Michael Simmons所写道,在数字时代,真实才是关键。强有力的个人品牌可以创造大量机会,获得充分认可。

    2016-02-21