从百度百科改版,看百度Web UI未来发展趋势

lemonzq

百度百科于2008年4月21日正式上线—— 首先恭喜“百度百科”终于把“测试版”的帽子摘掉啦！
百科地址：http://b.baidu.com （大伙可以先去体验下，再看此文！）

自2006年4月“百度百科”推出公测以来，其团队一直在不停的完善着百科的产品体验……2年后的今日，终于，百度百科正式版上线，引起很多wiki爱好者的瞩目。网站每一次重大改版，在体验上给人带来惊喜的同时，也制造了一些困扰，这都是不可避免的，百度百科也不例外，此次变脸在用户体验上是否成功呢？

带着这个问题，我们来看一下百科是如何从雏形走向成熟的！


初出茅庐的百科


昨天的百科


今天的百科


从上图可清晰看出百度百科的Web UI在上线前后判若两站，其风格鲜明，和其他百度web产品的UI截然不同。究竟是什么让百度的UED team下此决心动这么大的外科手术呢？Raymond不得而知，但可以肯定的是——这次百科改版对于百度WUI团队今后的设计风格影响意义重大，树立了百度UI的里程碑，而此后的UI风格表现上是否会朝着更多元化，更细腻的方向上走，有待时间考验，但至少这种尝试是值得推崇的，仅此颇让人欣慰。

新版上线后，视觉体验上也会存在一些多多少少的问题，Raymond的观点有以下几个：
一 增删

删：删掉了百度百科的简介（估计百度认为是用户对“百科（baike）”两字的品牌认知度已经完全理解，就像百度的mp3栏目,不会放“什么是mp3”一样的问题）

增：图片的数量和密度比以前明显增多。
一屏内的“精彩词条”栏目的中下部位还安置了“图片滚动栏”，此举在wiki网站中非常罕见，猜想其目的是使“百科”到的内容更视觉形象化。但代价有三：版式乱，无重点，不明晰。

（1）版式乱: 看起来累眼，参考Tony的网站的视觉路径和版式设计，不再冗述。
（2）无重点: 愈想使每个图都醒目，其产生的结果是每个图都不醒目（还是那句老话 —— 花多不艳）。
（3）不明晰: 用户在浏览此处的时候，不明晰此图是何含义，就算由于好奇而产生的盲目瞎点，其结果必然是迅速关闭。

然后将鼠标拖动至二三屏，”按开放分类浏览“，优质词条，待完善词条等栏目排列整齐，结构明晰，感觉还是蛮不错的。

调：链接字体颜色调整的更加柔和。
新版链接字体用的颜色代码是“r 51 g 102 b 204， #3366CC” ，而非使用百度的默认字体色“R 38 G 38 B 220 #261CDC”，这使链接看起来不那么刺眼。

二 导航栏

UE方面做的最大的调整，莫过于增加了二级导航栏。
意在突出3大入口：
1.尝试编辑实验（不会用百科的新手）；2.开始创建新词条（掌握技能后的进阶用户）；3.参与完善词条（对词条功能熟悉的老鸟）。
初衷是好的，可导航栏的设计和内容栏的UI元素明显不太搭，导航按钮也首次采用48×48的大图标按钮（这好像印象中是百度首次在其子栏目的导航栏里采用这么大的图片按钮吧？之前一直是”文字按钮“）。每个按钮的单独看细节表现的确棒，但放在整个页面中看，导航的过多修饰，让整个页面有一种头重脚轻的感觉。
三 阅读情绪的转变

新版所营造的娱乐性体验更强一些，而国内其他wiki网站的则比较简约权威。改版后色彩更艳丽，一屏内使用了大面积的过渡色，模块的边角修饰使用的是圆角，而非方角……等诸多细节，在很大程度上使用户的阅读情绪发生了很大改变，莫非是想让百科的用户们也High起来？ 这就说回到百科的用户群。我们来分析一下这部分人来这的目的是什么？是来玩的？还是目的性很强来学知识、解疑惑的？

我觉得可能是后者居多吧，那为何要费功夫做这么多花哨且不实用的装饰呢？



原文地址：http://www.ueui.com.cn/user-expe ... ike_new_layout.html

2008bee

老实说，没什么特别或是说叫人亮眼的地方，一家似一家的。

Lushnis

我不觉得这是“走向成熟”

shulin

不管怎么说，比之前的是进步了~

shaohua162001

感觉很乱
我喜欢昨天的百科

feixue99

我想这是符合国情的,就像中文版本的阿里巴巴和英文阿里巴巴的区别，只要用户喜欢，在经过观察，中国用户还是喜欢“花哨”一点点的界面吧

dafenqi

恩，确实太花哨了，引用你说的 —— “花多不艳”！

zaku

图片滚动那部分有待商榷.
其他我感觉在UE上更进了一步,有些不错的做法.
在上面的导航,把用户来到这个页面可以做什么指示的很明确!

cuikai

个人感觉还可以，至少比以前的页面有所提高了。

lemonzq

原帖由 [i]cuikai 于 2008-4-23 23:34 发表
个人感觉还可以，至少比以前的页面有所提高了。

-
可问题是这部分用百科的用户 去百科的目的是什么？是去娱乐的？还是目的性很强来学知识、解疑惑的？

太丰富花哨的页面，看久了往往会产生视觉疲劳的。

我们是需要一个好看的百科？
还是需要一个好用的百科？

aimyu

同意楼上，貌似这一版更注重娱乐，对更快速让用户完成任务的原则来看，百度的这一版更愿意将用户的注意力停留在百科的主页上，而不是快速执行下一步任务上。推荐词条如此庞大的放在上面，以至于小分辨率用户不得不以下拉滚动条的形式来寻找他的目的分类。而且下面的二级导航虽然好看并引人注目，但是却减弱了对用户来说最重要的搜索功能的视觉点，突兀了不少，看上完全是两回事儿。

welcome58

感觉一般，并不是加了一些美术效果就叫完成了ＵＩ设计
头部搜索那一块为什么不处理一下，感觉和下面格格不入
另外，有几处可能是技术原因，处理的不好，一个是图片滚动有点“卡”，另一个是上方“开始创建词条”那三个大按钮上指效果把下面切了一小半（我用ＩＥ7）

cvvi

无聊

百度一直是这样的UI风格，beta到正式版的界面更改，不代表百度UI改了

cvvi

又看了一下 还是觉得楼主太无聊

楼主知道百度UI的核心的东西表现在哪么？

有空去研究百度：文本的色彩、字号、行高的高度统一；
以及界面色彩饱和度的研究；
以及排版布局的研究；
以及广告设计的特点。

楼主文中提到很多产品设计的更改， 提到很多交互设计(ue)的更改， 跟UI有个屁关系。 误导人

dafenqi

原帖由 [i]cvvi 于 2008-4-25 17:10 发表
楼主文中提到很多产品设计的更改， 提到很多交互设计(ue)的更改， 跟UI有个屁关系。 误导人

从楼上的回帖可以看出你的无知，起码是对用户体验方面的无知，楼主请原谅他吧……

1，交互设计的英文所写是（IA） 全称是Interaction Design ，不是你所说的（ue）
2，你竟然说产品设计和交互设计以及UI没关系？？？ 这里90%的讨论都是在围绕怎么让网站设计的更人性化一些，对于你的回帖……无语了，希望楼主给他普及一下这方面知识吧！

另外，请别把“无知”当个性~·

aimyu

那楼上的你所知道的百度UI的核心表现是那那里？

百度作为中国搜索行业的老大自然有自己的一套WEB执行标准。这也并不代表楼主就没有研究过。

另外我觉得UI/UE不应该被分离的，可以说UE决定了UI的表现形式。

如今的WEB的设计不是好看就能成功的。

iswhat

aimyu，一句忠告……不管你出于何种目的，打击别人永远抬高不了自己！
蓝色里面讨论是可以的，但如果人身攻击的话，你可能会被删帖哦。

lemonzq

原帖由 [i]iswhat 于 2008-4-25 01:58 发表
aimyu，一句忠告……不管你出于何种目的，打击别人永远抬高不了自己！
蓝色里面讨论是可以的，但如果人身攻击的话，你可能会被删帖哦。

to iswhat：
你说的是cvvi吧，估计你是把id打错了 ……我以前也被删过帖子，导致禁言，所以删帖就不要了吧...用户体验版是需要些不同的声音，这样才能比较好的发展下去。

to aimyu：
应该是"蓝带鱼"吧，ID好眼熟（好像在白鸦的博客上见过）,欢迎！

to cvvi：
你的讨论说明了对用户体验版的关注，当然也表示欢迎。
另外我想解释一下几个概念：

15楼说的很对，交互设计的英文是IA。
UI 即 User interface。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系，所以这样可分为3个方向，他们分别是：用户研究、交互设计、界面设计。

1用户研究。

用户研究包含两个方面：一是可用性工程学（usability Engineering），研究如何提高产品的可用性，使得系统的设计更容易被人使用、学习和记忆；二是通过可用性工程学的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法（consumer insight）。所以有：Usability is all about making things easier to use so people can focus more on the work and less on the tools that help them do the work.

用户研究是一个跨学科的专业，涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等等学科。用户研究技术是站在人文学科的角度来研究产品，站在用户的角度介入到产品的开发和设计中。

用户研究通过对于用户的工作环境、产品的使用习惯等研究，使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。

他是得到用户需求和反馈的途径，也是检验界面与交互设计是否合理的重要标准。

2交互设计。

这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。所以，很多的软件虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，学习困难。使用这样的软件后，不是使人聪明与进步而是让人感到愚弄与羞辱。许多人因为不能操作电脑软件而下岗失业，这样的交互使电脑成为让人恐惧的科技怪兽。于是我们把交互设计从程序员的工作中分离出来单独成为一个学科，也就是人机交互设计。他的目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。

3 界面设计。

在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。


而 WUI 即 Web User interface（网站界面设计）更是和“交互设计”密切结合，所以如何评断一个网站是否成功，不一定是它设计的有多好看，而是说是否好用，以及它设计的每一个元素是否能表达确切的含义在里面（这也是在我看来——百度百科的UI这次改版不是很成功的原因所在） —— 正如“Aimyu（蓝带鱼）”的16楼所说的：（UI/UE不应该被分离的，可以说UE决定了UI的表现形式）。

关于“用户体验”这方面在这两年提出了许许多多的概念，从最初的UE（也有人叫UX）到IA到UCD……，每一次的提出，在行业内都引起不小的争论，有些时候外行人是搞不清楚这帮人到底是在做什么的，所以我建议你看一下 我转帖的《谈谈天极产品设计流程》，或许对你有所帮助.

引用你所说的“有空去研究百度：文本的色彩、字号、行高的高度统一；
以及界面色彩饱和度的研究；
以及排版布局的研究；
以及广告设计的特点。”

望能发帖谈出自己的看法和见解，和大伙一起分享你的成果。
如果您说的有一定价值，会被加分鼓励，当然也对您的发帖表示感谢！

[[i] 本帖最后由 lemonzq 于 2008-4-25 03:43 编辑 ]

90box

感觉并没有叫人眼前一亮的感觉...
设计的蛮普通的～

风解我衣

今天的百科看上去是面对中级用户的，昨天的百科更面对初级用户，百度是不是觉得大家对百科很熟悉了，昨天的好。

Missx

反驳一下。
一个网站多好看和多好用是可以分开的。
早期的网站注重实用型，而到了个人时代注重个性化是没有错的。好看的网站不一定好用，但是他可以吸引别人的研究。
最重要的是分清楚网站的类型，在好看和好用当中寻找一个平衡点。

lemonzq

这是一场关于界面的 Usability（易用性） 和 beautiful（美观度） 的斗争。

如果说网站是一部电影的话。

设计师在里面扮演了一个导演的角色，他是一双眼睛，将自己主观感受到的表现给用户，去告诉用户那些重要，那些是次要的，网站的内容等都是剧本，色彩、布局、图标都是演员，什么样的剧本，决定选什么样演员，什么样演员，决定了整个电影的情节和基调……

任何设计师或站长都想将网站做的既好看，又好用，但这个平衡点很难掌握，有时这两者是相互矛盾的。
而我的观点是看目标用户是怎样的……

如果目标用户是一些摄影师或艺术家或设计师等，他们需要更强烈的感官刺激，色彩对于他们是第一位的，所以界面的元素可以更流行，更娱乐化一些。（还有譬如一些设计类博客，那尽量酷，炫，因为他们想让别人看到更多的是图，而不是文字，所以“好看”大于“好用”）

但如果目标用户是一些需要依赖文字阅读，从而获取知识的人们的话，过多的花边和美化多少是会影响用户去从网页中提取有价值的信息，从而分散他们的注意力，降低他们使用这个网站的效率。

所以我很认同你的观点——“最重要的是分清楚网站的类型，在好看和好用当中寻找一个平衡点”。

[[i] 本帖最后由 lemonzq 于 2008-5-2 03:16 编辑 ]

ccboy126

真不觉得有啥亮点的。

simplewebs

楼主很细心

个人喜欢以前的百科的风格

joymv

百科不咋的..

hivaness

不过不得不承认，这方面一直在进步

Vinye

编辑掉，
不熟悉百科，对比了下昨天的百科，感觉只是增加了花哨程度。稍微引导了下大家参与进百科而已

[[i] 本帖最后由 Vinye 于 2008-5-6 12:54 编辑 ]

womoyuyan

但是为什么，百科首页的界面和 内页的差距那么大
感觉不是一个风格的

lxl205

感觉第一版的最百度

fengtongxue

百科最终是丰富大脑，好看一D，也会让浏览的人心情愉悦，一举两得，何乐而不为？

我很喜欢百度的新界面，我只是一个想在百度百科那里阅读的人，无想过要去编辑的……