专业网站导航菜单风格评析(三)

（青苹果工作室　2001年04月29日 01:38）

　　四．绘制菜单
　　既然我们已经有了一些工作菜单的定义，现在可以进入创作的过程了。我把Diamonds.com作为一个举例，因为我曾经参与了这个站点设计的每一步。我在其中的任务是图形和导航。后台数据库和电子商务是由一组程序员完成的，而最后的升级是由另一组完成的。这是一种理想的工作状态，这样我就可以把精力完全集中到外观和菜单系统的设计中。

　　Diamonds.com 站点带有情人节窗口。主图像根据季节而改变，使访问者感觉新鲜。

　　五．设计流程
　　Scott开始向我提出的站点需求非常宽松，我们一起对其进行推敲。他知道他所想要的站点应该有一种积极的基调，外观要清新而刺激，但对于那些想到钻石就联想到传统的人来说也不会造成震惊。
　　开始时我们进行了5种外观不同的试验，这时菜单项的设置还没有确定。下边所示的是被否决的一个设计，它的细节显示在一块很小的区域下面。请注意菜单项与最后在站点上出现的菜单项是不一样的。这些菜单项是在开发过程中逐渐发展形成的。我们选择现存设计的原因之一是：我们需要的菜单项相当多，而这个设计所允许的那种零星分布的看起来很干净的外观所能容纳的菜单项就太少了。

　　这是在Diamonds.com早期开发过程中被放弃的设计之一。我们的第一个任务是为站点的外观设置一个方向，在这个阶段只使用了通用菜单项。下面的两个例子是菜单区的特写。

　　Scott给我列出了访问者们可能会搜寻的信息，并且设置了一些访问者将如何行进到产品页面的场景。虽然我们并没有刻意去模仿钻石零售的经历，但是很快就证明这显然是一个很好的模型。Scott在这个行业中的经验为站点的总体结构指引了道路。虽然把Web事业与灰泥和砖头相比是错误的，但是这次它确实帮助我们把焦点放在了顾客希望得到什么以及他们如何在站点之间行进上。

　　1.计划编制过程
　　在这里我包含了一个登录页面菜单的草稿。达到这一点经过了数次讨论，但是我们一直都在向最终的结果接近。事实上，在种类区旁边的注释一直在问，是否应该将子类列在标题页上，因为那里还有空间。这时我已经开始准备图形外观了，我们意识到我们有足够的空间提供这种方便，而不用牺牲外观或菜单的组织。

　　就是在这些乱涂乱画中我们得到了登录页面的方向，这样就设定了整个站点的结构。

　　这就是上面的注释中所介绍的带有子目录分类的目录菜单的最后版本。主标题和副标题都是链接，因为在主目录页面上有关于这个那个目录的一般性信息。
　　请注意帮助按钮是如何在整个页面上跳动的。直到最后，我们才将这个功能放置在一个固定的位置。在站点开发的最初阶段，设计方向最终确定之前，我用图形程序和手写的注解进行了多个草稿的比较。在这个项目中，我们分别制作各个菜单区，在后期才创建了一个站点平面图。有些设计者一开始就使用站点平面图。而我发现在项目一开始就将站点的版面布局确定下来是很难的。一旦有了一个大致的外观，在图形程序中勾画出或创建出了粗略的比较图像之后，就可以进行到站点平面图了。

　　2.站点平面图
　　在项目的某些点，也许是起点，或者是现在这种情况，一旦站点的方向确定下来，就需要一个站点平面图。我总是要让站点平面图经过客户认可才能使用，因此我倾向于在一个图形程序中创建我自己的平面图。对我来说这样更快，并且我的手工达不到"客户质量"。（换句话说，手工绘图很乱，只有你自己才能分辨）。在下边包含了 Diamonds.com中使用的站点平面图的摘要。

　　这是Diamonds.com站点平面图的一个小样本。出现在图像顶部的水平线指向对index.html的引用。
　　今天这个图不是很精确，因为在项目快结束的时候，我们又进行了修改，但是它确实是一个必要的工具，项目组中每个成员都要有这个完整的图。
　　许多刚起步的设计者认为站点平面图很神秘，是高技术的工具。事实上，它只是简单地对你将要有的或者是站点中已经有的页面进行布局，并且跟踪页面连接到哪里。从登录页面开始，对从那个位置可以到达的每个页面都做一个标记。然后移到下一级页面，并且标记从那个页面可以到达哪些页面。注意：动态生成的内容通常放置在一个模板页面中，因此只有这个模板出现在站点平面图中。然后取下一级页面的每一页，对所连接到的页面做一个标记。
　　当你对每一部分都做了标记后，在站点中互相连接的页面之间划上连线。如果你有对于站点来说很重要的外部链接，也应该做上标记。不增加站点结构的链接，例如交换链接可以除外。这就有了一个站点平面图。
　　不要把我在这里使用的站点平面图的术语与你的站点上出现的站点平面图相混淆。我在这里所描述的站点被严格地作为一个开发工具来使用。（编译）