在淘宝首页努力精简化的时候，淘宝商城的首页依然臃肿，导航臃肿、分类臃肿、商品信息臃肿。犹如国内门户网站一样，恨不得把所有内容都搬上首页。

琳琅满目的商品，花花绿绿的图片。适合无聊闲逛的用户，但却不适合有着明确目标来购物的用户。

淘宝商城这次的新版相对来说则显得更专业，更有B2C商城的味道，虽然本质上其仍然只是个C2C平台。

新版淘宝商城最大的改变当属导航部分的设计，原淘宝商城的首页有众多的导航，头部的大分类导航，中间的类目导航，下部的每个大类目下的细分类目导航，还有头部的搜索（从另一种意义上讲，搜索也是导航的一种）。整个页面中充满了导航，而在这些导航中，大部分都是重叠的。而在新版的淘宝商城中，关于导航这一块则是相当的简洁清晰，只剩分类导航以及搜索，这两个导航处于同一等级上。

而让人无法理解的是，淘宝商城首页的布局采用的是自动伸缩的，限定了最小宽度却没有取定最大宽度，当屏幕分辨率足够大的话，两个商品之间的间隔不敢想像，下图是我在1280分辨率下的截图：

清晰的结构，合理的分类，突显的商品。新版的淘宝商城是个值得学习的好设计。

淘宝商城旧版截图留念：

打开手机频道页面上的最终资讯内容页，在面包屑导航上出现的频道名称叫“手机数码”。手机与数码，到底哪个类别更大？难道两个是平级的?!当然这其中不排除一个原因，那就是“手机”这个名称的认知度要广于“数码”。

2、手机频道里的最终资讯内容页上面的面包屑导航是这样显示的：

但点击“导购”这个链接转到上一级页面时，却发现这个面包屑导航变成了下面这样的：

这个页面本身已经是“导购”的文章列表页了，可是“导购”却仍是个可点击的菜单，难道“导购”这个页面里除了文章列表还有其他的栏目？至少到目前为止我是没有发现！而且这个问题在其他频道资讯页里都是存在的。

最让人不解的是，当点击“淘宝资讯”时，跳转到的页面竟然是淘宝首页！同样的一个页面在两个导航中的名称却是不一样的，一个叫“淘宝资讯”，另一个则叫“淘宝网”。

关于淘宝首页，在全站的面包屑导航里还有另一个名称——淘宝首页。

3、如果说点击淘宝网首页导航上的“淘宝商城”栏目时采用的是弹出窗口还能理解的话，那点击导航上的“机票”跟“彩票”也是弹出窗口就让人不能理解了，而且这个弹出窗口不仅仅只是在首页导航上，在其他栏目页面的导航上也是弹出的。

暂且不说这个弹出不弹出的问题，进入机票频道时，主导航上显示的名称是“机票/酒店”，但仅仅只是在导航上将当前栏目的字体变了颜色，却没有像其他频道一样给出更加明显的区分。更让人不解的是，在这个频道首页竟然还有面包屑导航！面包屑导航上的栏目名称竟然是叫“机票”！

4、如果说“机票/酒店”栏目在导航上还有一点突显的话，那“彩票”栏目的导航就让人莫名其妙了，彩票这个名称与导航上的其他栏目名称没有区别，反到是“清仓”跟“淘宝商城”两个名称区别于其他栏目了。

5、淘宝网首页上的“春装”这个导航菜单应该是个季节性的菜单，根据不同季节更换不同的名称，方便做一些促销之类的活动。

但点击这个菜单进入的频道页面却是“清仓”！

从现实生活中的买卖规则，我们知道，一般情况下只有过时的物品才会清仓。现“春季”这个导航菜单应该是属于当季的，所以链接过去的页面为何是“清仓”而不是热销？！

6、淘宝画报这个栏目更加特殊，头部竟然没有主导航！而头部的另一个导航（红线框处）更让人迷惑，看名称我以为是跟主导航上的一样是栏目频道的菜单，但点击了后才知道，这几个菜单只是“淘宝画报”这个栏目下的菜单。

为什么给用户一个清晰明了的导航这么困难呢？

WordPress2.7也从最初的Beta1版到Beta2版再到Beta3版，之前所出现的BUG等也一一的解决，所以官方每发出一次新的Beta版我都会去下载过来直接在博客上使用，对于网上所说的一些BUG也没有出现过。但是今天却发现一个问题——在Wordpress2.7 Beta3版之前在系统自动生成的当面页面下都会有一个“current_page_item”的Class，但是在Wordpress2.7 Beta3的版本中不再自动生成这个Class属性，这个Class可以很方便的让主题制作者定义当面页面的导航样式，比如：

根据这个Class属性定义的样式可以很方便的让用户得知当前在哪个页面下，可是这个Class属性竟然在Wordpress2.7 Beta3版中不再自动生成，于是之前关于当前页面的定义样式就不能被读取出来。

不知道这个问题是属于Wordpress2.7 Beta3版中的BUG，还是官方故意去掉这个Class属性的。

因为按照常理来讲，日志分类才是更适合做为导航来呈现的，而现在把页面做为导航是不太合理的做法，而在当前日志分类下也会自动生成一个“current-cat”的Class属性，通过这个属性依然可以定义当前日志分类下的导航样式。

但即使官方故意去掉页面中自动生成的“current_page_item”这个Class属性，用意是让用户更多的把日志分类当成博客导航而不是把页面当成博客导航，也显然是极不合理的。

在Wordpress2.7正式版没有出来之前，这个问题不能最终确认是BUG还是官方故意去掉的，一切只有等正式版出来才能得知。在不改动Wordpress程序的前提下，似乎目前没有解决办法，有解决办法的高手请赐教。

——————————————–华丽丽的分割线—————————————–

2008.12.02

刚升级到了Wordpress2.7 RC1版，这个问题已经修正了，看来是个BUG。

去一个景区旅游时，我们需要一份景区的导游图，很多时候游客都会按照景区预先规划好的线路去游览景区，景区也会在岔路品标明每条线路的景点图，这是尽最大可能的让游客享受一个舒服的游览。

那么当用户突然来到一个陌生的网站呢？网站的设计者是否也应该提供给用户一个清晰明了的导航呢？如何尽最大可能的不让用户在网站里迷失方向，导航是最关健的因素。

对于一个小型网站来说，因为本身的栏目数量并不多，整站可以使用统一的简洁的导航设计，在保证网站的一致性的同时可以让用户对于网站的整体架构更加的清晰明了。但是事实上，很多的小型网站并没有使用整站统一的导航设计，而且为了让导航内容看起来丰富去拼凑栏目，让导航的设计变得复杂化。

这些把导航设计得复杂的网站，给出的理由很多都是参照门户网站的导航设计，殊不知门户网站的导航设计是受它本身的栏目内容所影响。而这些小型网站本身并不具备这么多的内容去形成门户网站那样的导航，于是拼凑栏目内容成了网站设计者的第二个任务。

国内互联网一直以来都有为“量”设计的习惯，看看网站们的页面高度，一个比一个长，似乎希望把网站的所有栏目内容都搬上首页以显示内容之丰富。页面如此，导航的设计也如此。把所有栏目内容搬上首页的想法也在导航设计上被延续，于是把网站的所有栏目都搬上导航也成了一种趋势。

而栏目内容少的网站为了扩充页面的高度而去拼凑栏目内容，在拼凑更多内容的同时，由于本身的资源限制从而导致了栏目内容质量的下降。

然而内容过多页面长除了造成在浏览器加载时耗费更多的时间跟资源外，还容易造成用户视线的分散，页面内容所引起的用户关注度也随之降低，所以很多网站都把栏目比重偏低的栏目放于页面的底部。

而当内容过多导致页面的高度变长时，用户从中寻找自己需要的内容所耗费的时间将变长，与此相同的是，用户从一个精简的导航里寻找所需要到达的栏目的时间远远小于从内容复杂的导航里寻找的时间，所以一个结构清晰的精简化导航能帮助用户绕过信息干扰快速的定位到自己所希望到达的内容页面，从而提高转化率。

在做网站设计时，应该追求的内容数量与效益所产生的比例，而不是仅追求内容数量。

豆瓣的小组话题其实就是一个轻量版的论坛，剔除那些繁杂的功能，只保留论坛最核心的功能——文字讨论。当用户加入所感兴趣的小组后，系统对这些小组做一个聚合，形成一个以用户个人为中心点的小组网络。这是与平常论坛最大的不同，平常的论坛做的是聚合用户，而在豆瓣则是由用户去聚合小组。

在论坛里混迹的人都知道，论坛的发贴按钮一般都是位于较顶部位置的右侧，很显眼的位置很显眼的按钮，这是在引导用户多发新贴。然而在豆瓣的小组里，发贴的按钮却不明显，甚至可以说一点都不起眼。

首先，豆瓣小组里的发贴叫“发言”，也许这个词更贴近生活，但是这个词却容易产生歧意：在小组首页时，“发言”很容易让人联想到是发新话题，但是当进入到小组里的某一个话题时，右侧出现的“发言”链接却很容易让人联想起另一个意思——针对这个话题的发言，但是很不幸，这个“发言”仍然是发新话题；

其次，在豆瓣的小组首页时，“发言”链接所处的位置既不在头部也不在底部，而是位于靠中间的位置，上面有“最新加入”下面有“喜欢去”，两个带图片的栏目占尽了用户的眼光，夹在中间的“发言”显得那么的不被重视，对用户的发言缺乏一种明显的引用。但是在某一个话题里面时，右侧的“发言”链接却是位于顶部明显的位置处，似乎在努力的引导用户“发言”，显然这是一种错误的引导，此时的用户更需要的是针对这个话题进行“发言”；

最后，豆瓣小组里的话题一页显示的回复数是整整100条！也就是说当回复数量没有达到100条的时候，这些回复信息都将在一页显示完全，100条回复信息的高度浏览器需要显示多少屏？显然这不是个便于用户阅读的高度。而且话题的回复框只出现在最后回复的后面，当回复信息数量超过100条时，就意味着用户至少都要拖动滚动条越过这100条信息到底部，然后点击页码到最后页才能发表回复。豆瓣最大限度的希望用户阅读回复时，也最大可能的让用户失去了回复的欲望。

很显然的，豆瓣小组的定位与论坛是有着巨大的差别的。

在豆瓣的小组里，用户之间的交互行为并不只是发生在话题上，除了小组话题外，还有“小组收藏”、“喜欢去”、“关注的活动”等功能，仅仅只是文字版的话题无法完成小组成员之间的交互需求，所以豆瓣在小组里加入其他的交互功能来满足用户的需求，或者可以说，豆瓣在谈化话题这个最像论坛的交互行为。

豆瓣的小组通过种种功能，串起小组成员之间的交互行为，使其有着比论坛更广阔的关系网络，然而对于“话题”这个小组的核心应用来说，却没能真正的发挥出它的功能，用户与用户之间的直接交流，远强于小组推荐一本书或者是推荐一个活动。

当网站用户的需求越来越复杂，网站的结构也势必变得更复杂，如何引导用户去访问网站的不同栏目，或者说如何让用户把不同栏目都串联起来，导航就应当担此重任。

当网站越做越大，结构越复杂栏目越多，导航条上的栏目从一行增加到两行，每个栏目导航下又配以下拉菜单……长此以往，导航条将不堪重负。

在内容为王的时代，网站内容以丰满为佳，但网站导航恰恰应该是以一个相反的表现为佳——苗条。一个苗条简洁的导航结构对用户的吸引以及引导远远要高于一个丰满复杂的导航。

这一个问题在购物网站上表现得犹其突出。看看亚马逊网站之前的导航，有一种让人窒息的感觉，在导航条上就容易让用户产生迷失的感觉。

很显然，新导航做了相当大的简化工作，力求给用户展现一个简洁清晰的结构。新导航最大的成功之处，在于对栏目结构进行了的重设计，不再将所有物品种类都摆上导航，而是根据大类来进行细分。

当网站导航的结构分支有很多的时候，显然一般的导航设计已经不能满足需求了，于是在网上流传的另一种新颖的动态导航设计，即根据栏目来进行动态的导航显示。

很显然，这种导航的表现形式可以满足栏目结构分支众多的网站，采用的是一种面包屑的表现形式，向用户动态的展示网站导航结构，而不是将烦杂的导航一下子全抛向用户。这种导航的另一种优势是，可以添加足够多的导航，可以完整的将用户展示网站的所有栏目，而不必为导航是否烦杂而感到苦烦。

这些是固定形式上的导航设计，而对于一些服务型的网站来说，显然不会有那么多的栏目结构分支，一个导航上的栏目更多的是直接对应一个服务，比如最近很火爆的开心网（注册邀请）的应用组件导航。当添加的组件足够多时，侧边栏上的导航会显得很臃肿，而这些组件中又有许多只是一时兴趣添加的，并不会常用，甚至是添加后只用过一次然后再也不用。于是这样的导航就会影响到用户的使用。

面对这样臃肿的导航结构，开心网采用的方法是收缩一小部分导航，当点击“展开”时才显示出所有的组件导航。显然这是一个改进，但是这个改进却并不明显，也于臃肿的导航结构来说，改善并不大。

豆瓣的系统会根据用户的喜爱，推荐一些相关的信息给用户，这是网站与用户互动的一部分，是增加用户黏性很重要的一部分。

导航同样可以采用这种流式的表现形式。

还是拿开心网的组件导航来说，除了添加“收缩”、“展开”来改善导航的臃肿结构之外，还可以通过系统后台纪录用户使用组件的频繁度来显示组件导航，即用户使用频繁的组件在导航中排靠前的位置，而用户很少使用甚至是不使用的组件完全就可以用“更多”来表达，当用户点击“更多”时才显示出全部的导航，这样不仅可以达到精简组件导航的目的，还可以带给用户更佳的使用感。

这种导航不再是以一种固定的形式来表现，由网站制作者统一规定的导航转而为由用户来决定导航，既然用户可以定义页面内容与结构，那么用户自然也有权利定义网站导航。

不仅是服务型的网站可以使用这种导航，仅仅是内容提供者角色的网站也同样可以使用。

虽然给出一排顺序数字做为链接几乎是整个互联网的默认分页链接模式，但也正是因为如此，用户的心理安全感被忽视了，变成了隐性因素，在平常可以忽略不计。可如果在某些特定的环境下，这些隐性因素被某些事物所触发，伤害就会扩大，甚至最终有可能会演变成一声激烈的斗争。

而如果给这个只有数字的导航里加入预览功能，用户在心理上自然会多出一分安全感，因为可以不用去猜测下一页跳出来的是什么内容了，通过预览可以提前知晓即将要看到的下一页的大概内容。特别是对于图片新闻来说，在分页链接上有了图片预览功能，可以给用户带来更佳的使用体验，因为用户可以通过预览导航得知整套新闻图片的大概内容，于是就可以选择跳过阅读或是直接退出阅读。虽然这样做可能会损失一部分的网站PV，但这对于培养长期用户来说，无疑是更有好处的。

也许有人会说，这样就失去了神秘感，但我要说的是神秘感相对于安全感来说，在用户的心理上所占的比重还是要轻上一些的，特别是对于新闻类的信息内容来说，神秘感在用户心理所占的比重更是要轻上加轻。新闻类内容追求的是信息的相关性，如果内容过长有分页的话也是追求信息的连贯性。没看过哪个新闻在第一页讲人如何在城市里生活，第二页就突然讲一头猪能长到多重的，这是两个完全不同的主题信息，如果硬是要把它们讲到一块去，那么张冠李戴就是个很好的例子，因为“张”跟“李”还是同属于百家姓里的姓呢，“人”与“猪”都同属于动物吧。

很多网站的内容页如果内容长有图片需要分页的话，都会把下一页的链接在图片上也加一份，这样除去从一大堆内容里去找下一页的链接的麻烦外，还可以添加点击“下一页”链接的概率。

娱乐新闻是属于图片多过文字信息的，娱乐新闻首先是要从视觉上冲击用户的眼球，而非是用文字来带给用户震撼的感觉。对于常常是多图片的娱乐新闻来说，分页显示自然是个很好的方法，即可以加快页面的加载速度，又可增加页面的点击量，无疑是个一举两得的好方法。

腾讯娱乐的新闻内容页一直都是采取点击图片进入下一页的方式的，虽然比点击数字进入下一页带来更好的使用体验，但在使用的过程中仍难免会有遗憾。比如某条新闻的标题是“某某明星在某某颁奖典礼上抢尽风头”，于是我点击标题进去到内容页，可是我发现第一页的图片并不是那个“某某明星”，可是整个新闻内容分页达十几页，我该怎么知道这个“某某明星”的图片在第几页呢？我是看到这个“某某明星”才进去的，我对其他的明星不感兴趣，怎么办？不得已只能一页一页的去翻，也许运气好在前几页就翻到了，也许运气不好一直翻到倒数第二页才看到想看的图片。虽然最终我所期望的目标是达成了，可是在这实现的过程是是否留有遗憾呢？

今天发现腾讯娱乐的部分图片新闻内容页做了改变，不再只是以往单纯的点击图片进入下一页了，而是在新闻内容页里增加了图片预览导航，终于我上面所说的遗憾得到弥补，不再需要一页一页的看过去只是为了在十几页中寻找一页自己喜欢的内容。

但是这个图片预览导航却并未完善，因为每点一张图片都要跳转一个页面，如果当前一组图片仍没有我所想要看的内容的话，那么我还得要点击下一组去查看是否有我需要的内容。

什么时候这个内容页的图片预览导航能做成跟相册一样的预览导航，那就比较完善了。

用图来说话，注意图中标用红框标示的地方：

上面是我通过搜索“ui design”，然后直接点击搜索结果页进去查看照片的截图，可以看到红框标示的地方并没有相册里照片总数的标示。再看下图，是我通过返回到相册，然后再点击这张照片查看的截图，很明显的红框标示的地方有了当前相册里的照片总数。

这其中有什么意思我现在还不明白，希望有明白的朋友告知我。

—————————–*不得不出现的一条分隔线*—————————-

之所以在这里加上一条分隔线，是因为这里的内容是隔了两天才补充的，这里想补充的不再是关于预览导航系统的分析文字，而是想做一个道歉，一个关于错误认识的道歉！

看过lecause朋友的留言，才明白自己的认识局限性很重，写下前面的分析文字的时候思考的也不多不够准确，现在返回来看的时候发现破绽百出，就连最明显的一点，就是上面两图中红框标示的位置都是显示的不同，当时却没有发现这一点，对于此而让看过文章的人产生误会的在此说声抱歉。

今天再次上flickr上，才发现两者在数据上的不同点就是flickr标示出了个人所有的照片总数，而yupoo却没有。

再说一声抱歉！

在所谓的WEB2.0风潮疯狂的从国外吹入国内的时候，国外一些成功网站的成功模式也疯狂的吹入到国内的模仿者的眼前。目前在国内关于网络相册方面或者时尚一点是说关于WEB2.0网络相册方面做得比较好的应该算是yupoo了，同时它也是国内模仿flickr模式最像的最成功的——事实上yupoo几乎就是另一个语言版本的flickr。抛除商业运营等其他因素，仅仅来比较一下两者关于照片预览导航系统（不知道正确的叫法，就自己为其命了个名）上的不一样之处，或者是说两者在对用户使用方式的理解上的不一样之处。

从上图中可以看出flickr相册的照片预览导航系统相当的简洁，只有“上一张”与“下一张”照片的缩略图链接还有当前相册中照片的总数以及一个以幻灯片播放的按钮，当前照片的缩略图在预览导航中是没有的。再看下面yupoo的截图，在预览导航中多了当前照片的缩略图少了当前相册中照片的总数。

先不说当前照片的缩略图应不应该出现在预览导航里，光yupoo没有在预览导航上标出当前相册里照片的总数这一点就说明了它的失败。

每个用户看相册的时候都不可避免的会想要知道当前相册里到底有多少张照片，这其实是与人的心理是有关的，人天生就有这样的一种欲望——对一件事要掌握越多的信息越好，只有对其掌握了足够的信息，这样心里才会感到踏实或者说感到安全。这是一种与生俱来的本能欲望。

可是yupoo却没有标示出当前相册里照片的总数，这就好像是留了一个疑问等待用户去搜索答案，虽说可能会激起某些人的好奇心而去不停的点击它，可是到最后还是发现根本就不知道这个相册里到底有多少张照片。

而当前照片的缩略图是否应该出现在预览导航里呢？

yupoo的照片预览导航系统是完全按照网站的导航系统来设计的，在网站的导航系统里，用户需要知道自己当前在哪个地方或者是哪个栏目下，这时候导航系统就需要标示出这个地方或者是栏目来给用户提示，这样用户才不至于迷失在网站繁杂的信息里。

但是对于照片预览导航系统这种相对来说简单一点的导航系统来说，按照网站导航系统来设计似乎略显繁杂。

首先，照片预览导航并不需要标示出当前所在的位置，它不像是网站导航系统那样可能还有下级或者是下下级的导航的存在，照片预览仅仅只显示一张照片，也就是说在这个预览导航里的所有栏目都是平等的，不存在下级或者是更深层次的归属关系，用户在这样的页面里并不存在迷路的困惑；

其次，导航系统的真正作用是引导用户及标示位置，而既然照片预览导航不需要标示位置，那么照片预览导航系统所剩下来的作用就是引导用户——引导用户点击导航系统上的缩略图以查看照片。这时候问题就会出现，如果不细看预览导航上的缩略图，鼠标直接点击下去，很有可能点中的就是当前照片的那个缩略图，点击后用户会发现还是当前的照片，查看原因之后用户才会明白，中间的那个缩略图是当前照片的缩略图——点击下去后还是当前照片，也就是说这个缩略图等于是没有用的。既然没用，为何还要存在？

最后，一样的空间，当空间里的物品摆放多了，每个物品所占的空间自然就少了。照片预览导航最成功的一点就是在导航上显示的是照片的缩略图而不是文字，让用户可以很明白的知道相近两张照片的大概形状。所以如何保证缩略图的清晰度就成了预览导航真正的关健所在。当照片的尺寸越大时，缩略图的清晰度就越小，甚至最终会模糊成一团，这时候就需要提高缩略图的大小尺寸，可是预览导航的大小是限定的，所以去掉当前照片的缩略图可以让相近两张照片的缩略图更加的清晰。

从细节处体贴用户，才是产品成功的关健！

布局更加合理的首页：

视觉中国这次的改版可以说是把视觉冲击推上了另一个高度，无论从版式还是功能上都远远超过上一个版本，可以说也是将WEB2.0进行得更加的彻底。

实用为主的简洁的子栏目页：

在子栏目页的布局上，显然偏向于欧美风格的简洁明了，采用模块化的布局更利于用户查找信息。但相对于首页来说，这样的布局在视觉上似乎过于简洁，无法给人以震撼的感觉。另外的一点，就是在于它的搜索框位置的摆放上，顶部搜索框搜索的是整站的内容，下面一个搜索框搜索的是当前栏目的内容，可是对于一个页面来说，两个搜索框的布局似乎有点过于繁杂。

在布局上的另一个不合理之处就在于它的导航。对于一个网站来说，导航做得好与坏直接关系到用户的体验，对于一个新用户来说，最有效也最简单的方式就是通过导航来判断网站的大致结构，从而进入更深一步的了解。但视觉中国网站的导航似乎并不太适合体验，红色导航条与上面的几个大模块的导航是一种并列的关系，也就是说两者是平等的关系，没有谁从属于谁的关系，可是这样的布局却很容易误导用户，比如说我点击“交互设计”进入到“交互设计”的主页面，那么这个时候我就很有可能会以为下面红色导航条的内容会是“交互设计”这个栏目里的，也就是会以为它们是属于“交互设计”这个栏目的而并不会以为它们是与“交互设计”平等的都是属于整站的。

有点复杂的内容页：

不知道是视觉中国的网页设计师忘了在IE7下测试调整网页，还是其他的原因，内容页在IE7下显示会有错位的现象，照理说这是完全不应该出现的情况，可是偏偏这种最基本的问题却出现了。看上图中用红线标明的地方，都是显示错位的地方。对于上面的广告位来说，也许是可以原谅的，因为广告都是以前根据旧版网站来做的，可是对于翻页还有评论显示的位置错位来说实在是太不应该了。但是这些在FireFox下是显示正常的。

总的来说，视觉中国这次的改版是对以往的一种推翻，也是一次顺应潮流的改版，在美观与实用中取一个相对来说比较完美的平衡点是视觉中国这次改版的成功之处。