戴传庆

设计原则是做设计的标准，可用于指导设计和衡量设计方案的优劣。个人在写MRD时，会先考虑用一句话作为设计目的，描述做这个设计满足用户何种需求或者有什么作用，然后再写三至五条设计原则，满足用户这项需求时做的设计需要遵守什么。

比如在设计一个购买彩票出错页面，设计目的是为了降低用户的挫折感。那设计原则可以是：

1. 提供用户易于理解的信息。
2. 根据出错情形分别提供有用的信息。
3. 引导用户继续浏览其他页面。

以上的原则中顺带将之后的设计方法也一并说明，用于指导设计：

• 根据原则1，设计出的界面中会避免使用出错参数，普通用户并不理解这些专业术语。
• 根据原则2，需要具体研究出错的情况。比如服务器在调整，该时间段不能购买，手机由于信息原因在一定时间内未获得服务器的反馈，或者是因为用户的账号余额不足等等。
• 根据原则3，会引导用户继续使用。比如由于用于的账号余额不足，可以提醒用户充值，先购买其中一部分，使用其他信用卡支付或者返回网站首页。

基于原则做设计，思路会很清晰。如果是团队合作，先是发散性思维，之后也要将设计原则明确下来，便于团队尽早取得共识并在适当的框架下继续讨论。当做A/B方案评测时，可对照设计原则来看，如A方案满足原则1&2&3，B方案满足原则1&2，那自然选择A方案。原则也可以有优先级，如原则A方案满足1&2，B方案满足2&3，原则1比3更重要，那选择A方案。

至于什么是设计原则可以研究交互设计中已有的“常识”或者google之类大公司的设计原则，写原则的目的也是为了抓住重点，有针对性的设计，原则过多，难以把握。一些常识性或者已取得共识的内容也不必当成设计原则，比如界面要有美感和为触摸屏手机做设计要易于手指点击，除非产品定位是重点做这些工作。

设计原则也不可照搬，靠自己研究优秀产品和日常工作中慢慢积累。当设计需求点过多无法掌控现有设计思路时，再引入设计原则。设计原则可以提高工作的效率，但如果引入过早，会限制设计师的发散性思维，扼杀很多好的想法。

设计原则是受用户需求和产品定位等因素的影响，可以说是执行设计的指导性思想，会体现在产品的细节当中，有利于保持产品的一致性。写下设计原则，即使设计发生偏差，也很容易找到自己哪里犯错误了，不断锻炼自己做设计的意识。

当你掌握这个方法之后，工作重点就是研究具体的产品和如何从细节中执行这些设计原则。

Palm的返回操作是在手势区向左滑动，Android有“返回”按键，两者的共同点就是触摸屏上没有像iPhone那样的“返回”控件。因而有想法将手机客户端的界面设计中加上“返回”，是否合理呢？

加上“返回”控件有以下优点：

• 指示。界面上“返回”控件还能起到指示的作用，明确告诉用户当前界面是否是可以返回的，在不知所措的情况下，用户也不用胡乱去探索界面中是否有掩藏的操作。非触摸屏手机通常左软键为“菜单”“确定”之类的操作，右软键为“返回”“关闭”的操作，“菜单”有很多隐藏的选项，需要用户去记忆，但是“返回”却是非常明确的。
• 连贯。在使用触摸屏时，手指通常在操作“返回”和“菜单”之类的操作会离开触摸屏，操作不连贯。触摸屏的体验更好，期望用户的手指能一直停留在触摸屏上，尽量减少触摸屏和按键操作之间的频繁切换。
• 方便。触摸屏上点击控件比使用手势区和按键更方便。

但是任何元素的使用都是有条件的：

1. 有空间。界面上有空间一直放“返回”控件，要保证“返回”控件的一致性，放在固定的位置。
2. 返回操作频繁。由于界面的层级关系多，返回操作比较频繁。如果界面就两层，那用户很容易知道当前界面是否需要返回，指示的作用就没有必要了。
3. 确实方便。也许在界面上放上“返回”控件的想法来源于iPhone，设计师感觉这样用起来挺方便，在Palm和Android也要这样做，这就太主观了。iPhone的“返回”是放在界面的左上角，对于触摸屏而言，左上角是单手使用时最难以点击的区域。如果将“返回”控件放在触摸屏底部的话，对于像摩托里程碑这样的手机，返回键虽然是在触摸屏之外，但是操作的感觉和触摸屏几乎完全一样，那这时操作上方便是非常弱的。
4. 用户习惯。Palm手机属于小众化手机，也许用户是Palm的狂热分子，就喜欢手势区的操作。但也不意味着就一定需要完全遵从用户习惯，如果提供了更好的使用方式，用户的习惯也是可以改变的。

这些都是推理，任何理论都代替不了用户最终的反馈，衡量设计的好坏还是要看用户真实使用产品时的感受。

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

• 自然和直观。 每个人都知道如何用手指去点击，当看起来和现实生活中物体相似时，用户更容易明白如何去操作，这也是自然用户界面（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. 轻击标题栏右边的“发送”按钮发送邮件

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

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

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