组件库通用样式设计总结
2023-10-28 11:36:12
作为前端UI组件库，从样式角度去看，应当满足两方面要求：一致性和可定制[1]。 其实这两点也非常好理解，一致性保证了组件库视觉上保持一致，而不是东拼西凑，而且说得高大上一点可能还有规范可循。而可定制就需要组件库暴露接口，供开发者配置形成自己风格的组件库。
但是具体一致表现在哪些方面，可定制要做到什么程度呢？不同场景又应该如何取舍呢？
一致性
1. 全局一致性
从组件库诞生开始，在颜色、字体、间距、边框、动画上就应该统一管理。这个叫做全局一致性，全局一致性是组件库落地最为直接的要求，设计师/前端应该明确达成一致，如果不能在全局统一，那么就无法称之为组件库，最多只是一个风格指南。
2. 局部一致性
局部一致性主要针对通用组件，通用组件在展示形式与交互方式上也有相对规范的解决方法，比如按钮的设计，什么场景下是哪种按钮，应该怎么表现，等等。
这里局部一致性主要是指通用组件在基础样式上应该保持一致，比如 Button 组件都有 hover 状态，那么 Button 无论样式如何，在 hover 状态下都应该是同样的样式。当然局部一致性也应该受到全局一致性的制约，比如按钮在 hover 状态下，它的颜色改变是来自于全局一致性中 hover 状态的定义。
3. 设计规范
一致性的最终目标就是形成组件库的设计规范，规范里的内容主要有：
- 设计理念
- 设计目标
- 组件规范
- 命名规范
- 交互规范
设计理念和设计目标都比较好理解，就是指导组件库的设计思想和它的设计宗旨，这两个比较主观，而且需要随着设计和开发过程不断调整，但组件规范，命名规范，交互规范必须严格遵守。
规范里最重要的就是组件规范，这是组件库样式设计中最重要的部分，它主要包含以下内容：
- 组件的视觉样式，比如 Button 组件应该用什么颜色，它的边框如何，等等
- 组件的交互方式，比如 Button 在 hover 状态下是什么颜色，在 disabled 状态下又是什么颜色
- 组件的使用场景，比如 Button 在哪里应该使用什么样的样式，在什么情况下应该使用什么样的交互方式
命名规范和交互规范是两个小规范，但它们非常重要。
- 命名规范保证了组件库使用的名称统一，能够让用户和开发者快速地识别和使用组件
- 交互规范确保了组件库中所有组件的交互方式统一，也能够让用户和开发者快速地学习和使用组件
可定制性
前面已经提到了，组件库一定要具备可定制性，但可定制性并不是随意开放样式配置，需要根据实际应用场景来选择开放哪些样式给用户。
通常，全局一致性的样式是不应该开放的，比如说组件库的字体、颜色，开发者一般不会去改变，就算要改变也应该基于组件库的默认值修改。
局部一致性中的通用组件的样式则可以开放，比如按钮的 hover 状态颜色，开发者可以修改它，因为这会极大地影响到整体的视觉效果。
组件样式设计的步骤
结合上述一致性和可定制性的讨论，组件样式设计的步骤可以总结如下：
- 确定组件库的设计理念和设计目标
- 根据组件库的设计理念和设计目标确定组件库的全局一致性样式
- 根据组件库的全局一致性样式确定组件库的局部一致性样式
- 制定组件库的设计规范
- 开放组件库的可定制性
总结
组件库样式设计是一项复杂且艰巨的任务，需要考虑很多因素，包括全局一致性、局部一致性、可定制性等等。只有通过综合考虑这些因素，才能设计出优秀的组件库样式。
