关于导航的探讨

记录于

许多网站缺乏针对性和友好的导航设计,难以找到连接到相关网页的路径,也没有提供有助于让访客/用户找到所需信息的帮助,用户体验非常糟糕。本期薯片会我们尝试就网站导航交互做一些探讨。
首先对于WEB交互设计师来说,解决上面遇到的问题,使之简单的方法是设计一套完善的网页导航系统。

优化网站导航设计的目的
professional essay writers 一个网站导航设计对提供丰富友好的用户体验有至关重要的地位,简单直观的导航不仅能提高网站易用性,而且在方便用户找到所要的信息后,可有助提高用户转化率。
如果把主页比作网站门面,那么导航就是通道,这些通道走向网站的每个角落,导航的设计是否合理对于一个网站是具有非常大意义的。
1) 决定用户在网站中穿梭浏览的体验,这一点是最基本的。
2) 网站导航设计合理,可以将网站的内容和服务最大面积的展现在用户面前。
3) 合理的导航设计可以增加用户黏性,提高网站的浏览深度,从而提高网站PV值。
4) 促进用户消费,提高网站盈利。引导用户消费,将用户真正需要的产品和服务展示在他面前,甚至用户想不到的服务你也呈现。
5) 提高网站广告价值,增加网站广告收益。
•••••••

网站导航的常见结构

雅虎的网页设计一直是国内众门户模仿的对象,我们首先来看看Yahoo网站现有的几种导航样式:
1) Yahoo首页 (最常用的栏目导航)
1.jpg
Yahoo首页左侧的导航列出了网站最常用(或访问最频繁,或网站运营最想让用户知道)的几个栏目。这种导航(也包括网页顶部横向结构)是目前互联网中使用最广泛的导航方式。

2) More Yahoo!Services (更多的导航信息的展现)
0116-2.jpg
Yahoo作为一个全球大型综合门户网站,所提供的服务肯定不止首页左侧导航显示的那几个,那么更多的服务如何导航?同时又如何展现给用户呢?于是Yahoo的设计师们给我我们一种解决方案,如上图,点击0116-3.jpg 从网页左侧展开一浮出层样式的服务导航页面。可以发现,这种导航也是多维度的(下面我们会专门探讨)

3) Tab 式位置导航变体

0116-4.jpg

我们还可以在Yahoo!TV 等栏目上发现这样有趣的导航结构,我们暂且认为他是Tab 式结构加上一个下拉菜单的一种导航组合。
 TV Home – Shows – American Idol – Overview 组成了一个单维度的导航
 TV Home同时提供了下拉菜单方便用户快速的转到其二级栏目下。
(这里我遇到一个困惑,在这里我不知道怎么TV Home上一级的目录是什么,也不知道如何返回。)
Amazon可以说是在网络产品导航上的鼻祖了,让我们再来看看Amazon的导航样式又有什么特色。
4) Amazon首页
0116-5.jpg
看看它和谁最像?
0116-6.jpg

5) 购物列表页面
0116-7.jpg

单一维度 和 多维度的导航结构 (Amazon购物导航)
我们通常认为面包屑导航为单一维度的导航结构,如上图红色实线框所示,即它是一种线性的导航方式。不过在网页的应用中,“面包屑”导航的应用有两种:
a)“追溯来路”即跟踪用户行为,记录的用户在网站的活动足迹的一种“线性导航”,
b)用来表达内容归属关系的界面元素,也就是我们经常看到的“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样的层级归属关系.

而改网页左侧的导航却提供多种维度的导航,且这多种维度可以组合成不同层级的面包屑结构
如,我想买一台LCD平板电视,进到了:
Electronics › Audio & Video › TVs & HDTVs › Flat-Panel TVs › Flat-Panel LCD TVs
在这个页面上,左侧导航给我提供了品牌、供货商、价格、显示屏尺寸……等多种选择。
我可以先选品牌再选尺寸,如:
0116-10.jpg
也可以先先尺寸再选品牌,如:
0116-11.jpg
因此这种方式为用户提供了多种维度的导航,运行用户如在电器超市随意逛逛挑选商品,而不必考虑该先问导购员有什么品牌还是问有什么尺寸好。这一点符合用户的心理模型,值得设计中借鉴。

网站导航设计需要注意的问题及基本原则
我们就网站组日常需求中,有关导航的交互设计工作进行了交流,总结出在网站导航设计中需要注意的几点问题,及基本的原则。
1. 导航条的位置。主导航条的位置应该在接近顶部或网页左侧的位置,如果因为内容过多需要子导航时,要让用户容易地分辨出哪个是主导航条,哪个是某主题的子导航条。
2. 导航使用的简单性。导航的使用必须得尽可能的简单,避免使用下拉或弹出式菜单导航,如果没办法一定得用,那么菜单的层次不要超过两层。
3. 面包屑导航。应该让用户知道现在所看的网页是什么和与现在所看网页的相关网页是什么,例如通过辅助导航“首页 > 新闻频道 >新闻全名”里的对所在网页位置的文字说明,同时配合导航的颜色高亮,可以达到视觉直观指示的效果。
4. 导航内容明显的区别。导航的目录或主题种类必须得清晰,不要让用户困惑,而且如果有需要突出主要网页的区域,则应该与一般网页在视觉上有所区别。
5. 导航和排序的区别。导航和排序容易混淆,需要留意(看图指出问题)
0116-8.jpg
这里的tab是导航还是排序?
0116-9.jpg
Google Reader上的处理
6. 准确的导航文字描述。用户在点击导航链接前对他们所找的东西有一个大概的了解,链接上的文字必须能准确描述链接所到达的网页内容。
好了,本期薯片会的讨论到此为止。欢迎继续关注shupianhui.Com 关注我们,参与我们的讨论和交流中来

  • evan

    薯片会2008年第一期将于今天晚上开始:)

  • 醉中仙

    踩一下。
    前面的没有评论让我觉得很 怪异:)

  • http://i.cn.yahoo.com/lancemont 彩虹墓地

    amazon的那个发刷状导航相比windows开始菜单,更具指向性,我觉得是个进步。其实他们二者的语义是不同,我想想怎么表达。开始菜单给人的感觉是“把普通的顶部菜单竖起来,一级一级的展开”,amazon左导航给人的感觉是“哦,原来里面有这些”。

    我觉得yahoo是所有门户里最具可用性的。

    路过,飘走……果然关注的东西不一样呢

  • http://www.8543.org 宝贝课件

    也帮忙踩踩

  • http://hi.baidu.com/asisoon 设计淫

    上文提到的amazon那个多维度导航存在一个问题,就是用户每次选择选择一个维度时页面都要刷新一次。实际上通常情况下我们希望是我在完成多个维度的限定条件选择后 页面再刷 这样页面的执行效率会比较高

  • 到处乱飞的鱼

    而不必考虑该先问导购员有什么品牌还是问有什么尺寸好?

    这个问题该如何理解?望赐教 谢谢

  • http://www.iqdig.com iqdig

    学习中,网页导航系统很重要!

  • http://www.siaaa.com 张宇

    你的站很不错哦。有空大家交流一下。来个友情链接怎样。(*^__^*) 嘻嘻……继续溜达一下你的其他内容先

  • http://www.izmax.cn mike

    导航并不用设计的很花哨,只要能给客户带来很好的体验就好了。毕竟,别人来你网站看的是内容,除非你这是素材、展示类网站

  • 轻疯自在

    对于桌面软件,导航同样重要,而且可用的标准控件也实在有限,希望能看到更多的业内人士多讨论下桌面软件的交互。

  • alps

    多维度导航很容易演化成一个(看似复杂但无比准确的)信息矩阵,从单一维度上看,始终都是直白浅显的导航,网站需要通过规划信息架构来免去用户自己确定导航逻辑的这部分劳动,然后用户可以按任意维度进行“点状索引”式的info-inquire,即“点–矩阵–点”的准确信息导航。 所谓面包屑以及其他效果,都只是改善,全局上对导航效应的提升无足轻重,有实验支持的。

  • http://winndyshi.blog.163.com wendy

    导航可能更多是要考虑以后的可延续性

<< 返回首页 <<   >>

关于薯片会

...
第一步骤:左手拿起薯片,右手用鼠标慢慢滑动。

第二步骤:吃下薯片(你可以不吃,咬着),然后左手、右手放在键盘位置上,把你想要说的话写上。
...

薯片会成员


臭鱼(李钊)

北京人,男,29岁
www.chouyu.com.cn


Seven

外星人,男,25岁
www.hiseven.net


tesion

很热情的同学
www.tesion.cn


Evanchen

一个真正的交互设计师,应该能够丰富设计这一概念。
www.UExperience.cn


西贝

单纯使人更加专业
www.xibeidesign.cn


艺文

用爱心规划设计
QQ:4251538


流沙

Design to change the world
www.uesand.com


yanyan

真诚是设计的灵魂
Qzone


margaret

蛋小荒—女神


vijeun

按着心里的感觉走
Qzone


vv

万年12岁

readers