戴传庆

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)软件大小：动态效果会增加程序负担，还有可能增加图片数目，势必增加软件大小。如果有动态效果，也要放在用户经常使用的界面上。

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