|按钮如何规范化？

编辑导读：制定按钮规范可能是大家在最初接触UI组件化时尝试的第一个项目。看似简单的按钮，在制定规范的过程中却有不少细节值得我们思考学习。本文将从按钮的规范化展开分析，希望对你帮助。

本文插图

制定按钮规范的流程大概会分成以下三个步骤：
其中制定按钮规范又分为以下内容：

按钮的类型
按钮的尺寸
按钮的状态
图标与文字的搭配
多语言产品的特殊规则

一、明确规范的适用范围
一个公司，会拥有许多设计规范。设计规范能够统一产品的方向与体验，塑造一致的品牌调性。但设计规范有不同的适用范围。根据范围的不同，规范内容的颗粒度也有所不同。
大致会分为以下几个范围：

本文插图

公司级别的设计规范：主要是对公司整体的用户体验、品牌等方面的规范，是公司所有产品的指导基础；
某一类产品线的设计规范：在满足公司整体设计原则的基础上，对该产品线下的若干产品制定统一的用户体验、界面语言、品牌形象等方面的规范；
某个具体产品的设计规范：主要是为此产品制定统一的用户体验、界面语言等方面的规范。

因此，在开始规范制定之前，首先要明确规范的适用的范围，这样才能判断规范内容的侧重点与颗粒度。
这里分享的按钮规范适用于某个具体产品的设计规范，因此颗粒度是最细致的，包括按钮的尺寸/状态等等。这一类的设计规范主要有以下目标：

设计侧：能够统一产品方向与体验，但同时能有一定的扩展性
用户层：对产品的体验一致性得到落地
开发侧：能够提高开发效率，减少重复工作

二、收集按钮的使用场景
明确了规范的适用范围，确定了规范内容输出的细致程度（即主体框架）后，我们接下来要做的是收集规范对象的使用场景。
我们需要尽可能收集产品目前已有的按钮样式、类型。这里不需要事先对按钮进行分类，只需要把我们认为是按钮的收集起来即可，所谓的“即可错杀，不可放过” 。

本文插图

三、按钮的类型
接下来是需要对收集的按钮进行分类。这是非常关键的一步，按钮的分类决定了后续的拓展性。
按钮分类的纬度和名称五花八门，如基础按钮、文字按钮、图标按钮、幽灵按钮等等。这是因为不同的平台都有自己的分类原则和命名习惯。我们不必纠结具体的叫法，按钮分类和命名的关键在于能够在团队内部达成一致，能够达到制定规定的目标，提升协作效率，就是「最合适」的分类。

本文插图

以上是笔者所在团队制定的按钮分类，仅供参考～
定义类型的过程不要忘记了我们紧密合作的开发童鞋。和他们一起讨论哪些按钮作为基础类型，哪些按钮可以通过提供配置项去实现，将有助于我们的设计规范在开发侧的推进，更好地实现按钮组件化。
【|按钮如何规范化？】 四、按钮的尺寸
每个的平台都会有多种不同尺寸的按钮，具体多少种可以根据自身平台的需要来制定，但数量建议不要超过5种，过多的尺寸不仅在使用过程中容易混淆，维护成本也在提高。同时，在制定过程中还需要同时考虑web端和移动端之间的适配。