作者：晓生

以下是根据平时设计工作中总结出手机交互设计原则，国内相关资料非常少，只能自己边实践边研究，恐有误，仅供参照。

屏幕

手机屏幕尺寸分为物理尺寸和显示分辨率。

• 物理尺寸是按英寸对角线计算。
• 显示分辨率指的是屏幕图像的精密度，是指屏幕所能显示的像素的多少。
• 显示精度是每英寸上可以显示像素（DPI）。

NOKIA N78的物理尺寸为2.4英寸，显示分辨率为240*320像素；HTC T7278的物理尺寸为2.8英寸，显示分辨率为480*640像素。两款手机显示精度不同，同样100*100像素大小的图片在这两款手机上看到的效果也不同，同样大小的图片在HTC T7278看起来要比NOKIA N78小的多。

分辨率种类（不完全统计）：

1. 128*128  128*160 130*130  176*144  176*220 208*208 208*320  240*160 240*240 240*260
2. 240*320 240*400 240*432 240*480 320*240 320*320 320*400 320*480 345*800 352*416
3. 360*480 360*640 400*800 480*320 480*360
4. 480*640 480*800 480*854 480*864 640*480  800*480

一款软件适配所有分辨率的手机难度较大，势必需要先挑选主流分辨率进行设计，在此基础上适配其他分辨率的手机。鉴于2010年QVGA(240*320)屏幕的市场占有率将达到70%，可将QVGA的手机当成主要的设计对象。

视觉重点自上而下

大多数情况下浏览者看电脑屏幕时都不由自主的以“Ｆ”形状的模式阅读网页，而手机屏幕很小，显示能力有限，屏幕上内容尽收眼底，阅读文字时自上而下，因而信息的重要性也是从上到下依次排列。

“F”形状的模式阅读

简洁

手机屏幕的显示能力有限，使用物理按键时，无法向电脑或者触摸屏那些跳跃式操作，必须依次切换控件的焦点，例如手机界面中的翻页程序，用户使用最多的就是“下一页”，将“下一页”放置为第一个控件便于用户操作，方案1优于方案2。

界面简洁的途径：

• 减少控件的数目，使程序的主功能显然易见，引导用户操作。
• 当内容过多时，要突出重要信息，便于用户快速浏览。
• 显示出错信息时，不要只告知用户程序出现错误，要提供有用的信息引导用户完成操作。
• 手机上网的速度慢，一般在6k/s，这就要求页面的内容尽量精简，避免过多的图片。
• 页面的内容控制在两屏以内，也不能空白。比如当用户支付电影票之后，不能只显示“支付成功”，可以引导用户使用其他功能。

简洁要求文字描述简练，但也要充分利用手机屏幕上仅有的显示空间。例如iPhone的搜索栏，搜索框用于内容搜索，点击之后会显示虚拟键盘，除了左边默认的搜索图标之外，搜索栏还包含其他元素。

• 占位符文本。可以提醒用户搜索栏的功能（例如“Search”）或者搜索的内容（如Google或YouTube）。
• 书签按钮。记住用户的搜索内容，如在地图搜索中，书签按钮可以快速地查到已标记位置、最新搜索的内容和联系人。默认在搜索栏上用户没有输入文本或者占位符文本时，书签按钮才可能显示。
• 清除按钮。可以快速地删除搜索栏中内容，默认在用户在搜索栏中输入文本时，才会显示清除按钮。

任务

当完成一个任务需要多步操作时，可将任务进行拆分成多个子任务，每个界面完成一个子任务。如逻辑清晰并保证用户操作的流畅性，可适当地增加页面跳转次数和点击的次数。如使用e指通客户端购买电影票的任务有：查询电影→选择放映场次→选座→确定订单→支付。

关注首要任务也是用户对于程序满意度的重要因素。所以在设计时，要保证界面上的每一个元素的设计都取决于当前首要任务，用户完成任务是否需要这些元素。举个具体的例子：这些信息或者功能对于用户购物是否有帮助呢？如果不是，这些信息或者功能是否在另外的使用情境中至关重要吗？

避免输入

使用标准iso手机按键时，用户平均每分钟输入英文21个单词，在手机上输入将减慢用户操作的速度，过多的文本输入是在浪费用户的时间和精力，如非要输入，需保证“物有所值”，用户会感觉到并没有因为输入而耽误了任务完成。

以下途径可以避免输入：

• 使用列表选项的形式。
• 增加控件的可记忆性。

一致性

手机界面上出现的颜色、字体、文字和图片等元素要保持一致，一致性可以使用户知道在哪些地方找到特定的功能或信息，同时还能使得他们知道这些功能的正确使用方法。例如，返回上一级可以表述成：返回，上一级，后退，撤退……对于用户而言，这些文字没有明显的区别，但在手机界面显示时要只使用一种和同一个位置，如iPhone界面中的“返回”只显示在导航栏的左边。

熊猫看书

使用情境

手机QQ

手机属于移动设备，可以在各种场合使用，如地铁、路边、超市、飞机上等，手机可以切换到飞机模式。手机可以在各个时间段使用，手机QQ也可以切换使用模式：标准模式、室外模式和夜间模式。

操作方式

手机操作有物理按键和触摸等多种操作方式，当同样的程序要在多种操作方式下使用，需顾及手指点击时可点区域的大小。使用物理按键时，按钮可以只是两个字，选中控件即可操作，而iPhone的可点击区域最好不低于44×44像素。

反馈

程序需给予合理的反馈，让知道用户程序当前的状态。

比如iPhone的运行指示，运行指示表示后台有程序正在运行，但任务完成时不会提醒用户。当程序无法立即完成联网时，状态栏上会显示运行指示。当程序执行的任务无法立即完成时，工具栏上会显示稍大点的运行指示。运行指示提供了很好的反馈机制，明确地告知用户程序正在运行比告诉用户任务已经完成更为重要。

需求处理流程

收集需求→分析需求→提出设计方案→修改代码→测试

需求处理共需要三个周期。

产品组

第N周期中收集需求、分析需求和提出设计方案。

第N+2周期中跟踪需求完成情况。

收集需求

产品组负责将这些需求来源和需求内容，需求主要来源于：

• 功能开发需求。
• CCB会议中用户体验修改建议。
• 用户建议（主要通过客服获得）。
• 运营部和市场部的需求。
• 产品组用户体验修改建议。

分析需求

提出设计方案

第N周期的最后一天同时提交设计方案给开发组和测试组。

跟踪需求

判断需求的完成情况。

开发组

第N+1周期中根据设计方案修改代码。开发组对于零碎的需求不处理，此周期中收到的需求安排在下一个周期中修改。

测试组

第N+1周期中根据设计方案修改测试用例，判断代码的修改是否涉及主干流程，安排第N+2周期中的测试内容。

需求规范化目的

• 保证每项需求都得到处理。
• 需求可跟踪，每项需求记录在案。
• 产品组提高设计质量，避免重复设计。
• 开发组避免重复修改代码，减轻开发组压力。
• 利用测试组，保证设计的执行力。
• 有序地迭代。

By Matt Cronin

系统模型接近用户的心智模型是优秀界面的主要作用。一般而言，可用性衡量网站交互方式的难易程度，也是衡量网页设计的重要标准。本文总结了社区媒体和网站的关键性特征，举例讨论了这些设计背后特征、技术和概念的重要性及其原因。这些可用性简单实用，可以应用在几乎所有的界面设计中。

1.简洁

社区媒体网站的配色和图形相当简单。使用统一稍有变化的色彩，背景通常配以白色，用浅色突出补充信息（绿色或者黄色，红底用于表示警示信息）。图形之所以如此简单甚至保守，其中最重要的原因在于生动的视觉设计在这并不适用。社区应用程序体现的是分享氛围，内容不时地更新，较强的视觉设计容易分散用户的注意力。例如Twitter的界面将文本输入框放在突出的位置，以便用户发送短信息。当信息流相当大的时候，界面越简单越好。如果图形过多，用户较难集中注意力在某个任务和或者区域上。简洁的界面也并不意味着一个简单的视觉设计，而是以直观的形式呈现出来。用户通常会忽略冷色系的色彩，而不是用明亮的颜色分散用户在数据和网站功能上的注意力。

2.搜索功能

由于信息量大，社区媒体必须有搜索功能。这里的搜索有多重特点：除了传统的内容搜索之外，社区媒体搜索也提供关联性搜索，比如小组、社团或者兴趣。搜索功能常位于网站的右上角，包括一个输入框和搜索按钮。社区应用程序通常使用实时结果搜索和过滤。当在搜索框中输入字符时，下拉框中即时过滤相关的内容，帮助用户快速地查找到想要的内容。搜索结果对于友好的界面更为重要，例如Digg可以按照多种方式排列搜索结果，搜索框始终在顶部，以便用户随时使用。

3.吸引用户点击的按钮

按钮和链接是网页中不可缺少的控件，相比较而言，链接显得消极和被动，大的按钮显得更为生动，按钮和界面上其他元素对比起来更为显眼。就像现实生活中一样。这些按钮的具有立体效果，增加按钮的尺寸并和背景有一定的对比。当鼠标放在按钮上时，有悬停效果，让用户知道这个按钮是可点击的。当按钮被点击之后，还要有压花效果。

4.元素区分

对于各种信息块的管理和呈现是社区用户界面需要处理的设计问题之一。内容豆腐块进行视觉区分可以增加内容的可读性，元素区分是提升界面清晰度的最简单的方法。然而，元素视觉区分过多的话，界面上信息块也随之增多，也会导致界面变得复杂。因此，视觉区分更为微妙，如使用无彩色系或者冷色系的纵横线，保证不分散用户的注意力。

5.文本界面

当内容以大量的文本块的形式出现时，就需要融合不同的文本颜色、背景、字体和链接去保证界面的可读性。元素不同的尺寸和颜色使得界面视觉清晰并富有层次感，除了能提升可用性之外，还能强调内容的重要性，提高界面的可读性。例如Digg的界面，文本的颜色各不相同，但是看起来却很一致，有蓝色的标题链接，灰色的“more”链接等等7个不同的设计元素。

6.简单实用的表格

网页表格可能是社区媒体和网站最重要的设计元素，从注册登陆页面、回复到添加内容都要用到表格和输入框。一个有效的注册页面才能增加用户黏度，保证社区媒体的生存。首先要保证表格简短，许多社区媒体注册只要用户名和密码，而其他信息待用户创立账户之后再去完善。

7.即时更新

微博之所以在去年火爆起来，其中一个原因就是“即时性”，和两人交流的短信不同，Twitter实现了多人网上即时交流。时髦用户需要获得最新事件的消息，用户也希望软件能即时升级，自动检测是否有更新文件。

8.口碑营销和个性化

有效的口碑营销终极目标很有可能是提供高质量的服务和良好的用户体验。用户对于一个社区网站越满意，越愿意提升社会资本和扩大社交圈。为了达到这个目的，不管是在线还是离线，社区网站都必须够吸引人。这也就容易理解，为什么社区网站要提供更加灵活和更加适合的界面去满足用户的个性化需求。同时，社区网站也要花费很长时间研究用户行为和搜索记录、了解用户的兴趣和期望值。

社区网站不但要帮助用户查询已经认识的朋友，还要挖掘一些志同道合的人。个性化推荐系统可以提升用户的社会存在感，并帮助用户之间建立新的关系。另外，用户很容易邀请朋友，随意地在关系圈中传播信息（如分享信息）。这种网络效应的原因在于服务的价值可以在用户之间传递，使用的人越多，社区网站对于个人的价值也越大。

9.以用户为中心

尽管社区网站是社会化的，但是它关注的是用户的个人兴趣。Twitter、Facebook以及其他社区网站关注的是用户资料中的细节，推荐新朋友、兴趣、事件和小组等等来扩大用户的关系圈和深化用户的参与程度。Facebook的首页是一个极度个人化的界面，包括了用户的个人资料，更新或者隐藏朋友最新动态的快捷方式，还有用户可能感兴趣的朋友、小组或者交谈。社区网站提供的不仅仅是一个功能，更是建立了和用户之间的关联，用户黏度也随之增加。

原地址：http://www.smashingmagazine.com/2009/06/03/9-crucial-ui-features-of-social-media-and-networking-sites/

以下剖析界面元素和手机硬件、界面元素和软件要求之间的关系，寻找设计思路。

手机操作方式（物理按键或者全触摸屏）、屏幕大小、处理能力受手机参数影响。

软件大小指的是e指通软件大小的硬指标。

适配性是一套界面设计方案仅可能适配更多机型。

1. 内容：指的是整个界面中包含的所有信息，界面上内容来源于流程图中限定每个界面完成的功能。内容受手机屏幕影响。a)屏幕：手机上每个界面显示的内容有限，最好每个界面完成单个任务，并保证用户能很流畅地操作，尽量避免字符输入。

2.交互：具体表现在用户如何选择主功能，如何选择子功能，如何退出软件等等。交互设计就是在既定的内容框架下，根据用户的使用习惯去安排界面上内容的显示顺序、显示方式和界面操作方式（静态）。交互主要受手机操作方式和处理能力影响。a) 手机操作方式：触摸屏比物体按键操作更方便，例如触摸屏的手机选择某个功能时，只选点击该功能即可，而物理按键的手机需要按手机上下键，再按手机确认键。b)处理能力：手机处理能力强，软件运行的更快，软件和用户之间的信息交互就更快。

3.色彩：指的界面上采用的色系及显示精度。界面色彩设计由主要受屏幕、软件大小和适配性影响。a)屏幕：屏幕的分辨率高，色彩区分更为明晰，细节更丰富，视觉效果更好。b)软件大小：软件大小有限制，例如JAR包必须在400K以下，界面设计就不能使用过多的图片，优先考虑程序自绘。现有界面设计主要采用图片横向填充，如使用2*25像素的图片，横向填充成240*25的背景图。c)适配性：为了保证软件的可适配性，界面设计尽量使用单向色彩渐变效果，如2*25的图片只有上下渐变效果。另外，参照手机QQ等软件和近期程序实现的情况上来看，设计上尽量少用圆角和半透明效果。

4. 排版：指的是界面上的整体布局，包括图片和文字的大小，图片和文字在界面中的位置。界面排版主要受操作方式、屏幕和适配性影响。a)手机操作方式：触摸屏可以使界面设计更为灵活，不拘泥于现有的界面设计这样上下或者左右排版。b)屏幕：屏幕大，界面排版可以宽松些，比如标题栏可以大些。c)适配性：尽量避免使用滚动条，最好是界面上的内容一屏能完全显示，如主界面上的子功能控制在7个以内。

5.动态效果：指界面切换的变化过程。动态效果受手机操作方式、处理能力和软件大小的影响。a)手机操作方式：多点触摸时，会增加动态效果。b)处理能力：手机处理能力强，可以增加复杂的动态效果。渐变效果要花费不少时间去编写，这部分设计和编程上都有点难度。c)软件大小：动态效果会增加程序负担，还有可能增加图片数目，势必增加软件大小。如果有动态效果，也要放在用户经常使用的界面上。

综合以上论述，当主流手机操作方式改变时，界面的交互、界面排版和动态效果就可以相应地调整；软件的大小可以增加时，界面色彩和动态效果也可能相应的调整。