当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 众多牛X创意的网站导航方式

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 众多牛X创意的网站导航方式


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 120 ::
收藏到网摘: n/a

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

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

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

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


图1:世界之窗浏览器


图2:Photoshop

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

全站性导航

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


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

区域性导航

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


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

内嵌式导航

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


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

辅助性导航

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


图6:Globalsources的索引导航

社会化导航

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


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


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


图9:Flickr的“云标签”

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