用户体验设计哪家强？坐看人人网4 : 3绝杀Facebook！

编者按：独立客观第三方的网站评测比赛开始了！本场擂主是坐镇国外的Facebook，踢馆者是曾叱咤大学的人人网，笔者@AnyForWeb_UED 将从7个方面对两个网站进行具体细致的用户体验设计评估，不多说，一边看比赛，一边学设计 >>>

Facebook

全球知名的社交网络媒体，被大家亲切的称为“脸书”，但在中国大陆地区不幸被屏蔽。（梯子：微盘下载）

人人网

曾经在中国的学生界一度风靡，最近传出站内信功能下线的消息，不免有引起了一阵感慨。

但这里我们抛开其他，只针对两个网站的用户体验设计进行分析比较，并且只在设计领域中找原因。很多声音直指人人抄袭Facebook，但如果能在“抄”的过程中扬长避短，更加符合用户的使用体验需求，那“抄袭”倒也不算一件坏事。

脸书 vs 人人

Action！

1. 顶部水平导航

人人网：

人人网的顶部水平导航由两个部分组成，有提醒功能和无提醒的板块被区分开来，分类因此变得特别详细，始终展现的分类是个人主页、付费服务和设置；而可隐藏部分的分类是通知、好友和会话。

基于用户体验的角度，让“付费服务”和“设置”始终展现显然存在一些问题，如果能将用户使用频率最高的板块放在最易于点击的位置是不是更好？

Facebook：

导航内容板块与人人网基本相同，但不同的是，脸书导航的主次顺序排列的十分清晰。从个人主页到搜索好友，这些内容都是用户在使用过程中真正需要的，而被弱化的好友请求、收件箱、通知、隐私设置和设置都被移到了最右侧，并且在点击时不会产生页面跳转，为用户的使用提供了便利。

Winner：Facebook

2. 侧边导航

人人网：

侧边导航显示的大多是一些比较细节化的靱相关的内容分类，人人网这部分的用户体验还是不错的。导航固定在页面最左侧，分类页比较明确，并且实现单独滚动，不影响用户的浏览效果。

Facebook：

脸书的侧边导航分类也比较明确，所有的条目一目了然，很有效的减少了用户的思考时间和不必要的多余点击。

Winner：平局

3. 搜索功能

人人网：

人人网的搜索模块具备自动检索和筛选功能，涉及的维度也比较宽泛，不止有常规的还有专页，也包括了关键词所在的分享内容。

Facebook：

脸书搜索功能的用户体验看起来并不好。相关内容的联想是如今大多数搜索框都具备的功能之一，脸书当然也不例外。但联想结果并不一定是用户需要的内容，因此，默认第一条结果就是用户所需显然不恰当。如果用户希望搜索自己输入的内容，那就必须通过鼠标点击右侧的“放大镜”，回车能带来的只是搜索第一条联想结果。这个步骤在无形中增加了用户在页面中的操作。

Winner：人人网

4. 好友推荐

人人网：

如果仅仅是好友推荐，也许这个模块不会对用户产生任何作用。所以，人人网在这其中加入了共同好友的查看功能，正是这样一个小细节，让网站的社交体现更加明显。“更多”按钮可以减少不必要的好友显示，引导用户点击查看所有的相关好友。

Facebook：

脸书的好友推荐占了整个页面的很大一部分，但是所展示的信息量却很少，并且板块存在重复出现的现象，会让用户的浏览逻辑产生混淆。

Winner：人人网

5. 聊天功能

人人网：

人人网身为一个社交平台，聊天功能并不是一个很重要的环节，因此只要基本满足用户需求即可。聊天框可以任意调整尺寸大小，界面清晰简单，具备个性化的提醒功能。

Facebook：

脸书的聊天板块功能一应俱全，有新消息会自动弹出，但这样的用户体验并不适合社交媒体更像一款小型的聊天软件。在平台产品的设计中，不是所有的功能都越完善越好，而是应该根据实际情况，酌情设想所有的板块。

Winner：人人网

6. 新鲜事

人人网：

人人网在新鲜事的设计上存在的最大失误在于，新事件右上方的“消息设置”和“隐藏”按钮距离太近，很容易造成用户的误点。同时，隐藏按钮的文案表述不准确，“标记为已读”会让用户产生歧义。

Facebook：

脸书的新鲜事用卡片式设计展现，让网页条理更加明确。新事件右上角的下拉菜单在同一个分栏下，清晰易懂，语言直白。

Winner：Facebook

7. 个人主页

人人网：

Timeline的个人主页展现方式是受到大家广泛认可的样式之一，人人网通过改版也实现了。社交平台有时也被作为个人的成长记录，而时间轴恰如其分的满足了用户的这一需求。另外，个人主页中导航的自动收放和变换也是网站用户体验的表现之一，该导航会根据屏幕当前所示内容的不同实时更改。

Facebook：

脸书的个人主页不仅有Timeline模式，也提供比较传统的简介模式供用户自行选择。国外的社交平台普遍比较注重个性化，任何事物都希望实现根据个人使用习惯来搭建。这一理念在脸书的个人主页中也有体现，每个版块基本上都能按照自己的喜好调整和设置，让用户在使用过程中保持最舒适的状态。

而在个人主页的导航部分似乎没有体现出这一理念。导航采用了跟随的形式，面积虽然不大，但却阻碍了用户的浏览视线。

Winner：人人网

8. 广告

人人网：

在网页中，广告的位置分布很重要，而人人网将广告主要放在首页和添加好友的页面，从用户角度来说其实并不好，尤其首页。首页上的内容可能是整个网站中最多的，在此基础上加入广告是在不是个好的选择。

Facebook：

最高明的广告就是让用户不觉得这是广告。要在硬广中实现这一点并不容易，但脸书在渐渐地想这个目标靠近。脸书在不同的页面上推广不同类型的产品，这样的广告更加有针对性，减少了原本很浓重的商业色彩，用户可能更愿意阅读。

Winner：Facebook

总结：

人人网4：3 Facebook！

这样的结果可能会让一些用户出乎意料，但是这证明了，本土化的产品更适合我们的使用习惯。Facebook之所以最终无法在中国实现本地化，一大部分原因也许正是源自于用户体验的缺失。

脸书和人人对各自的用户群体都有着很大的影响力，由于两者之间的许多不谋而合的共同点，“人脸”之间的PK战从未停止过，无论从理念、运营、界面、还是设计，他们的关系“剪不断，理还乱”。

【下个挑战书！Facebook设计总监有话说】

总监的职场沟通技巧三部曲：

《写给设计师：如何与工程师一起工作》
《写给设计师：如何与产品经理一起工作？》
《写给产品经理与工程师：如何与设计师一起工作》

告诉大叔！那个让你改稿的人是谁？！
《谁逼走了优秀设计师》

投稿者：@AnyForWeb_UED

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量90万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
官方微信：想在手机上、被窝里获取设计教程和各种意想不到的"福利"吗？添加优设哥微信号：youshege