豆瓣人人比较施越锋、金海霞、陈佳

人人网与豆瓣网之比较分析
组员：施越峰
金海霞
陈佳浙江科技学院交互设计与用户研究实验室

一.页面风格
二.未登录时首页面
三.注册登录页面
四.登陆后首页面
五.个人主页
目录

一 . 页面风格
豆瓣网：简约素雅
人人网：页面比较复杂
目录

二 . 未登录时首页面
布局
视觉层次
导航条
登陆注册框
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. 大图上点击时，显示一只手，只能向下一张。

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

五 . 个人主页——好友
人人网 : 当好友在线，有比较醒目的绿色图标出现，可以和好友即交流。

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

五 . 个人主页——底部

豆瓣人人比较施越锋、金海霞、陈佳

Recommended

Recommended

More Related Content

More from ixdlab

More from ixdlab (7)

Recently uploaded

Recently uploaded (13)