大家好，我是Clippp。今天的文章是“面包屑”导航。面包屑的用处在于，它允许用户更快地访问高级页面，而无需使用浏览器的后退按钮或顶部导航栏。

2020年第34股

面包屑作为一种辅助和补充的导航方式，可以让用户知道自己在网站或应用程序中的位置，让用户快速访问自己要寻找的路径。

与桌面网页相比，今天的移动网页已经变得非常小了。如何设计面包屑导航更好地满足手机用户的需求？来看看这次的调研经历吧~

面包屑导航不完整的原因

将完整的面包屑路径放入移动界面很有挑战性，但是应该避免的一种情况是没有提供面包屑导航。比如L.L.Bean的产品页面上没有面包屑，移动和桌面站点都应该豁免。

移动和桌面测试都表明，面包屑导航可以帮助用户知道他们在哪里，并为他们提供清晰的内容层次指导。测试期间观察到的另一个问题是从导航中删除一些内容级别，以缩短面包屑路径。

当面包屑导航路径不完整时，会增加用户做出错误决策的风险，因为他们不知道呈现的导航并不代表完整的站点结构。

避免面包屑路径过长的两种方法

由于层级过多，许多网站无法在产品页面上显示完整的面包屑导航。经过测试，有两种方法可以避免路径过长。

避免过度分类

过于详细或重复的分类会增加面包屑导航的长度。比如HM的产品页面过于繁琐，无法对衣服进行分类，导航中甚至会出现重复的内容。超过50%的电子商务网站存在过度分类的问题。

取消主页和产品页面的导航路径

取消移动端面包屑主页和产品页面的显示是缩短导航路径的合理方式，因为在大多数网站中，我们可以通过点击网站logo跳转到主页。产品页面往往会显示更多的内容，取消显示可以显著缩短导航路径，减少页面顶部的混乱。

例如，在惠普，的产品页面中，主页和产品页面的标题出现在面包屑中，导致页面上的导航路径非常长。

但是AmericanEagle取消了主页和当前页面的显示，整个导航简单明了，使用过程中没有受到影响。

如何实现长面包屑路径？

考虑到移动界面体积小，必要调整删除后面包屑路径还长怎么办？有没有办法显示长路径导航？

左右滑动

面包屑导航设计为水平滑动，不仅节省了空间，还允许用户访问完整的导航结构。

需要注意的是，如果支持滑动，就要保证用户对这种交互方式是清楚的。例如，在Hayneedle页面中，面包屑导航没有完全显示，而是显示一半来引导用户滑动。

双线显示

对于层次较浅的网站，将面包屑导航分成两行也是一个可行的选择。但是，应该谨慎使用这种方法，以确保每个面包屑元素的大小和间距足够大。

如果面包屑的大小太小，会增加用户误操作的风险。另外，两行显示面包屑会增加页面顶部的压力，导致页面混乱，被忽略的可能性增加。

省略中间阶段

在面包屑导航中使用省略号代替中间层可以有效节省屏幕空间。在REI页面，左图用省略号代替中间的级别，点击后会显示隐藏的级别(右图)。

这种形式会给用户转移很多工作，如果没有合理的交互指导，用户可能会忽略面包屑导航。

摘要

实现长路径导航后，为了使面包屑导航易于识别，其设计形式应区别于页面上的其他元素：

导航周围要有足够的空间；

默认情况下，导航带有分隔符或下划线。

最后，为了大家方便，我们整理了50个优秀的面包屑导航案例。

背景回复：面包屑可以获得！

—最后—

原文：baymard.com/blog/implementing-mobile-hierarchy-breadcrumb

爱德华斯科特

译者：Clippp(文章翻译已获作者正式授权)

本文来源于微信官方账号：Clip Design Clip(ID:clipp Design)，作者clipp，授权金铲铲辅助转载。