晓生语录

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

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

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

像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团队开发各个版本的手机网站可以弥补没有客户端的不足，比如手机触摸屏网站。