关于组件化设计思维的一些思考

欢迎关注并将「长弓小子」设为星标

我们都是为梦想一起努力的人

今天要聊一聊组件化的设计思维。在设计与开发一款产品的过程中，应用组件化的设计思维，可以让设计过程更高效、减少开发的冗余工作。

、

什么是组件化设计思维？

组件化设计思维，是根据产品功能、页面布局、用户行为等因素，对产品中元素进行拆解、归纳、重组，形成具有标准规范和可重复使用的基本模块。通过标准的组合方式和使用规范来使用组建，构建整个产品，可以提升设计与开发的工作效率。

组件通常具备以下3个特点：

1. 独立

每一个组件都是独立存在的个体，被修改和应用的时候不会影响其他组件

2. 完整

每一个组件都是一个完整的闭环，自身有着通顺和牢不可破的逻辑，并可与其他组件一同组成完整的产品

3. 自由组合

在使用时，组件与组件之间可以的位置关系、排列方式等可以自由拼接与组合

一个组件，可以是一个单一的元素，比如一个按钮，一个icon；也可以是一个功能模块，比如一个需要用户勾选的弹窗，一个用于筛选的filter；也可以是一整个页面；甚至可以是一系列页面。

换句话说，不论你是元素、还是功能框架，只要是在产品中高频重复出现，都可以被制作成组件，以提升工作效率。

如何建立组件？

很多交互设计软件都有组件制作功能。例如：用sketch软件中的symbol工具进行组件制作，制作的方式在文末配有链接。这里要强调的是，组件含义并不完全等于symbol，因为组件需要考虑的更为全面，组件的完整性更高，涉及到的范围也更系统和广泛。

组件在制作时可以从视觉和框架两个层面进行分类，并考虑以下几点：

1. 视觉层面的组件

制作视觉层面的组件，需要归纳总结页面中常出现的设计元素，作为单个组件或组件的组成元素，在设计师进行重复性设计工作时可以灵活应用和组合。不论产品有多简易或多复杂，都可以制作视觉层组件使用。需要注意的是：

• 把常出现的视觉元素做成组件，需要将元素的不同状态进行完整归纳，如果是pc端界面的元素可能需要考虑的状态就要更为全面，制作过程中可以先做标准状态：默认状态、悬停状态、点击状态、禁用状态，再考虑是否存在其他状态，就可以减少遗漏的可能性。

• 如果元素在交互上有特殊变化，如动效变化，则要注意单独注明，避免开发对动效进行混淆。

• 组件在适配不同设备、不同环境下的不同状态也需要考虑，可以针对不同的页面尺寸做出几种情况。如下图中天猫的部分产品功能组件的适配方案：

视觉层面的组件制作要点总结如下图：

2. 框架层面的组件

制作框架层面的组件更多的从用户的行为习惯和产品的功能出发，将一整套完整的功能做成一个组件框架，一般适用于功能丰富且每个功能的设计及开发工作区别都不是很大的产品。

举个例子：滴滴的快车、专车、豪华车等业务功能，产品界面的设计工作和产品背后的开发工作有很多重复性工作，因而将整个业务功能都作为组件进行设计和开发是一个很高效的方式。

那么如何让新的框架既能满足越来越多的业务类型，保证体验的统一，又能体现出业务特性，更快的进行产品更新迭代呢？我们需要注意：

• 明确主次：明确主要的逻辑线，从设计的角度，抽取出个业务中主要的视觉元素和特征，次要信息或或单个业务中的个性元素可以省略；从开发的角度，次要的简易功能可以省略，这些都需要设计与开发共同商定。

• 抽取共性：从设计的角度，从用户的使用行为进行分析，抽取功能业务中的共性特点；从开发的角度，从框架结构的角度将功能之间的主要共性特点抽取出来，同样需要设计与开发共同思考和完成。

框架层面的组件制作要点总结如下图：

 组件化设计思维无处不在

作为设计师，利用组件化设计思维和设计工具，可以帮助我们节省因重复设计产生的工作时间，实现从设计支撑到设计驱动的价值转化。不仅是在交互和视觉设计上有帮助，在工业产品设计甚至是生活中都可见组件化的设计思路应用。

本文开篇的图片就开源于人物与场景自主切换的插图组件设计库：humaaans，用此方法绘制插画大大节省了时间成本。

最后为大家送上IKEA的一段关于模块化设计的广告，也是组件化设计思维应用的理想案例。

本文图片来源及内容参考于：

https://www.uisdc.com/component-design-thinking《为什么我们都应该学会组件化设计思维》

https://www.uisdc.com/component-based-design-thinking-2《如何培养组件化设计思维？来看阿里设计师的经验总结》

https://www.uisdc.com/component-based-design-and-development《这篇8000字长文，能帮你学会组件化设计与开发的思维方式》

https://www.jianshu.com/p/f20c995046dc《Sketch进阶教程：这可能是Symbol最详细的使用说明书》

- END -

如果你认为本文对你有帮助，

请点击「在看」或分享给他人，

关注「长弓小子」公众号，

传递知识，

追逐更优秀的自己