阅读 39

组件化设计思维

现在有很多人都知道原子设计,也知道了组件化的去规范我们的设计,但只是简单的制作规范还不足以让我们腾出更多的时间来思考如何更好的设计,我们需要在关注出色视觉表现的基础上,逐渐加强对项目协同及体验价值的关注,逐步形成新的设计思维模式。

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

一. 什么是组件化设计思维?

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

不知道大家有没有遇到过这样的情况,设计推进的过程中还是会存在很多反反复复低效率的沟通、重复业务性的页面设计以及重新改布局的情况,这种情况会让设计师陷在低效率的改稿中,设计师的价值也就变成了没有感情的改图机器了。

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

二. 组件化设计思维的关键点

1、完整组件方案

就是把组件视为一个独立的产品,这个产品能够满足不同的场景和用户需求,如下图所示:

2、组件化思维

从需求出发,拆解页面表达结构和所需组件,如下图所示:

很多设计师认为规范就是能够确保界面一致性的重要决定因素,对于组件库的情况了解的很少,这种情况大多都出现在信息接收比较封闭,并且合作情况比较少的公司。

其实做一套设计规范从通用的字体,到配色,再到界面组件都耗费了不少设计师的时间和资源,而且在复用效率还有确保一致性上面还是会存在很大的问题,如何设计一套组件运行于大体量的团队中,并且能够协同好几个业务项目呢?

如果将一个页面变成二维分层来说的话,一个页面会存在这些信息:

1、X轴组件的响应状态

X轴组件是说不同的X轴尺寸大小、X轴里不同的组件构成、多种交互状态,如下图所示:

2、Y轴组件的行为状态

Y轴是指从界面底部出现的底部操作栏、弹层,如下图所示:

用动态展示这个看似简单的信息组件来举例说明,不同的组合能够得到很多不同的模板,如下图所示:

简单的说就是我们通过工具的方式把我们的设计规范变得工程高效化。

同时在搭建组件库的时候,让元件具有统一的栅格尺寸和表达约束,这样能够确保设计细节的统一以及多个团队的合作,同时不同元件灵活组成的组件能够适用不同的界面需求,同时不影响整体。

最终希望形成一个从组件,到使用场景,再到工具的闭环,让组件与用户的交互数据能够在3者中循环,组件系统能有一套数据维度帮助业务组件有效地迭代。

三. 总结

组件化推动着设计变革,作为设计师,利用设计工具化可以帮助我们节省因重复设计产生的工作时间,实现从设计支撑到设计驱动的价值转化。让我们更专注于用户体验和对产品的创新,并且把自己能够提升上更高的视野,经过全链路实践,提高自身专业影响力和核心竞争力,从而完成设计新时代的进阶之路。