移动设备的手势设计 - UCD大社区

周二茶闻:手势代替鼠标

沈主编 — 2008-11-24 16:52:51

Oblong
大家先把录像看完吧很象TOM CRUISE在MINORITY REPORT里的那个看案件过程的.

Mac browser mega-test. Time to ditch Safari?
Web Browser全面性大比拼,苹果还领先吗? (注: 这篇文章有4页, 别忘了翻页哦!)

Google makes search more social with SearchWiki
Google’s SearchWiki可以让大家自己挑选/删除Google提供的连接. 这些用户的改动将会被”记住”, 当用户下次搜寻同样的东西时, 所有的连接都是用户上次选择留下的.

Design Eye for Web Guy
用图片来讲述一个故事经常性要比文字来的直接, 易懂. 当你和客户交流你的设计的时候, 也可以用图片来帮助, 这要比你站在那里描述来的直接.

Optimising your online video content
录像不象文字, 不能直接被搜索引擎所找到. 所以如何能让更多的看到你的录像, 关键便在于你自己设置的关键词.

Usability of the Shopping Basket
金融危机导致消费水平下降, 商家都面临各种困难, 想方设法的来渡过难关. 这时候, 网络消费的可用性就更重要了.

Traveling with American Airlines’ New Mobile Boarding Pass
网上注册登机已经再西方国家很普遍了, 乘客可以提前一天在网上check in,选好自己的位子. 最近美国有开始试行了用手机注册登机的方式.

Writing the perfect participant screener
用户测试是常用的一种测试方式. 但是有效的用户测试的关键因素之一, 便在于如何选择正确的用户来测试. 用户选错了, 可能会造成全局性的错误.

本期采茶人： Jessie Shen (The UX side of ME )

如您有英文阅读习惯，不妨来做采茶人。

探索滑动手势

晓生 — 2011-06-26 12:00:16

Nokia N9刚刚发布，滑动手势承担了更多的功能性操作。从按键手机到iPhone的Home键，让人不禁联想，实现全触摸屏手机已经指日可待了。

iPhone Home键已经承担的过多的操作，单击退出程序，双击进入多任务，自定义三击显示辅助操作，组合开机键截屏，恐怕这是所有手机中使用率最频繁的按键了。但是功能越来越多，要么继续压榨按键，要么挖掘新的手势操，责任自然落在点击和滑动这两个最基础的手势操作。

比起电脑鼠标，触摸点击存在问题，但同时交互设计上可在采取各种优化措施。

触摸屏点击形式本身单一，没有左右键点击之分。对于手机系统，可以获取触摸区域和时间，由此根据触摸目标和时间长短衍生出长按操作，相当于鼠标右键点击；根据触摸的时间间隔衍生出双击，但与鼠标的双击有区别。以鼠标在桌面上打开应用程序为例，鼠标停留效果之后第一击选择目标焦点，第二击相当于确认目标，触摸屏点击没有鼠标停留效果和选择目标焦点的概念，相比之下简化了操作，但是少了必要的富交互效果，比如查看图标属性。

鼠标可以精确到1像素，触摸屏点击区域推荐为29像素，而且用户在点击触摸屏目标区域时并没有真正点中，存在一定偏差。这种缺陷在按键密集的输入法上体现尤为明显，频繁的误点击会影响用户的操作流。

滑动手势可以和长按组合出拖动，除此之外仅仅停留在滑动页面显示区域。滑动模拟物理运动规律，慢速滑动时页面滚动的范围等于手指运动的区域，快速滑动时滚动的范围要计算手指移动的惯性，页面移动速度由快变慢。手机得到的参数有：触摸点坐标和时间，但坐标点和时间关系并不是一维的，触摸点坐标随着时间变化也会发生变化，由此可以分析出手指移动的起始点、终点、移动速度、加速度和滑动曲线等。

与点击和操作按键相比，滑动优势存在不少优势：

1.没有明确的目标区域。比如浏览器页面中任何位置都可以执行滑动操作。N9解锁屏向上滑可以显示多任务，向右滑动显示消息推送和功能列表， iPad版Maven浏览器将页面滚动限制在特定区域，反而会影响页面的操作效率，书签和else-mobile一样将原本层级点击操作转变为滑动操作，用户手持设备的方式各不相同，同样会遇到操作效率和单级中显现的功能有限的问题，优点在于其形式占用的空间小。

2.小区域内可以容纳更多的选项。百度手机输入法的拼音拇指输入，“2abc”同时显示在一个按键，在按键上上滑数字“2”，利用滑动的方向选择不同的字母或者数字。还有MIUI最新的百变解锁屏，同样是在利用同样的起点但方向不同的滑动区分操作。

3.比连续点击更快速。Swype输入法之所以快捷，把点击变为滑动操作，省去连续输入过程中的手指重复的抬起和按下。

4.弥补点击难以精确的缺陷。iPhone和wp7使用滑动操作调节文本光标，以滑动的位移代替点击插入光标。

N9屏外的触摸区只是全触摸屏手机发展过程中的过渡方案，其实没有触摸区也能胜任已有的滑动，猜想系统在判断滑动起始点可以用屏幕内的边缘为基准，增加触摸区的概念纯粹是“欺骗”用户，减少误操作。滑动操作并不像点击那样立即响应，当中途发现误操作也是可以取消。从屏幕内滑向屏幕外应该可以执行页面内滑动，因为在滑动的开始时系统无法预知终点是否会在屏幕外。

（图片来自ifanr）

三主屏左右滑动切换，形式和操作效果符合物理规律。在应用程序，如果之前是从多任务进入的，从触摸区四个方向滑动都可以返回多任务，从应用程序返回多任务时边界的阴影可以看出是前后两个界面，应用程序在三主屏的前方。在多任务进入应用程序时，应用程序从右边向左滑进显示区域，而不是放大之后覆盖多任务界面，界面之间的位置关系缺乏方向感。

也许受iPhone的影响，这种操作需要时间去适应，在看到视频时本以为从屏幕上方滑进会显示消息通知栏，从底部滑进是返回或者显示多任务。把N9的多任务误以为是safari的多窗口，把多任务作也作为三主屏并显示应用程序的缩略图，比起图标式多任务除了增加点击区域，没有优点。Safari使用网页缩略图显示多窗口，因为缩略图比网站标题操作的效率更高，还可以显示网页的加载状况。N9多任务界面长按操作调出“删除”按钮，为什么要多次一举，不直接在缩略图上显示“删除”图标。

N9的滑动操作确实有创新之处，比iPhone更进一步，但不完美。

试想下iPhone去掉Home键会怎么样?现有的系统界面结构完全符合条件。

移动设备手势设计初探

CDCer — 2011-09-05 14:58:49

嘿~最近在做各种移动端的产品，设计啊体验啊操作啊，用的手都起茧，工作之余也思考了“手”这种较新的交互方式，以及它与界面的关系。本文从手势的种类，应用场景，存在的可用性问题以及如何设计四个大的部分谈起，在此抛砖引玉供大家思考和学习。

移动设备大行其道的今天，手势是一个流行词汇，那手势是什么呢？手，是人类各种创造性活动的天然工具，人们天生就会使用手的动作去表达情感，比如人们会使用握手来表示友好，聋哑人使用一套用手语来代替语言交流，这些都是手势在生活中的应用。可见自古以来手势就是一套特定的语言系统，在人的交流中发挥重要的作用。从交互上看，手势实际上是一种输入模式。我们现在在直观意义上理解的人机交互是指人与机器之间的互动方式，这种互动方式经历了鼠标、物理硬件、屏幕触控、远距离的体感操作的逐步发展的过程。

然而交互设计领域，大家普遍探讨的手势概念，是区别于传统的键盘操作和鼠标操作的。后面会着重研究移动设备的手势操作，主要从手势存在的问题、应用场景以及设计时应注意什么说起。

1. 利用鼠标、光标的轨迹模拟手势

网站www.kakarod.com，采用了大量的屏幕模拟手势交互，点击、拖拽等动作，生动活泼让人眼前一亮。

2. 在物理硬件上的手势

苹果Magic Mouse鼠标, 。macbook触摸板均支持单指多指滑动等多种手势。

3. 在触摸屏上的手势

主要有长按、轻触、滑动、拖动、旋转、缩放、摇动这八种手势。

4. 远距离体感

通过摄像头，传感器等捕捉手甚至整个身体的姿势，来进行控制。

5. 未来的手势

利用全息投影以及传感器，在空间或者投影上直接操作，这个已经应用在某些领域，相信不久的将来一定会广泛服务于我们的生活。PS：在苹果最新申请的专利中就提到了“投影手势操作”的技术，乔帮主这次又会带来什么革命性的产品就让我们拭目以待吧。

当然在生活中也还有其他的手势操作，这里就不再赘述。本文主要研究的是目前爆发式增长的移动设备上的触摸屏手势操作，以ios，android系统为主。触屏上的手势是指，将一系列多点触摸事件综合为一个单独事件。分析触摸屏上的手势使用现状，发现相对于传统鼠标键盘，手势交互操作一些明显的特点。下图是从时间和空间两个维度总结出的手势概览。为读者在手势设计时提供参考。

可用性研究的专家Don Norma在最新一期的《Interaction》杂志中也对手势交互界面进行了质疑和抨击，认为新的手势交互界面有很多地方没有遵循已经建立好的交互设计原则，使得经过良好测试和业内已被理解的交互设计标准正在被推翻、忽略和违背。

笔者通过分析现有的app 应用，以及多产品的设计经验，发现此质疑不无道理，主要有以下几个问题：

1.精确性降低
以 ios为例，相比光标1像素的精度，手势的精确性要低很多。适合手指点击区域需要做到44*44px（iphone4以下设备），配合手势的轻重有0~20px的偏差，所以触屏界面需要使用更大尺寸的控件响应面积。iPhone 3GS、iPad和iPhone4屏幕分辨率密度分别为163 ppi 、132 ppi和326ppi，可以看到3GS和iPad的控件响应像素接近，单边应达到44px的标准，而iPhone4则需要再扩大几倍。

2.缺乏可见性和一致性
以iPad Pages这个App为例，比如文稿中有2个对象，你想要使它大小一样，有以下两个方法：你可以通过双指拖拽利用边缘参考线让它们大小一样，当然这种放大缩小的方式在很多App中都很常见，因此很容易想到。另外你也可以这样做，用一只手指拖拽其中一个对象的同时，用另一直手指触碰你想要与之相同的对象，当出现符合大小提示时先抬起第一个手指再抬起第二个手指，那么这两个对象的尺寸就完全一样了（这两种方式在app中没有任何帮助和说明）。那么很显然，没有人会轻易发现第二种手势方式。即使发现了也不会很快知道如何使用。再比如android的长按操作也是如此。

造成这个问题的重要原因是手势界面通常没有代表动作的可视元素，手势即动作。若是通用自然的手势就没问题，若是罕见的组合手势那用户就很难发现它，并有可能带来可用性问题。

3.增加操作成本以及误操作
在位移上
手势操作相比于呆板的鼠标点击的确生动有趣了许多，但一些操作，比如放大缩小和下拉却增加了操作成本，在鼠标上滚轮就能完成的事，触屏上就需要手指上下拖动许多下。
在力度上
手势操作没有鼠标按下的物理反馈，因为力度也难以掌握，有时糟糕的设计会让用户误以为是自己操作的问题，从而反复尝试。
在灵敏度上
ios的触屏都很灵敏，轻触和长按的操作界限很模糊，并且除了固定的Button，很多操作的响应区都很大，不受Button大小限制。因此常常会不小心碰到使某个操作响应，例如在通话记录播出一个号码以及备忘录的右滑的删除。

4.受限于物理因素
物理按键
带来真实的触感和一定的操作中断感，后期的手机逐渐弱化物理按键，手势与屏幕结合的更紧凑。Android用硬件按钮触发菜单，意味着你无法预知什么程序以及在什么情况下会有菜单选项。因为硬件按钮始终在那里，无论程序是否需要它。

上图从左往右依次是Plam pre、palm pre2、palm pre3，返回按钮与手机屏幕融合得越来越紧凑
横竖方向
直接受限于物理按键，android设备的物理按键位置不统一，横竖屏切换时不便于快速辨认，手势的连贯操作会受到比较大的影响。如果app支持水平方向，考虑将返回按钮和常用的菜单直接显示在软件界面上。因此app应考虑直接提供“返回”按钮。

设备尺寸
大屏幕的Pad支持更多的多指复杂手势，手机大多单指操作。
控件形态
按钮的大小控制（不同分辨率下大小的转换）、拖动时的反馈提示、滑动选择与点击的转化。

基于上述可用性问题，总结出手势操作设计时应该注意以下几点：
1.操作引导
这里可以是详细的帮助界面也可以是隐喻图形化的引导（隐喻要符合用户的心智模型），例如分页的圆点标识，或者切换页面露出一部分内容，可长按的系统icon，翻起的页脚升，甚至动画等等。这里的提示程度自己拿捏，效率型应用，尽量做到清晰可见，即看即点。沉浸型应用可以适当预留探索的空间，让用户自己去发现，带来预期之外的惊喜。比如QQLiveHD首页拉绳的晃动。但是，要注意的是隐藏手势和快捷手势不能影响主操作流程，可以作为辅助手势来使用。

2.操作反馈
手势操作快速轻便，但没有鼠标按下时didadida声的安全感，也十分受限于设备屏幕的灵敏度，所以操作反馈的作用至关重要。例如icon按下时的响应，这里除了没有mouse over的效果，其他三态和PC端是一致的，缺一不可。除此之外还要考虑的是操作区太小被手指遮挡住的情况，反馈一定要明显，并呈现在可视范围内。比如QQ通讯录的姓名检索操作。除了视觉反馈声音也是一种有效的反馈方式，比如iPhone发送SMS发送成功的声音。新浪微博的feed拉取，tweetbot等，都巧妙的运用了声音反馈。

3.误操作
手势操作相比鼠标更灵活，如果你的程序非常复杂，承载的信息很多，大部分区域都是响应区，那么发生误操作的几率也会大大增加。因此要让用户可以及时撤销操作，时刻知道现在发生了什么，而不是仅仅当发生后给出一个警告。常用于较重要或隐晦的手势，例如删除，一键清除，长按等等，二次确认操作就显得至关重要。

OMG，不知不觉讲了这么多⊙﹏⊙b，以上只是手势交互的初探，对于这个应用领域，还有很多值得研究和探索的地方，欢迎大家一起来探讨和学习。

最后，感谢“弹指之间”小组成员此次研究上的给力贡献！撒花~最后奉上之前在TED看到的由Jeff Han带来的一则关于手势交互的精彩演讲： http://www.ted.com/talks/lang/eng/jeff_han_demos_his_breakthrough_touchscreen.html

Clear. 手势的未来?

yoyicue — 2012-02-28 21:17:45

这是一篇迟到的短文，缘起上上周 Clear 惊艳上市。完全的手势操作，没有采用 iPhone 标准的导航设计规范，反而有一些 WP7 Metro UI 的风格。不敢说这款应用在 to-do 上会有多久远的实用意义，但让我们再一次感受到接近指上交互的真谛。

当手持环境决定你只能用指上操作去改变使用方式的时候，用指尖去探索就是一切，这变化影响着我们。像鼠标那样傻傻的按下去却不再是你我的唯一的操作选择，滑动、拨动、聚合和展开操作的融合，人机之间的沟通得到进一步进化和深刻。说无需思考也好，说无意识设计也罢。总之 Clear 做到了让酣畅淋漓的手势游离在 List 和 to-do Item 之间。

如今的 app 已经到了一个新的美学高度，就像一部电影，不仅是一个层面的感官刺激，会层层激励你去享受，从 Clear 的绚丽的彩虹色彩到美妙绝伦的弦音，再到优雅的留白让给了名言名句，都让你体会到内在想传达的那份情感。就连向同行先驱 Tweetbot 致敬的彩蛋，都让用户感觉眼前一亮，让购买者沾沾自喜，心中暗爽。（大家记得给自己的 app 注册下 custom url-scheme 吧，免得有人想致敬都没机会 XD ）

「前卫从来都令实用者不适」。上市后 Clear 虽然位居过各国前三甲，萝卜青菜各有所爱，它还是收到褒贬不一的回馈：有人抱怨没有设定推送闹铃通知，有人抱怨功能过于简单，…..。但我觉得就像《 The Devil Wears Prada 》中所言：「纵然你感受时装与你很远, 但现在的穿着却受到几年前时装和媒体的影响」。

我觉得交互也是这样，面对 Things 或者 Omni Focus ， Claer 是个太太非主流 to-do list app，可对交互的发展而言，容我向开拓者致敬！

BTW，附送整理 Clear. 的全部手势：

相关话题：移动设备的手势设计源地址：http://ued.baidu.com/?p=2073

“动动手指就搞定”——谈手势操作在手机端软件设计中的应用

fajiaxifu — 2012-03-08 23:14:34

自然用户界面【1】（NUI , Natural User Interface）——特别是触控技术使人机交互变得更加自然直观，更为人性化。比如ipad、iPhone和一些采用Windows Mobile，Android等系统的手机已经让用户体验到触控的便利。本篇文章要说的是一种关于手机端触控技术的交互设计，它利用我们的肌肉记忆，不需要过多思考，让我们依靠潜意识，动动手指就能完成任务——它就是手势操作。

手势操作分类

基本操作

导航操作

对象操作

绘制操作

锦上添花vs弄巧成拙

基于触摸屏幕的手势操作是手机端人机交互的一个飞跃，它使手机用户的移动生活变得更加丰富多彩，使人与设备的交互更加有趣，同时增强了用户操作的满足感，真可谓锦上添花。

讨用户欢心的小惊喜！

手势操作让用户的操作空间不再局限于界面上那几个像素的按钮。

“浏览网页时，用手一抓就可以缩小当前页面窗口；不需要点击后退按钮，只需在屏幕上画个‘<’,界面就会跳转到上一次打开的网页……”

动态十足的炫酷！

手势操作相对于无趣的触摸和点击来说，给用户带来了动态十足的新体验。

经常可以看到用户拿着手机大刀阔斧的“切着西瓜”。

化繁为简的魔术！

在某些应用的设计中，利用手势操作可以简化用户完成某一任务的操作步骤,提高使用效率。

But！

手势操作虽然带来了简洁的界面和有趣的操作，但在实际应用过程中，设计者经常忽略了一些可用性的问题，导致用户体验受损。

缺乏规范的困惑？

目前手势操作尚未形成统一的标准规范。相同的目标任务，往往出现不同的手势操作，这就造成了用户的困惑。

例如：下图的三种手势操作都可以使目标对象旋转一定的角度，但目前尚无固定的使用规范

不易被发现的尴尬？

手势操作似乎还没有像按钮操作或菜单操作那样被大大方方的搬上台面，用户界面并不告诉用户可以对某个对象做什么，于是用户需要记住可以使用哪些手势。如果用户对其缺乏认知，这些手势操作就不易被发现，也便不会为人所用，甚至造成操作障碍。

精准度低的死穴？

影响手势操作精准度的因素多多，如硬件屏幕的尺寸、反应灵敏度，用户本身操作的熟练程度、对手势本身的认知（记忆）等。

这些因素都会导致手势操作易产生:操作不备触发，不知操作是否到位、误操作、与预期结果相悖等，让用户沮丧的体验。

给英雄以用武之地

尽管手势操作在通往易用性圣殿的路上仍然是荆棘重重，但是只要我们在设计的过程中绕过体验问题的泥沼，还是可以给英雄以用武之地的。

“洞察用户习惯”

手势本身的设计需要符合用户的心智模型和日常的使用习惯，才能不给用户增加记忆负担，容易被用户接受。

文化约定

手势本身或操作过程的设计符合特定文化里约定俗成的用法，形象的、有意义性的手势更加容易记忆和学习，符合认知习惯；应该多用“通用的符号”作为手势。

实物隐喻

手势本身的形状或操作过程是从具体实物中简化出来的，其内涵具有实物的隐喻意义。

首字母表示

以将命令的中文或英文的首字母符号作为该命令的手势。如用“a”表示“全删除”（All）手势，用“c”表示“复制（copy）等。

易操作

形状美观：“喜欢封闭的曲线”,“感觉舒服、美观”。

操作顺手：“最好一笔画完“，”尽量采用曲线”。

适当复杂：有的手势适当复杂一些（如全删除），因为这些手势操作容易引起用户大的损失。

“引导用户使用”

很多时候，手势操作是隐藏的，用户难于发现。因此就要通过一些用户引导信息来进一步的协助用户。“引领式”的引导方式比较适合用户快速接受，尽快上手，享受手势操作乐趣。最好将简洁明快指示性强的引导说明放在用户第一次使用时，让用户有所心理准备。

“给用户选择”

对于复杂的手势，不能强迫用户去学习记忆和使用，可以只作为备选的快捷方式提供给用户，让那些愿意学习的用户更快捷地完成想要完成的功能。

手势模式可以让用户选择是否启用该模式。用户在启用手势模式状态下才能使用手势来完成操作任务。

“靠数据说话”

手势操作缺乏规范，对于手势本身的设计可以进行用户调研，定性或定量的分析不同手势操作的易用性，用调研数据来帮助确认选择哪一种操作方式会更方便用户使用。

“V”就在前方

交互设计就是解决一个又一个的体验问题，尽管手机端的手势操作的应用还存在着这样或那样的用户体验上的bug，但是我相信它依旧是v5的。经过我们的不断改进创新，自然用户界面的宏伟目标终有一天会实现！胜利就在前方！

【1】自然用户界面：http://baike.baidu.com/view/4705493.html?fromTaglist