这一设计潮流的出现，追溯到模块设计。模块设计并不是什么新鲜事，有过编程开发经验的同学们应该不陌生，对工程知识比较了解的同学，对这一点比较熟悉。反看我们学过的各种设计理论，模块化设计思想也深深植根于其中，各领域的设计师对模块化设计早已运用纯熟。和今天的文章一样，我们准备从实用主义的角度出发，来看看模块化设计如何能够快速融入日常设计中，帮助设计新手快速上手。

    1、什么是模块设计？

    模块化设计是指将整体中的各个部分分成小块组成模块，将不同的设计元素置于不同的矩形模块中，不同的模块合理有序地组合成特定的功能区。

    众所周知，模块化设计有很长的历史，其涵盖的领域也很广，报纸的版面就是报社排版设计师的杰作，他们把不同的故事、不同的图片分成不同的块(模块)，然后整齐地与整个版面匹配。模块化设计之所以流行，是因为这种设计方法能很好地组织和管理内容。

    在覆盖了大量内容的设计项目中，通常采用模块化设计的栅格系统具有很大的用武之地，它能以极大的包容性把看似不直接相关的内容合理地呈现和整合为一个界面。而且我们以前所说的报纸是最典型的案例，在一张固定的大画布上，将各种类型的内容统一、相互没有干涉地呈现出来。

    模块化的网格化系统在网页设计上更加强大，栅格系统的天然灵活性不仅体现在具体版面的网页排版上，响应式设计更是将模块化设计推向了另一设计工程的顶峰。简单的模块化设计讲究的是布局技巧，而设计风格的融合让模块化设计具有了厚度，极简风自是不必说，MaterialDesign和卡片式设计几乎能富于模块化设计。

    尽管模块化设计要求前端在实现时有一点麻烦，但从本质上说，它实际上只是一种基于栅格的设计系统，与其它任何一种系统都没有什么区别，并且有很强的组织内容的能力。

    2、在其它领域进行植根。

    如前所述，模块化设计并不只是为了平面/网页/UI设计而生的概念，从程序开发到室内设计，从机械工程到汽车设计装配，模块化设计无所不在(特别是那些涉及到标准化的行业，你可以在这里找到许多模块化平面设计的灵感)。

    而在其它领域，模块化设计的应用范畴大到令人难以想象，标准化的界面、整齐划一的布局与空间设计，这些设计理念、案例、经验都可以合理地转移到平面设计上。办公间错落有致的组合柜，楼下外墙裸露的砖墙，都是可以借鉴的视觉元素。计算机、汽车等产品为迎合大批量生产的产品，在零部件标准化方面做得很好，这种模块化设计也很有启发性。乐高积木和组装模型也有相似的属性，多玩几次也可以帮你打开大脑。

    3、模块印刷设计。

    模块化设计与印刷品系统的兴起，是与印刷业相关的设计项目中不可分离的。您选择的栅格系统和隔离模块，以确定每个部件的尺寸、留白和间隔。

    幸运的是，栅格系统本身有很大的设计空间，实际上几乎具有无限的可能性。格网系统可以用几乎所有的图形设计软件来制作，并作为模块设计的基础。在把格子放在画布上后，将整个操作空间划分为一系列规则块，这些或者封闭的或开放的空间就是用于放置不同内容的地方。

    利用网格化系统，您可以选择合理的尺寸作为模块，自由组合成页面，将视觉元素按水平和垂直排列排列，以显示或回应方式呈现，显得和谐合理。

    以下案例就是在栅格系统中做图片混合所产生的效果：

    4、网页的模块设计。

    在你刚开始接触模块化的网页设计时，你很可能会觉得这个设计单调乏味。因此，任何设计都是乏味而有趣的，光看它的结构和构架还不够。

    如今模块化网页设计是流行趋势，这也很明显。将时尚和创意元素融合在看似乏味的页面结构中后，模块与模块之间开始出现对比、差异，颜色和风格的差异使整个页面充满活力。即便是以纯色为主，最扁平的WindowsMetro设计风也同样能让人耳目一新，成为耐看的设计。

    当然，Metro也是一个很好的例子，模块化设计同样能为你呈现多种网页设计风格。正如一份报纸，不同的格式取决于你如何划分和组合，网页设计的有趣之处是，你也可以使用响应式的设计，设置不同的断点，使页面在不同的屏幕上呈现不同的效果。

    通过升级的设计工具，设计师和开发人员可以像高端网页主题一样，制作出见即所得的网页。框架内嵌有不同的模块，您甚至不需要对模块进行复杂的设计，就可以生成可靠的模块化页面。

    在将模块化设计思想融入行业发展后也是如此。

    当然，具体如何选择栅格，如果制作一个网站，最终还是要取决于你自己。模块化网站通常采用较大的分块模式，要做好响应性，还必须采用更容易重拍的组合方式。较为方便的方案，是让页面大体上具有可分割为对称2列的模式，这样可以更方便地适应移动端的浏览。而且一列到底更适合单页设计，配合视差滚动，这也是目前流行的处理方法。

    请看以下Newfangled的例子，你会发现一个合理的模块设计的重要性：