导航是互联网产品中利用最普遍的基本元素之一，领导用户懂得到网站的内容结构进而找到所求。作为基本控件，导航看起来简略，但却是产品设计中最庞杂繁琐的一局部。由于咱们想要让网站构造更清楚、想要向用户转达所有的信息，所以就赋予了导航越来越多的内容，使他们宏大异样，非常纠结。简化了，用户无奈懂得到页面构造以及本人的处境，发生迷惑;庞杂了，导航臃肿不堪，层峦叠嶂，既不雅观也不好用。

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

2.优化形式

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

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

　　将一维导航转化为二维导航，可能有效的减少层叠导航带给人的反复感跟复杂感，可以让操作富有变更，进而晋升休会。

　　相似的列子也有良多：

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

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

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

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

　　面包屑通常水平川呈现在页面顶部，个别会位于题目或页头的下方。它们提供应用户返回之前任何一个页面的链接(这些链接也是能达到当前页面的门路)，在层级架构中通常是这个页面的父级页面。面包屑提供应用户回溯到网站首页或进口页面的一条疾速门路。

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

　　假如把信息层级全体展当初用户眼前，就会构成上面的这种tab套tab的情势，使得导航臃肿不堪，盘踞页面很大的空间。可是假如咱们把用户关怀的导航内容提掏出来，就会得到下面的结构：

　　再扁平化一下：

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

　　面包屑导航还有一些变体，是基于用户线性操作逻辑衍生出来的。在无线端产品中运用更为普遍，由于挪动装备的显示区域有限，无力支持宏大的导航结构。在用户点击当前导航内容后，当前导航消散进去下一级导航，并供给返回按钮。

　　当然，应用面包屑来简化导航结构也是有前提的，不是所有的导航层级都可以用这种方法来简化。面包屑导航更合乎用户线性思维导向下的操作逻辑，例如，用户想要看NBA直播，那么他必定不关怀娱乐圈产生了哪些八卦，也不care足球或者网球有什么消息，CBA，CUBA他可能也不十分在意，那么面包屑的线性导航就可以满意用户的需要。或者是因为空间或者装备起因，我们无法供给更为具体的导航，而采取线性简化导航的处理方法。

B.合并导航层级

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

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

　　瘦身后的导航看起来结构也比拟清楚，而且不影响到信息的转达产品经理    。

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

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

C.暗藏局部导航

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

　　当导航里的内容特殊多的时候，能够抉择把重要内容留下，次要内包庇藏的方式来处置。例如：

　　当页面空间有限，无法包容更多层级的时候，可以取舍把次层级隐蔽收起，鼠标滑过或者点击后触发此层级的办法处理，这样的例子有许多：

3.打磨 UI

　　说到让导航轻巧，UI是最为常用的伎俩，在此笔者不做太多的陈说，然而须要留神的是，导航的轻盈与否与导航所处的页面以及主要水平有很大关联。比方在首页，用户须要对页面有整体认知的情形下，导航的UI就不能改太轻薄，而是应当先声夺人，让用户直接注意，并阅读发明所求;同样的，当用户进入到相干的页面开端浏览时，导航的作用就是路灯和司南，这时的导航就不如在首页时那样主要，那么导航就需要微微的、偷偷的在用户旁边随时等候着被留神并应用。

　　电商首页的导航UI上吸引了不少眼球，然而到了成果页导航变成了简直不装潢的后果，因为在成果页，用户重要是来浏览产品，所以导航的作用就弱了。

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

本文由http://www***ixueba***/  整理并发布！