在这个过程中我基本依靠商场的导购系统和我24K钛合金狗眼扫描货柜的能力来寻找我需要的东西，当然有的人跟我不一样，比如我朋友进商场会直接找一个漂酿的小导购，骚气一笑：“美女，约吗？”呸，错了错了，“请问OHTO系列哪里有卖？”

综合大部分人逛商场的习惯，我觉得大概是这么个流程：

这让我想起最近读的这本书（自己选的书，哭着也得读完），有没有觉得我们在网站中也遵循类似的流程：

1）我通常是为了寻找某个目标。在物理世界中可能是OP—1000的绘图笔、可能是Westone ES30的耳机、也可能是一条Burberry的驼色羊绒围巾...

2）针对这个目标我会选择先询问还是先浏览。区别在于网站中不会有一个真人站在里面告诉你该怎么走，在web上等价的服务是搜索——在搜索框里输入一些你要找的信息，然后得到一堆链接，指向可能有你需要信息的地方。

我认识一些搜索狂，喜欢进入网站就找搜索框在哪——他们大多也是进入商城就直接询问的那种人；另一些人则喜欢先浏览，直到自己找不到或者对浏览绝望的时候才会求助于搜索。

对任何人来说，先浏览还是先搜索取决于他们的打算、匆忙程度、以及网站是否有良好的导航机制。

如果你像我一样选择先浏览，你将通过标志的引导在层次结构中穿行（就像穿行在琳琅满目的货架之中）。

（看在我不遗余力地打广告的份上，求给好评！）

这时候你就得凭运气了，如果你像我一样人品还不错，可能点几下就看到对你有用的信息了，但如果你运气比较糟糕，不好意思，这一下午甭干别的了。

因为你需要把你觉得有戏的链接点开，就像你要把看起来还不错的产品从货架上拿下来把玩一遍，这个过程极其耗时，相当部分的人最后求助于搜索，甚至绝望地离开网站。

无法承受浏览之轻

在网络上找信息和在真实世界找东西有很多相似之处，都会通过一些导视系统引导你去往某个地方。但不同点在于，在物理世界中你有良好的空间感，往前往后往左往右，在你脑海里会逐渐构建出一副商场地图。然而在网络中我们却是在漫游（Cruising)、浏览（Browsing）、冲浪（Surfing)，我点开的每个链接都是我你直接瞬移到另一个页面中。

嗖~~~

事实上，web上有一些问题细思恐极！

1）感觉不到大小。除非一个特别小的网站，否则机智如我，一般都很难察觉到一个网站到底有多大，50个页面？1000个页面？17000个页面？事实上可能连网站架构者都不太清楚。不同于一本杂志、一间博物馆，或者老佛爷百货商城。我可以用视野之内或者视野之外在脑子里构架一个空间结构，而对于网站来说，我很难知道哪些角落从未涉足过。

所以，即使我已经找到了感兴趣的内容， 我依旧不知道是不是还有其他有用的东西藏在某处，不知道是否该停止寻找。

2）感觉不到方向。在网站里，没有上下左右之分，我们指的前后可能是层次结构的上一级或者下一级。

3）感觉不到位置。在物理空间内，我可以随着走过路过在脑子里形成平面图，知道我要找的东西在哪个位置

然后直接抄近路过去。

然而在网站里，除非你很熟悉，可以通过某几个链接直接找到所需信息，否则你只能点击搜索，然后嗖地瞬移过去，根本就闹不清楚这一路上都有什么东西。所以在Web上找东西只能搜索或者沿着我记住的链接依次点下去。

现在你知道网站主页设计被如此看重的原因了。

因为主页是一个起始点、一座灯塔，当你在迷宫迷路的时候把你拉回入口，给你一个重新开始的机会。（这也是为什么很多网站把访问过的链接标成其他颜色的原因，这给了我们访问过哪些网站一个直观的认识。）

Web中缺乏物理感觉，这是好事也是坏事。这种无重状态让人愉快，你不会像读书一样，捏着读过的厚厚的书页产生一种“哎呀我都看这么多了要不歇一会再看”的疲劳感，这也部分解释了为什么我们在上网的时候常常忘记时间。

另一方面也解释了为什么我们在web上使用导航，而在图书馆或者百货商场不会用什么导航的原因。因为我们在Web中本身就是迷路的，我们不能通过那些链接知道我们走过了多少地方，身处什么位置。导航则通过具体化网站的层次结构补偿了这种缺失的空间感，营造出某种位置的感觉。

Web导航不是网站的一部分，它本身就是网站，就像百货商场中将空间分割的货架和墙壁，没有他们就没有百货。

所以，把导航做好！

导航有两个显而易见的用途——帮助我们找到想要的东西和告诉我们身处何处。

1）它给了我们一些“固定”的感觉。通常迷失的感觉并不好，导航提供了一个虚拟扶手，让我们感到脚踏实地。

2）它告诉我当前的位置。通过让层次结构可视化，告诉我站点上有什么。

3）它告诉我如何使用网站。如果导航机制很好，它会含蓄地告诉你你该在哪里开始，可以进行那些选择。如果正确无误，它是你所有的指示说明，上一章说过了我不会看其他的指示说明。

4）同样的，它也给了我对网站建设者的信心。在网站中的每一刻，我的脑子里都有一个标签，规划得当的导航会给网站建设者加分。

我们接着《别让我思考（上）》（这好像是个链接）来聊聊 上网的习惯。

物理空间中导航系统经过多年的发展已经形成了相对完备的习惯用法，比如街头指示牌应该放在街角、建筑物的名字应该在前门的上方或者旁边、百货商场走道尽头有各个基础设施的指示位置、杂志前几页会有目录、页脚的地方会有页码....把这些“导航系统”放在习惯的位置让我们可以快速定位，毫不费力，而外观标准化也让我们不容易和其他东西混为一谈。

想想，如果打破这些习惯用法，你会多手足无措，例如用200种鸟代表200个数字页码...也许作者觉得自己萌萌哒！

所以如今我们常见的导航栏一般都遵循约定俗成的某些习惯，基本都有网站ID、栏目、实用工具、下一级栏目等...

Web设计中有一个术语叫做持久导航（Persistent Navigation），一个优秀的持久导航会使导航以同样的方式出现在站点的同一位置，这可以让我立刻知道自己是不是还在这个网站内。

持久导航应该包括五个元素：

1）站点ID

2）栏目（News/Products/Downloads...）

3）实用工具（How）

4）回主页的方式（HOME）

5）搜索的方式（Search)

下面我们会具体聊一聊这几个元素。那么问题来了，你说要保持一致性，是指的所有页面都一样一样的嘛？

当然不是，至少有两个页面是例外——主页、表单

主页：承担了一些不同的任务，也遵守着一些不同的承诺，这有时候意味着主页不需要遵循持久导航的规矩。（我就是我，是颜色不一样的水果）

表单：在填写表单的时候，持久导航会成为干扰因素。例如我在买什么会员充什么币的时候，你也不会希望我做付费以外的事吧。去掉无关的干扰因素，以免诱导我产生“要不看看再说”的想法。对于表单页面来说，只要有个站点ID、返回主页的按钮和任何有助于填写表单的实用工具就OK了。

现在我知道我不是在About.com了——站点ID

网站站点相当于建筑物的名字，从我进入商城溜来溜去，到我离开大门之前我都知道我还在商场里面，但逛网站的时候不是。正像前面说的，链接带我瞬移带你飞，我根本不知道什么时候就被传送到另外一个站点去了，所以我需要在每个页面上看到站点的名称。

因为ID代表了整个网站，所以要让ID出现在页面可是层次的首要位置。我们有两种方式可供选择——让它成为本页最显眼的内容，或者让它涵盖本页面所有的内容。

一般不会有人选择第一个，所以大家很默契地把ID放在了网站最上方——这样他可以涵盖整个页面。（在自左及右的语言阅读中一般把站点放在左边，像阿拉伯语或希伯来语的读者可能会希望ID出现在右边）

另外ID除了在正确的位置之外，它本身也应该看起来像是ID。起码像个人样是吧！不管你是LOGO、商标、某种字体或图形都好，而不要是一些什么奇奇怪怪的东西。

栏目

有时候也称为主导航条，是到达站点主要栏目的链接，处在站点层次的最顶层

一些持久导航也包括二级导航条

实用工具

要么能帮我们使用站点（例如帮助、站点地图、购物车），要么能提供网站发布者的信息（联系我们，关于我们），对于不同类型的网站，实用工具也有所不同，可能包括以下内容：

关于我们、下载、档案、目录、结账、论坛

如何购买、登录、注册、招聘、搜索、我的__、购物车

公司信息、常见问题（FAQ）、联系我们、帮助、客户服务、主页、讨论板、投资者关系（investor relation)

新闻、订单跟踪、站点地图、新闻稿（press release)、店面分布（store locator)、隐私声明、你的账户

..................

通常，持久导航上只能放置4、5个实用工具——我用的最多的那几个，如果都放在持久导航上，我就会在眼花缭乱中迷路。其它不常用的工具应该进行分组，并一起放在主页上（这将会在《简约至上·交互设计法则》中和大家交流）。

“麻麻我要回家”——HOME

持久导航中最重要的元素之一是把我们送回主页的按钮或链接（HOME）。

它就像一个保证，无论你迷失到何种地步，点击一下HOME都可以重新开始。就像重启，或拿出一面免死金牌一样。

事实上现在有一个新型的习惯用法，就是让站点ID同时也作为一个回到主页按钮，这非常有用，但貌似大量用户没有意识到这点。

提供搜索

由于搜索的潜在威力和喜欢搜索的用户比喜欢浏览的用户更多这一事实，因此除非你的网站很小而且组织地很好，否则每个页面都应该有一个搜索框。

我不得不说“潜在”，因为在大多数站点上，搜索到有用结果的可能性仍然是一半一半，搜索可用性本身就是一个需要深入研究的专题，对这方面有需求的看官建议阅读Louis Rosenfeld 和Peter Morville的Information Architecture for the World Wide Web (WWW上的信息架构）。

搜索框的形式有很多种，但设计的时候记住一个简单的公式：一个输入框、一个按钮、一个单词或一个词语，不要太复杂，尤其要避免：

1）花哨的用词。中文还好，但英文就请你老老实实用Search,而不是Find（查找），Quick Find、Quick Search 或者Keyword Search，如果你是用Search作为输入框名称，那么应该用GO作为按钮名称（你得知道国人英语没那么好，像哥这样过十八级毕竟是少数）

2）指示说明。如果你一定要在搜索框里写“请输入关键词”，我真得说这是个愚蠢的决定，这就和电话留言设置中说“请在哔~的一声后留言”一样，以前确实是管用，但是很落伍的好嘛，就好像非要在表格中填写“电话：”，多此一举。

3）选项。如果你的搜索范围存在任何模糊的混淆，请一定要注明，比如搜索的是部分站点、整个站点还是整个互联网,或者搜索范围的是站点中的哪一类信息（男孩、男婴、新品、Sale...傻傻地分不清）

如果你想为我提供搜索选项请一定要保证它对我有用且不用思考，比如我在上一章说的，买书的时候让我选择输入的信息是“书名”、“作者”还是“关键词”，这很麻烦。

我觉得Amazon成功的一个主要原因就是它搜索的灵活性，它是最早的几家在搜索框中抛弃选项的网上书店之一，它可以接受我输入的任何内容。

而我在其他一些在线书店却时常感到迷惑，因为我错误地理解了那些选项。

举个例子，当我在IMDB上查询《Treasure of the Sierra Madre》的台词“Stinking badges”时，我输入“badges”，默认搜索范围为ALL，只找到一个匹配结果—— 一部老电视剧。

而当我把搜索范围改成Quotes（台词）时，才找到了相应的结果。

看看，我对IMDB的信心受到什么样的影响。

为了怕不了解情况写出的东西遭喷，最近专门在网络的海洋里漂流，却让我发现一个很有趣的现象。相当数量的网页都有很精致的主页和前两页的导航，然而到了第三级页面，导航就变得支离破碎，随意发挥，这个问题非常普遍，以至于我很难找到良好的三级导航的例子。

这是怎么回事？

我认为，首先一个良好的多级导航是很难设计的，因为页面空间本就有限，我们有那么多的元素要放在页面内。

二是前两个页面就已经消耗掉设计师太多的时间和精力。

三是多级导航看起来并不重要，不是吗？毕竟它不是主导航，也不是二级导航，能有多重要。而且有一种观点认为，当人们深入到网站这一层次，就自然会明白如何操作。

对于Web设计师来说，站点内网页分为主页、一级导航、二级导航...然而对于我 —— 作为一个网站用户来讲，每张页面都和主页一样重要。这意味着我们在讨论主页配色方案之前，拥有一个可以显示所有级别的导航非常重要。

页面名称

在去洛杉矶的高速公路上，你会见到非常好的路牌。牌子的字很大，大到你只要眼神好点，就能在一个十字路口看到下一个十字路口的路牌。而在波士顿，当你看见路牌的时候还有时间转个弯，就谢天谢地去吧。

页面名称就是Web上的路牌，你需要注意以下几点：

1）每个页面都需要一个名称。就像每个拐角都需要一个路牌一样，每个页面也都应该有一个名称。

2）名称要出现在合适的位置。比如路牌应该在街角、门牌应该在前门上方或旁边，页面名称不应该四处乱跑。

3）名称要引人注目。在大多数情况下，它是页面中最大的字，要大！要大！要大！

4）名称要和点击的链接一致。这一点几乎没人会注意到，但这是网站和访问者之间不成文的约定。

比如我搜索“可乐鸡翅”我希望的是网站把我带到“可乐鸡翅”的页面，而不是“美食”或者什么“鸡翅怎么做好吃”之类的页面。

这看起来很琐碎且无所谓，但这是很重要的约定，一旦网站违反这个约定，我就要不得不花几秒钟思考“为什么这两个名称不一样，是不是我搜错了”，甚至如果两者差别过大，我会对网站发布者的能力产生质疑。

当然，有时候受到各个因素的制约，你不得不加以权衡，这我也能理解。如果我点击的链接和页面名称不匹配，那也要尽量保证：

1）二者尽量匹配

2）逻辑上解释得通（比如我搜索“给她的礼物”，跳转的页面是“送女士的礼物”，尽管二者不甚相同，但逻辑上没什么区别，我不会过于在意二者的区别）

你在这里——指示器

要抵消你在网络空间中固有的迷失感，你需要有一个导航来告诉你处在哪个位置，导航就是“你在这里“的指示器。

“窄脚牛仔裤”前面的小圆点就是记录我当前位置的标识。

然而指示器通常的失败之处在于，它的视觉线索大多很模糊。设计师普遍会喜欢比较模糊的线索，因为模糊不清是复杂设计的特点（这样看起来逼格更高有木有），但我看网站的时候通常急急忙忙的好嘛，我会很容易忽略模糊的线索。

设计师们，请你让它突出！突出！再突出！

面包屑——层级菜单

同样的，还有一些东西和指示器一样重要，我们把它叫做“面包屑”（层级菜单）——就像Hansel扔在森林里的面包屑踪迹，让Gretel可以找到回家的路一样（没看过的没童年哈哈哈）——“面包屑”告诉你的是从主页到某个页面的路径（“指示器”告诉你的是你所在站点各层级的前后关系，它是位置地图；而面包屑告诉你的是如何去某个点，是一些分段路径）。

过去“面包屑”一般只在拥有庞大数据库或者复杂层次结构的网站中才可以看到，例如雅虎的网站目录，你点击过的链接变颜色。但面包屑也有弊端，就像是你扔在森林中的面包屑，时间长了会被鸟儿吃掉，Web中访问过的网站若是长时间没有重新访问会恢复原有的颜色，默认的过期时间为7~30天不等，这取决于你使用哪一种浏览器。

在网站里面，“面包屑”给人一种感觉——我正处在一个庞大导航机制中。

现在越来越多的网站开始使用面包屑，有时也会出现在精心设计的导航设计之中。

对于绝大多数网站而言，我不认为只有面包屑一种导航机制就够了。它不能很好地替代两层结构的导航机制，因为它的表现力不够，虽然它给了你一个视图，但却是眼罩之下的视图。这不是说只用面包屑你就没法导航了，而是说，对于大多数网站来说，它不是一种好的导航方式。

别误会，如果设计的好，面包屑是不言而喻的，而且它们不会占据太多的空间（那么小小的一行），并且提供给你一种方便，你可以用它来做两件事——回退一个层次或者回到主页。

我只是认为他们作为某种平衡，来补充固定导航机制是很有价值的，特别是对于那些层次复杂的大型网站，或者需要绑定一堆子网站的时候特别有用。

据我所知，About.com的面包屑是设计相当不错，因为他有以下几种特点：

1）位置处在最顶端。面包屑出现在页面顶端，高于所有内容时最为有效

2）使用“>”对层级进行分隔。在视觉上暗示了沿层级向前移动的动作

3）使用小字体。再次清楚地表明它是补充机制

4）使用了“你在这里”的提示（上方MONEY变色加粗）

5）将最后一个元素加粗。层级清单中当前页面名称应该加粗

6）没有把页面名称做成面包屑。很容易让人心动的一件事是，把页面名称写在面包屑的最后一个层级上（当前页面），可以得到省出一个页面名称的好处。越来越多的网站采用这个办法，这看起来没什么问题，但是就像我们之前说的，你背弃了我的期望，我希望在页面的左侧或右侧看到页面名称，而不是看到它在页面中央的列表末端摇摇晃晃。

因为人们总是在网站中迷路，标签和收藏就变成了走出迷宫的好东西，我来说说我喜欢标签的四个理由：

标签是极少几个将物理隐喻有效运用于用户界面的例子之一（垃圾桶是另一个），而且我认为标签是大型网站导航的上佳选择。

因为：

1）它们不言而喻。我从来没有见过一个人，无论多么不懂电脑的用户，指着网站上的标签问我，嘿，这是做什么用的？

2）标签很难错过。你很难想到人们对网站顶部的导航视而不见的情况多严重，但标签作为导航按钮的时候很难被忽视，因为他们本身就是导航，不会被误认为是别的什么东西，它们在导航和内容之间存在着不可忽视的区别。

3）它们很灵活。实用且存在装饰性。

4）它们暗示了一个物理空间。标签创造了一种错觉，当前页面在物理上处在最前面。

标签的效果很好，因为它基于一个视觉提示，暗示我们一种强烈的感觉——我们存在与一个物理空间内，这个空间被分为不同的栏目，而你正置身于其中一个栏目。

和其他很多优秀的网站一样，Amazon是第一个且正确使用标签的网站之一，所以如果你想使用标签，就去模仿Amazon经典的标签设计吧，主要学习它以下几个优点：

1）正确绘制。要充分发挥标签的作用，标签的图形必须营造出以下的视觉效果：激活的标签页位于其他标签页之前，这是让他们和标签相像的最大要点——比他们与众不同的标签外形更加重要（无论如何，如果他们的行为不像标签的话，不要使用标签形状的图形）

IMDB从某些方面讲是一个非常好的网站，然而他犯了以上错误——每个页面顶端的按钮看起来像标签，但他们的行为和普通按钮一样。

要营造出这样的视觉效果，激活的标签页必须有一种不同的颜色或外形作为对比，并且必须与它下面的空间在物理上连接起来，这是把激活的标签页“弹”到最前的方法。

2）颜色编码。（早期）Amazon为站点的每个栏目使用一种不同的标签颜色，并把这种颜色用在页面其他导航元素上，让他们浑然一体。对栏目进行颜色编码是非常不错的想法，你可以用相当鲜艳和饱满的颜色来吸引注意，并且把未激活的标签页使用中性的颜色（比如米色），这样未激活的标签和当前的标签之间对比更加强烈，即是色盲的人也能注意到（女性1/200，男性1/12，尤其是40岁以上的人群，在针对这类人群设计时，可以考虑色盲对网站辨识度的影响）。

3）当你进入网站时，有一个标签已经选中。如果再进入某个网站时没有选中的标签——例如Quicken.com，那么在最初的几秒钟之内我注意不到标签的存在，这很糟心。

如果现在你对网站导航已经有所了解，那么我们来做下后备箱测试。

想象你被蒙上了眼睛丢到了后备箱里，车开动一会，把你扔到某个网站的某个页面里，当你摘掉眼罩以后能不能很快地回答以下几个问题：

1)这是什么网站——站点ID

2)我在哪个页面上——页面名称

3)这个网站的主要栏目有哪些——栏目清单

4)在这个层次上我有哪些选择——本页导航

5)我在导航系统的什么位置——“你在这里”的指示器 & “面包屑”

6)我怎么搜索——搜索栏

卧槽，这不是《盗亦有道》的情节嘛！没错，你需要用后备箱测试来检验你的Web设计是否合理，因为你们这些射鸡师经常忘了，在网络上的体验更像是被绑架而不是一路轻松的走过去。当你在设计网站的时候，估计通常想象我是从主页开始，按照你规划好的漂亮干净的路径到达，然而事实上，我经常通过搜索引擎或者其他网站的链接直接进入网站内部而不知道自己身处何处。这种情况比五年前更加普遍，因为很多人现在上网所作的每一件事都从度娘开始。

所以多进行后备箱测试训练可以让你对什么有效什么无效有更深的理解。