吃掉那个面包屑导航

近期的网页设计工作中涉及到不同导航的一系列需求，面包屑导航已于两年前听说它，当时并未有深入了解，整理编辑这篇文章是想对工作思考总结的形式对于导航的一些理解的重新认知，以便于将理解到的导航交互设计更好得应用在工作中，发挥一个导航的使命。

（设计师就是帮助产品找到合适的表达方式，匹配用户的审美及使用习惯。）

本篇主要想从以下几个方面阐述

1.面包屑导航的由来

2.结合案例分析面包屑导航的作用

3.面包屑导航的正确使用方式

4.面包屑导航的未来

----------------

面包屑导航的由来

面包屑导航（英语：Breadcrumb Trail）是在用户界面中的一种导航辅助。它是用户一个在程序或文件中确定和转移他们位置的一种方法。告诉访问者目前的位置及返回的路径。面包屑这个词来自糖果屋这个童话故事。故事里的两个小朋友通过在地上撒面包屑的方式试图找回家的路。

面包屑导航的分类

· 基于位置的面包屑导航（最常见），快速定位当前所在位置及网站内部结构

· 基于属性的面包屑导航，对于一个产品所属的属性不只一种，添加当前条件下搜索的功能给消费者有一个更加直观的了解

· 基于路径的面包屑导航（最不常见），展示了用户访问的完整轨迹。这种面包屑导航通常是动态生成的。有时候它们会有帮助，但是多数情况下它们会让用户感到困惑。用户通常会在各个页面之间跳来跳去，这时候记录下来的路径就会非常复杂，还不如浏览器的“返回”按钮更加实用。而且，对于从外部直接访问的用户来说基于路径的面包屑导航就完全没用了。

2005年7月，微软宣布 Windows Vista 为这款新操作系统的名字。Eclipse 编辑器中显示当前文件的路径(面包屑栏)。

2014年6月 发布Dolphin 5.0 简易的文件管理器，但功能丰富，致力于可用性，可拆分多个窗口每个窗口可设置（和记忆）视图属性。

Krusader是一种先进的正统的文件管理器的KDE和在Unix世界其他桌面。

面包屑导航的作用

· 用户了解当前所处位置及所在层级在整个网站中位置；①关键字语言简明易懂点击，②是否可点击在视觉上做区分便于用户理解，③大疆商城的面包屑导航采用无干扰的展现方式，并匹配界面整体风格

· 替代返回按钮，提供各个层级的快速入口，优化用户体验；京东商城并在导航中做出可选更多提示，提供不同层级的返回入口外，以更快速度选择同类相关信息快速定位获取查询结果

· 有利于百度蜘蛛对网站的抓取，优化搜索引擎；友链和外链是优化搜索引擎的方式之一，做好层级清晰的链接，面包屑导航链接结构引导蜘蛛爬取栏目页

· 面包屑有利于网站内链的建设，增加网站下内部连接

面包屑导航的正确使用方式

· 适用于层级包含较深的产品适用（大型电商类和内容类）

· 关键字展示简明易懂，并且是包含关系

（❌错误展示，需包含关系并非平行）

· 视觉层级上不需占用更大空间，适合无干扰式设计

· 不要使用在移动端使用面包屑导航

· 一级页面不使用面包屑导航

面包屑导航的表达形式及位置

常见形式：“>”、“ | ”、“/”、“> 的演变”

头部左对齐（最为常见）

头部右对齐

底部左对齐

面包屑导航的未来

面包屑导航会被取代吗？会是哪种方式？

下图是苹果官网2015年与2019年首页导航截图，对于分类少内容进行返回首页再选择的方式，优化展示信息，内容层级，让主要信息已直观方式完美展现在用户面前

近期网页的设计在面包屑导航处有的思考与相关信息的梳理，快速定位与跳转是交互设计中较友好的展示形式之一，并有利于网站的SEO（搜索引擎优化）。

抓住了细节就抓住了排名，抓住了细节就抓住了用户。

嗯，期待下一次思考更新