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)。任何共享资源都会因为过度使用而遭到破坏。可以考虑轮流使用主页上的推介空
间,或者到其他热门版面进行推荐。