网站导航功能分类

daohang

网站导航是整套网站系统中重要的核心功能之一。它能够方便用户浏览并获取网站所提供的信息与服务。它还能够让用户浏览网站过程中不至于迷失,在整套网站系统中能够顺利流畅的完成用户所要做的操作。

网站导航也就是通常所说的栏目设置。通过其可以了解网站的业务以及服务信息。网站导航系统的专业与否也影响着用户对网站的感受,同样使网站信息是否可以有效地传递给用户的重要影响因素之一。

导航系统的作用:告诉你在哪里,可以去哪里,这里有什么,附近有什么,指引你下一步的行为。
导航系统的分类全站、区域、情境式、辅助性导航。

浏览器的导航特点
考虑浏览器环境,其实浏览器上已经有后退、前进、收藏、设为首页等功能,但有时候在页面本身的浏览情境当中也最好要放这些功能,比如在浏览一篇文章,到了结尾能看到[收藏]、[关闭]、[返回]等功能可以方便不少用户看完后其它意图的操作。还有就是区分有无链接的文字样式,区分是否浏览过文字的样式(这些其 实是编写CSS样式范围内的)。

建立情境
最典型的例子用户随便从Google搜索到一张网页,当点击进入页面后,就算是进入了一个情境中。情境中应该告诉用户这是在哪里?(我在什么位置,这是什么网站),这里有什么(页内标题),用户下一步能做什么(能看,能下载,能购买),还能去哪里(栏目,本栏页内导航),以上几点类似于《Don’t make me think》中内页的6点基本要素:1.站点ID、2.页面名称、3.栏目下一级栏目、4.页面导航、5.“你在这里”指示器、6.搜索。

改善灵活性
网站中各栏目之间的内容可能保持垂直的排列方式,但用户在访问内容时要考虑Ta们可以会随时跳转到其它栏目的二级、三级页面中,保持横向和纵向的导航,注意不要导航辅助功能的设置。提供增加的情境和灵活性,弥补等级式系统的不足之处。

全站导航系统
全站导航系统就是要在网站上的每一页都会展示的导航系统,可直接连向重要的区域和功能,无论用户在哪个层次中。全站导航保持一致性,以密集且重复来访的用户为中心,进行设计和测试。
值得一提:具有情境式的全局导航系统,这类导航不仅告诉你这里有什么内容,还告诉用户正在哪块内容中。(图1)

1

图1

区域导航系统
当用户进行某个栏目中后,可能该栏目还会分很多小栏目,把这些小栏目列出来,方便用户可以立刻浏览那些内容,有些网站会把全站导航和区域导航整合成一致且统一的系统,如下拉菜单。和全站导航一样,在同一个站点中他们的表现形式最好一致且统一的。

情境式导航
进入目的页面后,会有一些内容指向特定的网页、文件、对象。比如网站上的“相关文章”,“喜欢这个商品的用户也会喜欢”,“同类TOP10”,要注意[情境 式全局导航系统]主要是说明所处的位置,

[情境式导航]是说明在这张页面内容的情境下,有什么相关内容可以告诉并提供链接给用户(称外部情境式导航链接, 玩概念:)。比如你在Joyo买《精通CSS》这本书,在介绍这本书的页面中,总会有一些链接是指向与CSS类的其它书籍。还有一种是在文章叙述的文字中 放链接(称内联情境式导航链接,玩概念:)

实践嵌入式导航
认识到全站、区域和情境区导航元素都在大多数网页上同时共存,如何在网站中整合好。不过这个问题可能涉及到:网站栏目多少、页面结构复杂度、实现一些效果的JS程序、交互过程相关这些。

辅助性导航系统
包括网站地图、索引、指南。确保大型网站可用性和可寻性的关键。
网站地图

1. 强化信息层次,使得用户熟悉对内容的组织方式。

2.对了解网站用途的用户,则便利其快速、直接访问内容。

3.避免让用户承担太多信息,协助用户。

网站地图 强化层次感,探索感。网站地图有一个很实在的好处,当你在搜索引擎中找到某个网站,它可以直接把你带到相关的栏目中。(图2)

2

图2
网站索引:就是将网站的内容以关键词、词汇、标签按一定顺序(字母,笔划)排列而成。内容之间可以没有等级关系。方便已知条目的寻找,比如歌星中找“曾轶可”,只要有找首字首拼音“Z”就可以。
对小型网站可以利用你对内容了解的知识来决定要引入哪些链接,来创建索引。
对大型网站首先用户从索引中选择术语,再从以该术语为索引的文件清单中选出想要的。

指南:网站的新手指南。设计指南原则

1.指南要短。

2.无论何时,用户都能离开指南。

3.允许用户在指南中,前进,后退的自由移动。

4.指南的设计目的是回答问题的。

5.截图应该明确,具有把重点功能放大的效果。

6.如果指南有好几页,要目录。

向导和配置器:主要是协助用户选择配置产品细节(图3)

3

图3
高级导航方法

个性化和定制化

个性化(猜测用户想要什么。在特定环境中会运行的很好,但在用户体验时,就会失败)就是针对个人的行为、需求、喜好提供剪裁后的网页给用户。如网上买书时,会有“推荐同类书籍”,可能有些推荐的书你已经买过并看过了。

定制化(用户告诉我们想要什么。但有时候用户自己都不知道他们要需要什么)是给用户直接控制权,可以针对展现格式、导航和内容选项的组合做调整。如Google Reader。

可视化:让用户可能采用可视化的方式浏览GROXIS。(在网上浏览博物馆网站时就像逛现实生活中的博物馆一样身临其境的感觉,想了想谷歌音乐的[挑歌]栏目可能比较类似这种概念)

社会化导航用 户上网的需求点、兴趣点可以从观察其它用户行为中推论出来的基础上。比如说一些人上论坛,微博时就是看最近有什么网络话题,关注一些热门的标签、标题;而 这类标签,话题主要是通过搜索日志、使用量统计数据、顾客数据库等站长统计软件中获得。(其实这也是情境式导航,只不过作者用这类导航的产生方式来归纳: 这类导航的内容是通过用户的行为统计产生的,就成了[社会化导航]了)

 

手风琴导航

手风琴导航(或手风琴菜单)是用可折叠面板来展示一类组织后的信息方式,在一定的空间内,它提供了一种大量链接或其他可选内容的访问方式.

每一个嵌入的面板都可以独立的展开(通常会将其他的面板收缩),一般通过鼠标经过或者单击面板标题栏(或者标题栏上的展开/收缩按钮)来显示某一个子选项.

解决什么问题?

当 在有限的空间内想显示大量的内容,或者有大量的内容,如果一次都显示的话会让用户不知所措的时候,问题是如何让用户来访问所有的东西并能够理解(消 化,in digestible chunks)同时可以不用滚动页面,因为滚动页面会让用户从上下文情景中脱离,或者会让他们从页面中喜欢的位置离开

什么时候用?

当选项的数量比较多,页面空间有限,并且可以对选项列表有逻辑的进行归类,分成更小的,内容数量基本一致的内容块

译者注: 此处要注意,内容列表不是内容的标题栏(如截图中是4栏),而是里面的内容元素,比如新闻标题,作者,日期,图片,该要,文字链等

具体解决办法是什么?

对于选项采用两级分类

顶级分类是显示类别或者分组

二级分类是放到每个组里的选项列表

手风琴导航典型的样式是一组可折叠的面板(跟树状导航的外观不一样),同时使用一级分类的内容作为标签(label).分类标签一般是与面板宽度一样可点击的标题栏,或者是一类展开/收缩的图标

手风琴导航默认可以有一个面板是展开的

建议

将最重要内容的面板默认展开,一来可以显示重要的选项,二来可以起到一个示范作用,收缩列表的每一项都独立可以展开

将当前展开的面板高亮,这样用户可以识别面板展开和收缩时不一样的标题栏

要避免将一个手风琴导航嵌入到另一个手风琴导航中.如果你发现需要这样做,树状菜单或者其他的适合显示多级结构的元素可能更合适.

译 者注: 最近的版本中有一个组件就是手风琴导航,而当时并没有意识到,只是几个面板可以收缩和展开,并且至少会有一个面板展开.当时设计的标题栏上的 icon是个上/下箭头来表示展开/收缩状态,但是后来发现逻辑无论如何调整都会存在歧义,后来发现这个组件,义无反顾的将icon换成加号/减号,结果 没有任何问题了…

可选项

手风琴导航可以配置成始终有一个面板是展开的,或者是其他更灵活的(所有的面板都可以关闭,多个面板可以同时打开).一些设计师认为最好的方式是只允许一个面板打开,但是其他人都不认可

手风琴导航可以配置成只有一次只有一个面板会打开,但是很多例子都允许同时打开多个

除非是有表单元素或者其他的不可变的设计元素要求手风琴导航总体上要保持一致的尺寸,否则手风琴导航元素应该可以根据展开面板的不同内容来改变尺寸

通常,手风琴导航是通过单击来展开面板的,但是如果用户的使用情景是”开心的/有趣的/试试这个”,那么鼠标经过来展开面板也是可以接受的

为什么使用这个组件

使用这个组件最主要的原因就是在有限的空间内展示大量的选项

特殊情况

大部分手风琴导航都是垂直放置的,不过也可以水平使用

可访问性

对于键盘用户来说,就像树状菜单和标签一样,手风琴导航通常会打断使用.可以给手风琴导航标签之间的标志和切换面板的上/下箭头加上键盘导航

当javascript被禁用时,手风琴导航需要做兼容,可以考虑把所有面板都展开

如果什么都不显示的话对于屏幕阅读器来说可能会导致内容丢失.可以考虑将高度设置成0来解决.

抽屉式导航: