🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

网站设计基础:简述各类有创意的导航方式

 

2009-03-19 15:29作者:KDUED.COM出处:天极网责任编辑:盛晓莹

 随着信息量的增大,分类、导航、搜索相继出现。本文对各类有趣导航方式做讲解,希望能为广大网站设计师提供一点借鉴之处。

  导航的目的很简单:告诉你现在的位置,你可以怎样来,又可以到哪去。生活中最常见的导航是路标,当遇到错误或指向性不明确的路标,一定会使觉得烦躁。下面就介绍一下web网站中导航的应用。

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

  

  世界之窗浏览器

  

  Photoshop导航

  在Web网站中,导航则被创造性的赋予了多种多样的表现形式。以下仅以友商网 为例。

  全站性导航

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

  

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

  区域性导航

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

  

  友商课堂的区域导航

  内嵌式导航

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

  

  友商网的内嵌式导航

  辅助性导航

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

  

  Globalsources的索引导航

  社会化导航

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

  

  淘宝的“猜你喜欢”

  

  淘宝的“同类收藏推荐”

  

  Flickr的“云标签”

  网络上还有众多有创意的导航方式,大致都有一个目标:以更好的交互方式,友好得引导用户最大程度滴浏览站内信息,减少跳出率退出率,增加停留时间。相信随着思想和技术的深入,会有更好更强大的导航方式不断滴出现,让我们拭目以待。

 

转自:http://homepage.yesky.com/90/8760090.shtml


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步