交互设计基础：触控手势的设计法则

作者:课课家教育更新于： 2016-05-11 11:29:18

　　交互设计是一种如何让产品易用，有效而让人愉悦的技术，通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的。本教程就是针对用户的交互体验为大家分享如何设计出易用触控手势的方法。

　　现在的时代，科技高速发展，移动的触控时代也早已到来，那么你了解什么是触控手势、触控手势的使用场景/基本操作，有哪些好用的触控手势、手势设计守则？作为交互设计师，这些内容都是必须了解的，我们不如一起来看看。

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

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

　　越来越多的小孩，甚至还没学会走路说话，但却先学会自然轻松解锁iPad、翻页找到他喜欢的简单游戏，或者儿歌页面；而我们也乐于买各种大屏手机和平板电脑送给我们的长辈。移动设备及手势交互方式给我们带来革命性体验和便捷，移动的触控时代早已到来，您是否也与时俱进了呢？作为一个交互设计师是否为用户提供了最便捷有效的触控手势？

　　我们来对触控手势的设计进行一个简单的了解，首先我们要非常明确触控手势的含义。

　　一、什么是触控手势

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

　　"自然"一词是相对图形用户界面（GUI）而言的，GUI要求用户必须先学习软件开发者预先设置好的操作，而NUI则只需要人们以最自然的交流方式（如语言和文字）与机器互动。直观的说，使用NUI的计算机不需要键盘或鼠标。自然用户界面（Natural user interface,NUI）是指一类无形的用户界面。

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

　　多点触控技术能把任务分解为两个方面的工作，一是同时采集多点信号，二是对每路信号的意义进行判断，也就是所谓的手势识别，从而实现屏幕识别人的五个手指同时做的点击、触控动作。

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

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

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

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

　　二、触控手势的的使用情景（移动的情景）

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

　　图2.移动中的互动语境（出处：Nadav Savio| Giant Ant Design）

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

　　1、注意力容易被分散（如交谈，观察周围环境等）

　　2、操作手机的时间碎片化（各种事情打断）

　　3、任务容易被中断（意外情况影响）

　　4、肢体可能被其他物体被占用（如遛狗、拎包等）

　　5、噪音分散注意力（车水马龙、人声鼎沸的路边）

　　三、触控手势的基本操作

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

　　自然手势是触控手势的基本操作过程中最常见的类型，所谓自然手势就是在真实物理世界中存在或演绎而来的手势。例如上下滑动滚动列表，滑动以平移等。这类手势是自然的，不需要或很少需要用户去学习的。自然手势有以下几种分类。

　　1、长按以查看更多操作(现在有了3DTouch，同长按操作相比，最大区分是需要是有一定的按压力度）

　　2、点击执行主操作

　　3、滑动以平移

　　3、轻扫以选定，并进行命令操作

　　4、收缩和拉伸以缩放

　　5、转动以旋转

　　6、边缘轻扫以使用系统命令

　　以上六种类别的自然手势都是非常基础，用户能够很平常的操作的触控手势。

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

　　好用的手势有哪些评定标准呢？

　　其实区分的方法很简单，好用的手势一来简单，二来支持单手操作，它们该如由Tweetie创始人LorenBrichter所开发并获得专利的"下拉刷新"一样受欢迎。或者像iBook的翻页动作一样自然简单。以下是好用的手势该有的一些特征：

　　1、简单易用。不仅动作简单，还要能在拥挤的交通工具上单手操作

　　2、容易记忆。其一手势要好记，其二要让人愿意记住

　　3、符合认知习惯。也就是说，该手势一方面要遵循人的自然习惯和意识，另一方面要契合手势即将产生的操作

　　4、实用。手势要让用户感到舒服，少有用户愿意点两次才看到想看的东西，让会让他们感到麻烦

　　5、愉悦的体验。Winkler认为好的手势会有神奇的感觉。UX总是个未知数，而且难于言传。但这恰是我们认识、享受科技的一种表现

　　6、及时反馈。反馈就是说用户知道当前正在进行的操作。用户进行完手势操作后有明确的状态信息告知

　　以下是操控手势的优缺点的区分，贴出来供大家参考。

　　五、手势设计应用过程中需要注意的点：（手势设计准则）

　　1、符合认知习惯

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

　　随着虚拟化信息化的发展,人们要面对日益繁多的电子科技产品,它们内涵的虚拟化信息高度化抽象化让使用者越发的难以理解,难以操作。设计出人们易于识别易于操作乐于操作的产品，回归人类祖先脑的认知习惯和操作习惯即物质化的操作模式才是正确的态度。

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

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

　　2、记忆力限制

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

　　据可靠数据显示，一个app中手势数量需保持在5个数量以下，多依赖与界面的引导和暗示，让此类用户根据情境记忆这些手势，从而增加手势的易记忆性。如果用户对其缺乏认知，这些手势操作就不易被发现，也便不会为人所用，甚至造成操作障碍。（坏的例子，找不到导航栏）

　　图5.Mozilla Fire fox4版本右划呼出Tab

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

　　不同的场景环境下，我们要对产品的手势操控进行不同的设计，我们的产品在和周围环境争夺用户的注意力，凭借一个3.5~5寸的屏幕与车水马龙、人声鼎沸的大千世界作斗争，因此在实际的手势设计中考虑用户的使用场景是非常必要的。

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

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

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

　　4、适度的应用手势

　　《Flappy bird》这个游戏以简单但有效的方式使用了基本的手势。点击或不点击是唯一的操作手势。玩家可以很快地知道应该使用什么手势以及怎么利用手势去进行游戏，这款游戏在2014年大火，比起其他浮渣的操作，适度反而能达到更好的效果。

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

　　5、提供即时反馈

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

　　图8.3Dtouch的震动反馈

　　6、使操作可逆

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

　　图9.Wechat取消发送语音

　　7、不要让你的手势触发区域远离拇指热区

　　这是众所周知的拇指法则。JashClark在《触动人心-设计优秀的iPhone应用》一书中提到，拇指的活动范围对操作手机的效率以及正确度都有一定的影响。

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

　　图10.Luke Wroblewski在《移动为先》（Mobile First）

　　8、保持手势的全局性

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

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

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

　　结语：

　　不知不觉我们已将进入了触屏时代。从开始单点触控到现在的多点触控。无论是ipad、Android、还是微软的surface，他们的触屏技术都在飞速的发展。这些都预示着我们很快要进入一个人机互动的时代。好用的触控手势是人与设备、应用之间交流的方式。当初创造多点触控技术的人，难能可贵的是细心洞察到了人们细腻的本真行为特征，转而用触屏这一行为自然的映射了出来。

　　以上是触控手势的八个基本法则，希望能对大家有所帮助。