《Don't Make Me Think》读书笔记二

 Chapter6  街头指示牌和面包屑

   

   在商场，我们如何购买东西呢？我们会看商场的标志，然后寻找合适的道路，直到我们找到想要的产品。当然，我们也可以直接找

到服务员进行询问。

  

  在很多方面，进入站点之后，我们往往遵从同样的过程:

  1.你通常是为了寻找某个目标

  2.你会决定先询问还是先浏览(某些搜索狂人总是一到某个网站就开始寻找搜索框)

  3.如果选择浏览，你将通过标志的引导在层次结构中穿行

  4.最后，如果你找不到想要的东西，你会离开

  

  当然，在web上浏览，和实际购物还是不完全一样的。我们感觉不到网站大小，感觉不到方向，也感觉不到位置。如果想要再次访

问一个页面，不是依靠"它在哪里"的物理感觉，而是记住它在层次上的位置，然后顺着找过去。

   因此，Web导航有三个十分重要的作用：帮助我们找到想要的任何东西和告诉我们现在身在何处。同时，它给了我们一些固定的感觉，让我们觉得

脚踏实地。除此之外，导航告诉我们网站上都有些什么，告诉我们如何使用网站，还给了我们对网站建造者的信心。

   谈了web导航的作用之后，开始讨论如何进行导航的设计。

   Web设计师使用术语"持久导航"或"全局导航"来描述出现在网站每个页面上的一组导航元素。它应该包含五个元素: 站点ID，回主

页的方式，搜索的方式，实用工具，栏目。这里所说的"每个页面"，不包括主页和表单呢。主页设计会在第七章中讲到。

   网站ID：网站logo相当于建筑物的名字，不同的是，我们需要在每个页面的上方看到站点ID。要让它出现在页面可视层次的首要位

置，并且看起来要像个站点的标志。

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

   实用工具：网站中不属于内容层次的重要元素的链接。如，帮助，购物车等。持久导航上一般只放4-5个实用工具，放太多会显得

拥挤。

   回主页的方式：持久导航中最重要的元素之一是把我们送回主页的按钮和链接。一个新兴的做法是，让站点id同时也也作为一个回

到主页吧按钮(在ID后加上home字样)。

    搜索：大多数站点都应该提供搜索框。搜索框的设计，记住一个简单的公式:一个输入框、一个按钮、还有"search"字眼。注意，如果存在任何混淆

搜索范围(是搜整个站点、部分站点、还是整个web?)的可能性，一定要写出来。

   如果需要为搜索提供选项，在它有用的时候再提供，比如，到到达搜索结果页面，发现搜索结果太多时，需要缩小搜索范围。Amazon 是最初几家在搜索框中抛弃Title /Author /Keyword选项的网上书店之一，搜索的灵活性很是方便。当然，如果打算提供选项，要保证他们确实有用。当我在IMDB上搜索时，输入badges，使用默认的搜索范围(All)，只找到一个匹配结果，当把范围改成quotes时，则找到了多个结果。这样合理吗？

    

   Web设计中，存在一个常见的问题：没有对低层次的导航给予足够的重视。

   为什么？一个良好的多级导航本来就很难设计，而设计师的时间往往不够，又不太重视低级导航，因此会在设计时，忽略掉。对用

户来说，底层导航和顶层导航同样重要。

   除了持久导航之外，一个网页上，还应当注意以下几个元素：

 

  （一）页面名称

   页面名称就是web上的路牌。和路牌一样，如果一切顺利，可能根本不会注意到它，但一旦发现自己可能的方向不对，就需要毫不

费力的看到页面名称来确定方向。注意以下四点:

    1.每个页面都需要一个名称

    2.页面名称需要出现在合适的位置，在视觉层次上，应当出现在涵盖该页内容的位置

    3.名称要引人注目，体现出这是整个页面的标题

    4.名称要和点击的链接一致，我点击了一个"热土豆泥"的按钮，网站应该把我带到一个名为"热土豆泥"的页面

    （二）"你在这里"

   要抵消网络固有的空间迷失感，其中一种导航方式是告诉我当前的位置。可以用突出我当前的位置来做到，不管是在页面的导航条、列表还是菜单

上。如下方式可以标记当前位置:在旁边放一个指示器、改变文字的颜色、使用粗体、按钮反白、改变按钮的颜色。

   

  （三）面包屑

   面包屑也告诉你当前的位置。"你在这里"指示器告诉你所在站点层级结构的前后关系，而面包屑只告诉你从主页到当前位置的路径。

   在大多数网站中，我并不认为面包屑这一种导航机制就够了，她它们不能很好的替代两层层次的导航显示，因为它表现力不够。它可以做两件事:回

退一个层次，或者去主页。它可以作为固有导航机制的一个补充。

   关于面包屑的设计，注意以下几点:

   1) 把它们放在最顶端，让它看起来像是补充机制

   2) 使用">"对层级进行分隔

   3) 使用小字体

   4) 使用文字"你在这里"，让它自我解释

   5) 将最后一个元素加粗

   6) 不要把它用作页面的名称，因为位置上不合适

   （四）标签

    标签，把物体分成不同部分，而且通过突出的标签就可以翻到该部分的对应位置。许多网站使用标签来导航。

   1)  它们不言而喻

   2)  它们很难错过

   3)  它们很灵活，让页面看起来很有趣

   4)  它们创造出一种错觉，当前的标签出现在最前面

  

  （五）Amazon对标签导航的设计   

    如果想要使用标签，请参考Amazon经典的标签设计，务必模仿其中三点:

    正确绘制：激活的标签页位于其他标签页之前，要有弹出感和颜色的对比

    颜色编码:为站点的每个栏目使用不同的标签颜色，并把这些颜色用到页面的导航元素上。

    选中：当你进入一个网站时，有一个标签已经选中

    （六）后备厢测试

     把你放在某个网站的某个页面上，如果这个页面设计良好，你应该能立即回答出这些问题:

     1) 这是什么网站？

     2) 我在哪个网页上？

     3)这个网站的主要栏目有哪些？ 

     4)在这个层次上我有哪些选择？ 

     5)我在导航系统的哪个位置？ 

     6) 我怎么搜索？

 

   Chapter7    主页不由你控制

   

   想想，主页需要完成什么任务:站点的标志和使命，站点层次，搜索，导读，内容更新，友情链接，快捷方式，注册，我在寻找的东西，告诉我从哪

里开始，可信度和信任感………… 一大堆的事情，而且通常，还要面临一些约束：每个人都想占据一席之地，每个人都想参与它的设计，一个尺寸要

适合所有人。

   

   在这一片混乱中，往往有一件事被忘掉:传递整体形象。第一次进入一个新网站，主页应当回答我头脑中的四个问题：这是什么网站？我能在这里做

什么？网站上有些什么？为什么我应该在这里，而不是别的地方？

   

   如何传达整体形象呢？

   口号: 在靠近站点ID的位置，对网站所做的描述

   欢迎广告:网站的简要描述，在主页的首要位置显示。

   除非是比较特殊的网站，没有必要使用大量空间来表达基本主张，设计完成后，需要拿给公司外面的人看，是否达到了目标。

   口号是非常有效的信息传达方式，因为它们是用户最希望能够找到关于网站描述的地方。好的口号，要清楚、言之有物，长度适中(6~8)，表达出网

站特点和显而易见的好处，别太笼统，个性、生动、俏皮。

   

   从哪里开始？

   当进入一个新的网站，快速扫描之后，应该清楚的知道，如果我想xxx，应该从这里开始。要让每个起点看起来像起点，还要加上文字描述，例

如，"搜索"，"分类浏览"，"登陆"。

   主页导航

   主页要尽可能多的显示网站的内容，因此，你想为每个栏目名称增加一些描述，甚至列出下一级栏目。主页导航的布局也可能不同。但是，也要尽量

和持久导航保持一定的一致性。栏目的名称要保持不变。

  下拉框的问题

   由于主页空间实在有限，设计师常常用下拉框来创造一些空间，下拉菜单会有一些明显的缺点: 必须点击下拉框，才能看到下拉列表；菜单的可读性

较差；列表的收缩和显示很快，不好控制。下拉框，对于按照字母排序的项目最有效，例如，国家省份等。其他情况下，效率就比较低。

   不要杀死金鹅

   设计主页时，最糟糕的行为，是要试图推销所有的产品。在主页上推荐的效果太好了，任何项目都想在主页上进行推介。但是，过多的推介会让主页

变得混乱，这就是所谓，共有区域的悲剧(Tragedy of Commons)。任何共享资源都会因为过度使用而遭到破坏。可以考虑轮流使用主页上的推介空

间，或者到其他热门版面进行推荐。