Don't Make Me Think——设计导航

如果在网站上找不到方向,人们不会使用你的网站。

一、网络导航101法则

1、当进入站点时,你通常是为了寻找某个目标。

2、你会决定先搜索还是先浏览。如果选择浏览,你将通过标志的引导在层次结构中穿行。

3、如果找不到你要的东西,你会离开。

二、无法承受的浏览之轻

1、在网站浏览时,你感觉不到大小(不像某个商场、博物馆):你很难知道是否已经看到了网站上所有感兴趣的内容,也很难知道什么时候该停止查找。因此很多网站会把点击过的链接标记成另一种颜色,给用户一些已经访问了多少内容的直观感受。

2、在网站浏览时,你感觉不到方向:没有上下左右,只有层次结构的上一级跟下一级。

3、在网站浏览时,你感觉不到位置:通过点击链接向前移动,没法知道路上都有什么,因此主页很重要。我们想再访问某个内容时,不是依靠它在哪里的物理感觉,而是记住它在概念层次上的位置,例如书签。

三、被忽视了的导航用途

导航显而易见的用途,是帮用户找到他们想要的东西和告诉用户现在身在何处。

1、导航给了我们一些固定的感觉:迷失的感觉并不好。

2、导航告诉我们当前的位置:通过让结构层次可视化,导航告诉我们网站上有些什么。导航表现了内容,这比引导或告诉我们位置更重要。

3、导航告诉我们如何使用网站:导航会含蓄地告诉你该从哪里开始,你能进行哪些选择。如果正确无误,它应该是你所需要的所有指示说明。

4、导航给了我们对网站建造者的信心:清楚、规划得当的导航是网站给人留下好印象的最好机会。

四、web导航习惯用法

1、将导航元素放在标准位置可以让用户快速定位。

现有的导航基本元素

2、持久导航(persistant navigation,也叫全局导航):出现在网站每个页面上的一组导航元素。导航部分在每一页以一致的外观出现在同样的位置,这让你能立刻确认你还在这个网站上,并且,它在网站上保持一致意味着你只需了解它一次。

持久导航的5个元素
两个例外

3、站点ID:代表了整个网站,它在当前站点结构中层次最高。在主页上,它应该最显眼,在其他页面,它一般在左上角,这样它可以涵盖整个页面。

4、栏目:也称主导航栏,是到达站点主要栏目的链接。有时也会有二级栏目。

二级栏目

5、实用工具(utility):到达网站中不属于内容层次的重要链接,要么帮助我们使用站点(如帮助、站点地图或购物车),要么提供网站发布者的信息(如关于我们、联系我们)。通常,持久导航上只适合放4-5个实用工具,其他不常用的工具可以分组,并一起放到主页上。

常见实用工具
常见实用工具

6、主页:持久导航最重要的元素之一是把用户送回主页的按钮或链接。有以下两种方式:

独立的链接
站点ID上

7、提供搜索:一般一个页面都应该有一个搜索框或一个到搜索页面的链接(当你的网站不太需要搜索时的选择)。搜索的简单公式:一个输入框、一个按钮还有搜索两个字。增加“输入关键字”的说明有点多余;如果存在任何混淆搜索范围的可能性,一定要把它们写出来。

避免混淆

不过这种情况要谨慎,如果你想要提供选项调整搜索的范围,最好在它有用的时候再提供给用户。当用户到达搜索结果页面,发现搜索全部内容得到的结果太多的时候,这时就需要调整搜索范围。

8、页面名称:每个页面都需要有一个名称。名称要出现在合适的位置(涵盖该页内容的位置);名称要引人注目(结合位置、字体大小、颜色和留白);名称要尽可能与点击的链接一样(点击“热土豆泥”理应到达一个叫“热土豆泥”的页面)。

9、“你在这里”:在导航栏、列表或者菜单上突出当前位置来实现,注意要明显突出。

突出方式

10、层级菜单:告诉你从主页到当前位置路径。层级菜单并不能替代两层结构的导航显示,但它可以作为一种很好的补充,尤其是对于层次复杂的大型网站。

正确示例

层级菜单最好放在页面最顶端,类似于书本和杂志的页码;使用“>”对层级进行分隔,它在视觉上暗示了沿着层级向前移动的动作;使用小字体,说明它只是补充机制;使用文字“你在这里”作为自我解释;将最后一个元素加粗;不使用它作为页面的名字(不要故意加粗放大)。

错误例子

11、标签:标签是大型网站导航的上佳选择,它们不言而喻,不会在用户浏览页面的时候被忽视,创造出一种当前的书签在物理上出现在最前面的错觉,并且可以灵活设计。

标签示例

12、Amazon的标签设计:激活的标签页位于其他标签之前,可以使用不同的颜色或外形,并且必须与下方的空间在物理上连接起来;可以考虑为站点的每个栏目使用一种不同的颜色,并且这种颜色用在该标签下的页面其他导航元素上;当用户进入网站时,最好有一个标签已经选中,这样能让用户一进入网站就注意到标签的存在。

示例

13、后备厢测试:假设你被蒙上双眼关在车子后备厢里,车开动了一会后,把你放在某个网页上。除去眼罩时,你应该能毫不犹豫地回答以下问题。

后备厢测试


——著作权归原作者所有——

——图片来自网络——

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,122评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,070评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,491评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,636评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,676评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,541评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,292评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,211评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,655评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,846评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,965评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,684评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,295评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,894评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,012评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,126评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,914评论 2 355

推荐阅读更多精彩内容