人人网与豆瓣网之比较分析

组员：施越峰 金海霞 陈佳浙江科技学院交互设计与用户研究实验室

一.页面风格 二.未登录时首页面

三.注册登录页面

四.登陆后首页面

五.个人主页

目录

一 . 页面风格

豆瓣网：简约素雅

人人网：页面比较复杂

目录

二 . 未登录时首页面

布局

视觉层次

导航条

登陆注册框

LOGO标签

二 . 未登录时首页面——布局

两者都采用了相邻性和相似性属性

二 . 未登录时首页面——视觉层次

人人网：有广告，视觉被广告所吸引，具有不良好的视觉层次。豆瓣网：没有广告，具有不错的视觉层次。

二 . 未登录时首页面——导航条

相同点： 1. 在 TOP 部分 2. LOGO 处于最左端 3. 标签处于的右边

不同点： 人人网的标签列表属于动作列表。 豆瓣网的标签列表属于对象列表。

二 . 未登录时首页面——导航条—— LOGO

人人网：两个抽象的人字变形，图形、域名组合标志，有寓意。 豆瓣网：直接由中文和拼音组成，简单简洁，颜色丰富。

二 . 未登录时首页面——导航条——标签

人人网：鼠标经过，底色变浅，有提示，提示显得多余。 多处标签重复。豆瓣网：放大镜图片一目了然是搜索功能。 没有一个标签是重复的，比较简洁干净。

二 . 未登录时首页面——登录注册框

人人网： 1. 登录按钮与导航条颜色一致，说明其重要性。 2. 登录按钮在注册按钮之上，符合心智模型。

豆瓣网： 1. 注册按钮比重更大，不符合心智模型、视觉层次。 2. “ 忘记密码” 在密码输入框之后，符合心智模型。

二 . 未登录时首页面——登录注册框

人人网 : 登录有提示：邮箱、手机号或者用户名。用户会思考是用哪个 登录，甚至导致一定的错误 .豆瓣网 : 登录帐号就只用 Email ，用户不必思索，能够较顺登录。

二 . 未登录时首页面——登录注册框

目录

三 . 注册登录页面

页面具体分析

注册成功后页面

三 . 注册登录页面——页面具体分析

人人网 : 1. 背景图大 . 减慢网页打开速度。 2. 视觉被图片吸引，忽略注册框。 3. 注册页面不再有导航条

豆瓣网： 1. 几乎没有图片，视觉停留在注册框。 2. 有导航条。

三 . 注册登录页面——页面具体分析

两者左上方都有其各自的 LOGO:

点击人人网 LOGO ，返回其最初页面

点击豆瓣网 LOGO ，其进入用户登录页面。

三 . 注册登录页面——页面具体分析

人人网： 1. 开头是写明目的 2.“ 已经有人人帐号，请登录”被放在右上方，字小，与背景图片 混在一起，容易被人忽视。

豆瓣网： 1. 开头给人亲切感，字体大小有变化。 2. 已拥有账号在右边，字体比较小。

三 . 注册登录页面——页面具体分析

人人网： 1. 注册可以是电子邮箱、帐号、手机号。 2. 要求真实姓名。豆瓣网： 1. 注册时候只能是邮箱注册。 2. 豆瓣只需要名号，下面的提醒让用户感到更加亲切。

三 . 注册登录页面——页面具体分析

人人网： 1. 要求性别和生日 2.“ 立即注册”按钮缺少心理暗示。豆瓣网： 1. 注册用户则主要和地区有关。 2. 打勾才能进行注册，带给用户较好的用户体验。

三 . 注册登录页面——页面具体分析

三 . 注册登录页面——页面具体分析

当必填框里内容都没填写，并且点击了注册按钮的时候：人人网：只提示第一个框豆瓣网：提示所有的框。

当输入一个没注册过的邮箱的时候：人人网：在其后面打勾。豆瓣网：没有。

当输入一个注册过的邮箱的时候：两者都会在后面很明显的提示该帐号已经存在。

三 . 注册登录页面——页面具体分析

三 . 注册登录页面——注册成功后页面

人人网 :1. 页面东西太多 .2. 大标题显示，让用户误以为注册成功了。3. 邮箱与蓝色按钮，两者取一即可。4. 考虑了用户可能遇到的问题豆瓣网：1. 仍然很简洁。2. 大标题显示查收 , 注册率提高。

当登录出错的时候：人人网：红底黑字提醒。帐号和密码被删光，不便寻找错误。豆瓣网：保留 email 地址和密码，方便寻找错误。

三 . 注册登录页面——注册成功后页面

忘记密码的时候：人人网：响应式允许，显示步骤，但过程复杂，验证码多余。豆瓣网：很简洁明了。

在发送邮件的时候：豆瓣速度快于人人，用户体验不错。

三 . 注册登录页面——注册成功后页面

目录

四 . 登陆后首页面

布局和视觉层次

导航条

最重要版面

其他版面

状态回复新鲜事

四：登陆后首页面——布局和视觉层次

人人网登录后页面布局

人人网： 3 个面板。中间面板最大，显 示最多信息。 视觉会停留在中间面板上，其次左侧列表项。

豆瓣网： 2 个面板。左侧的面板最大。

两者的页面布局都符合一般的视觉层次。

四：登陆后首页面——布局和视觉层次

四 . 登陆后首页面——导航条

人人网： 1. 分成了三部分 . 2. 第一部分是 LOGO 。 3. 第二部分是全局导航。标签信息架构很混乱 . 4. 第三部分是动作或任务列表 , 较不重要。 5. 与广告混在一起，很不明显。

豆瓣网： 1. 有两条导航条。 2. 第一个导航条全局导航，是豆瓣最核心 . 3. 第二个导航条是登录帐号之后的全局导航，属于某种主题类

四 . 登陆后首页面——导航条

四 . 登陆后首页面——最重要的面板

人人网 :1. 三部分，状态输入框、好友新鲜事、 学校人气之星。 2. “ 更多新鲜事”采用了“需要时显示”模式，减少了页面 的长度。

豆瓣网 :1. 两部分，欢迎词和用户所关注发生的事情。 2. 顶部采用全局导航，底部采用序列地图模式，方便用户跳转。

四 . 登陆后首页面——最重要的面板

人人网：右边有按钮可以进行设置，可以选择新鲜事，比较人性化。豆瓣网：没有。

四 . 登陆后首页面——最重要的面板

四 . 登陆后首页面——最重要的面板——状态框

相同点：状态发布框的颜色上和自身主色调一致。

不同点：人人网： 1. 框里有字，加强了互动性。框下显示上一条状态及时间。 2. 发表状态的时可添加表情，视频，图片，链接。

豆瓣网： 1. 用 “我说”显得更加简洁易懂。 2. 只能添加链接。 3. 状态显示在左栏，没有时间，缺少了趣味性。

四 . 登陆后首页面——最重要的面板——状态框

四 . 登陆后首页面——最重要的面板——回复框

人人网：回复状态直接点框就可输入内容，还可以转发。豆瓣网：需先点击回应，再输入内容。

四 .登陆后首页面——最重要的面板——新鲜事

人人网： 1. 右边的按钮，是“需要时显示”模式。 2. 显示较准确的时间，并且有收起回复，分享，赞标签， 加强了互动性。

豆瓣网：时间较不准确，没有什么互动性，除了链接。

相同点：两者新鲜事都是按照时间来排列的 .

四 .登陆后首页面——最重要的面板——新鲜事

四 . 登陆后首页面——其他面板

人人网 :有很多其他内容，包括用户基本信息，对象列表等等。

豆瓣网 : 简单，只显示我关注的人和小站。

四 . 登陆后首页面——其他面板

目录

五 . 个人主页

布局

导航条

个人信息

对象列表

好友

底部

日志相册

五 . 个人主页——布局

人人网 :3 个面板模式 .

豆瓣网 :2 个面板模式 .

五 . 个人主页——布局

五 . 个人主页——导航条

人人网 : 1. 由对象列表构成，全局导航，采用单窗口深入模式， 2. 标签颜色和边框变化让用户明白所处的位置。 3. 有一定的互动性。

豆瓣网 : 1. 显示小头像，大头像冲突。 2. 导航条是由对象列表和动作列表构成，采用单窗口深入模式， 导航条的结构是“中心和辐条”。

相同点：两者导航条上都显示了最近的一条状态 .

五 . 个人主页——导航条

五 . 个人主页——个人信息

，

人人网： 1. 个人信息较丰富 . 2. 点击换头像来换头像 , 有照片 或大头贴的选择 . 比较个性方便。

豆瓣网： 1. 显示常居， ID 和加入时间显得多余。 2. 头像附近留有大量的空白，不能编辑，浪费空间。

五 . 个人主页——个人信息

五 . 个人主页——对象列表——日志

人人网 : 左右都显示了最近的日志，显得多余。

豆瓣网：就只在中间显示了日志，较简洁明了。

五 . 个人主页——对象列表——日志

五 . 个人主页——对象列表——相册

相同点：都采用了“序列地图”模式。

不同点：人人网：跳转页码有上下两个，处于图片的右边。豆瓣网：跳转页码只有在最底下一个，处于中下位置。

人人网的更加像一个跳转页面。

人人网： 1. 导航条采用 “面包屑层级结构”。 2. 有许多个性化的项目。 3. 左上部的评论和赞与底部的重复。 4. 有预览框，大图点击的时显示箭头来表示往前后。

五 . 个人主页——对象列表——相册

豆瓣网： 1. 采用了全局导航。 2. 没有预览框。 3. 大图上点击时，显示一只手，只能向下一张。

五 . 个人主页——对象列表——相册

人人网：具有“赞”“举报”“回复”几条，不仅可以和楼主交 流，也可以和评论用户进行单独交流。豆瓣网：没有以上功能，只能逐条回复。

五 . 个人主页——对象列表——相册

五 . 个人主页——好友

人人网 : 当好友在线，有比较醒目的绿色图标出现，可以和好友即交流。豆瓣网：没有。

人人网：这一栏，可以及时得到好友回复的消息，方便回 到顶部，进入应用。当好友回复，有声音提示伴随着页面的闪动。

五 . 个人主页——好友

五 . 个人主页——底部

THE END