WEB应用中导航的思考

导航与站点结构树的关系?

从信息结构上来讲,按照严谨的分类,每个网站结构都可以用一个结构树来表示。

在进行卡片分类等研究过程中,往往会建立一种极其严谨的从属关系;简而言之,卡片分类是让逻辑清晰,但是这个结构树可能非常的宽而且深。在这种情况下,如果导航依然保持与结构树的对应显示,显然会与其浅度要求产生冲突。

一个直白明了的导航可能会打破逻辑关系,采用自然语言能够理解的结构。

事实上无论横排导航还是纵列导航,假如入屏幕足够宽或足够长,那么只需要一级导航就可以。这种好处是用户更快找到自己想要的内容,但也打破了导航的结构树体现。

无论从那种角度上来说,用户并不需要了解网站具体的结构树,导航也不必完全照着结构树来体现,以下是各种交互组件对结构树的体现度的排列。从左到右依次降低。

对于信息分类体现度的示意图.png

对于信息分类体现度的示意图

导航与面包屑的区别?

导航是告诉用户可以去哪,面包屑是告诉用户现在在哪。

面包屑比导航更注重信息的分类以及从属关系,面包屑可以告诉用户当前页面的父级元素以及进入路径,导航则不可以。导航只能大致体现用户的当前位置。

全局导航和局部导航在大部分情况下依然还是遵从站点结构树,因此,不少站点选择了将到会与面包屑结合的方式呈现。这是值得推崇的。那在具体使用时需考虑实际情况。

导航与面包屑如何结合?

导航与面包屑的最有效结合就如Vista内路径条一样。但是所有的这些结合,都是建立在信息架构足够清晰、足够稳固同时又足够灵活的基础之上的。

Vista系统的路径条.png

Vista系统的路径条

如果网站信息太丰富、太复杂,有些内容不能明确划分到某个类别中,面包屑就会变成鸡肋,导航与面包屑的集合也变得毫无作用;这方面的典型就是门户网站。

如果你的网站结构够清晰,内容也够稳定,那么极有可能是企业或个人网站,对于这种站点,这种结合则显得非常的高效和优秀。

导航与其他相关元素的结合于区别?

§ 实用工具(Utility

实用工具是到达网站中不属于内容层次的重要元素的链接。他在页面上一般为这些元素:用户登录,帮助信息,关于我们等。实用工具能够有效的帮助我们怎么使用站点;通常,全局导航附近会出现4-5个实用工具。

§ 网站标志(Logo

网站标志,导航,面包屑都能够告诉用户当前在什么位置,仅仅只是详细的区别。通常,网站标志与全局导航共同存在,并且会出现在其右侧。网站标志同样提供一个和全局导航相同的路径:回到首页。但这不意味着,导航可以取消此路径。

§ 搜索栏(search Bar

海量的信息将会使导航不堪重负,搜索似乎是现有的最佳解决办法。对于超大型站点而言,导航很大程度上已经失去作用,搜索成为最重要的路径提供工具。导航仅仅只会按照信息的物理属性而对其进行辅助。

搜索栏与导航同样都告诉用户可以去哪里,为用户提供进入站点路径;搜索栏因此会出现在导航附近区域。如,全局导航右侧。

如何导航用户生产的信息?

Web应用当中,对于用户生产出来的信息,除了提供简单的默认分类之外,大部分应用是提供用户自定义分类的。当用户选择自定义分类时,导航条则不属于这种应用场景。更多的采用的是标签云(Tags Cloud),树状图(Tree)或者链接列表(link list)样式。

如何看待“三次点击“原则?

谓的“三次点击”原则,是站内的链接的一个指导原则,让网站“链接结构”扁平化。从首页开始,网站内的内容经3次点击即可到达。

如企业站:首页 -> 产品列表 -> 产品页(2次)

如资讯站:首页 -> 频道 -> 栏目 -> 内容 (3次)

“三次点击”原则要求必须将信息架构尽量压扁,当遇到海量信息,问题出现了:扁平的信息架构造成了冗长的内容列表,对于导航而言,这有可能导致链接列表项目非常的多,反而不利于用户检索信息。

我们可以看到,“三次点击”原则提供了网站设计的一个重要的参照规范,他的不适用只限于超大型信息站点(如163.com),如果恪守原则的话,用户往往需要进行“内容-列表-内容-列表-”的拨浪鼓式操作。要缩短浏览路径,就必须要建立“内容-内容”的信息关联,建立信息闭环

查看关于导航的所有规范,请进入优涩控实验室


对于系统默认的分类依然可以使用导航条。

可参考http://www.hozin.com/Point/200908/Information-Closed-Loop.html

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>