设计师，为什么要用模块化设计？

当我们接触了比较多的设计项目之后，再重新做项目时，会发现部分页面模块在之前很多项目中就设计过，比如登录模块、订单模块等，恰好我们现在项目中也需要设计这些，那么你是选择重新设计，还是复制粘贴、还是利用组件库进行搭建呢？

如果复制粘贴，听起来是很省事，但是如果你复制的模块来自几个项目就很容易导致不一致，那如何让解决这些问题呢？

站长今天就给大家聊一聊模块化设计的好处！

首先，什么是模块化设计？

UI学习交流群930958328免费领取学习资料

模块化设计是将设计分解成小的模块，然后独立设计它，最后在将它们组合成更大的系统，就像小朋友玩的积木一样，由一些简单的零件组成小的模块，然后在组合成各种模型样式。

在我们生活中到处都可以看到模块化设计的例子，比如汽车、电脑、家具都是由一些零件组合成小部件，然后在由这些小部件组合成模块，再由模块组合成成品。这些部件可以更换、添加、移除而不影响整体设计。

在UI设计中，我们同样可以将文字、颜色、图标、图片等看成一个元素，那么由这些元素组合可以成为一个小的模块，最后将这些模块组合在一起就形成了各种界面样式。

比如个人中心一般有头像区、功能区，那么根据常见样式可以拆分为4个基础组件。

那模块化设计有什么优点呢？

\01\保持输出一致性

在设计中，如果一个项目同时由多个设计师负责，那么同样的模块就会出现多种样式，这显然不合理。

所以建立相应的视觉和交互规范是必不可少的工作环节，同时对于一些复用性较高的组件，我们就可以将其模块化。这样不管哪个设计师去设计，都调用这个模块，从而保证交互和设计风格的一致性。

\02\提高设计效率

当采用模块化设计时，我们对于项目当中的模块，我们就可单拿出来设计。通过模块化的设计，不但在当前项目可以更理智的分析各种状态，避免遗漏，同时在使用时，我们直接将这些卡片进行组合即可。另外，在下一个类似项目时，可以直接复用，界面根据产品实际需要重新进行组合和对模块的调整即可。

\03\便于查错和维护

设计过程中总会出现问题，不断修改和优化，采用模块化设计如果页面上出现问题，就可以找出相关模块进行检查并拔除，直到恢复正常。

\04\便于协助

这和设计师协作的道理相同。如果两个开发同学都在制作带有弹层的页面，这部分工作只要交给其中一人就行了。他做好之后封装成模块，另一位开发在自己的页面中加载就行了。