本文主要想表达的内容是：如果某个组件具有某个属性，那就把这个属性发挥到极致；如果某个组件不具备某个属性，那么就不要把它伪装成具备这个属性，并用这个属性来诱奸用户。

    简单说，设计就是要解决问题，这是设计的本质与落脚点。

    电子商务网站的主导航设计是整个网站最最最核心的模块之一。导航需要解决的问题就是，告诉用户如何快速准确的到达他想要去的任何地方。

    在所有电子商务网站中，Amazon（注意，不是卓越亚马逊）的导航设计向来是所有电子商务网站学习与仰慕的对象。Amazon的导航在经过数次变迁之后被从顶部挪到了左侧，从横向Tab变成了纵向Tab。Amazon的这种Tab页签式导航，相对与卓越亚马逊的标签列表式导航而言缩短了主导航的高度，在第一屏的时候就能把所有商品大类全部暴露出来，降低了用户的寻找成本。因此，这种模式的导航被越来越多的电子商务网站所接受。

    大约在1年前，QQ商城改版，借鉴了Amazon的这种导航模式，同时做了创新式的扩展。QQ商城在每个Tab页签里不仅展示了二级类目，同时还展示了品牌，这使得整个主导航从纵向上进一步缩短同时往横向上扩张。

    随后而来的京东商城和淘宝商城（扩展有分类推荐与品牌推荐）以及淘宝电器城纷纷相仿并采用了这种扩展式的Tab导航模式。

    不过，我觉得这种创新在某些交互细节上有待改进，我们先来看一下QQ商城的主导航截图：QQ商城的这个主导航在Tab页签的标题上显示的形式是“一级分类标题+二级分类推荐”的形式。

    从这个表现形式上看，“运动鞋”、“棒球帽”是2个标签，我这么认为是没问题的吧？

    我们假设这样的一个场景：你来到QQ商城，很明确的就是想购买“棒球帽”，你肯定是会直接奔去点击“棒球帽”（注意，是点击）。因为这个“棒球帽”长的跟一个标签一模一样，我们之前的Web使用经验告诉我们，标签就意味着是带超链接的，是可以点击的。可是，当你把鼠标移到“棒球帽”这个标签上的时候，你发现，他是个伪娘！

    你点击了半天，发现没有反应，你再仔细一看，他引导你打开了整个“运动户外”下的二级分类….这个时候，你的鼠标需要在做一次长途奔袭，去弹出来的弹层里寻找“棒球帽”，当然，你还得小心点别奔袭到界外，不然整个弹层就关闭了，你需要再来一次（图中虚线）。

    这个场景里，我们经过几个动作：1、准备点击；2、无数次点击后觉醒；3、鼠标小心翼翼的滑过弹层去寻找；4、点击。

    P.s:其实，图中这个例子我们在弹层里也找不到“棒球帽”，因为它被变异成了“运动帽”？

    我们再来看京东商城和淘宝电器城（注意，不是淘宝商城）。其实跟QQ商城差不多，只不过样式上做的难看点….当我目标明确的奔着“洗衣机”去的时候，鼠标所到之处弹层出现了一级分类“大家电”下的所有二级类。同时，“洗衣机”、“平板电视”这2个处在Tab页签标题上的推荐二级类被覆盖了。

    这个场景里我们经过的动作：1、准备点击；2、发现要点的家伙没了，开始寻找；3、点击

    从这个意义上讲，我认为，京东商城和淘宝电器城的这种处理方式要比QQ商城在体验上更好。QQ商城在鼠标Mouse on之后给了我2个道路：点击，拼命的点击、鼠标奔袭到弹层；而京东商城和淘宝商城直接覆盖了之前那2个长的像标签的家伙，我只有一个道路：鼠标奔袭。

    有的时候，给用户越少的选择更能让用户集中起来完成目标任务。

    OK，案例观摩完毕，分析一下为什么会出现上面的问题？

    很简单，我觉得就是没有把一个东西做到极致，随心所欲的使用表现层的东西去覆盖了框架层与结构层的事情。展示在Tab页签标题上的那些（洗衣机、平板电视）其实并不是标签，但是，他们在展现上跟标签一模一样（京东使用了灰色字体，说明他们意识到了这不是标签，但是我觉得还不够）。

    解决方案？

    请参见Amazon的做法。

    把那些长得像标签的家伙砍掉，使之不具备标签的属性，换成文字描述就OK了。

    最后，几句题外话：

    1）不知道京东商城暴露在每个Tab页签标题栏里的那2个二级分类是怎么来的？我仔细看了一下，似乎是程序直接调用而不是经过人工编辑的？如果是让程序来调用这个黄金地段的内容，那就真太可惜了。

    2）京东商城在首页左侧主导航里的一级分类都是可以点击的（如数码手机），但是在全部分类页面却变成了不可点击的，Why？

    3）QQ商城暴露在每个Tab页签标题栏里的那2个二级分类似乎是经过编辑的，但是这种标签式的展示让我很挫败，比如我想买个棒球帽，结果找了半天只发现个类似的运动帽….

    4）最后， 大熊哥主导的淘宝商城在此次主导航比拼中最终胜出！

建议继续学习：

1. 120个优秀的水平导航设计    (阅读：73838)
2. 网站导航设计的6大分类    (阅读：7871)
3. 我们来做一个会呼吸的菜单吧!!    (阅读：3263)
4. 递归并不一定非得是“自己调用自己的function”    (阅读：3185)
5. 实现一个更精简的Tab    (阅读：2410)
6. 关于网站地图    (阅读：2408)
7. 用面包屑来简化多层的tabs    (阅读：2378)
8. 网站导航设计模式指南    (阅读：2366)
9. 给网站布置一个明晰的“关于”页面    (阅读：2199)
10. 看看Gmail的新功能    (阅读：2151)