Dont Make Me Think - 街头指示牌和面包屑–设计导航

11 篇文章 0 订阅
9 篇文章 0 订阅

Dont Make Me Think - 街头指示牌和面包屑–设计导航

Posted 2012-12-05  | 分类:  Web   设计   研发实践    
Web   设计 

记住这个事实: 如果人们在网站上找不到方向,人们不会使用你的网站。

  从你自己作为Web用户的体会就可以知道这一点。如果到了一个网站,却找不到你需要的内容或者不知道该网站怎么组织的,你不太可能在那里待很长时间----或者还会回来,那么怎么创建大家公认的"明确","简单","一致"的导航呢?

网络导航101法则

很多时候,进入网站都是遵循如下的过程:

  1. 通常都是为了寻找某个目标。
  2. 你会决定先搜索还是先浏览:如同在商场购物你会决定是找服务员询问还是自己寻找,区别是在网站上等价的服务是搜索。另一些人则会先浏览,只有在他们久寻不到或对这个网站完全绝望的情况下才开始搜索。
  3. 对任何人来说,先搜索还是先浏览取决于他们的打算、匆忙程度,以及网站是否有良好的导航机制。
  4. 如果选择浏览,将通过标志的引导在层次结构中穿行。
  5. 最后,如果找不到想要的东西,你会离开。

无法承受的浏览之轻

在网络上找东西和在现实中找东西有很多相似之处,但是在WEB上的体验缺少了许多我们在生活中用来同空间相处的感觉,想想下面这些WEB空间的奇怪之处:

  1. 感觉不到大小:即使在频繁使用的网站(除非真的很小),我们很难感觉它有多大。我们只知道可能有很多角落我们从未涉足。同生活中具体的事物相比,我们没有“视野之内/视野之外”的规模估计。 实际上,你很难知道是否已经看到了这个网站上所有感兴趣的内容,因此也很难知道什么时候该停止寻找。
  2. 感觉不到方向:只有更一般的层次或更具体的层次。
  3. 感觉不到位置:点击到的一个新页面是通过链接移动,没有空间上的移动。如果要回到之前访问的内容页面,我们不是依靠它在哪里的物理感觉,而是记住它在概念层次上的位置,然后重新顺着链接过去。
  4. 这就是书签–存储的个人捷径–如此重要的原因,也是为什么后退按钮的点击率占据网络上所有点击率的30%~40%的原因。它也解释了为什么主页的概念这么重要。相对来说,主页就是固定的空间。当你在一个网站上,主页就像北极星,可以点击它给你一个重新开始的机会。缺乏物理感觉既是好事也是坏事。从好的方面说,这种无重状态让人愉快,也部分解释了为什么在WEB上容易忘记时间–这和我们在入神地读一本好书时一样。
    (PS:这也是为什么载入太慢的页面令人讨厌的原因,如果你只能达到每小时几英里的速度,那么飞行还有什么乐趣呢?) 从坏的方面说,导航在WEB上比在物理空间上要重要得多,我们置身网络时,本来就是迷路的。如果还不能通过那些走道知道我们的位置,就会缺乏空间感,对浏览失去信任度和耐心。

被忽视了的导航的用途

  1. 给我们一些固定的感觉
  2. 它告诉我们当前的位置
  3. 它告诉我们如何使用网站
  4. 它给我们对网站建造者的信心

导航的两个显而易见的用途就是帮助我们找到相要的任何东西和告诉我们现在身处何处。

Web导航习惯用法

一般的全局导航都包括站点ID,回主页的方式,搜索,使用工具,栏目。而且WEB上已经有了导航的习惯用法。 但是,并不是每个页面都一定需要全局导航,下面两种情况例外: 主页:它要承担一些不同的任务,遵守一些不同的承诺。下一章会有详细介绍。 表单:表单填写时,用户只想关心在做的事情,需要一些简单的链接和实用工具即可。持久导航可能会成为不必要的干扰。

导航的重要元素:
  1. 网站ID或LOGO:和我们希望在正门口见到建筑的名字一样,我们希望在页面的上方见到站点ID。(通常在左上角) 因为站点ID代表了整个网站,也就是说,它在当前站点结构中层次最高。
  2. 栏目:有时候也称为主导航条,是到达站点主要栏目的链接。在大部分情况下,持久导航也包括二级导航的现实位置,它们一般处在对应栏目的下一级。
  3. 实用工具:是到达网站中不属于内容层次的重要元素的链接。要么帮助我们使用站点,要么提供网站发布者的信息。
  4. 回到首页的链接或按钮

提供搜索

  1. 花哨的用词:他们会寻找“搜索”2字,请使用“搜索”,而不是“查找”,“快速查找”等字样
  2. 指示说明:比如在输入框增加“请输入邮箱地址/用户名/手机号码”等指示用词
  3. 选项:比如买书的网站“书名,作者,出版社”等选项缩小范围

页面名称

  1. 每个页面都需要一个名称
  2. 页面名称要出现在合适的位置(这个有点废话的感觉,但是很有用,参考可视性去做)
  3. 名称要引人注目
  4. 名称要和点击的链接一致。(匹配性原则)

面包屑

面包屑和“你在这里”指示器一样,能告诉你当前的位置

  1. 把它们放在最顶端
  2. 使用“>”对层级进行分割
  3. 使用小字体
  4. 使用了文字“你在这里”:大多数人会明白面包屑是什么,但是由于他的字体比较小,不让让它们自我解释,
  5. 将最后一个元素加粗:表示为当前页面,得到应有的突出

标签

标签是大型网站导航的最佳选择,因为

  1. 它们不言而喻
  2. 它们很难错过。标签在视觉上很难被忽略,而且它们就是导航
  3. 它们很灵活。标签能增加修饰作用而且更实用
  4. 它们暗示了一个物理的空间。

个人博客:http://demi-panda.com
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值