网站面包屑导航设计技巧大科普

面包屑导航设计的好可以增加网站的体验度，增加转化率，同时也可以让用户明白当前所在的位置，并且快速的返回到入口，下面就由创新互联的小编给大家说一下面包屑导航设计的一些技巧，它可以帮助设计师更好的完成网站的设计。

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

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

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

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

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

这就是清晰的面包屑导航。综上，面包屑导航能够让复杂的层级结构扁平化，使得导航更加轻盈。面包屑导航还有一些变体，是基于用户线性操作逻辑衍生出来的。在无线端产品中应用更为广泛，因为移动设备的显示区域有限，无力支撑庞大的导航结构。在用户点击当前导航内容后，当前导航消失进去下一级导航，并提供返回按钮。

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

2 合并导航层级

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

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

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

3.隐藏部分导航

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

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

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

4.优化形式

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

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

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

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

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

5.打磨UI

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

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

6、精简导航层级

精简面包屑导航不仅可以增加用户体验，更有利于搜索引擎的抓取，尽量把面包屑导航控制在四个层级以内，对用户视觉和seo都有非常大的好处。

7、在面包屑中使用关键字

面包屑对于网站的SEO有着很大的影响作用，因此把握关键字的设置也许能为网站带来更多的流量

8、避免重复主导航的形式

现在的电商网站都很热衷于在小细节上做文章，他们的出发点是希望在细节中体现出优良的用户体验，就比如在原本简单的面包屑中添加下拉菜单。网站方认为这样做能让用户在更短的时间内找到自己需要的商品，但其实意义并不大。

9、关键词统一，避免用词重复

面包屑导航存在的目的之一就是为了让用户分辨出在网站的位置，更好的返回，所以，用词精简直接也是面包屑导航设计的技巧要遵守的原则。也就是说，网站的每个页面都有唯一的导航，这样能减少用户产生不信任等疑问，在用词方面，我们也要尽量避免那些有歧义的关键词，大家可以看看京东，他们就做的非常不错。

面包屑导航的存在就是为了让用户能最直观的了解自己所处的位置，因此，用词精简直接并且唯一，是面包屑必须遵守的原则。也就是说，每一个产品页面都有属于它的唯一导航，这样能减少用户在购物时产生的疑问。在用词方面也要尽量避免有歧义的用词，京东的面包屑导航在这方面做的就不够好

19、 面包屑的设计规范

最常采用的面包屑的样式：横向的文字链接，由大于号>分开。这个符号也暗示了它们之间的层次关系。根据你的用户的认知及专业水平，在有必要的情况下，可以在面包屑父子级之间增加下划线以告诉用户这里是可以点击的。

企业网站面包屑导航的设计还要考虑到网站的属性，针对的是什么类型的网站，是企业网站还是电商网站，还是平台网站等等，相应的做出一些调整就更好了。

本文题目：网站面包屑导航设计技巧大科普
标题来源：https://www.cdcxhl.com/news/172901.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有面包屑导航等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联