豆瓣人人比较 施越锋、金海霞 、陈佳
TRANSCRIPT
人人网与豆瓣网之比较分析
组员:施越峰 金海霞 陈佳浙江科技学院交互设计与用户研究实验室
一.页面风格 二.未登录时首页面
三.注册登录页面
四.登陆后首页面
五.个人主页
目录
一 . 页面风格
豆瓣网:简约素雅
人人网:页面比较复杂
目录
二 . 未登录时首页面
布局
视觉层次
导航条
登陆注册框
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