经历过几次视觉大改版，在原来的公司也做过比较完整的规范体系，但是在具体实际操作中还是会出现效率不高的情况，最近也一直在思考如何高效完成设计规范，并能在实际工作流中减少设计资源重复使用现象。在去年我看到《Atomic design》这篇文章 （http://atomicdesign.bradfrost.com/table-of-contents/）产生了一些不一样的思路：组件化设计思路。在我看来，组件化设计思路像是整理术，更像搭积木，在设计中把整体框架拆分为单元、个体、分子、原子。可以自由组合，也可以自由删减，可以根据不同业务组合、不同场景搭建而成。更适合多人协作达到整体统一的效果。具有完整、独立、灵活的特征。
图片来源：Atomic design
– 01 –
什么时候适合组件化思路
多人协同工作
项目中如果有2个以上设计师同时完成设计任务时，很多细节沟通靠口头沟通很容易造成时间浪费，局势一片混乱的情形。如果在多人协作前，有一套完整、统一的设计组件库，在设计中，将这些统一组件应用在设计中，将大大减少不必要的资源浪费，达到统一高效的结果。
产品处于什么阶段可以开始：是0-1？还是1到n的阶段？
组件化设计需要思考很全面，对细节打磨程度要求很高，对业务熟知程度较高。对于一个从0-1的产品，很多商业价值与用户价值还不够清晰，快速上线验证迭代是很重要事情。当上线后，通过验证迭代，产品达到一定成熟时机后，則需要提升用户体验，这个时候考虑完整的组件化设计是一个合适的时机。
-02-
设计流程中存在的问题
传统的设计流程是一串式的流程，从运营需求、产品需求，到需求沟通完后分配到设计，设计制作完到开发，开发完到测试上线，需要投入较多的时间与人的资源。这种设计流程现状就是在多个需求中遇到重复的业务，设计要做重复的页面设计，开发coding重复的代码，整个工作效率比较低效。总的来说这样的设计流程是：页面式的设计流程。
组件化设计流程
如果在设计前花一些时间梳理业务，场景走查，把整体框架拆分成不同的组件和元素进行重新组合定义，将大大提升工作效率，减少反复低效的工作。在制作通用组件初期，设计师需要转换角色，把自己作为一个用户，去体验线上所有的流程，建立好行为路径。并把这些场景走查与业务方沟通了解后续业务规划与方向。设计师在充分了解业务逻辑、产品的未来规划后，在设计组件时候才能考虑得更全面。在未来潜在业务出现时能复用现有规范，保持整体统一的特征。
-03-
如何制定组件规范
设计规范在设计团队早已成为一个行业默认的规矩了，早在谷歌、搜狐、网易已把这些规范作为一种开元的设计语言。每个设计师应该都有过参与团队中制定设计规范的经历，一般来说先定义标准颜色、辅助颜色、字体大小、导航、按钮、tab、翻页、进度条、步骤、弹窗、toast等。这一份设计规范耗费不少人力与时间。但是在实际使用中遇到不用场景、不同业务情况下复用的效率并不是太高。
组件化的设计思路則是站在业务角度，从不同场景出发。组件化设计思路要求设计师考虑的层面更全面。
组件设计需要考虑这三个层面
组件设计最大的特点就在于要考虑全局业务与场景，考虑到通用性与扩展，数据变量的情况。
使用场景层面：组合方式、尺寸大小、布局方式
业务数据变量：预售、秒杀、满减、优惠券等。
交互一致层面：选中、正常、售罄
如何做组件模块？
在做组件设计时尽量覆盖多场景为原则，更多考虑通用性与扩展。当我们找到不同场景中的共同属性内容时，这个共同属性的内容可以作为设计中通用组件，也根据不同业务需求进行布局设计。
细节设计
在具体设计中，要注重细节的打磨，比如不同业务中展示的间距变化，变量的定义，在设计中要带着人性化的思路，创新性的表达，微交互的实现。
组件的组合方式
组件的组合方式是灵活的，在组合需求模块时候要考虑到使用者的习惯、布局的合理性。
-04-
组件化带来的好处
灵活、标准
视觉、交互一致性
维护、替换方便
每年的设计趋势都在发生变化，市场中app的整体视觉语言也会相应发生变化，组件化设计就可以根据组件模块随时更新或者替换。
总结
组件化的设计思路对设计师要求是更倾向于全局性的解决方案，这种思路不仅仅可以在设计中体现，在生活中也同样可以使用的一种思维方式。他的精髓就在于：独立、灵活、可组合。例如：宜家是一家高度宣传组件的公司，宜家厨房的短视频就很好提现了组件的独立、灵活、自由组合的特点。
下一篇预告：2018年设计师书单
作者：Hellen
七年设计经验，艺术设计学硕士毕业，专注用户体验设计、心理学、自我管理与提升
如果您喜欢我的文章
那就长按二维码立即关注我吧
我会更加加油努力的
原文始发于微信公众号（咏舍）：视觉改版中组件化设计思维
评论0