这两天正好在看《网站界面设计》一书，这本书，也是我首次接触比较系统的介绍界面设计理论的书，书中对界面的可用性设计原则、交互设计、呈现设计以及网络广告设计四方面介绍的很系统很详细的介绍，而且书中包含了大量的实际案例分析，看后收获很大。于是，最近一直想找个界面来练练手，刚好taobao的首页进行了新一轮的“胖身”改版，就全当成学习来，来分析一下Taobao的首页界面改版评测：

首页是网站的大门，用户从这里进入网站，又从这里进入到网站的各个频道和内容，首页是用户的主要集散地，他的呈现和侧重点直接决定了网站的导向，对于用户来说，首页是导航，对于网站来说，他相当于目录和发布区，对于活动以及商家，他又是广告。平衡三者的关系是首页设计的重点，网站的首页和栏目页体现了网站的主旨以及特色，把流量引向网站最重要的地方，这一方面来说，Taobao的网站改版还是达到要求了。

首页的基本设计原则：

（1）首页上最显著的设计元素之一应该是公司网站的名称，让用户知道他来到了什么地方。

呵呵，这个很明显，TAObao的LOGO依旧放在左上角最显眼的地方。

（2）首屏需要体现最基本的用户任务，即70%以上目标用户需要使用的功能和网站的主推的服务，需要将两者巧妙地结合在一起，引导网站流量。

 Taobao是一个C2C的网站，用户上网主要来淘自己喜欢的东西，所以搜索是他最重要的入口，这里淘宝的首页把搜索的设计很显眼，也很人性化，只不过不知道为什么右上角上方也有一个搜索，虽然搜索很重要，但是太多相似的信息会不会令用户感到迷惑。

（3）首屏需要传达足够的信息，以让用户感受网站内容或功能的丰富。

这个看看后面密密麻麻的宝贝类目，就能感觉到，不过这个也是最最困难的，信息多了，要如何安排，安排不当，就容易造成信息的杂乱无章，让用户迷失导向，不过这里这个处理的还可以，一些重要的常用的用不同颜色处理，各个类目用不同的背景区分开来，相对信息还是比较清晰。只是他的背景背景感觉应该用橙色系的色度比较淡的来做背景，这个整体的有机型会强一些。

（4）首屏需要体现网站的更新，体现网站的活力。

淘宝集市；品牌商城，二手闲置。类目的右侧，全球购和促销区的领地，尤其是新增的促销区域，这些动态的数据更新，相信已经足够体现了这个中国最大的C2C的活力，这一版，也把这些强化了不少。

（5）首页的设计能够引人注目，能够让目标用户过目不忘，并对网站形象产生良好的准确的认知和记忆，就设计和视觉而言，用户所希望的是：布局整齐清晰，板块明确，色调不要让眼睛疲劳。

这一块，感觉改版後，板块比原来清晰不少，整个网站的架构也更明了，设计上更加大胆，色彩依旧保持鲜艳为主，刺激用户购买欲望，还是保持原来的主色调，毕竟也是一个企业色，但是个人感觉用色还是有点杂，有点很强烈的对比，让用户感觉心理很不舒服，

（网页页面的颜色跳跃会不会太突然了些，虽然这样可以强调公告信息，但是，感觉不是很和谐~）

（整体的色彩过于混乱，按照我个人的理解，taobao的主题色应该是橙红色，但是，感觉整个页面中，蓝色跟橙红比重相似，从上来拉下来，感觉进入两个世界，感觉整体性不是很好~）

 （6）首屏需要较快的下载，因此网页顶端需要减少图片，减少表格的复杂性，保证表格横切的可能性以加快下载速度。

这个个人感觉淘宝的导航虽然设计的很漂亮，但是经常打开后圆角丢失，或者背景图片没现实出来，不过好在导航文字能很快出现，但是过多的图片还是影响了用户对网站整体的感觉，还有个问题，也是关于页面下载速度的，公告栏以及中间的图片广告的背景，好像是深色的粉红，在页面下载之前很刺眼，但是最后有出现清淡的板块，感觉用户心理变化很大，这一块的背景设置应该还是以淡色为主，虽然用户最终影响不大，但是，速度慢的时候，还好思很明显的。

（7）对于商业网站而言，首屏需要考虑广告的位置和呈现。

这个不要说了吧，眼球最中间就是三幅翻动广告， 广告鼠标放在下面数字上会出现相对应的图片，下面对应的数字会变大，背景变难，以前面区分开来，这个让用户有控制权，让用户掌握所有操作的主动权，感觉产品是为他服务，广告也是自己需要的，广告虽然对网站的生存很重要，但是Taobao的广告还不是很令人讨厌，已经成为首页设计的一分子，这方面他们处理得很不错。

Taobao的首页改版，整体来说还是很成功的，功能板块比之前清晰了不少，立体感也强了很多，给人感觉很好，之前的页面感觉信息有点匮乏，而且信息冗余很多，经常进来，就陷入迷失状态（会不感觉有点马后炮的感觉，呵呵，不过这的确是我的最初的感觉：）），首页信息的杂乱，影响了用户最网站忠诚度，现在的改版，整体感觉更清新，页面功能也更明了，对用户的操作也有一定的引导性

整体来说，个人感觉改版还是非常成功的，至少在一定程度上我在首页关注的时间比以前多很多，很多有用的信息，在首页就能找到。目前还在学习相关理论，等书全看完了，再过来分析一下～

原文：http://www.onling.net/blog/?p=988