3.创建菜单
　　以上我们已经跳过了为一个复杂站点创建菜单的非常复杂的部分。我没有数过，但是我肯定这个站点中有超过1,000个图像。这些图像中大部分都附在菜单上。如果在方向确定之前就准备这些图像的话，工作量就会翻一倍。 因此，我总是在最后的菜单完全设定之后才创建图像。我们还需要站点的组织确实定下来。现在让我们继续，看看如何处理内部菜单并提供整个站点的图形一致性。

　　创建一致性
　　目前，那些图形艺术家们努力工作开发出的技术在本文中还没有得到大量应用。但是一旦我们的平面设计固定下来，这些图形技术就发挥作用了。这一年多来，我一直将一致性这个词带到页面中。有许多次我引用了一种自动方法，即能节省时间又使工作保持一致性。我一遍一遍地重申这个观点的主要原因之一就是菜单。

　　现在从我们在Diamonds.com开发中所遇到的一个小小的菜单的两难局面开始。你还记得我们在早期规划中弹出帮助菜单项吗？Scott希望每一页上都有它，不想让它在某个菜单中。我的一个很自然的本能是将其作为一个重复元素放在每一页的相同位置。这样的意义仅在于用户方便。但是由于这个站点上有许多页面风格，在每个页面上根本没有放置帮助图标的地方。最初我们用了一个比较严肃的图标来代表帮助链接。我们最终解决这个问题的方法是用粗体和细微的动画来使图标醒目。



　　由于帮助图标不是放置在一个固定位置上的，所以我们用动画将其作成粗体和明亮的。这个图标在页面中游动，但是却不容易迷失。

　　Diamonds.com的每一页都有3个菜单区。主目录菜单是粗体的，并且代替了登录页面的显示。这很重要，因为访问者应该立刻就能够确认他们能够找到哪些想要的东西。这个菜单是一个简单的图形文本菜单，有翻转效果，通过它的相对尺寸大小和在页面上的重要性吸引注意力。



　　上面是登录页面目录菜单。设计这个菜单是为了告诉新的访问者站点中包含什么，让返回的访问者更容易直接到达一个子目录。

　　在整个站点上，这个菜单只在登录页面上出现。记住它的主要目的：让人们一眼就能知道他们能找到什么。当然，子目录也能帮助返回的访问者直接到达他们所希望的区域。但是访问者一旦离开主页，这种需要就不大了。

　　但是我们真的希望访问者不用返回一个中心位置就能够浏览整个站点。主目录菜单在每一页上都可用，只是形式上要小得多。下面的样本显示了在菜单栏下折叠起来的缩小的版本。



　　每一页上都用一个小菜单将种类显示在菜单栏下面。请看上图，请注意看在菜单中没有Jewelry这一项。



　　这在每个页面上都发生，当这个页面被激活时，这个菜单的链接就去掉了。看看上边这个调整过的菜单。相同的方法被用来为一个菜单栏条目标记激活页面。

　　下面显示的是标准风格页菜单区（请看较大的样本）。标准风格菜单项已经被去掉了。如果对激活页也有链接的话，访问者们会感到糊涂，除非有菜单条被激活的提示。因为我们有许多菜单项，并且想保持上部菜单区的平衡，所以在所有的情况下，只是简单地去掉激活的菜单项就可以。这样使页面的页眉保持一致的外观，并且这种导航也不会让访问者感到迷惑。



关于 Diamonds.com 导航的反馈情况非常好。页面的标题还能帮助访问者在任何时候都知道他们在什么位置。在所有站点中都应该有这个功能。

　　内部菜单
　　内部菜单有一个新菜单。对于比较繁杂的内容区，从前面的页面看过去的菜单是无效的。这个菜单造成了一些问题，因为我们需要一个非常清楚并且可以识别的菜单，也因为访问者很有可能要在产品页面上大量使用菜单。但是，任何经过定义的外观的轮廓和颜色都会跟产品产生竞争。挑战就在于要创建一个立刻就能使用的菜单，而一旦访问者的注意力转移到了产品上，菜单就应该马上消失在背景中。



　　这时可以用发光的阴影来帮助达到这两个目的。这种柔和的、逐渐变暗的阴影将页面有效地分割开，但是又不会分散注意力。要将菜单限制在页面的其它部分，用字体和字体颜色就足够了。



　　这个菜单在所有的产品页面上都会出现，已经证实这是将产品页面与站点的商务端分开，又不会感到隔离的有效方法。实际上，我们在站点的教育区也使用同样的菜单外观。

　　最后，在整个站点中还用到了一些小的菜单类型用于特殊任务。这里显示的标记菜单指示产品返回页面。在站点中还使用了一系列图像指示图，这些图都用黄色的边框作为激活点的提示。



　　以下这些是在Diamonds.com站点中用到的各种动作图像指示图。虽然这些图像并没有占据大量的视觉空间，但是在相对无色的页面上，它们却非常醒目。一个图形指示图会形成大量的动作点。这不象翻转图像，它仍然是一个图形，对于页面的布局来说就比较易于使用。



　　我和Scott花了大量的时间来优化Diamonds.com上的导航系统。并不是所有的站点都要求这种级别的计划编制，但是在这个站点中所使用的基础却可以适用于任何站点。要使外观保持一致，要让访问者一眼就知道他们在站点的什么位置，这些很重要。我总是尽量使站点中任何一页到另一页的导航越近越好。

　　建立菜单的技巧
　　将 Diamonds.com 与 Burpee.com 的导航进行一下比较，它们之间有哪些共同点？有哪些不同？找一些不同的有复杂导航的站点，研究一下它们的菜单区，记住我们在本文中讨论过的那些观点。如果肯花一些时间研究一下为什么有些导航能够工作，而有些导航使用起来却很糟糕，你的站点就会得到很大的改进。

　　计划、计划、再计划，测试、测试、再测试。这是值得的！设计者创建复杂并且对用户友好的导航能力与他们在这个行业的成功有着直接的关系。现在，客户越来越意识到必须投资建立一个舒适且易于使用的站点，越来越注意图像及空间的可用性。现在来看一些很棒的例子。

　　下边显示的是 WebReference 主页上的导航条，这个例子很不错，这里有许多菜单能指引人们很快地获取信息。它确实很快，只使用了文本和＜td＞背景颜色来表现菜单。



　　Fireworks中的弹出菜单创建功能在问题菜单区有极大的潜力。
　　下面所示的是 IBM 所创建的一个经典导航之作，很值得仔细研究。



　　六．结 语
　　回顾一下你当前的站点，看看是否创建过一个站点平面图？如果还没有，那么现在就开始做。请试着从访问者的角度上，看看这些问题是否已经有了圆满的答案：什么是自然的导航路线？是否有一个全面的站点统计日志以查看访问者们从哪里离开？哪些页面的访问量最大？目前站点内的数据通信模式有意义吗？访问者有没有可能迷路了并且过早地离开了？

　　如果从统计数字或站点平面图中看出了问题，你现在就应该可以将本文介绍的一些组织技巧应用进去，用你的站点平面图对我们的自然模式进行视觉追踪。有时，页面之间一个链接的失败会破坏你的数据通信流，使站点的目标还没有实现之前就失去了访问者。