“之前在小报童写了SaaS产品架构付费专栏，后面因为创业去了，没时间继续完善，就搁置了。现在将专栏的内容发到公众号上与大家分享。如果觉得不错可以帮忙点个在看，转发一下。
”
以下是正文内容。
01
—
前言
B端产品大部分设计工作是在电脑Web端，在设计产品原型的时候，如果产品经理熟悉各种前端组件，那么设计的原型一方面一致性很好，另一方面也能和前端开发进行更紧密的配合。更重要的是，我们会知道什么场景下用什么组件来提高用户体验，让用户工作更加轻松愉悦，从而赢得好的用户口碑。本篇我们会介绍常用的组件以及一些交互设计的注意事项。本篇的组件示例来自蚂蚁金服的 AntDesign，这是目前国内前端用得最为广泛的组件库之一，另一个是饿了么的 ElementUI，大家也可以对比了解一下。
02
—
按钮
按钮是随处可见的组件，90%的用户的都和按钮有关，按钮按类型可以分为：
-
主操作按钮：通常背景色和主色调一致，也是最为高频的操作按钮，比如我们的添加按钮通常会设置为主操作按钮； -
默认按钮；也可以叫辅助操作按钮，通常会是白色背景的线框按钮，用于次要操作，比如搜索表单的重置按钮。 -
文本按钮：直接用文字作为按钮，通常会用在列表某一行的操作按钮上。 -
链接按钮：即跳转到其他页面的按钮，比如点击查看详情跳转到详情页面。
按照操作的状态来说，按钮又会分为如下4个状态：
-
正常状态：默认状态。 -
危险操作：删除/移动/修改权限等危险操作，一般需要二次确认。 - 禁用：由于不满足某些条件该按钮无法使用，例如表单未填写完整，没有权限等等。
- 加载中：上一次按钮操作还没有完成，需要完成后才可以进行后续的操作，通常是为了避免重复提交。
这里特别需要注意的是加载中按钮，是很多设计和开发人员容易忽略的。在网络情况下不好的时候，点击提交类的按钮如果没有“加载中”的指示，很多用户会以为没有提交成功，然后会反复点击导致提交大量重复数据。
03
—
输入框
输入框是最为常见的表单组件了，然而，不少产品经理输入框的使用都停留在最基础的阶段 —— 所有类型的输入框都用同一种。对于不同类型的输入，建议还是做一些区分，比如带图标、带前缀标识、带后缀单位、带按钮（如单选编辑保存）等等，通过不同形式的呈现，能够让用户清晰地知道这个输入框该输入什么内容，从而减少输入错误的可能性。
输入框还有两种类型，即多行输入和富文本。多行输入如果存在字数限制，最好是在右下角给出当前输入的字数量和最大可输入字数。当然，单行输入框如果长度足够也可以显示字数信息。
富文本支持设置丰富的图文格式，内容上可以由用户个性化输入。富文本的处理最重要的其实是显示，由于用户输入的内容样式、形式很多，需要考虑不同屏幕（Web端、手机端）展示的效果。有些图片在手机端显示不做处理，结果图片宽度超出或者尺寸非常大，导致阅读体验非常差，这块在做产品复核时需要特别注意。
04
—
图标
图标也是界面中常见的元素，通常会在菜单名称前、空间比较小的地方放置图标，图标也可以和很多其他组件组合，比如按钮、输入框等等。在图标选用这块，建议是优先选择组件库自己提供的图标，或者是字体图标（有免费开源资源）。这类图标的好处是都是矢量图标，可以任意缩放，同时可以根据需要改变颜色。比如AntDesign就提供了200来个矢量图标。如果是自己设计的图标，也推荐使用SVG矢量图标。
05
—
面包屑
面包屑展示了用户完整的访问导航路径，通常会放在页面内容区的左上角。面包屑可以让用户清晰地知道当前所处的页面，以及快速回到往上的任意层级界面。如果你的操作界面层级比较深，那么提供面包屑是一个好的选择。如果层级不深（三级以内），那么提供返回按钮也是足够的。
06
—
级联选择
级联选择即按照层级逐层级下钻选择，典型的就是地址按省市区级联选择。级联选择用于层级数据多的数据填写，通过级联可以逐步缩小填写范围，从而提高操作效率。当然，这里有个前提，就是每一级都是用户所熟知的。如果用户不熟悉，那么效率反而会降低。比如省市区如果增加一级：全球的国家，那么很多人其实不知道哪个城市是哪个国家哪个省的，这样填写就会非常费劲了。这种情况下，提供搜索体验会更好。
07
—
树形选择
树形选择和级联选择和类似，某些场景下可以互换，级联选择是横向展开，树形选择则是纵向展开。由于横向空间受屏幕宽度限制，因此如果层级不多（3-4级），那么使用级联选择会更好。如果层级过多，那么应该优先选择树形选择。树形选择典型的应用场景就是组织机构树。
08
—
穿梭框
穿梭框在B端产品中也非常常见，常用于数据项多选，所不同的是，穿梭框采用左右对照的方式可以让用户清晰地了解哪些数据已经被选择，哪些还没有备选，而且可以同时操作增加数据项和移除数据项。顾名思义，穿梭框实际上就是支持数据项来左右两侧“穿梭”。穿梭的控制通过向左和向右的按钮控制，可以同时勾选多个数据项，批量在已选择和未选择的分组间进行切换。穿梭框常见的一个场景是角色成员的设置，可以通过穿梭框来增加角色成员，或者移除角色成员。
09
—
步骤条
当设计复杂的操作时，通常我们会按操作的先后顺序进行分组，以减轻用户的输入压力。典型的就是OA审批中的先设置审批基本信息、再配置表单、最后配置流程。拆分成三个步骤后，操作界面更加简单，用户也可以聚焦在每个分项任务中，体验会更好。
10
—
时间轴
时间轴和步骤条有点类似，步骤条是横向布局，而时间轴则是纵向布局，通常会用来展示某项工作的处理过程，典型的就是工单处理过程展示。通过时间轴，可以清晰地知道在什么时间、什么人做了什么操作，产生了什么结果。同时，时间轴上的标记也可以用来区分不同的状态，例如已完成、进行中、出现问题、环节待开始等等。时间轴除了用于工单过程展示，在审批流中也经常用于展示审批的完整过程。
11
—
总结
实际上，B端的组件还有很多，而且有不少可以相互替换。举个例子，对于单选操作，我们可以适用下拉框，也可以使用单选框。我个人的倾向是对于选项少且文字短的会优先使用单选框，因为单选框相比下拉框少了一次点击操作，而且选项平铺对用户而言会更直观。
产品经理如果能够熟悉有哪些组件，在原型界面上就可以选择最适用的组件，从而提升用户体验。因此，推荐大家去AntDesign看看关于组件介绍的文档。