网站设计中，面包屑（导航）的设计方法和技巧

无论一个网站多么漂亮和优雅，无论它提供什么有用的内容、服务或产品，所有的好处都可能很容易被一个因素毁掉：糟糕的面包屑（导航）设计。在本文中，我们将讨论网站UI设计中，关于面包屑（导航）的设计方法和技巧。

什么是面包屑？
面包屑是导航元素，主要用于网页设计和支持用户浏览网站。由于面包屑，用户可以了解他们在网站上的位置，并且可以更容易地习惯网站结构，这意味着面包屑提供了一种更好的寻路工具。然而，面包屑并不能取代主导航菜单。它们提供了二级导航并增加了网站的可用性，以防它有很多页面。

为什么被称之为面包屑？
为什么这个交互元素使用了这么有趣的名字？如果您认为它类似于童话故事而不是设计术语，那么您是对的。这个词与格林兄弟关于汉塞尔和格莱特的故事相呼应：在其中，角色使用面包屑标记回家的路，而不是迷路。在网络上，它的工作方式相同：面包屑从网站层次结构的角度可视化路径或用户的旅程。这就是为什么它们也被称为面包屑路径。

面包屑有三种基本类型：
基于位置：
它们根据网站层次结构向访问者显示他们所在的位置，通常应用于具有由多个级别组成的复杂导航方案的网站。

基于属性：
它们向访问者显示他们所在页面的属性轨迹。

基于路径：
这些向访问者显示他们到达他们所在页面所采取的步骤轨迹。与以前的类型相比，这种类型通常被称为效率较低，不建议应用。

为什么使用面包屑？
增加可查找性：网站架构越复杂，内容越多，组织得越好，可以快速找到。面包屑为用户提供了另一个内容接触点，有助于更轻松地理解网站的结构。

更少的点击次数：使用面包屑导航，网站访问者可以毫不费力地从层次结构的一个级别跳转到任何前一个步骤，而无需一直返回，这意味着只需更少的点击次数和转换即可到达他们想要的页面

有效利用屏幕空间：精心制作的面包屑采用窄水平线，带有不需要太多空间的普通文本元素，因此用户可以导航，但设计人员无需超载页面

没有误解：面包屑呈现的元素几乎不会被用户误解，他们的行为模式已经固化多年，人们很少将此元素误认为其他任何东西较低的跳出率。

面包屑对于初次访问者或没有日常处理复杂网站经验的人来说是很好的支持，因此他们越自信，他们跳出页面的机会就越小。更重要的是，对于定向到特定登录页面的用户来说，这是一种有效的参与方式：将其视为通过面包屑显示的更大结构的一部分，用户可以对跳转到其他页面并查看更多内容产生兴趣。

使用面包屑的一些设计技巧：

a.不要使用面包屑作为主要导航

b.将面包屑放在 H1 标题上方

c.使面包屑，当前页面位置看起来不可点击（或不显示）

d.显示网站层次结构而不是交互历史

e.不要在移动设备上使用多行面包屑

f.不要将面包屑应用于具有扁平或简单层次结构的网站

g.不要在网页布局中直观地强调面包屑

h.面包屑设计不要用太多元素使页面混乱