在网站和应用程序中，面包屑导航是一种经典的导航方式。它能够让用户知道当前的位置以及如何返回，方便用户了解界面的层次结构。对于用户来说，这是一种非常舒适的用户体验。面包屑主要表达当前页与上级页面的层级关系，不是把用户刚刚访问的每个页面串起来。设计时先确定信息架构，再处理长名称、当前页和窄屏。
把面包屑与侧栏、页面标题放在同一份Pixso界面设计方案中，能同时检查页面归属和操作入口，避免三处对同一模块使用不同名称。
1. 如何设计B端面包屑导航
B端的界面设计十分注重业务逻辑、产品需求和用户体验，而为了满足这些设计需求，面包屑导航也需要遵循以下几条设计指南：
1.1 功能和目的明确
B端主要面向的用户是企业、商家，因此也更注重产品的功能性和实用性。因此，明确目的和功能是进行面包屑导航设计之前必做的一件事。而面包屑导航的主要功能就是为用户提供导航路径，能够快速引导用户了解界面的架构，从而保证用户能够更清晰方便的使用产品。
Pixso资源社区的这一款 后台管理系统设计规范 中的面包屑导航，就能够确保导航功能清晰明了，更方便用户使用，能够达到快速帮助用户定位的目的。这种面包屑导航便于用户识别页面归属，并选择合适的上级入口。
1.2 放置位置
面包屑导航的功能决定了它的放置位置应当显眼，方便用户发现和使用。因此，面包屑导航通常被放在页面的顶部或者页面内容的上方。
后台管理系统设计规范中的面包屑导航的放置位置在页面的上面，这样既能够帮助用户简单快速的找到，又能够方便用户浏览页面，不会造成用户浏览界面时的视觉障碍。
1.3 层次结构清晰明了
保持清晰明了的层次结构能够帮助用户快速梳理复杂界面中的功能结构，这也是面包屑导航设计的要素。上级层级可提供链接，当前页则应明确标识，不必让用户点击后再次加载相同内容。
后台管理系统设计规范 中的层次结构清晰明了，用户可以通过上方的面包屑导航明确当前页面所在的位置。每个级别的名称也遵循了简短、易于理解的设计准则，方便用户理解。
1.4 使用符号
为帮助用户能够更好的理解页面的层次结构，通常会在面包屑导航设计中使用“>”或“/”的符号。
在 Argon | Chakra 后台管理设计系统 的面包屑导航设计中，使用了符号“/”，这种设计能够帮助用户更容易理解页面的层次结构，以及当前所处的页面位置。
1.5 突出当前位置
在面包屑导航设计中，将当前位置突出显示，也就是使用不同的颜色或样式来显示当前页面的名称，有助于用户理解当前页面的位置。
Argon | Chakra 后台管理设计系统 的面包屑导航名称的字体颜色使用了更亮的颜色来突出显示，用户能够快速理解。
1.6 响应式布局
在进行面包屑导航设计时，应当使它能够适应不同的屏幕尺寸。
Pixso 资源社区中的这款 Vision 响应式后台管理界面设计 提供了后台布局参考；实际用于小屏幕时，还需要检查侧栏收起、表格滚动和长路径，不能只按宽屏画面推定全部功能均可用。
从搜索结果进入详情，路径仍然来自层级
以知识库为例，文章属于“知识库／产品指南／权限设置”。用户可能从首页、搜索结果或通知直接进入，但面包屑仍应表达这条稳定层级。“返回搜索结果”可以作为独立入口，并保留关键词与筛选条件；不要把搜索页临时拼成每篇文档的父级。
同一内容确实存在多个归属时，要先确定产品采用固定主路径还是按进入语境显示路径，并让团队使用同一规则。仅把浏览器历史复制成面包屑，会出现相同页面在不同入口下层级完全不同的问题。W3C面包屑模式将它定义为当前页上级页面的有序链接，并要求当前页有可辨认的语义。
窄屏优先保留最近的上级和当前页
长路径不应通过不断缩小字号挤进一行。可以把中间层级收进一个可操作的展开入口，保留根入口、最近上级和当前页；也可以在空间允许时换行。展开后必须能通过触屏与键盘选取完整层级，不能只在鼠标悬停时显示。
如果当前页名称很长，可以缩短导航中的显示形式，但页面H1应保留清楚、完整的名称；需要截断时仍提供读取完整名称的方式。分隔符只是层级标记，不应作为新的可点击项。评审时从搜索进入、从上级进入、直接打开链接各走一次，检查路径是否仍然一致。
2. B端设计常见的UI组件
以Pixso资源社区的 后台管理系统设计规范 为例，B端界面设计中通常会包括以下几种常见的UI组件，这些组件资源都可以直接拖拽使用：
面包屑确认模块位置之后，用户还需要在列表里辨认记录。表格过宽时，可进一步检查列宽、固定列与水平滚动，避免页面位置清楚、记录字段却看不完整。
2.1 输入框
在B端界面设计中，输入框是很常见的。输入框也分为很多不同类型，通常有文本输入框、数字输入框和复合输入框等等。
2.2 选择器
选择器支持用户从列表中选择一个或者多个选项，并且，将选项的内容显示完整能够更好的提升用户体验。先区分命令菜单、页面导航和字段选择，再确定选项的行为。
2.3 搜索框
搜索框是B端界面设计中最常见的 UI 组件，几乎存在所有类型的界面设计中。搜索框能够帮助用户在海量信息数据中快速获取所需的内容。
2.4 颜色
在B端设计中，颜色是让界面更具视觉效果的一种方式。颜色通常被分为主色、辅助色和功能色，使用不同的色彩能够帮助用户快速理解信息内容。
2.5 字体
B端设计需要遵循固定的设计规范，字体设计是设计规范中的其中一种。
2.6 按钮
按钮用于引导用户在界面上进行操作，执行命令。
2.7 图标
图标在B端的界面设计中，对界面的整体视觉效果起到了非常重要的作用。
3. B端面包屑导航案例
结合Pixso资源社区，为大家整理了几款优质的B端界面设计案例：
3.1 Arco Design Pro 2.0 中后台设计系统
这款B端界面设计案例使用了面包屑导航，可以清晰地感受到面包屑导航设计能够帮助用户快速清楚的知道目前的界面位置以及如何返回上一界面。整体页面布局规范，模块清晰明了。不仅明确了每个模块的功能，而且模块间层次清晰合理。
3.2 财务后台管理仪表板
这款B端界面设计案例整体系统框架合理规范，页面布局使用左右结构。左侧的导航区承载了复杂的业务系统，使产品的逻辑更合理，具有很好的延展性。不过，左侧的导航区做了收起的状态效果，虽然这种效果能够节省页面布局的空间，但是信息展示不完整，也有可能对用户造成误解。选择导航位置时，可先比较顶部导航与侧边导航的适用场景。
3.3 银行后台管理系统
这款B端界面设计案例整体视觉清新，注重轻量化。非常适用于银行这类信息数据复杂的产品设计中，能够将复杂的信息简易化并且不影响功能的使用和数据的展示。整体信息设计合理，大大减轻了用户操作的难度，提升了用户体验。
4. 写在最后
在B端的界面设计中使用面包屑导航，可以帮助用户更好地理解页面的层次结构和位置，从而更轻松地找到他们想要的内容。了解完以上关于面包屑导航设计的基础知识和相关内容，相信你可以创建一个易于使用和功能强大的面包屑导航，为用户提供更好的用户体验。以上列举的所有设计案例均来自Pixso资源社区，除此之外，Pixso资源社区还有很多设计资源可供使用。可以从对应资源详情查看预览与使用条件，再把合适的组件放入自己的设计文件中，按实际页面层级调整名称和路径。
准备好页面层级后，可以打开Pixso整理导航方案，把面包屑、标题和侧栏放在一起检查。
