网格系统的综合运用

在说这些东西之前，想先和大家来聊聊平时在拿到需求后什么样的状态，是不是感觉新建完画布后那那都不对劲，无从下手，其实也正常，即使自己做的熟练的项目在第一时间拿到需求后也会感觉整体的不自在。

那么，现在我们就可以聊聊网格系统的运用，它会瞬间让你消失这种极不自在的感觉！

目录

     什么是网格系统

     各类设计中的网格运用

什么是网格系统

网格系统广泛应用各类设计之中，其中以苏黎世艺术大学为代表，也就是后来人们所说的苏黎世学派，他们以带有理性的网格系统为代表理念，他们认为网格系统设计带有独特的美感。

而设计，并不是设计师的情感和个人观点的表达，而是面向大众化的产品，需要更加清晰、明确、系统阐述产品对客户需求的解决方案，然而网格系统的特征就非常突出，在商业设计中，这一点更是尤为重要的！

这是Josef Muller-Brockmann大师的著作，封面运用网格系统设计，简洁不失严谨

各类设计中的网格运用

1.网格在三折页面的运用：

这里建的三折页尺寸为285*210mm、出血3mm；

三个页面尺寸依次为94mm、95mm、96mm，确保它们能完美折叠，同时设置5mm的安全距离，从而进行网格制作：通过比例取整设置网格为：横向7、纵向12、间距2mm（当然这是目前的网格数，由于网格设置较为灵活多变，可任意设置网格多少，网格越多，版面就会越精细，比例建议是：1:0.618或1.618：1）。

2.网格在画册杂志版面的运用

这里建的竖版画册尺寸为285*210mm、出血3mm；

画册封面或产品画册的版心尤为重要。当然，得到版心的办法有很多，这里设置的仅供参考！

首先通过等比绘制网格，按照1:2:3设置边距，可得其版心，再次通过版心延伸1/2得到版式的最佳区域，在这里我们就可以进行内容的罗列与排版，当然，如果有需要可再次对版心延伸区域进行网格绘制但最好不要继续等比设置，推荐比例1:0.618，四舍五入取整设置，具体如下图：

3.网格在网页页面的运用

网页的网格系统总体来说不会很复杂，但版面调整间距需要设计师自己把控。网页也分为多种，有些尺寸限制比较强，网格的作用较弱；有些网页设置较为随意，网格就可以发挥独特的作用。

这里新建常规网页尺寸：1920*1080px，设置主内容区域1000px（一般是1200px、1000px、980px，也不例外有其他随意性较高的个性化响应式网站），安全外边距：137px，网格12列居于网页中部，网格区域则可定为内容编辑区。

不管是何种尺寸：网页设置建议留出安全距离后网格设置一般定义为12列，便于响应式的适配（比如：ipad尺寸则可删减4-6列，iphone尺寸可删减6-8列），这样可保证内容区域的完整显示而版式不至于混乱。

示例如下：

4.网格在APP界面的运用

同样，网格系统也适用于APP界面的设计，APP的内容基本是产品的展示或产品原型化的深入解释，需要让用户去了解或者说是更加深入的了解，就需要指引用户如何操作，这不仅是交互设计的工作，作为UI设计师，也必须更加需要去了解用户在使用时的心理状态。而网格系统，它不仅可以让你的设计更加理性、明确、简洁化，更能够以网格形式的排版指引用户。

新建常规750*1334px尺寸画布，左右同样留出外边距安全区域，这里设置外边距：32px，（一般最佳为30-36px），其他详细尺寸就不说了，网格设置12列/6列居于画布中部，也可灵活设置。（12列网格间距为10px，可用于内容较多的页面，6列网格间距为20px，可用于内容版式较少的页面，具体可是情况而定），网格区域则可定为内容编辑区。

示例如下：

网格系统的灵活多变适用于各类设计形式，可以使用于各类需求问题；但有一点，如果页面需求活泼，需适当的加入感性化设计元素，因为网格系统的过于理性化与需求不符同时也会使版面显得很是呆板。

最后感谢大家阅读

记得点个赞哦

😊