文档介绍：该【UED 豆瓣的UI结构分析】是由【小辰GG】上传分享，文档一共【5】页，该文档可以免费在线阅读，需要了解更多关于【UED 豆瓣的UI结构分析】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。布局+色系+样式+页面长度+广告系统+浏览器关系+载入和刷新速度+SEO
--------------------------------------------------------------
题记:
也许豆瓣的“成功”并不是基于它多么优秀的视觉体验,但是,但凡“成功”的产品
都需要有与之匹配的必不可少的视觉体验。
PS:因网站构成等比较繁杂,故只对网站的部分UI作简要分析。
--------------------------------------------------------------
UI结构:
:
主要集中了一些“公共”模块:小组、读书、电影…
便捷的“嵌入”搜索功能:
在一级横向分类栏中的右上方“嵌入”搜索功能,并在搜索框中
显示搜索内容(书籍、电影…)提示,搜索按钮右的边▼亦可以
选择限定的搜索内容(限定在书籍、电影…中搜索)。
把页面中的“搜索功能”拷贝到一级横向分类上,方便了用户随时使用。
-1-
:
完全的个人模块组合。
集中常用的个人模块:
“豆邮(相当于消息、信箱之类含义),即‘豆油’的谐音”、“***的
设置”、“退出”3个经常使用的模块被安排在二级横向分类的右上方,
亦很方便用户的管理和使用。
--------------------------------------------------------------
UI风格:
:
最早见到豆瓣的时候就对它“叛逆”的色彩风格所吸引,那时候大多数网
站的标准色是喜欢用“大红、深蓝”等明度和饱和度(纯度,下同)都比
较高的色系,典型的例子就是“百度”。
豆瓣的标准色系使用的均是系统调色板中“色值”靠中间的色彩值,明度
和饱和度都比较适中,通俗的说法即是比较“素雅、柔和、简洁”,这样
的色彩取值当然是有一定的道理:
在用户长时间停留和频繁访问的网站
中,色彩明度和饱和度比较低的取值有
利于缓解用户的视觉疲劳,对用户的心
理感受亦会产生影响,甚至逐渐会影响
到用户的情绪和行为。
-2-
曾有人做过这样的测试:让一个人在一个四周全为红色的房间里呆上一段时间,结果很
快被测试人员就发生了很大波动,表现出急躁、焦虑、甚至抓狂等不稳定情绪。
故网站色彩的取值(标准色)对网站长期的品牌塑造有着潜在和不可替代的影响。
Tab栏和页面中模块的背景色亦是柔和的色彩取值:
:
豆瓣页面内的链接样式相对于其它大多数网站有着比较大的区别,在
CSS中可统一页面的链接样式,除了正常的link是使用豆瓣自己标准色
中的几种颜色外,在hover、active、visited中色彩的取值亦有规范的讲究
正常状态/normal:鼠标激活状态/active:
鼠标经过状态/hover:已访问过状态/visited
-3-
-------------------------------------------------------------
设计亮点:
:
怎样的用户体验才易于被用户接受并喜爱呢?以下例子似乎可以回答:
表情符号(︺、:))的使用,可以大大拉近和用户的距离,使之产生
亲切感。
:
在内容输入框键入文字待发表时,一般性网站使用含“发表”之意的词汇
时,大概有“确定、发表..”而豆瓣使用的却是紧贴主题的用语:
:
这样的设置不需另开窗口(对单页面/标签浏览器IE6等方便
了很多)在页内即可展开阅读,Ajax技术的使用大大减少了
用户的交互环节,提高了使用效率。
-4-
--------------------------------------------------------------
结语:
前面说过也许豆瓣的“成功”并不是基于它多么优秀的视觉体验,也许是基于
它那丰富的“内容”和用户的粘性,优质内容的吸引力或许谁都想象不到它有
多么强大,但只要能吸引住用户的内容或许已经足够,毕竟生存在这个地球上
的人类除了衣食住行,还需要那丰富多彩的精神谷地需要去耕耘和呵护。
也许豆瓣正是基于这样的用户需求而诞生的,但不管怎样,无论是基于内容还
是基于用户关系,都需要有与之匹配的视觉化用户体验,
也罢,没有好的用户体验,最终很难留住越来越挑剔的用户。
-5-