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

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是另外一个相似的方法：首页都是关于一个用户的信息，包括他的联系人和一些来自朋友的会话。

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

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

原文为英文

另外…本文冗长，请斟酌阅读…还有，如果你是校内的死饭，请不必在我这大谈校内之优秀，仁者见仁智者见智，我们所看到的层面不同，所以不必在不同层面上就一个问题争执，毫无意义。

本文开始之前，我将引入几个概念性的东西

一. SNS

首先我要说的是，SNS，即social networking services，中文为社会性质的网络服务，校内网就是这样性质的网站，他们主要是为用户提供一个搭载了众多媒体以及互联性质的应用服务的平台，用户可以以一个平台为媒介，通过平台上搭载的各种app来进行互动，听起来其实有点像P2P的，因为在这个平台发布信息的都是基于个人的。

二. 六度分割理论

这是1967年哈佛大学的心理学教授Stanley Milgram首次提出的，该理论指出，“你与任何一个陌生人之间所间隔的人不会超过六个，也就是说，最多通过六个人，你就能认识任何一个陌生人。”而SNS就是基于这样一个理论诞生的，它通过“熟人的熟人”开拓展网络社交，以及信息的扩展。

三. 微博客

微博客(micro-bloging)顾名思义是一种迷你型的博客，是一种可以及时发布消息的博客系统，你能通过多种途径更新和发布消息，全球最著名的微博客服务商为twitter.

现在，我们进入正题，校内网所提供的一个并不成熟的SNS服务。

首先，对于校内网，我属于一个晚熟且半生不熟的阶段，认识校内网是在出国以后，正式使用也同样如此，但是当我第一次注册校内网，就遇到了十分蛋疼的事情，当我选择了我英国的大学以后，被告知我必须使用英国大学提供的email注册，这是我很不想的，我知道，我注定会被spam骚扰致死，更何况大学提供的email空间有限。对于这点，我就很有疑问，对于一个提供平台的服务商，为什么要让用户强行去适应你的霸王条令。

当注册完毕后，更令人蛋疼的事情发生了，他告诉我，我必须使用真人头像以及真实姓名，否则我无法享受到加星用户的特权，而这些特权包括

• 方便朋友找到您
• 随处可见的尊贵显示
• 免费赠送礼品的机会
• 拥有无限容量相册空间
• 跳蚤市场发布物品信息
• 参与校内的有奖活动
• 创建群组与活动
• 使用校内的所有功能

(以上摘抄自校内网)

而我想，校内网很明确的漏掉了一点星级用户的好处，那就是

• 我们不会不停的给你发送通知

对于这个流氓性质的实名化服务，我很是不理解的是，你怎么知道这就是我？

是我校内好友的人都知道，曾经很长一段时间，我使用不知名的人的照片作为头像依然获得了星级用户的奖励，这就意味着校内的实名化是一项很废柴的服务，因为你无法真实确认用户的资料真实性，而是凭空猜想这所谓的真实性，这是一种变相的虚构实名化。

BTW，让我更不解的是，校内为什么有功夫去check每个人上传的头像，而没工夫去check每个人上传去相册的养眼图片呢？

(至今我依然被这些讨厌的通知烦着…)

说完了校内莫名其妙的实名化，我们再说说SNS应有的Blog系统，即日志系统

引入日志系统，我顺便引入Technorati的全球博客现状报告2008，在这个报告中指出，人们写博客的原因有以下几点

• 表达意见以及情感
• 分享经验心得
• 想认识具有同样志趣的人
• 与朋友和家人保持联系
• 希望能在传统媒体发布
• 赚钱
• 推销自己
• 吸引客户

但不管怎么样，校内的日志系统全然变成了网络杂文的分享系统和点名集中营

因为校内日志系统的局限性，我们所写的日志

• 无法被搜索引擎获取
• 用户无法使用匿名评论
• 没有tag与trackback
• 不支持RSS输出与订阅

这一定意义上影响了校内用户原创的积极性，除非我的文章被好友分享，否则别人永远不会知道这篇文章，即便我们使用google与百度，也无法看到，而由于没有了tag和trackback，使得博客之间的交互性彻底消失，加之没有了RSS的导出与订阅，使得信息的获取效率大大降低，我们必须时时刻刻去关注对方的主页来检查他是否有了新的创作，而校内又没有提供快捷的用户指向系统，我们需要在一大串好友列表或者搜索界面里找到目标人物，而如果恰好此时这个人改了名换了照片，那么要找到他是一件十分困难的事情了。

所以很简答的就能看出，校内的日志系统还十分的不专业，甚至不及QQ空间的日志系统，所以当原创在一个SNS平台越来越少的时候，这个平台的可持续阅览性也会随之慢慢缩水了。

显然，校内的用户很明白这个缺点，所以很少有人热衷于在校内网发布自己的文章，但我们是不是应该庆幸，校内还引入了微博客这个系统呢？

对于微博客，我之前已经介绍过了，校内提供的微博客，就是”状态系统”，他可以让你的好友快速的知道你目前的状态，你的想法，或者说心情，但是很明显，这个微博客又有点半吊子的感觉了。

首先，微博客相比于博客，他应该拥有

• 便捷性
• 即时性
• 随意性

便捷性是建立在系统的开放化之上的，即该系统提供了外部的API接口让用户拥有多途径发表消息，而就目前我所知道的校内发布状态的途径只有

1. 通过网站顶部的状态更新栏
2. 通过手机网络访问wap版首页更新
3. 通过他们自行开发的软件校内通
4. 使用短信更新状态,仅支持国内用户

其实，相应的，第一条和第二条可以合并为一条，但我还是很仁慈的把他们分割开来了，对应的，我写出twitter的发布途径来对比

1. 通过twitter网站的状态更新栏
2. 通过手机客户端更新(几乎囊括了所有手机版本,iphone,gphone,java,s60…)
3. 通过twitterFox在firefox浏览器中发布或者分享您正在阅读的文章
4. 通过gmail发布
5. 通过桌面小工具发布
6. 通过你的个人博客发布
7. 通过手机发送短信发布
8. 你可以任意使用twitter开放的API来构建适合于自己的发布平台

由于twitter的开放性，我们还能看到

1. 车载的twitter发布系统,可以随时发布汽车的位置
2. 面包店的twitter发布系统,可以让顾客知道店里还有什么面包,什么面包新鲜出炉
3. 停车场twitter,你可以随时获取该停车场的车位情况
4. …

这样对比之下，校内的微博客系统就显得着实很低能了…

因为当缺乏了便捷性的发布途径时，所谓的“状态”也就变得微不足道了…相应的，及时性也随之虚无缥缈了…

说了这么多，我们似乎偏离了一个重点，就是，SNS的根本到底是什么？

• 维护社会关系？
• 消磨时间？

很明显，大多数人都热衷于第二点…消磨时间

校内提供了强大的分享系统平台和应用平台，先说说分享系统…

每天我打开校内，看到的都是

• XXX 分享 XXX 的日志 XXXXXXX
• XXX 分享视频 XXXXXXXXX
• XXX 分享 XXX 的相册 XXXXXXX
• XXX 分享链接 XXXXXXXXX

这本来是一个很好的系统，但大多数信息对我而言都是无意义的，当一大堆无意义的信息充斥着我的屏幕时，我不会再去花时间去阅览，所以，我宁愿去一些聚合类网站，至少，被分享的信息不会重复，也适合我的胃口。

对于信息的获取，我认为指向性比随意性更为重要。

关于应用平台，我不得不承认校内抓住了一个时机，因为当校内开放API的时候，广大programmer编写web2.0的app的热情是无比火热的，这就使得校内瞬间充斥着无数的应用程序，而这些应用程序，多数是web game.

而我认为，web game对维护社会关系是无力的，但校内却乐此不疲的开放更多的API，甚至开始了所谓的open day，我很想说的是，把这个当做SNS发展的核心，是很不乐观的一件事…

而且当我看了校内的开发者协议(http://app.xiaonei.com/developers/appPrivacy.do)后，我只有两个字送个校内网…霸权…

好吧…我知道我有点过火了…最后再说说千橡吧…我们知道千橡旗下有两款SNS平台，校内网(xiaonet.com)和开心网(kaixin.com)，但这种抢正版开心网(kaixin001.com)的行为是很不可取的…你眼红可以，但请不要用这种卑劣的手段去限制竞争对手…

结语：校内是个好网站，至少他吸引了无数的人，但是它仍然需要完善，而不是现在大规模的转移发展重心，当一个SNS聚合了完善的系统体系的时候，才能说他是成功的，而校内应该更多的从用户的角度来衡量自己的行为，毕竟，以P2P为核心的SNS，是无法缺少用户的…

很不专业的Reference：

本文大多数概念性解说来自百度知道与wikipedia

部分资源来自于可能吧