为 IMO 搭建设计系统
职责
设计师
产品
imo
平台
移动端
时间
2021.9
本文会分享下我在工作中搭建设计系统时的一些心得，虽然现在已经有很多插件可以一键生成设计系统，但我认为设计系统对设计师来说就像是基本功，可以不用，但不能不会。
背景
在 imo 工作的初期，设计和开发都有各自的组件库，但并不互通。这种情况会导致如下问题：
开发的组件使用率不高，很多情况需要反复造轮子。
设计以为页面某个部分使用了 “组件”，但实际上是硬编码，改动时需遍历页面，工作非常繁杂。
开发直接使用设计稿内的切图，导致切图重复，增加了包体大小。对 imo 来说，因为主要服务对象为欠发达地区，包体大小直接影响着产品下载量。
以上的各种情况导致产品无法支持切换主题，尤其是用户非常期待的深色模式。
切图重复
当时产品内有很多重复的切图，在开发查询后发现，即便是简单的一个箭头，也有很多个版本。
在借助设计改版的契机下，开发同事和设计师都有意愿来解决此问题，在详细讨论后，我们打算建立新的设计系统。并借此实现：
设计组件和代码组件一一对应。
后续能够快速切换多个主题。
能够有方法来避免开发同事使用硬编码。
颜色定义
为了支持主题切换，最重要的工作就是颜色定义。
首先讲一下如何确定色阶：定义色阶中最大/最小的明度和饱和度，来确定色阶范围，然后将我们的品牌色作为 60，分别向上和向下拓展。
Blue
Blue
Blue
Blue
Blue
Blue
Blue
Blue
Blue
Blue
获得基础色阶后，就可以根据此色阶拓展出不同的色相，来满足各个场景的需求。
在选用其他色相时，我们使用了 HCL 色彩空间来作为参考。与传统的 HSL 对比，HCL 更匹配人眼对亮度的感知。
在色板完成后，命名也是非常关键的一步。在过去的 UI KIT 里，一般颜色的命名方式和色相有关，比如刚才提到的品牌色，名字为 Blue - 60 。
这种命名方式对设计师使用时，或产品仅有单一主题时比较简单，修改颜色时只需要更换 Blue - 60 对应的色值即可；
但在切换多主题时会导致一些问题：如下图所示，Blue - 60 为默认主题内的主要按钮颜色，但如果我们需要将主题色换成绿色，这个命名方式就会变得容易让人混淆。
Normal
Button
Blue 60: #009DFF
Muslim
Button
Blue 60: #009E15 ⚠️
为解决此问题，我们同时采用了语意颜色来和开发协作。
同样的一个按钮，当使用语意颜色时，它的命名变为“可点击态的普通按钮颜色”，在不同的色板里，这个语意对应的颜色不同，沟通起来更加清晰。
Semantic Color
Button
Button / Normal / Enble
Button
Normal: #009DFF
Button
Muslim: #009E15
通过此规则，我们和开发配合制作了主题替换工具，目前已经支持一键将设计稿替换为不同的主题。
组件制作
在设计组件时，我们首先定义了一些基础的设计规范，让设计师内部的产出具有一致性。
除了规范外，我也在制作哪些组件、如何让设计师清晰的选择、以及如何和代码具有唯一对应关系上进行了思考。目前，我们的组件库分为3个大类。
代号 0 为系统组件，这些不属于我们的产品，为系统自己的部分，主要提供给设计师使用，提升效率。如status bar、keyboard等等。
代号 1 为基本控件，这些是组件里不可再分的基本单元。如switch，button、toast 等等，每个基本控件都有其编号。这样开发可通过唯一token对应。
代号 2 为组合控件，这些由基本控件组合而成，对于一些经常用到的组合控件，可以将其制作为控件，提升设计和开发的工作效率。
101 Button
102 Toggle
104 Toast
202 Item
204 Dialog
205 Sheet
在两年后的今天，此架构仍然能满足开发和设计的迭代诉求。
检查机制
组件做好只是开始，如何保证组件顺利使用是更重要的一环。因为仅凭肉眼无法识别开发是否使用组件，因此我使用了两种方式来解决此问题：
预防：在组件里通过图层遮盖来避免开发直接查看组件标注，通过此方法开发可优先意识到这部分使用的是组件。
检查：委托组件的开发同事为组件添加特殊遮照。通过在走查工具内开启此功能，设计可以快速查看界面是否使用组件。
在完成以上步骤后，整个设计组件系统完成闭环。
当然，设计系统是团队内所有设计师共建的结果。我在其中主要的职责是前期规则制定，和部分icon、组件的制作。
后记
在成功搭建好组件库之后，经过项管和开发的统计，整体设计效率和开发效率提升明显，包体大小有效减少。
月均提效
设计侧 3.0 天 / 人
开发侧 2.9 天 / 人
减少包体
累计减少包体大小 816.6 KB
但是成熟的组件系统也有其弊病，因为规范会在一定的程度影响创新。如果一个产品处于快速发展期，建立设计系统可能并不是那么紧要。同时，在实际项目中也要鼓励设计师提出新的想法，要时刻牢记，设计系统更像是「建议」，而并非「准则」。