作者： 晓生

触摸屏已经得到广泛的应用，触摸手势也将逐步取代鼠标和实体按键之类的输入方式，为手机和电脑等大众化电子产品带来了全新的操作体验：

• 自然和直观。 每个人都知道如何用手指去点击，当看起来和现实生活中物体相似时，用户更容易明白如何去操作，这也是自然用户界面（NUI-Natural User Interface）的特点之一。
• 侵扰程度较低。 打字和使用鼠标点击时，会发出声音，而在触摸是无声并且方面，使用手指即可，不需要找笔。
• 便携。 使用触摸屏时也能完成大部分任务，更为灵活，也不需要任何的工作平台和鼠标和键盘之类的外接设备。
• 直接和融入感。相对于鼠标的指针移动，使用手指和触摸屏上物体的交互更能让用户融入在操作中。

触摸提供了真实的互动方式，界面中元素的移动、滑行和旋转等动态效果也符合物体运动规律。但是现在新技术的应用并非完美，也存在一定问题：

• 难以微操作。手指无法点击较小的控件，鼠标指针可以精确到1像素，而手指的指尖或者指肚决定了触摸的精确度。
• 难以输入。有限的触摸空间、难以改变光标位置和虚拟键盘的调用等问题使得大段的文本输入较为困难。

• 容易疲劳。当使用触摸屏平板电脑时，手腕和颈椎关节容易疲劳，不利于长时间使用。

（else-mobile）

• 难以点击屏幕的边缘区域。当单手握住触摸屏手机时，以大拇指为圆心，大拇指长为半径在手机屏幕上的约四分之一圆环区域最容易点击，离此区域越远，越是难以点击。

所谓设计，就是要解决以上列举的问题，设计适应手指触摸的界面，并发挥触摸屏操作的优点，在已有基础上挖掘更新的操作方式。通过增大控件之间高度和间距，可以增加其可点击区域，提升触摸的精确度，与此同时还要注意以下问题：

• 减少点击次数。手指的抬起和按下比鼠标点击费力。
• 减少手指位移。手指移动不能像指针那样调整平移的速度。
• 充分利用已有控件。如两个控件去完成同一操作和闲置某一控件是对有限屏幕的浪费，触摸屏的界面的操作应更为巧妙。
• 尽量保证操作的可见。可对操作进行分级处理，但不可像鼠标右键那样隐藏操作，避免用户去查找。
• 保证初级用户的使用，提升高级用户的快捷操作。如用户是多为初级用户，使用点击和平移这样的基础手势（长按是否算？）就能完成所有操作，在此之后，将多种操作手势作为快捷操作，提升操作效率。
• 发挥手势操作的优势。但如果应用特别的手势能提高操作效率和更好的操作体验，应控制用户的学习曲线并注意引导用户学习操作。将手势限定在点击和平移，并不意味着将界面的操作安装手机操作系统那样去做，平移手势也能变成输入方式（如百度点划输入法）、功能选择和界面灵活切换等等。

……（后续部分省略）

注：界面的发展过程及其特点：

• CLI（Command Line Interface）：static、disconnected、high-low、directed、recall、abstract、textual
• GUI(Graphical User Interface)：responsive、indirect、double medium、exploratory、recongnition、indirect、graphical
• NUI(Natural User Interface)：evocative、unmediated、fast few contextual、intuition、direct、physical

参考资料：

1. http://msdn.microsoft.com/en-us/library/cc872774.aspx
2. http://10gui.com/video/
3. http://www.slideshare.net/ArnoutdeVries/multitouch-interaction-overview

触摸屏手机中应用程序常见的有两种页面切换方式:标签式和滑屏式。

标签栏来源于网页设计中，通过点击标签来切换网页。在物理按键式的手机上的底部通常只有左右两个或者左中右三个工具按键，分别用左右软键和快捷键操作。在触摸屏上可以增加到五个或者更多的工具或者标签，可以像网页那样切换多个页面。

标签栏中的页面可以出现上下滚动条，以上下排序为呈现形式，能在视觉和功能上区分出信息的重要性，排在顶部的信息更为重要。

像Android、iPhone和Window Phone 7手机操作系统一样的滑屏式的操作体验更好，只能靠平移的手势来操作，是触摸屏独有的设计。虽然在物理按键式的手机上也会出现滑动式效果，但是只是用于多标签界面之间的切换动画，界面并没有很强的逻辑关系，界面可以从右往左读，也可以从左往右读，左右排序的信息没上下排序那样有重点。

在视觉上，滑屏式的界面是左右连续的完整页面，可以左右移动。由于每个界面中并不会出现上下滚动条，如果增加新内容，必须横向增加，就像iPhone手机操作系统新icon的界面都是不断在右边新建，底部的圆点起到的作用和滚动条相似，让用户知道当前界面所在的位置。

滑屏式的界面在横向扩展还需注意，由于各个界面并没有明确的名字，如果扩展到三个以上不同内容的界面，将会增加用户的记忆负担。iPhone的界面之所以可以横向“无限”增加是因为新页面属于同种内容，对于用户而言界面只有两种，最左边的搜索界面和右边的icon列表。

早期的多标签是模拟电话薄一样的样式，还有个别的3D式手机操作系统，以模拟现实生活中物体的使用来便于用户理解。当用户使用习惯之后在形式上会渐渐地区别于真实物体，就像本博客右侧的“关于晓生、文章列表和精品网摘”，起到的是多标签作用，但是形式上已经有很大的改变。

像iPhone的滑屏式和翻滚式的动画也是基于生活中物理规律，有助于用户理解页面之间的层级关系。

gongyunyun:不知道你在设计中有没有碰到这样的情况，经常在pc端的应用功能很强大，基本上满足了用户各方面的需求，但是要将这些功能移植到手机上时往往要进行一个大瘦身。机屏幕小，输入不方便，用户使用环境复杂等都是造成这些问题的原因。我想问下一般这样的情况，瘦身的原则是什么？

答：原则是关注核心任务，在PC端每个界面中可以完成多项任务，但是大多数情况下，手机每个界面的任务较为单一。如果将PC端的应用程序移植到手机上，与其说要剔除关联性较低的元素，不如说是在手机上完成应用程序中必要的功能，然后再增加相关的元素。

Mac的邮箱

iPhone的邮箱

邮箱的核心功能是收发邮件，其他都是关联性或强或弱的辅助功能，如Mac中的邮箱有收发邮件、对邮件存储、设置事件优先级和编辑邮件富格式等等，而iPhone上的邮箱核心任务就是收发邮件。出现这种的情况，是由手机的硬件导致的，但也可能成为手机的优点，快速启动并且没有其他不相关的内容，更别说那些烦人的广告了。所以也有人提倡优先为手机设计，之后再设计PC端产品，因为手机有限的屏幕逼着设计师考虑如何使用最少的元素完成核心任务。

gongyunyun:关于流程图的绘制有没有什么书籍推荐。我目前在绘制流程图的过程中的问题：目前都做的是从用户角度的用户操作流程图，但是我看一些书籍说交互流程图是将功能流程图和用户操作流程图结合到一起分析的结果。交互流程图的定义：描述用户行为与系统的响应关系，但对用户行为不进行层级分解，对系统内部如何工作也不描述，主要描述两种行为接口时的交互过程。看到这个定义我很疑惑，反而不知道怎么着手了，你在设计过程中是怎样解决这个问题呢？

答：没见到过这方面的书籍。就像iPhone的邮箱功能，回复邮件的功能流程是：

1. 查看邮件
2. 选择邮件
3. 回复邮件

而用户操作流图是：

1. 打开收件箱
2. 轻击邮件并查看邮件的内容
3. 轻击工具栏上的回复按钮
4. 轻击邮件标题栏填写标题
5. 轻击正文空白处撰写邮件正文
6. 轻击标题栏右边的“发送”按钮发送邮件

只画用户操作流程图也可以，因为已经包括了功能流程，并且更加具体。因为程序的层级关系较少，我通常把能出现的所有界面都绘制出来，标上界面的跳转方式之后就成了流程图，

既然是流程图，可以理解为用户的操作流和系统的响应流，或者说是用户的输入和系统的输出，可以具体到每一毫秒（甚至更精确），在这每一毫秒钟用户的操作和系统如何反馈用户的操作，反馈可以是图形、声音或者触感。比如用户轻击了邮件正文的标题栏的某个区域几毫秒，系统对此操作的响应是在几毫秒的时间里逐渐弹出虚拟键盘，如果点击的时间过长就是持续点击的操作手势。

至于系统如何实现反馈，比如如何实现手机震动，那就交给程序员去考虑吧。

《Taptu手机触摸屏网站报告》指出触摸屏手机网站的数量已经达到iPhone app的两倍多，呈快速增长趋势。由于触摸屏手机的增多，而页面和控件过小不利用触摸屏的浏览和点击，因而有必要重新设计手机网站。理想的状况是用户登录网站时，根据手机型号和上网速度显示相应版本的网站，例如：

• 低于240*320像素的手机上显示低端的纯文字版本。
• 240*320像素及其以上的非触摸手机显示普通版本。
• 240*320像素及其以上的触摸手机显示触摸版本。
• iPhone手机上显示iPhone触摸版本。

手机网站大多不支持富交互效果，每操作一次页面就会刷新一次，加上手机上网速度慢，有必要降低页面大小控制每页的下载时间（如2秒以下），在各种手机显示屏幕上如能让能达到最佳的显示效果，用户体验更好。对于触摸屏手机，虽然屏幕增大，好像可以显示更多的信息了，但是信息密度过大会影响手指的点击。

Opera的触摸版虽可以在一定程度上解决触摸屏点击的问题，但是每次都需要点击两次才能完成一步操作，并不是浏览器中都有的这样的功能，所以区分手机网站的版本和单独为触屏幕开发还是很有必要的。

手机网站优势在于可以跨平台使用，效果较为一致，如果满足以下的条件可以考虑只开发手机网站，不去为各个手机平台做客户端：

• 不需要过多的富交互效果，多以数据流为主。
• 对于界面的显示要求较低，不需要3D效果。
• 和手机的硬件无关。
• 开发的成本较低。

如大众点评网的iPhone app和iPhone版手机网站，内容和操作相似，多是解析数据或者直接跳入wap，两者的差别并不是很大。条件有限的情况下，可以考虑不开发这样的客户端，利用原有的web团队开发各个版本的手机网站可以弥补没有客户端的不足，比如手机触摸屏网站。

今天ifanr上有一篇《手势操作（自然用户界面）再探讨》，观点保守，论据不足。

Android的菜单确实难用，难以记住界面是否有菜单。Plam将菜单放置在状态栏的左边，保证了触摸屏也能使用菜单，但也有弊端。菜单放在界面左上角，宽28像素，难以点击。请拿出你的手机，右手去点击大屏幕的左上角。要么大拇指伸过去，要么其余四指抬起才能点到左上角，甚为别扭。

弹出的菜单通常要么是无关紧要的功能，要么重要。如果功能无关紧要，那不如将菜单放置在启动程序的第一个界面（主界面），如帮助，当用户需要的时候，完全可以返回到主界面去选择，通过减少界面的层级关系可以保证用户很容易返回主界面。如果功能重要，大屏幕的手机完全可以将这些功能显示出来，并且是有必要的。

iPhone的工具栏、控件列表和部分小控件完全取代了菜单，保证绝大多数控件的可见性。对于一个界面而已，工作栏上的5个控件能满足需求，如果实在放不下，应该先考虑这些功能是否有必要了。

说来菜单是物理按键时代的残留，除了按确认键之外，其余功能通过左软键操作其他功能。对于触摸大屏幕，不必再保留菜单，特别是像Android那样需要切换触摸和物理按键之间的操作。

另外，文中还提到手势的不统一，对于手机这种情况是不存在的，各个操作系统对于手势的定义很一致，而且对于手势的识别也很灵活。比如滑动界面时，如果当前界面只能左右滑动，并不一定要水平的左右滑动，甚至与水平成80度角的手指移动也可以完成滑动操作。在iPhone的界面设计指南中，提醒开发者注意将应用程序的操作限定于“轻击”和“平移”，因为其余手势用户并不一定知道。

针对iPhone的购物程序中，左右滑动有可能会导致商品会被移出购物车，这属于程序中交互设计的错。一来手势的操作不是唯一性，既可以滑动界面也可以删除商品，二来用户已经想购买这个商品，不应该那么容易并且可以意外地删除商品，可以加上一些困难，不确定的情况下应该有二次确认，询问用户是否需要删除。

以后的交互方式还有通过捕捉用户手指移动方向、通过肌肉拉伸或者检测脑神经的操作等等，技术的应用肯定会导致一些新问题，但不能过早地将原有的设计原则和用户体验的观念引入设计中，正像头脑风暴设计思维方法中提倡的那样，先大胆设计，小心论证，设计应该更激进。工业设计中每10款投入市场中的产品只有1款式成功的，互联网产品功能增多，用户需求变的模糊，用户研究变得更为重要，其目的是减低产品的市场风险。遵从用户体验可以保证产品合格，难以创造出有创意和伟大的产品。

公司衡量产品的第一标准应该是创新，而不是用户体验。