以用户为中心的设计

这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。
推荐您进入文章源地址阅读和发布评论:http://www.kdued.com/2009......%bc%e8%88%aa/

瞎扯之Web导航

作者:Villiamin  |   发布: (编辑)稻草   |   时间:2009-03-16 13:04:42 文字大小:- +

这年头,信息和获得信息的渠道越来越多。随着信息量的增大,先有了分类,又有了导航,再有了搜索,后面的发展还不得而知。在此只是根据平日的所看所想简单聊下导航,欢迎各路高手拍砖~

导航的目的很简单:告诉你现在的位置,你可以怎样来,又可以到哪去。生活中最常见的导航是路标,当遇到错误或指向性不明确的路标,你一定会抓狂。偶本人就曾在某大型商场见到一幅消防逃生路线图,指引标注的甚为详细,可惜的是没有标注“您当前的位置”……

当然生活中的例子不是本文哼唧的重点,下面开始扯web网站中导航的应用。

介个是我们熟悉的浏览器和PS的导航。浏览器提供的“前进”“后退”功能能够让用户双向返回浏览过的页面。PS的导航器则清楚的标明了当前所在的位置。

 

e5afbce888aa01

图1:世界之窗浏览器

 

e5afbce888aa02

图2:Photoshop

 

在Web网站中,导航则被创造性的赋予了多种多样的表现形式。偶主要以友商网做个例子,继续瞎扯。

全站性导航

顾名思意,全站性导航是在网站的每一页都会出现的一种统一表现的全局性导航方式。通常出现在网页的顶端,直接链接到向用户展示的重要区域。另外有一种俗称“面包屑”的导航,虽然未必会出现在所有页面,但是它承担了告知用户所在页面的位置,以及由哪来到哪去的重要功能。(面包屑的由来详见格林童话《Hansel and Gretel》

 

e5afbce888aa03

图3:友商网的全站导航和面包屑导航

 

区域性导航

区域性导航作为全站性导航的辅助,主要用于对本区域中信息做进一步的分类,让用户更方便查阅。需要强调的是,此类区域性导航需要设计得比较灵活,能够应对信息增加导致导航层级增加的问题。下图是友商课堂栏目的区域导航,已经无法满足下一级目录分类的需求了-_-||

e5afbce888aa06

图4:友商课堂的区域导航

 

内嵌式导航

内嵌式导航则更加灵活滴穿插在页面的各个部分,为区域不同却有关联的内容做牵线。在引导用户获得更多相关信息的同时,也可以增加网站的内链。友商网在4.0改版的设计中就大量使用了如下的内嵌式导航:

 

e5afbce888aa04

图5:友商网的内嵌式导航

 

辅助性导航

辅助性导航包括了网站地图(Sitemap),索引(Index)以及其他基本导航以外的导航方式。网站地图需要清晰的写明整个网站的目录结构,虽然几乎没有人去看,但是他的核心作用是指引搜索引擎的爬虫直接爬向网站上的重要页面。索引则多数出现于有海量信息的商务网站(如B2B类站点),他能让用户跳过所有的目录级,直观得看到全部的底层信息。

 

 

e5afbce888aa10

图6:Globalsources的索引导航

 

社会化导航

相比前面提到的导航类型,社会化导航则典型的拥有web2.0的灵魂。这类导航的开山鼻祖是amazon.com。当你购买一本书的时候,系统会根据其他用户购买的类似书籍或目录中的类似书籍,通过一套复杂的算法推荐给你相关的书籍,绝大多数情况下这本书是你需要或者感兴趣的,从而提高了销量。目前国内此类导航做的最优秀的非淘宝莫属。你浏览了商品,系统会“猜你喜欢”,推荐给你相关的商品信息;你收藏了商品,同样会推荐给你其他用户收藏的同类商品。研究一下这些推荐规则,不失为又一种网络推广的途径。另外一种值得一提的是云标签,实际上他是众多关键词的集合,不同的是他同样通过算法将热门的关键词以不同的颜色或字号加以区分,并且实时动态变化,告诉用户哪些信息最“热门”,引导用户去点击。

 

e5afbce888aa08

图7:淘宝的“猜你喜欢”

 

e5afbce888aa11

图8:淘宝的“同类收藏推荐”

 

e5afbce888aa09

图9:Flickr的“云标签”

 

网络上还有众多牛X创意的导航方式,大致都属于上述类型无法一一囊括举例。但目标都是一个,以更好的交互方式,友好得引导用户最大程度滴浏览站内信息,减少跳出率退出率,增加停留时间。相信随着思想和技术的深入,会有更好更强大的导航方式不断滴出现,让我们试目以待……

更多
打印  |  相关话题:导航设计   |  类别:信息和交互  |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买