小谈设计规范之标准化组件

fruit

　　对于很多初级设计者而言，在产品成型初期往往会遇到同个产品中出现交互和视觉不统一的问题，打个比方：用户操作的同类错误反馈有的以alert形式出现，而有的却以toast形式闪过；在不同平台上，提示语、入口名称名称不一致等等。
　　解决这些问题的最好方法是在项目初期就开始建立产品专属的设计规范，这样做不仅可以从交互和视觉这两方面把控产品的连贯性，提高用户体验质量；从另一方面来说，对于处在成长期的团队来说，设计规范的存在不仅有助于团队其他成员更好地理解产品的定位，如果在未来项目规模扩大，需要有更多设计师的加入时，也能够快速的进行传承和交接。
　　本期我们将为大家介绍设计规范中的一个重要部分——标准化组件，并以文本输入组件为例，和大家一起来看一下在编写设计规范时应当考虑到哪些方面。

　　/ 基础组件 /
　　Fundamental Components
　　『以单行文本输入和单选组件为例』

　　在一众输入组件中，单行文本输入框和单选框可以说是最简单、最基础的两种形式了。因此对于初级设计师而言，在制定输入组件的规范时以单行文本输入为起点进行发散和延伸，有利于进行后期差异化组件的构思。
　　对于单个组件，一套完整的规范需要从以下两个维度来定义：
　　- 组件的交互层面和视觉层面（包括，尺寸、间距、色彩、反馈、逻辑、制约条件等等）
　　- 组件在不同阶段或状态下要传递给用户的信息

　　以上图为例，我们对单选组件在初始状态下和异常状态下的样式进行了说明，如果再进一步的话，设计师还可以对输入光标的样式、弹出键盘的类型、错误提示的动效等细节进行进一步定义。

　　从视觉设计的角度来讲，我们需要根据交互方案和状态的变化，对组件中出现的文字样式、颜色、布局、尺寸等方面进行定义。
　　/ 高级组件 /
　　Advanced Components
　　『让我们来想想还有哪些变体』
　　不论是对于 To C 还是 To B 类产品，常见的表单输入项还包括手机号、邮箱地址、时间日期、地区、金额等等。

　　以下是我们在嗨销UI升级中重定义的高级衍生组件类型（部分）。根据产品的定位和功能需求，我们整理出了目前已经出现过和未来大概率会用到的组件，再根据用户在实际使用过程中的反馈，给出了更符合产品使用场景的交互方案。

　　这些由基础组件衍生出来的高级组件，总会与他们的『本体』有多多少少的差异，因此，我们还需要对这些具有差异的方面进行额外注释。
　　举个小栗子：


　　写 在 最 后　　
　　『工欲善其事，必先利其器』
　　从项目初期就着手设计规范的编写和标准化组件的定义，不仅可以保证用户体验的质量、有利于设计思路的传承，更能够大幅提高设计师和开发小哥哥的工作效率，避免后期返工时需要投入大量的时间和精力重新梳理。所以对于遇到类似问题的小伙伴，不如尝试一下在项目早起就开始整理、归纳，相信一定能事半功倍。