简化导航 - UCD大社区

让导航更轻便些

ttmass — 2012-03-07 17:36:07

导航是互联网产品中应用最广泛的基础元素之一，引导用户了解到网站的内容结构进而找到所求。作为基础控件，导航看起来简单，但却是产品设计中最复杂繁琐的一部分。因为我们想要让网站结构更清晰、想要向用户传达所有的信息，所以就赋予了导航越来越多的内容，使他们庞大异常，十分纠结。简化了，用户无法了解到页面结构以及自己的处境，产生困惑；复杂了，导航臃肿不堪，层峦叠嶂，既不美观也不好用。

那么，在清晰的信息架构下能不能让导航尽可能的更轻便、更灵动，是笔者本文想要探讨的话题。笔者看来，为导航塑身可以从以下几个角度来进行：1.简化结构；2.优化形式；3.打磨UI。

网站作为信息的集合体，要囊括海量的资源，从首页到二级页再到专题页进而底层页等等等等，信息的层级多且繁杂，所以就容易形成tab套tab再套tab的局面。那么作为导航塑身的第一步，我们要做的就是把这负责的结构尽量简化，让导航变得轻盈起来，或者至少看起来不那么臃肿。

A．通过面包屑来简化导航结构

面包屑通常水平地出现在页面顶部，一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接（这些链接也是能到达当前页面的路径），在层级架构中通常是这个页面的父级页面。面包屑提供给用户回溯到网站首页或入口页面的一条快速路径。

一个门户网站常见的结构是首页-频道页-专题页-子专题-底层页。如果我们想在门户网站看NBA的视频直播，那么我们来看下他的导航：

如果把信息层级全部展现在用户面前，就会形成上面的这种tab套tab的形式，使得导航臃肿不堪，占据页面很大的空间。可是如果我们把用户关心的导航内容提取出来，就会得到下面的结构：

再扁平化一下：

这就是清晰的面包屑导航。综上，面包屑导航能够让复杂的层级结构扁平化，使得导航更加轻盈。

面包屑导航还有一些变体，是基于用户线性操作逻辑衍生出来的。在无线端产品中应用更为广泛，因为移动设备的显示区域有限，无力支撑庞大的导航结构。在用户点击当前导航内容后，当前导航消失进去下一级导航，并提供返回按钮。

当然，使用面包屑来简化导航结构也是有条件的，不是所有的导航层级都可以用这种方法来简化。面包屑导航更符合用户线性思维导向下的操作逻辑，例如，用户想要看NBA直播，那么他一定不关心娱乐圈发生了哪些八卦，也不care足球或者网球有什么新闻，CBA，CUBA他可能也不十分在意，那么面包屑的线性导航就可以满足用户的需求。或者是由于空间或者设备原因，我们无法提供更为详细的导航，而采用线性简化导航的处理方法。

B．合并导航层级

导航的庞大往往是由于层级过多导致，那么减少层级的一种有效方法就是合并导航层级，例如把二级和三级导航合并，就减少了三级导航，让导航轻便一些。

如上图，图片库包括动态图片和静态图片，每个分类下面又有小的分类，这样的导航层级在产品中十分常见，略显臃肿。那么通过合并层级就可以把导航精简到两级，处理后的导航如下：

瘦身后的导航看起来结构也比较清晰，而且没有影响到信息的传达。

对比下美团和糯米的导航：

美团把注册登录和个人信息等功能性导航和网站主导航做了合并处理，为网站首屏节约出了宝贵的空间。

C.隐藏部分导航

简化导航结构的第三种方法是把部分层级或者导航内容隐藏起来，使得导航看上去轻便一些。

当导航里的内容特别多的时候，可以选择把主要内容留下，次要内容隐藏的方法来处理。例如：

当页面空间有限，无法容纳更多层级的时候，可以选择把次层级隐藏收起，鼠标滑过或者点击后触发此层级的方法处理，这样的例子有很多：

2.优化形式

有些时候，我们无法判断用户在浏览产品或网站时是否是线性思维，也无法对导航结构进行再精简，那么我们怎样让导航再“瘦”那么一点呢。

A．将一维导航变为二维导航

将一维导航转化为二维导航，能够有效的减少层叠导航带给人的重复感和复杂感，能够让操作富有变化，进而提升体验。

类似的列子也有很多：

B.将复杂的层级单独处理

当某一层级的导航内容丰富到一定程度，他就可以充当一个独立控件来单独设计了，他们可以作为页面的元素来单独存在，可能看起来都不太像是导航。

3.打磨UI

说到让导航轻盈，UI是最为常用的手法，在此笔者不做太多的陈述，但是需要注意的是，导航的轻盈与否与导航所处的页面以及重要程度有很大关系。比如在首页，用户需要对页面有整体认知的情况下，导航的UI就不能改太轻薄，而是应该先声夺人，让用户直接注意，并浏览发现所求；同样的，当用户进入到相关的页面开始浏览时，导航的作用就是路灯和司南，这时的导航就不如在首页时那样重要，那么导航就需要轻轻的、悄悄的在用户旁边随时等待着被注意并使用。

电商首页的导航UI上吸引了不少眼球，但是到了结果页导航变成了几乎没有装饰的效果，因为在结果页，用户主要是来浏览产品，所以导航的作用就弱了。

综上，是笔者对导航塑身的一点认识，清晰的导航能够让页面简单易用，反之也会大大影响页面的信息流畅度，所以在导航设计时要精心处理，一点浅见与大家分享。

相关话题：简化导航源地址：http://ueo.baidu.com/?p=955

导航设计中的信息结构

苇子 — 2010-11-24 23:27:49

在进入今天的主题之前，我们先来探讨导航的重要性，并分析一下门户网站中导航的表现。

导航直接影响到公司的财政收入

导航会给我们带来哪些好处？导航不光只是提供信息获取的途径，它的设计优劣会直接影响到整个公司财政收入。下面我们看一个例子（以下内容来自alibaba李凡的《设计师的商业意识》）：

alibaba大致的广告价格

上图反映了阿里巴巴网站大致的广告价格。

其实页面上方大量的空间都被导航占据了，见下图：

可以看出，上方的导航非常庞大，在一屏之内，用户几乎看不到搜索结果。

用户是来找信息的，第一屏完全看不到结果！！！

下面我们要为导航减肥：

导航减肥后的页面

这是减肥之后的导航，搜索结果在更高的位置呈现，同时每个产品位的价格也增加了很多，第一个位置的广告位由9.5万增加到12万。

导航的改变，直接带来了网站的财政收益。

门户网站的导航

导航在Web设计中占据着非常重要的位置，但是我们在设计网站时，常常会忽略导航的重要性，特别在门户网站中，这种现象更加普遍。以下为网易财经频道的页面导航：

财经频道页面

第一幅图是财经频道的首页、第二幅为二级频道股票的首页，第三幅图是大盘的首页。

从上图可以看出：

三张图对比，主导航有了明显的变化，且这个变化是颠覆性的，我们完全没法找出一些关联性的东西。当看到首页时我在想，操盘是股票下面的二级页，但是到了股票的页面，却没有操盘这个导航项了。
同一页面上不支持多级导航，导航能体现的层级有限。
打开大盘页面用户更加不知所措，我到底在哪，导航上没有当前选中的导航。
几乎每点击一次导航，都会在新窗口打开页面，这样给浏览器造成了很大压力。

总览各大门户网站，由于信息内容庞大，结构复杂，前期规划不当，信息需要快速迭代等因素，导航上面都会有很多问题。解决导航问题已经刻不容缓。

在研究导航问题时，阅读了《Web导航设计》这本书，对书中的内容进行了一些总结归纳。今天主要分享一下“导航设计中的信息结构”这一方面。

导航的信息结构

什么是信息结构

结构能够具体的涵盖页面和内容的特定位置。信息结构指的是网站上页面的规划或是架构图，它是你网站的骨架。信息的结构类型包括：

线型结构、网状结构、层级结构、分面结构、逐渐显露的结构。

信息结构的具体分析

1、线性结构

如下图，在此页面可以限制淘宝买家按线性结构完成购买流程。上方的1,2,3,4的步骤很好的引导用户一步一步完成任务，并告知用户所在流程中的位置。

一般的面包屑导航，也是一个线性结构：

2、网状结构

如下图，这是可以由用户设置产出的页面。

网状结构的导航没有起点也没有终点，甚至是没有层级或是序列。

3、层级结构

大多数的网站可能都是采用这种结构。以上下级关系排列节点，以展开其层级。

以下为网易数码频道的导航：

4、分面结构

分面结构中，一个项目的定位由它的属性类别给出：项目1属于类别a，b，c，但不属于d、它有多个访问点。

如下图九天音乐，歌手林宥嘉同时可以在歌手或是排行榜中找到。人们可以从任何顺序取值，从而支持了同一个目标的多种完成方式：

5、逐渐显露的结构

它不是一个事先建立好的信息结构，而是自发形成的，这就是逐渐显露的结构。例如维基百科，它是由每个贡献者参与构建了网站的内容，规模，甚至是方向。

从上面的结构类型可以看出，不同的网站类型需要不同的信息结构，比如音乐类的网址，就是需要通过“音乐”、“歌手”等分面结构来呈现。

理解和掌握这些结构类型有助于我们更好的把握导航的设计。

延伸：信息的组织

确定了信息结构以后，我们要考虑的就是如何组织信息。

比如汽车频道按字母排序的例子：

信息结构和信息组织设计-卡片分类法

卡片分类介绍

在进行网站信息结构和组织设计的时候，我们会用到卡片分类法，卡片分类需要：

制作一些我们事先预设好的分类，交给用户进行排列；
用户可以说出自己的想法，也可以修改分类的名称；
鼓励用户遇到难以理解的分类，大声说出来。

在进行卡片分类时，一般会有两个阶段：

开放阶段，大概需要15个用户，给用户足够的自由度来进行信息分类。
封闭阶段，大概需要8名用户，对之前开发阶段的结果进行验证。

卡片分类在实际过程中的应用

卡片分类定量结果

在进行卡片分类时，会用到两个软件usort和ezsort，usort用于导入用户卡片分类的结果，ezsort可以将所有结果都导进去，并产出统计图。

卡片分类统计结果

总结

这次分享，主要是我对于“web导航设计”这本书部分内容的总结和一些感悟，希望大家在今后的设计中，更加重视导航的设计，在导航设计中找到一些有效的方法。

当然导航设计不光只是信息结构或是组织方法，还与导航的交互方式，导航的视觉表现，导航的扩展性，导航的平衡等有很多联系。针对门户类网站，也有它特殊的导航需求，这是我下面需要研究的内容。

相关话题：简化导航源地址：http://uedc.163.com/3546.html

把导航系统做薄

千鸟 — 2008-07-27 16:50:57

和朋友讨论时，我提到过一个观点，所有框架层设计中，最核心的是导航设计。最近更看到有国外同行提出“80%的可用性是导航！”因为良好的导航可以保证用户找到任何信息。也就是说，提供到达的可能，远比如何到达的可用重要。

我习惯把导航分为一维、二维、多维来简单理解，一维对应线性结构，二维对应分层结构，多维对应无序结构。这么说可能比较抽象，其实都已经是耳熟能详的应用，分别举例阐述设计意图：

最原始仅限于一二三级的，单对多树状应用就是“分层导航”，基本属于必要元素。
跟踪用户行为，记录的用户在网站的活动足迹就是“线性导航”，俗称面包屑。
管理系统的后台，在首页增加的类似跨分层结构的链接就是“无序导航”，俗称快捷方式。

二维结构复杂到一定程度，必然造成导航纵深过度，用户到达的难度增加。此时就需要考虑其他方案综合实施，具体设计可以概括如下：

从无到有的堆积过程，把当前所有能够调度的资源全部拿出来。
由多到少的序化过程，分解任务找出主次任务线索并重组。

回忆起Flickr改版，前几次重要的导航改动，都会更换版本代号，可见Flickr把导航系统看的相当重要。同时，Beta和Gamma两个版本的升级也对应了我的想法，参考头部导航片段：

Beta的特点是想要什么就能看到什么，从Alpha起就在不断的加功能，虽然期间也在做任务分解的调整。但显然，量太大怎么调整也会感觉复杂。Gamma的特点是想要什么就有什么，只不过把要不要的权利还给了用户。

如果从用户体验的角度来阐述，Beta已经满足了用户的认知体验，好玩够用；Gamma提升了用户的操作体验，耐玩易用。大家仔细对比，还能找到豆瓣改版与之相似的痕迹。

有了运营数据，问题很容易暴露。比如北京的交通，最理想的状况是把北京市划分成N个小区域，各区域之间使用地铁/城铁等高速交通工具，各区域之内则使用公交等低速交通工具，同时地铁/城铁和公交站上下一体化，如此可以尽量避免公交路线的大范围交叉（扁平结构），主动预防而不是被动减压。

我们面临的事实，首都不能重建，但产品完全可以重来。

相关话题：Flickr 简化导航源地址：http://ucdchina.com/blog/?p=382

让复杂导航变简单

奇遇 — 2008-07-27 16:56:28

导航设计是结构层面设计中的主要工作之一，在软件中，导航设计的好坏，直接关系到用户使用是否能够流畅。面对较复杂的导航，我们第一反应是将其简化。所以在一些复杂的企业级管理软件中（如SAP、金蝶ERP、浪潮ERP等），提供用户直接通达某位置的快速入口；有些软件则提供收藏夹，让用户把常用的地址收藏；有些则从导航交互的方式上寻求解决办法。

1、在路径层面上提供辅助导航
提起辅助导航，我们会马上想到搜索框、快捷入口、收藏夹等等，之所以会马上想到这些，是因为这些形式让我们的使用更便捷。

图 1-1 SAP界面上的快速入口

SAP上的快速入口，为较熟的用户提供便捷的入口，因为SAP是一个很复杂的企业管理软件，有财务管理、人事管理、生产管理等等，覆盖企业中的各行业，但通常单个用户一般只用其中的一个，比如你是会计师，那么你通常只用到财务管理模块，这时候你只是想打开软件就进入财务模块，快捷入口无疑解除你使用导航树的痛苦。

图 1-2 卓越网（电子商城）上的搜索框

电子商城网站是内容较多的网站类型，如果单纯从导航去寻找某个产品，会令我们花费较多的时间，而搜索框，可以便捷的通过关键字来检索，相信大家已经体验到它的便捷了。

从以上例子我们可以看出，新手可以通过“分类页、导航树和检索”的形式找到自己想要的东西，由于“地形”不熟，不可能有快捷的需求；大部分用户还是喜欢用“简洁导航、收藏夹”之类的形式，这样我可以挑选我想要的进去；如果有一定的自主权，可以直接“搜索框和快捷入口”，我直接跳到我想要的地方，很迫切!不想浪费更多的时间。

2、组织形式也会带给我们好的体验
导航的组织形式很多很多，在软件里，vista系统的路径条曾给我眼前一亮的感觉，我们通常都被系统传统的做法束缚了，vista系统突破了这个的思维，也很值得我们借鉴，不但在组织形式上，在思维上也值得我们借鉴。下图是我截取的一个例子。

图 1-3 vista系统的路径条

3、鱼眼菜单给我的思考
词典的导航，我们通常都是通过搜索，然后根据搜索来查找某单词的释意，但当我们只记得前一、二字母，完全不记得单词的时候，查找是很麻烦的事情，无论是翻书本字典，还是电子字典。这样如此繁多的检索型导航，看下面金山词霸的表现形式。

图 1-4金山词霸主界面

滚动条的拖动，或者翻动书页，都会让你浪费较多时间。Fisheye menus是HCIL（人机交互实验室，UMIACS的下属实验室之一）的研究成果之一，为了浏览者更加方便快捷地使用内容较多的菜单提出的一种解决方案。但一定程度上可以作为词典类导航设计的借鉴。下图为他们的鱼眼菜单：

图 1-5 鱼眼菜单

随鼠标的点击做大幅度的导航，而三角号为微调的工具，相信如此设计，使用起来会顺畅好多，在也不用去拖动那个难用的滚动条。针对内容较多的检索导航，相信我们会有收获。
试想，如果为你的电子词典设计一个这样的检索形式，很容易能在一个不大的区域里，方便的检索到某个单词，况且还可以配合搜索框使用。相信一个简单的思路，会改变用户痛苦的体验。

4、小结，认知的有限性和导航设计

人类的认知是极其有限的，只能很容易的搞清楚简单的问题。我们在设计导航时，也遵循人类的认知法则，尽量让用户一目了然。如果你设计的导航，让用户很费劲或者花费较长时间才能搞清楚，无疑是失败的体验（除非设计目的就是这样）。

没错！“关注你的用户就好了”。设计导航，就是要符合所对应用户的认知度。

相关话题：简化导航源地址：http://ucdchina.com/blog/?p=386

从精简导航谈小型网站的设计

摄氏度 — 2008-11-12 11:31:38

当需要去一个陌生的城市时，我们会先在网上找下电子地图，或者是直接买份当地的地图随身携带着，目的地周边的一些标志性的建筑都是我们需要关注的目标，这样才能最大可能的防止在了陌生的城市迷路。

去一个景区旅游时，我们需要一份景区的导游图，很多时候游客都会按照景区预先规划好的线路去游览景区，景区也会在岔路品标明每条线路的景点图，这是尽最大可能的让游客享受一个舒服的游览。

那么当用户突然来到一个陌生的网站呢？网站的设计者是否也应该提供给用户一个清晰明了的导航呢？如何尽最大可能的不让用户在网站里迷失方向，导航是最关健的因素。

对于一个小型网站来说，因为本身的栏目数量并不多，整站可以使用统一的简洁的导航设计，在保证网站的一致性的同时可以让用户对于网站的整体架构更加的清晰明了。但是事实上，很多的小型网站并没有使用整站统一的导航设计，而且为了让导航内容看起来丰富去拼凑栏目，让导航的设计变得复杂化。

这些把导航设计得复杂的网站，给出的理由很多都是参照门户网站的导航设计，殊不知门户网站的导航设计是受它本身的栏目内容所影响。而这些小型网站本身并不具备这么多的内容去形成门户网站那样的导航，于是拼凑栏目内容成了网站设计者的第二个任务。

国内互联网一直以来都有为“量”设计的习惯，看看网站们的页面高度，一个比一个长，似乎希望把网站的所有栏目内容都搬上首页以显示内容之丰富。页面如此，导航的设计也如此。把所有栏目内容搬上首页的想法也在导航设计上被延续，于是把网站的所有栏目都搬上导航也成了一种趋势。

而栏目内容少的网站为了扩充页面的高度而去拼凑栏目内容，在拼凑更多内容的同时，由于本身的资源限制从而导致了栏目内容质量的下降。

然而内容过多页面长除了造成在浏览器加载时耗费更多的时间跟资源外，还容易造成用户视线的分散，页面内容所引起的用户关注度也随之降低，所以很多网站都把栏目比重偏低的栏目放于页面的底部。

而当内容过多导致页面的高度变长时，用户从中寻找自己需要的内容所耗费的时间将变长，与此相同的是，用户从一个精简的导航里寻找所需要到达的栏目的时间远远小于从内容复杂的导航里寻找的时间，所以一个结构清晰的精简化导航能帮助用户绕过信息干扰快速的定位到自己所希望到达的内容页面，从而提高转化率。

在做网站设计时，应该追求的内容数量与效益所产生的比例，而不是仅追求内容数量。

相关话题：简化导航源地址：http://www.prower.cn/interaction/815