你也许在公司遇到过以上几种情况,这些情况往往会消耗你的时间和精力,进而影响你的情绪。为了提高我们的工作效率创造更多的价值,我们开展了组件化设计。

什么是组件化设计

组件化最早可以追溯到工业革命时期,福特创造了流水线生产方式。福特将汽车分解成零部件,再把零部件模块化组装,这一创举极大的提高了生产效率。那么,将设计拆分成一些基本元素,例如一个按钮、一个弹窗,再根据业务需求、产品逻辑重新组装,形成最终的产品,这就是组件化设计,一种新的工作流程。当然,组件化不仅仅只是设计的组件化,它同样需要开发的组件化,我们也不想仅仅停留在设计稿阶段。

组件化设计的好处

一致性

我们共用一个组件库,首先保证了界面的一致性,相同的组件不再出现两种样式,这对于设计师和开发同学都是很友好的,不需要重复设计开发,大大提升了工作效率;同时对于用户也很友好,在一个产品内,保证视觉上的一致性,可以减少用户额外的认知成本,让我们的产品更加可信。

提升效率

拥有一个组件库意味着不需要每次都重新造轮子,常规的并行式工作流程是:需求-需求沟通-交互设计-UI 设计-开发-测试-上线。

使用组件化的工作流程,如果目前的组件库足够满足业务需求,那么只需要开发组合搭建就可以快速上线,甚至对于已上线的产品,可以通过更改后台来变更界面;如果需要新组件或升级组件,那么再通过常规流程来满足需求,同时新组件在通过组件委员会评估后加入组件库。组件升级后,整个系统内所有使用了该组件的界面都会同时修改完成升级。

我们除了提升工作流程上的效率,也提升了沟通效率。每一个组件都有唯一的命名,当我们互相沟通时使用一致的词语,这将减少很多的沟通障碍。

如何打造一个设计组件库

在上面的流程图中看到有一个设计组件库,那么该如何打造一个设计组件库呢?这时候就要先说一下「原子设计」这个概念了。原子设计是 Brad Forst 于2013年提出的设计概念,在化学上,原子结合在一起形成分子,分子组合成相对更复杂的组织……在界面设计时,原子设计是由原子、分子、生物、模块和页面共同协作,以更慎重和更具层次的方式创造出更有效的用户界面系统的一种设计方法。

对于我们来讲,原子设计是一个心理模型,其中的原子、分子等就是大小不同复杂度不同的组件,原子组件组成分子组件,分子组件和原子组件组成生物体组件,以此类推。了解了这个,就可以开始具体的实践了。下面的实践部分,我会根据我的情况来讲述,也许不完全适合你。