近几年，各种新兴技术如雨后春笋般出现，尤其是以云计算为主的IT业发展迅速，对后台类产品的设计需求也越来越多。本文将为新手设计师分析B端产品常用组件，帮助大家更好的进行toB产品的交互设计工作。

目前市面常见的且比较成熟的组件库包含阿里设计的Ant Design、TalkingData设计的iView、饿了么设计的 Element，这些组件库经过大量的项目实践和总结，可以支持大部分的 B端产品的设计。

本篇文章将重点分享导航类的控件及适用范围等。

Breadcrumb面包屑

本篇文章将重点分享导航类的控件及适用范围等。

概述：显示当前页面在系统层级结构中的位置，并能向上返回。

使用场景：防止用户在浏览过程中迷失；方便用户定位在页面中的位置；帮助用户理解所处位置与整个系统的关系。

模式描述：一级导航菜单名称+分隔符+二级导航菜单名称+分隔符+.....

基本样式：

带图标样式：

交互效果：当前层级菜单默认不可点击，其他层级的菜单可点击跳转

Dropdown下拉菜单

概述：将动作或菜单折叠到下拉菜单中。

使用场景：当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

模式描述：操作名称+下拉箭头+操作菜单

交互效果：点击或移入触点，会出现一个下拉菜单，点击下拉菜单中的某一项，执行相应的操作。

表格中有多项操作时的应用：

Menu导航菜单

概述：为后台系统提供全局的导航及菜单切换

使用场景：一般分为顶部导航和侧边导航，根据菜单类目多少来选择相应的导航结构。

模式描述：

顶部导航菜单：适合信息内容层级比较简单明了的应用。一级类目建议在 2-7 个以内。屏幕宽度有限，类目数量及标题文字长度不宜过长，菜单类目太多时导致用户切换困难。

一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。

侧边导航菜单

垂直导航较横向的导航更灵活，易于向下扩展， 且允许的标签长度较长。类目数量不限，可配合滚动条使用，适合信息层级多、操作切换频率高的管理性质的后台。侧边导航占据一定的屏幕宽度，一般配合菜单缩起/展开功能 。

侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。

顶部导航与侧边导航结合：顶部导航提供一级类目的分类切换，侧边导航提供二级、三级、四级等的分类切换；页面结构为顶部-侧边-通栏

交互样式：

当前项应该在呈现上优先级最高；当导航收起的时候，当前项的样式自动赋予给它的上一个层级；左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。一般当前只有一个展开项。

Pagination分页

概述：应用于列表数据条目较多，来对数据和篇幅进行更好的展示。

使用场景：一般后台系统列表页数据展示等都会用分页控件。

模式描述：统计数字+上下页跳转+每页数量控制+输入框页面跳转

交互样式：默认选中当前页，每页数量控制默认展示第一项，页面跳转页默认展示当前页，当前选中页与跳转页码数保持一致。

Steps 步骤条

概述：引导用户按照流程完成任务的分步导航条。

使用场景：当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。步骤不得少于两步。如复杂的表单填写等。

模式描述：

简单的步骤条：已完成步骤和完成中步骤及未完成步骤要有明显的状态区别。

有描述的步骤条：每个步骤有其对应的步骤状态描述。

竖式步骤条：步骤条是竖向排版

交互效果：默认展示第一个步骤，其他未填写的步骤不可点击，内容填写无误时可点击下一步，也可返回上一步修改

步骤条的常见用法：购买类的多步骤操作同时会提供预览功能

Tabs 标签页

概述：分隔内容上有关联但属于不同类别的数据集合。

使用场景：多运于平级及大块内容的收纳，方便用户快速切换

模式描述：

基础样式：

选项卡式：

卡片式：

交互样式：页面刷新或调整时默认选中第一个，当前选中项与费选中项有颜色等区别，鼠标点击其他标签可切换。