9个成功的网页设计用户界面UI的重要特征

一个好的用户界面（UI）的主要功能是为用户在用户意图和应用程序功能之间提供一个直观的映射，为用户既定任务的完成提供一个解决方案。基本上来说，用户界面（UI）描述了用户和网站之间交互以及用户访问其功能的方式。事实上，可用性是一个良好的用户界面的双积，它决定了用户是否可以轻松地执行网站提供的所有功能。可用性是每一个设计的重要组成部分，特别是在拥有大量功能和用户的网站上。

这篇文章我们来说说社会化媒体和社交网络的用户界面的一些至关重要的特征。文章讨论那些设计背后的重要特征，技术和概念，并通过一些优秀网站作为例子来解释这些特征为什么是重要的。这些简单的和通用的可用性策略几乎适用于任何地方和任何类型的用户界面。

 

1. 简洁的界面是关键

在深入用户界面的细节之前，必须指出的一点事实是：简洁的用户界面是社会化媒体和社交网络的共同特征。社会化媒体网站在色调和图形方面更加简洁。色调方面通常包括少数几种伴随着单色变化的颜色；背景一般为白色，更新（如状态更新）往往都是浅色以及（通常是绿色或黄色突出；警示通常用红色背景突出）

此外，你会发现图形往往也是非常简单的，并且运用地相当谨慎。这是由多种原因造成的。最重要的原因是一个简单的事实：生动形象的设计并非是真正有用的社交网站。社会化应用被认为是向用户提供了一个内容可以很容易地创造以及会话可以很容易地产生的共享环境，而强烈的视觉设计会造成不必要的干扰，使用户很难专注于他们的会话。

例如，Twitter可能是最简约的社会化用户界面之一。其UI非常的简洁，使用了极少的颜色，并把其服务的主要特征——文本输入框——放在前面。

换言之，由于信息流相当大一部分是为了大多数用户的，这自然就要求界面设计的越简单越好。如果界面上的图形元素用地太多，用户就会感到不舒服和混乱，因为这样用户就很难关注到特定的任务或区域。尽管简单的界面不只意味着只是一个简单的视觉设计。更重要的是，这意味着有用的界面选项的设计、安排以及展现都要以直观的方式。

社会媒体和社会网络站点的颜色往往是平淡和让人愉悦的，而不是鲜亮和让人不舒服的。一些功能不争取关注；其中许多大部分时间是无形的。事实上，绝大多数社会化媒体的界面是上下文相关的，很多功能只“按需”显示。拥有大量的数据和功能的网站，明亮的色彩只会让用户感到混乱并且会分散用户注意力。

2. 显著和实用的搜索

良好的搜索功能无疑是可用性和好的用户界面的顶峰。社会化媒体的搜索功能是必需的——因为社会化媒体有着大量的信息。社会化媒体的搜索功能，除了拥有传统搜索的多个层面的内容以外，社会化应用还提供了一个社交图联系中的高级搜索——无论是在小组，社区还是在兴趣上。网站顶部右上角是搜索框最合适的位置。用户期望在那里看到：搜索输入框和清晰可见的搜索按钮。

社会化应用的一个共同特征是使用即时搜索结果和过滤。当你往输入框输入文字的时候，搜索结果以下拉的形式被过滤。该过滤帮助用户快速找到他们寻找的内容，并剔除那些不相关的内容。

搜索结果页面比一个友好的搜索输入框设计显得更为重要。Digg最近更新了他们的搜索引擎，现在是一个非常实用和友好的搜索例子。您可以通过一些选项来组织搜索结果，这些选项如最佳匹配，Most Diggs，以及最新的。在左边你会发现时间范围列表，Digg范围，热门话题和热门分类。此外，您还可以按内容的来源来组织搜索结果。在搜索结果页的顶部还有一个巨大的搜索框，方便用户搜索其他关键字。

3.显著的召唤行动（Call-To-Action）按钮

当然，社会化应用包含多种需要以某种方式交流的功能。因此，一些按钮和链接几乎需要置于在每一页上（注册可能是唯一合理的除外）。一些涉及到导航链接，另外一些让用户调整具体应用功能。按钮通常用于激励用户操作，而链接往往是被动的且更微妙。按钮往往更大，更生动，更令人难忘。不管是执行那个功能的按钮，都应该显著且可点。

通常，社交网站只有少数几个召唤行动的按钮，这些按钮，都应该鼓励用户采取行动（见Web Design Trends: Call To Action Buttons, Buttons Design Showcase and Good Call-To-Action Buttons for good guidelines for the design of call-to-action-buttons）。这些按钮通常设计和放在突出的位置，而其他设计元素仍然非常微妙和简单（见下面的截图）。

一般来说，在用户界面设计中现实生活的比喻用法是非常可取的。因此，一个好主意不仅可以使使一个按钮更像一个按钮（例如，使用下拉阴影），更能确保——活跃的——和重点突出的设计，和按钮交流是实际上“按”的，在这种情况下，最好是添加压花效果而不是仅仅改变按钮或其边框的颜色。

按钮应该足够大，让用户能轻易注意到和选择。然而，形状大小并不是唯一一个可点击的按钮或链接的特征。另一个重要因素是内边距。如果你有一个链接线紧紧挤在一起，就不可能点击一个你其实想点击的那个。您可以考虑为您的链接或按钮的提供一些视觉支持。

在使用链接的时候，使用一些图标或者小插图有时是有用的，但这并不总是可行的，特别是在链接对于绝大部分用户不是很重要的时候。如果您需要强调一些重要链接，你应该考虑给链接加一些间距，使用突出的背景，使之成为一个大型点击块或只是取代一个突出的按钮。使用突出的背景，但不能太复杂。

同样重要的是要提到光标效果的重要性。光标效果让用户知道按钮实际上是可以点击的，并确认该用户的行为是被系统理解的。

 

4. 温和的分隔元素

各种信息块的有意义组织和展示可能是社会化用户界面设计师需要面对的高级设计问题之一。为了使内容可读，可浏览和容易被觉察到，内容块需要在视觉上被分隔开。换句话说，每个元素都需要以某种方式被定义且被显示为单独的元素。事实上，在布局里各个元素的分隔是最简单的使用户界面更加简洁的方式之一，用户可以轻松地与之交互。

但是，如果许多元素在视觉上被分隔开，界面上则会产生更多的信息块，布局也会因此变得更加复杂。因此，为了确保布局仍然可浏览，视觉上的分隔需要进行微妙的处理。在大多数情况下，横向和纵向线条运用中性平淡的颜色（例如灰色）。一个强有力的鲜艳的色彩——这往往是难以忽视的——将会分散用户的注意力。相反，“平静”的线条更容易被忽略，从而提供可视化的支持。

在一个页面布局中分隔元素究竟意味着什么呢？Twitter的使用视觉分隔来构造页面布局。你可以看到每两条tweet之间有一条虚线。如果没有这个分界线，几乎不可能快速扫描多行文本。像这样的小细节可明显改善用户界面，方便使用。

Delicious使用细小的1px灰色线来分隔其用户的热门书签。

您还可以看到元素之间的分隔在Mixx.com上也在使用。就像Twitter，单一的灰色像素线分隔大量的文本，使得页面更容易浏览。

相反，Reddit在每条文本之间没有使用分隔，使得界面更加混乱，因此更难以扫描。有时候，一个大幅度活跃的白色空间也可能有助于在布局里分隔元素，但这种方法的缺点是，可能会使得网页拉得太长，以至于用户要使用垂直滚动条。

在Reddit上，运用高亮标题的方法来提高可浏览性，这样关注的重点完全落在了标题上，也不失是一个好的设计方法。

另一个分隔元素的技术是使用适当的布局结构，在视觉上分隔内容块/使用空白用以同样的目的。例如：Slashdot把每个内容块放在易于识别的框中，并使用背景图片来突出标题。

StumbleUpon采用的基于网格的结构，其中的每个内容项目有着相同的高度和宽度。这是另外一种有效的温和的分隔方式。

5. 把文本当成用户界面

在Nine skills that separate good and great designers演讲中，Cameron Moll提到：好的设计师把文本看作内容，而伟大的设计师把文本看作用户界面。内容基本上是一个巨大的文本块，用户界面则需要采用微妙差别的文字颜色、背景、字体、大小和链接演示来使得内容更容易浏览。

事实上，社会化媒体网站上良好的用户界面是采用不同大小和颜色的元素来创建一个清晰的视觉和结构层次。这是类似于前面的技巧，因为这种技术有助于提供分离和定义因素，以及使界面简洁。除了改善可用性，处理用户界面的文字，有助于提高可读性，因为它明确排列了设计元素之间的关系，这也意味这它们在布局中重要性。结果是：这样的网页更容易被浏览。

关于这个概念的例子，看下Digg的用户界面（见下图）。当你浏览digg的时候，你会发现文本内容以一种非常一致的方式，在字体大小、字体颜色和其他元素间有着各种不同的变化。还要注意这种设计是如何有效地为用户提供一个清晰的导航路径的；主要的链接以下划线和蓝色予以突出，而“更多...”链接是灰色的，其他链接没有下划线，另外的一些文字内容是则是红色或者是灰色的。

每个内容块有7个不同的设计元素（标题、来源、描述、更多链接、类别、时间、以及描述下面的其他链接），不过，这样的设计是行之有效的，因为每个元素的视觉重量是非常独特并且沟通也很清楚。这是一个良好的设计。

此外，您可以看到Twitter这个更为简单的例子。首先是显示帖子，下面是更小，更微妙的文本显示——当你需要寻找的时候可以很容易地找到。

另外一个例子是Propeller。主要内容块的背景是灰白相间的。每块的要素有不同的色调，主要内容有一个清晰可见的边界。这些颜色的变化，使界面看起来更漂亮。

6. 简洁可用的表单

Web表单可能是社会化媒体和社交站点最重要的设计元素。从注册到搜索任何内容，登录回复或增加一些内容都会用到表单和输入。由于表单是非常重要的，必须使用。尤其是注册表单，因为没有一个“行之有效的”注册表单，就可能很难增加大量至关重要的用户来让社会化媒体网站运行下去。

有一些方法将有助于保持表单的可用性。最简单的方法是保持表单尽可能的简短。许多社会化媒体网站只要求填写最主要的内容（仅电子邮件和密码），把一些额外的信息留给用户在在账户创建之后去编辑（如个人介绍，地点，以及其他相关信息）。如果可能的话不需要任何电子邮件或密码确认以及不使用验证码。

一些服务需要邮件确认和邮件激活，这就需要用户花费时间而无助于用户马上就开始就使用系统。普遍认同的规则是：你的web表单越简单，对你的用户就越有用；需要填写的内容移除的越多，注册的用户就会越多。你可以参考下这篇关于注册表单的文章Web Form Design Patterns: Sign-Up Forms (see part 2 as well).

Reddit的注册表单非常简短，只需几秒钟就可以完成注册。没有e-mail确认或者是email激活。整个表单非常的干净整洁。

Twitter的注册表单也很干净整洁，且不要求密码确认。一旦光标移到输入框中，右边就会显示提示信息。

最简单的注册表单的例子是Tumblr。整个注册只需要填写三项：email，密码和用户名，就这么简单。

7. 即时更新

在过去几年，为什么微博客服务能蓬勃发展的原因之一就是为社会化界面带来了新的，“实时”的元素。和即时通讯用户大多集中在双向交谈不同，Twitter等提供了多种和web交谈的方式。

现在的用户希望看到即时的传入消息或尽快把消息发布出来，并观察他的社交圈子中正在发生什么。对于社会化用户界面的设计是来说，这意味用户应该拥有一个实时更新的功能，在一个应用程序中即时地更新内容。自动和引人注目的（但不显眼）更新有助于用户停留在一个“信息流”中，例如，关注他的重点任务以及即时获取也可能很重要的信息。

Twitter search用高亮的方式即时显示用户的最新更新。这也许是将来搜索和新闻流的样子。

Facebook在页面的顶部显示更新，这些更新用户可以按需显示——运用ajax，当然无需刷新。

8. 口碑广告和个性化

也许，一个有效的口碑广告的最佳策略是提供良好的服务和用户体验。用户在一个社会化网络上感动越舒适，他就越有可能在这个网站上改善其社会资本，扩大他的社交圈子。要做到这点，一个社会化网络站点需要提供有吸引力的功能，不管是在线的还是离线的。因此，社交网站往往利用个性化，提供更灵活，更适用的用户界面是完全可以理解的。

在社会化应用中，个性化是一项非常强有力的技术，用来给用户分发相关的内容。推荐系统经常被用来向用户提供用户感兴趣或用户期望的信息。不过这样的推荐系统的建成需要很长的时间，因为一开始系统掌握的用户及其喜好的信息非常少，以至于系统不能有效地向用户推荐有用的信息。不断地掌握用户的信息，基于用户的行为、兴趣、搜索和其他一些用户行为，从而使得推荐系统能给用户推荐个性化的内容。

此外，didg运用digg推荐引擎向用户推荐个性化的信息，你可以看到和你一样digg过同样信息的人的其他digg过的信息。该推荐系统也会给你推荐一些和你有相同偏好的用户。

重要的是要明白，社会化网络应用的大多数用户不只是设法联络已经认识的人，（尽管Joshua Porter在“Designing for the Social Web”，一书中提到，用户要做的第一件事是联络那些他们认识的人）还用来发现新的，志同道合的朋友。在社会化应用中个性化推荐系统往往很受欢迎，因为它们提高了用户的社会存在，有助于建立新的联系。

此外，大多数社交网站还使用户能方便地邀请他们的朋友和传播信息（“分享这条消息”，“共享此链接”等）。Facebook的“联络更多的朋友”功能是这一策略的典范。

这背后的原因是经典的网络效应——越多人使用facebook，facebook给每个用户的价值就越大。这就产生了积极的作用，因为用户登录Facebook并不打算为其他用户创造价值，但实际上情况是为其他用户创造了价值。小型的“网络贡献积累”导致了一个有用的和流行的应用——无疑造就了Facebook的今天。

Facebook更进一步使得用户可以把联系人从其他服务（例如，从gmail）上整合进来，邀请他们自动使用其他社会化服务提供者的开放的API。没有哪个用户愿意花时间来手动邀请他的朋友们每到一个应用程序中去——facebook照顾到了，自动且无痛苦。

9. 以用户为中心的用户界面

由于社会化软件是社会化的，它提供给用户一个强烈关注其个人利益的用户界面，而且由于社会媒体和社交网站的存在靠的是用户的行动，这就不难理解社会化用户界面是以用户为中心。Twitter，Facebook以及其他社会化应用程序都以用户为中心，关注用户个人资料中的小细节，提示新朋友，兴趣，活动，小组等，以扩大他们的社交圈子，强化用户参与。

Facebook 的首页是一个值得仿效的以用户为中心的用户界面。上面显示了一个用户的更新和通知的详细信息，一键点击的界面让用户能轻易更新目前状态，隐藏来自朋友的信息，以及更新那些你可能感兴趣群组的信息。因此，Facebook强调应用程序的个人价值，将用户置于软件的中心。Twitter是另外一个相似的方法：首页都是关于一个用户的信息，包括他的联系人和一些来自朋友的会话。

从可用性的角度来看，这种做法几乎是显而易见的——因为一个应用程序是为用户创造的，它应该关注用户的所有信息。然而，大多数的社会化应用程序不像普通的网上银行软件那样是特定任务化的，而是有更多特定的活动：它是关于所有的参与和联系的。而且，使用这些服务不是为了解决单一的任务，而是让这些应用能不断的尽可能多的被使用。越多的用户参与，就会有给这个应用带来越多的流量，从而也就有越多的通过口口相传而参与进来的用户。这就是社会化应用的关键——以自我为中心的用户界面，并利用这个策略来有效绑定用户使用这些应用。