[感悟]组件化设计的一点思考

起源是我在 DN 社区看到这么一篇文章：Painting with Code。

相关翻译在知乎很快就有了：UI 设计师未来的全新工作方式？React - SketchApp 新手上路。

草草看一下觉得很振奋，我也很喜欢 Airbnb 在设计领域做的一些尝试，当时觉得他们发布了一款可以用代码控制设计稿的工具很厉害，似乎未来设计师再也不用画图稿了，设计到开发的沟通环节也可以省略了。但是至于这款工具的真正意义，为什么它现在不可以双向编辑（只能代码影响设计稿，设计稿不能改变代码）等一些问题我还不是很明白。

最近工作中我和开发经过一些探讨，结合知乎尤雨溪大大在相关问题下的回答，我似乎有点想明白了，这涉及到组件化的设计。

就像前端有组件化开发，设计也有组件化设计。我有一篇翻译的文章详细地讲解了这个过程和方法（翻译地不好，还是建议阅读原文），简单来说就是为了提升效率，在设计稿中把页面分成一块块的组件，每个组件里面的元素又定义了相关的样式，这样你在做其他页面的时候就可以复用这些样式和组件，从开发的角度来说就是“造轮子”。Sketch 44 中有最新 v4.0 版的 iOS UI 设计模板，和之前的相比升级了不少，这套模板中的一个页面是由四级组件构成的：

一级组件只包含形状和样式

二级组件包含了一级组件

三级组件包含了一、二级组件

四级页面包含了一级到三级组件

无论怎么看这都是一个庞大的工作量，即便是像我经手的小项目，如果严格按照这样来设计组件，也是需要花不少时间的，更何况是像 Airbnb 这样的跨国公司。维护一套设计规范需要大量人力，单单从设计的的角度来说，在 Sketch 上，即便你给每个形状和文字都定义并且命名了相应的样式，也耐不住组件之多，也避免不了会出现改变图层的间距导致修改大量细节这样的情况，换句话说，定义样式/组件规范是一项巨大的工作，修改维护规范也是。

注：Sketch 上有很多插件能辅助，但用的工具越多带来的麻烦也越多，不要沉迷研究插件

最近了解了下 AntDesign 和 Element 的框架，在他们提供的 Sketch 组件设计素材中也并没有给每个形状和文字定义样式，这就意味着设计师要根据自己团队的需求来更改这套组件就势必要对上百个样式进行调整。

况且，调整完之后还需要交付给开发，期间还有沟通成本。我不禁怀疑起自己做这些琐碎工作的意义。

用我目前浅薄的前端知识大胆猜测一下，已经生成的前端框架再由设计师在设计稿上修改是否显得很鸡肋，定义好的样式可否直接在代码上直接修改，这样只需要调整几个参数就能使页面整体风格发生改变，就和有些博客的设置主题一样。

那么回归到本文开头的那篇文章，Airbnb 的开源库 React Sketch.app 的意义在哪里，我的理解就是，直接用代码的方式来管理设计样式和组件，显而易见地会有两个好处：

1. 代码管理效率高，设计师不需要手动修改每个地方；
2. 减少和前端的沟通成本，都用代码修改了，成本直接为0。

当然很多设计师会抗拒这样的方式：

1. 不是所有设计师都需要设计整套设计系统；
2. 花太多精力在这事上面那还有时间去搞创意；
3. 学习代码太费劲。

对于我这样的懒人，倒是很乐于去走上这条不归路学习代码的，明白了这些痛点也就能理解 Airbnb 的设计师们为什要做 React Sketch.app 了。当然我理解地也比较片面，权当对最近思考的一个总结。另外对待新事物需要过大脑，不能一味当迷妹。