视觉改版中组件化设计思维【百科全说】

经历过几次视觉大改版，在原来的公司也做过比较完整的规范体系，但是在具体实际操作中还是会出现效率不高的情况，最近也一直在思考如何高效完成设计规范，并能在实际工作流中减少设计资源重复使用现象。

在去年我看到《Atomic design》这篇文章（http://atomicdesign.bradfrost.com/table-of-contents/）产生了一些不一样的思路：组件化设计思路。

在我看来，组件化设计思路像是整理术，更像搭积木，在设计中把整体框架拆分为单元、个体、分子、原子。可以自由组合，也可以自由删减，可以根据不同业务组合、不同场景搭建而成。更适合多人协作达到整体统一的效果。具有完整、独立、灵活的特征。

图片来源：Atomic design

01 什么时候适合组件化思路

多人协同工作

项目中如果有2个以上设计师同时完成设计任务时，很多细节沟通靠口头沟通很容易造成时间浪费，局势一片混乱的情形。如果在多人协作前，有一套完整、统一的设计组件库，在设计中，将这些统一组件应用在设计中，将大大减少不必要的资源浪费，达到统一高效的结果。

产品处于什么阶段可以开始：是0-1？还是1到n的阶段？

组件化设计需要思考很全面，对细节打磨程度要求很高，对业务熟知程度较高。对于一个从0-1的产品，很多商业价值与用户价值还不够清晰，快速上线验证迭代是很重要事情。当上线后，通过验证迭代，产品达到一定成熟时机后，則需要提升用户体验，这个时候考虑完整的组件化设计是一个合适的时机。

02 设计流程中存在的问题

传统的设计流程是一串式的流程，从运营需求、产品需求，到需求沟通完后分配到设计，设计制作完到开发，开发完到测试上线，需要投入较多的时间与人的资源。这种设计流程现状就是在多个需求中遇到重复的业务，设计要做重复的页面设计，开发coding重复的代码，整个工作效率比较低效。总的来说这样的设计流程是：页面式的设计流程。

组件化设计流程

如果在设计前花一些时间梳理业务，场景走查，把整体框架拆分成不同的组件和元素进行重新组合定义，将大大提升工作效率，减少反复低效的工作。在制作通用组件初期，设计师需要转换角色，把自己作为一个用户，去体验线上所有的流程，建立好行为路径。并把这些场景走查与业务方沟通了解后续业务规划与方向。设计师在充分了解业务逻辑、产品的未来规划后，在设计组件时候才能考虑得更全面。在未来潜在业务出现时能复用现有规范，保持整体统一的特征。

03 如何制定组件规范

设计规范在设计团队早已成为一个行业默认的规矩了，早在谷歌、搜狐、网易已把这些规范作为一种开元的设计语言。每个设计师应该都有过参与团队中制定设计规范的经历，一般来说先定义标准颜色、辅助颜色、字体大小、导航、按钮、tab、翻页、进度条、步骤、弹窗、toast等。这一份设计规范耗费不少人力与时间。但是在实际使用中遇到不用场景、不同业务情况下复用的效率并不是太高。