此为Don't make me think 学习笔记,作者Steve Krug
一 导航设计
如果在网站上找不到方向,人们不会使用你的网站。
网络导航的使用体验:
·用户通常是为了寻找某个目标。
·先搜索还是先浏览。这个取决于用户的打算、匆忙程度,以及网站是否有良好的导航机制。
·如果选择浏览,用户将通过标志的引导在层次结构中穿行。
·用户找到还是找不到都会离开,回头再来的几率很多也受到这个结果的影响。
web的体验缺少许多我们在生活中用来同空间相处的感觉,感觉不到大小、方向、位置,网站通过具体化网站的层次结构补偿了缺失的空间感,营造出某种位置的感觉。导航不只是网站的特性,它就是网站。
导航的作用:
·帮助用户找到想要的东西;
·告诉用户当前位置。
·给用户固定的感觉。
导航容易被忽视的功能:
·告诉用户当前的位置。
·告诉用户如何使用网站。
·给用户对网站建造者的信心。
网站导航的基本元素:
网站标志;栏目导航;当前页面名称;当前页面导航(二级导航,三级导航,等在主导航上看不到的);底端导航。
持久导航应该是能随时出现,并能以同样的方式引导客户。
持久导航应该包括5个元素,这5个元素是你一直需要的:站点标志;回主页的方式;搜索的方式;实用工具(帮助一类);栏目。
不是每个页面都需要持久导航,在主页和表单页面的时候,有可能不需要。对于这些页面,可能只需要一个站点标志,一个回到主页的链接或者任何有助于填写表单的实用工具作为最小规模的持久导航就可以了。
站点LOGO 要让站点LOGO出现在页面可视层次的首要位置,可以通过两种方式:让它成为页面最显眼的内容(如放在左上角、在标志周围大量留白),或者让它涵盖页面所有其它元素。
栏目 也称著导航条,是到达站点主要栏目的链接。大部分情况下,持久导航也包括二级导航。其中最重要的元素之一是把我们送回主页的按钮或者链接。常用的方式:在栏目或实用工具清单中包含一个回到主页的链接;或者在主页之外的站点LOGO上小心的加入“HOME”的字样,让它家知道可以点击。
实用工具 是到达网站中不属于内容层次的重要元素的链接(帮助、联系我们、购物车一类)。
搜索 由于搜索的潜在纹理和喜欢搜索的用户比喜欢流浪的用户更多,因此除非站点规模非常小而且组织得很好,否则每个页面都应该有一个搜索框。记住搜索的元素,一个输入框,一个按钮,还有“搜索(search)”字样就好。不要弄得太复杂。
设计搜索要注意的事项:
·尽量不使用花哨的用词 最好用“搜索”,“查找”、“快速查找”一类的装饰并不比搜索的效果好。
·指示说明 只要搜索的设计具备搜索的三要素,即使是新手也知道它的用途。过多的指示让人觉得罗索和落伍。
·选项 在提供选项缩小范围之前,一定要三思,谨慎的提供选项。在用户达到搜索页面的时候,发现搜索的内容太多的时候,才需要缩小搜索范围。
网站层级结构
在讨论主页的颜色方案之前,拥有显示网站所有潜在级别的导航的样例页面非常重要。用户在底层页面上花的时间通常和花在顶层页面的时间相同。除非一开始就至上而下进行导航设计,否则以后很难再进行添加,也很难保持一致性。
页面名称
·每个页面都需要一个名称。
·每个页面名称都要出现在合适的位置。
·名称要引人注目。
·名称要和点击的链接一致。如果点击的文字和页面名称并不完全匹配,也要保证:它们尽可能匹配,不匹配的原因很明显。
页面菜单指示器(在导航菜单上的标示)
要抵消网络固有的空间迷失感,其中一种导航方式是告诉我当前在什么位置。在WEB上可以用突出我当前的位置来做到,不管是在页面的导航条、列表还是菜单上。
层级菜单(“首页〉新闻〉国内新闻”这样的东西)
和页面指示器一样,层级菜单也可以告诉用户当前的位置。和指示器不同的是,页面指示器告诉用户所在的站点层级结构的前后关系,层级菜单只告诉你从主页到当前位置的路径。
对于绝大多数网站来说,只有层级菜单这样的导航并不够。他们不能很好的替代两层层次结构的导航显示,因为他们的表现力不够。
层级菜单用来补充固定导航机制,使最有价值的,特别是对于那些层次复杂地打网站,或者需要绑定一堆子网站的时候更加有用。
层级菜单的比较好的形式:
·把他们放在最顶端。
·使用小字体。
·使用文字说明。
·将最后一个元素加粗。
·没有把它们用作页面名称。
标签导航时大型网站导航的上佳选择。
·它表现的作用不言而喻;
·它们很难错过;
·它们很灵活;
·它们暗示了一个物理空间。
要使用标签,可以参考AMAZON的标签设计,务必模仿以下三个要点:
·正确绘制。 要冲分发挥标签的作用,标签的图形必须营造出以下效果:激活的标签页位于其他标签页之前。激活的标签必须有一种不同的颜色或者外形作为对比,并且在它下面的空间在物理上连接起来。
·颜色编码。 AMAZON为站点的每个栏目使用一种不同的标签颜色,并把这种颜色用在页面其他导航元素上,让他们浑然一体。AMAZON使用相当鲜艳和饱满的颜色来吸引你的注意力。而且,由于未激活标签页使用中性的米色,这样,由于未激活的标签和当前的标签之间对比强烈,即使色盲的人也能注意到。
·当你进入网站时,有一个标签已经选中。
后备箱测试(网站导航系统测试)
当你把网站的某个页面交给某个测试者,他能毫不犹豫地回答以下几个问题:
·这是什么网站?(站点LOGO)
·我在哪个页面上?(网站名称)
·这个网站的主要栏目有哪些?(栏目清单)
·在这个层次上我有哪些选择?(本页导航)
·我在导航系统的什么位置?(导航指示器、层级菜单)
·我怎么搜索?
测试执行过程:
在网站上任意选择一个网页,把它打印出来;
拿到一手开外或者斜过一个角度,让你不能仔细观察;
尽快找到下面清单中的项目并画上圆圈。
圈出以下部分:1、站点ID 2、页面名称 3、栏目和下级栏目 4、页内导航 5、层级菜单或者导航指示器 6、搜索。
回复Comments
作者:
{commentrecontent}