豆瓣网UI结构风格设计亮点简要分析..docVIP

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