你在网站里不会迷路，要感谢这个导航设计

你在网站里不会迷路，要感谢这个导航设计

一个注解:现在的互联网时代很华丽，大家的专注力更短了。如何让用户在你的网页停留更长时间？面包屑导航条就是其中重要的一种。AppSo(微信号appsolution)本文分享了网页上面包屑导航条的三个W，会让你对用户有更强的网页感。

面包屑(或面包屑标记)作为辅助网站导航，可以告诉用户自己在网站或网页app中的位置。这种表达来自于《汉塞特与葛丽特》的寓言，主角沿路丢下面包屑，创造出一条小路，然后带领他回到自己的家。

像寓言大师一样，网站用户也必须知道自己在网站结构分析中的位置，以便在必要时可以立即访问更高一级的页面。

在本文中，我们可能会讨论面包屑导航的应用和最佳实践:什么是面包屑导航，什么时候应用面包屑导航，以及如何设计面包屑导航。

一、面包屑导航有什么作用?

面包屑导航作为一种合理的视觉辅助，可以告知用户其在网站结构分析中的位置。对于用户来说，这种特征是上下文信息的关键来源，可以帮助用户找到以下难题的答案:

我在哪里？告知用户他们在整个网站结构分析中的位置。

我能去哪里？用户可以找到关于网站的频道和页面。与工具栏相比，用户可以根据清晰直观的面包屑进行导航，更容易理解和掌握网站结构。

我该去吗？面包屑导航最能体现网站内容的使用价值，能激励用户再次访问网站。举个例子，当用户打开一个电商网站的商品页面，商品很可能不是他想要的商品，但是用户可能想要访问其他行业。根据面包屑导航，可以相对降低网站整体跳出率。

1。降低用户个人行为的频率 就应用范围而言，面包屑导航降低了用户在浏览上一页时本应引起的个人行为的频率。除了使用电脑浏览器的“后退”按钮或网站主导航栏返回上一页，用户还可以使用面包屑导航。

2.占有至少页面室内空间

结构紧凑，不占太多页面空，面包屑导航是横向文本链接。好处在于，如果有内容负载，会产生很小的不良影响。

3.面包屑导航为用户产生零苦恼

你大概不会在意这个小小的设计风格，但是没有人看不懂面包屑导航，也没有人不会轻易应用面包屑导航。

二、何时该用面包屑导航?

检验一个网站是否归于面包屑导航的一个很好的方法是建立一个网站导航栏构建的网站地形图或数据图，然后分析面包屑导航在相似或不同的文件目录中是否能帮助用户，提高用户的导航栏工作能力。

你要使用面包屑导航的前提是，大量内容存在于网站的专业分类中，有线性或结构性的分析。专业分类说白了就是网站内容可以分类展示，这种类型又可以再划分出大量的细分类型。典型的例子就像电子商务网站，对很多商品进行有效的分类。

对于层次单一，没有有效结构或分类的网站，不强烈推荐面包屑导航。

三。面包屑导航的分类 面包屑导航根据位置、路线、属性可以分为3类。

1.部位面包屑

面包屑导航反映了网站的结构。可以帮助用户掌握网站结构分析，在多层次(一般两层以上)的网站中导航。如果用户从其他地方(比如百度搜索引擎结果)连接到网站的各个页面，对用户来说是非常有效的。

面包屑导航。Image:marketingland

下图BestBuy的例子，每个文字链接可以偏向一个页面，从右到左，是网站当前页面到上一个页面。

BestBuy的面包屑导航

2.途径面包屑

路径(也称为“历史时间印象”)显示信息用户访问特定页面的所有页面路径。这种面包屑导航连接一般是动态造成的。

有时候，面包屑是有效的，但在大多数情况下，它们是混乱的——因为用户在访问网站时可能会从一个页面跳到另一个页面，这是非常随意的。

这种不规则的访问通道对用户来说并不能起到很大的帮助，但可以很容易地被电脑浏览器的“返回”按钮所替代。另外，如果用户直接去一个网站的各个页面，面包屑是没有价值的。

下图是路径导航的一个示例，它显示了到整个目标页面的两个路径。

面包屑导航。图片:甲骨文

3.属性面包屑

对于电子商务网站来说，属性是非常有效的，电子商务网站根据特殊页面或者更一般的根据产品类型对很多页面进行分类。这种面包屑导航可以帮助用户掌握各种商品之间的关系，也展示了另一种导航栏方法。

面包屑导航。Image:marketingland

例如，在TMLewin(一个知名品牌的男士衬衫)中，面包屑导航显示了特定网页产品的属性。

该页面显示了所有符合“修身剪裁”属性的套装。图片:T.M.勒温

4.结构分析還是访问记录?

面包屑导航的工作经验法则是展示网站结构分析，而不是用户访问记录。因此，强烈建议应用位置面包屑导航或属性面包屑导航，而不是路径面包屑导航。

四、面包屑导航设计方案的最佳实践

设计面包屑导航时，请记住以下几个方面:

1.不能用面包屑导航更换主导航栏

面包屑导航应该作为一个附加功能，它不能立即取代主页面原有的有效导航。记住，面包屑导航是一个方便快捷的功能，是辅助导航栏，是网站导航栏的另一种方式。

根据iPhone的面包屑导航应用主导航栏

2.当今页面的面包屑导航不必加上连接

面包屑导航的最后一项(用户所在的位置)并不一定要显示信息——如果你想让它显示信息，尽量确保它不能被点击或实际 *** 作。因为用户已经在今天的页面上，所以添加链接到面包屑导航似乎是不必要的。

3.应用分隔符

分隔面包屑导航的每个文本链接的最显著的标志是“大于号(>:)”.

一般大于号(>:)用于代理结构分析，就像父文件目录>:根目录的文件格式。其他可以应用的标记有右箭头(→)和双书名(？)及其斜杠(/)。选择哪个标记实际上取决于网站设计颜色和已经应用的面包屑导航的种类。

Image:Dribbble

Image:Dribbble

4.挑选适当的规格和内边距

在设计方案时，应仔细考虑总体目标规格和内部余量。导航面包屑之间要有足够的空间空，否则用户很可能会觉得不舒服。另外，面包屑导航不能在页面中 *** 作，所以不能比主页面导航更明显。

5.不必让其变成设计方案聚焦点

你不必使用花哨的字体或色彩，因为那会与顾客的需求背道而驰。毕竟，面包屑导航的关键目的并不取决于它。

在定义面包屑导航的大小和设计风格时，工作经验的规则是保证用户进入页面后的第一面不是面包屑导航。

下图的面包屑导航设计不是很差，但是有点花里胡哨，很可能会分散用户的注意力，让他们无法关注主导航栏和页面的具体内容。

Image:Dribbble

谷歌的面包屑导航一点也不花哨，但用户可以轻松应用并准确定位。

6.手机上机器设备上不必应用面包屑导航

如果一直要根据手机上的面包屑导航，可能会发现会有常见的故障。就手机应用面包屑导航和相对软件环境而言，很可能是因为依赖于太多复杂的网站(对网站结构分析太深)。处理这个问题，你首先要思考如何简化，然后你就不需要面包屑导航了。

结语

面包屑导航可以帮助用户更方便快捷地访问所有网站，但前提是网站内容和整体结构构建有效。是为数不多的可以提高应用范围和用户舒适度的简单功能。就设计方案而言，只占页面一行，但产生的贡献足够大。

谢谢！

创作者|NickBabich是一名前端工程师，关心UI和UX。口译员|乔瑞

文字翻译自BreadcrumbsForWebSites:What，When，How，已获作者授权翻译成中文。

文章由AppSo出品，让手机更强大，微信号appsolution。