懂点网站交互（5）：导航栏和面包屑

我们首先要明白的是：如果在网站上找不到方向，人们不会使用你的网站。

从你作为web用户的体会就可以知道这一点，如果到了一个网站，却找不到你要的内容，或者不知道这个网站是怎么组织的，你不太可能在那里呆很长时间——或者还会回来。那么，怎么创建那种公认“明确”、“简单”、“一致”的导航呢？

网络导航101法则
我们浏览网站，通常是遵循以下过程：
1.进入网站通常是为了寻找某个目标。
2.用户会决定是先浏览还是搜索
3.如果选择浏览，用户会通过标识的引导在层次结构中穿行。
4.最后找不到想要的东西，用户会离开。

网站浏览的特点
在网站上找东西和在真实世界中找东西有很多相似之处。但在web上的体验缺少了许多我们在设备生活中用来同空间相处的感觉，具有以下特点：
1.感受不到大小。即使在频繁使用某个网站之后，除非它特别小，我们很难感受到他多大（50个页面？1000个页面？）
2.感受不到方向。在网站上没有上下左右之分。
3.感觉不到位置。相对于物理空间的走动感受空间，网站上无法感受到这种物理感觉。当我们再次访问网站上的某个内容时，靠的是记住它在概念层次上的位置，然后重新顺着以往的链接过去。

被忽视了的导航用途
导航有2个显而易见的用途：帮助我们找到想要的任何东西和告诉我们现在身在何处。
但是导航也有一些重要但却容易被忽视的功能：
1.它告诉我们这里有什么。通过让层次结构可视化，导航告诉我们网站上有些什么。
2.它告诉我们如何使用网站。如果导航机制在履行它的职责，它们会含蓄地告诉你该从哪里开始，你能进行哪些选择，如果正确无误，它应该是你需要的所有指示说明。
3.它给了我们队网站建造者的信心。清楚、规划得当的导航是网站给人留下好印象的最好机会。

web导航习惯用法
尽管它们外观上可能不一样，但是对于web导航来说，有一些基本的用法：

web设计师使用术语持久导航或全局导航来标识出现在网站每个页面上的导航元素。

仅仅让导航部分在每一页以一直的外观出现在同样的位置，会让你立即确认自己仍然待在这个网站上。而且它在整个网站保持一致意味着你只需要了解它一次。

持久导航应该包括4个元素：logo、实用工具、搜索、栏目

logo
网站的站点ID或者logo就像建筑的名称，只要在网站页面上出现，我们就可以知道我们在这个网站里。

logo一般出现在页面的上方，通常在左上角。为什么呢？因为站点ID代表了整个网站，也就是说，它在当前站点结构上层次最高。

除了在我们希望它出现的位置之外，站点ID还需要看起来像一个站点ID，也就是它应该有自己的特殊性：有独特的字体，有可以识别的图形，或者独特的大小等。

栏目
有时也叫主导航条，是到达该站点主要栏目的链接，即站点层次结构的最顶层。

在大部分情况下，持久导航也会包含额日记导航的显示位置：当前栏目的下一级栏目清单。

实用工具
实用工具是到达网站中不属于网站层次的重要元素的链接。

这些实用工具要么帮助我们使用站点（例如登录/注册、帮助、站点地图、购物车等），要门提供网站发布者的信息。

我们要注意的是，在持久导航上只能放置4-5个实用工具，用户用得最多的那几个工具。

返回按钮
持久导航中最重要的元素之一是把用户送回主页的按钮或链接。
几乎所有用户都会期望网站ID同时也作为一个让他们回到主页的按钮。

提供搜索
大多数用户到达一个新站点后，第一件事是扫描页面，看是否有搜索框。
对于搜索框，记住一个公式：一个搜索框，一个按钮，还有“search（搜索）”两个字，别把他们弄复杂了。

低层次导航存在的问题
很多网站，一旦到了第二个层次以下，导航就会变得支离破碎，随意发挥。这个问题很普遍，以至于难以找到良好的三级导航的例子。
这是为什么呢？
1.良好的多级导航很难设计——页面空间有限，而且有那么多元素需要安排到页面中。
2.设计师即使在设计前两个层次时也常常感到时间不够。
3.它看起来并不重要。

页面名称
页面名称就是web上的路牌，就像路牌一样，如果一切顺利，用户可能根本注意不会注意到页面名称，但是一旦感觉到方向不对劲时，就需要毫不费力的看到页面名称来获得方向。
页面名称，需要注意以下4点：
1.每个页面都需要一个名称。
2.页面名称为需要出现合适的位置。
3.名称要引人注目。
4.名称要和点击的链接一致。

面包屑
面包屑（层级菜单）可以告诉你当前的位置。

面包屑会告诉你从主页到当前位置的轨迹，并能让你在网站中更加容易的回到更高层次的内容。

以下是面包屑设计中的几项最佳实践：
1.把它们放在最顶层。面包屑在他们出现在页面顶层，高于所有内容时最有效。
2.使用“>”对层级进行间隔。各种尝试似乎已经确认，最好的分隔符是大于号（“>”）
3.加粗最后一个元素。层级清单中的最后一个元素应该是当前页面的名称，让它变粗正好得到了应有的突出。而且因为这就是你所在的页面，因此不用添加链接。