如何解决协调设计——组件化设计

老板：这次产品迭代设计要多久？

设计师：一个人大概需要2周

老板：好在给你加2个人，限你3天完成！

好吧，这只是个笑话，我们都知道这是不可能的，但是我们如何解决在多人协调的时候提高设计效率呢？或者在新加入的小伙伴不熟悉产品时，如何快速融入团队？

解决方案就是—组件化设计

我们知道“分子是由原子组成的，分子分成原子，原子也可以重新组合成新的分子”。一个界面是由独立的分子组件搭建而成，分子组件由原子元件构成，这些原子可通过不同的组合方式，组成新分子组件，继而重组构成新的界面。

组件化设计思维是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案，从而提升设计效能。

1. 在设计开始前，团队小伙伴最好能够一起确定设计风格，比如市面常见的material design  、flat design等，确保大家心中预期一致。
   

2. 确定产品主要页面的表现形式，卡片？list？还是IOS的大标题大留白？

3. 接下来就可以具体到每个组件了，颜色、字体、按钮、图标、list样式等。

4. 大家设计各自负责组件的时候多沟通，确保高度、颜色、字号、阴影等匹配，这个时候多花时间沟通，为的是后面事半功倍。

5. 人员充足的情况下，可以分出一个小伙伴对制作好的组件进行组合测试，确保视觉效果。

6. 宁缺毋滥，不常用或复杂组件宁肯不做，也不要为了做组件而做，会导致后期各个页面不一致。
   

下面以ant design的组件库为例

button

picker

message

tag

当产品上线后，可以根据反馈对组件库进行维护，有新的迭代需求时，直接从组件库中调用。

对了，组件化设计还极大的缩短了前端的工作量，事半功倍。