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

例如，在TM Lewin(一个绅士衬衫品牌)官网上，面包屑导航展示了某特定网页产品的属性。

本页面展示了所有符合「修身剪裁」属性的西装。图片来源：T.M. Lewin

4. 层次结构还是浏览记录?

面包屑导航的经验法则是要展示网站层次结构，而不是用户浏览记录。因此，推荐使用位置面包屑导航或属性面包屑导航，而不用路径面包屑导航。

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

当设计面包屑导航时，要切记以下几点：

1. 不要用面包屑导航替换主导航

面包屑导航应作为一项额外功能，其不能直接替换原本有用的主导航菜单。要切记，面包屑导航是一项便捷功能，是辅助导航手段，是网站导航的另一种方法。

苹果通过面包屑导航来支持主导航

2. 当前页面的面包屑导航无须添加链接

面包屑导航(用户当前位置)最后一项不一定要显示——如果你想让它显示，务必保证其无法点击或操作。由于用户已经在当前页面，在面包屑导航中再添加链接就显得多此一举了。

3. 使用分隔符

分隔面包屑导航各级文字链接最醒目的符号是「大于号(>)」。

通常，大于号(>)用来指代层次结构，就像父目录>子目录这类格式。其他可以使用的符号有右箭头(→)、双书名号()以及斜杠(/)。具体选择哪个符号取决于网站设计美学和已使用的面包屑导航类型。

图片来源：Dribbble

图片来源：Dribbble

4. 选择恰当的尺寸和内边距

在设计时要仔细考虑目标尺寸和内边距。面包屑导航各级文字间应该留有足够空间，否则用户可能会觉得不好用。同时，面包屑导航不能在页面中起支配作用，因此其不能比主导航菜单更显著。

5. 不要让其成为设计焦点

不要使用花哨的字体或绚丽的颜色，因为这样会喧宾夺主，毕竟面包屑导航其主要目的不在于此。

当确定面包屑导航的大小和风格时，经验法则是要保证用户进入页面后的第一关注点不是面包屑导航。

下图中的面包屑导航设计不算太差，但有点花哨，可能会分散用户注意力，使其无法注意主导航和页面主要内容。

图片来源：Dribbble

Google 的面包屑导航一点也不花哨，但用户能轻松地使用和定位。

6. 手机设备上不要使用面包屑导航

若你在手机设备上需要通过面包屑导航，也许你会发现会出现故障。就手机上使用面包屑导航和相应运行环境而言，其可能的原因在于网站的过度复杂(网站层次结构太深)。为解决这个问题，应该先思考如何简化，然后你就不需要面包屑导航了。

结束语

面包屑导航能帮助用户更便捷地浏览整个网站，但前提是网站内容和整体结构构建合理。它是少数的能提高适用性和用户舒适度的几个简单功能之一。就设计而言，其在页面中只占据一行的位置，但带来的贡献却足够大。

谢谢!

作者 | Nick Babich软件工程师，关注 UI 和 UX。译者 | Jorri

本文译自 Breadcrumbs For Web Sites： What， When and How，已获原作者授权翻译。

本文由让手机更好用的 AppSo 出品，微信号 appsolution。

注：相关网站建设技巧阅读请移步到建站教程频道。

（编辑：宁德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!