设计师必须要掌握的版式基础

亲密性 PROXIMITY

在逻辑上有关系的两个元素应该尽量放在一起。两个视觉元素在一起就会变成一个视觉单元。比如注册页面中的登录视觉单元是由输入表单和登录按钮组成的。相同的内容，如小标题等，属于同一个逻辑。可使它们的颜色、字体、大小、留白保持相同，这样可以增加条理性和加强设计的统一性。

用户浏览定律

左到右阅读：从左到右是受现代社会影响后天影响我们的一种习惯。我们看一个比较大面积的设计时也会从左到右依次阅读，这也就是为什么网站的logo都在右上角。从上到下阅读：我们阅读作品时也是从上到下依次阅读，所以重要的内容一定在上面，按优先级来排列。从大到小阅读：我们的视觉也是比较调皮的，如果一个元素很大，我们也会首先去注意大的元素再依次看中等和小的元素。从重到轻：元素的颜色也会影响我们阅读的顺序，从重到轻依次浏览。狩猎式阅读：狩猎式阅读用户在寻找可以完成当前界面或设计中的任务线索，比如在购买页面中会寻找支付按钮等。S曲线阅读：S型曲线阅读比较适合比较大的设计，眼球需要左顾右盼从上到下来浏览信息，在S型的浏览方式下比较能够全面地观察每个页面元素，S型成了目前主流的视觉导向模式。那么在S型曲线中，我们的对其方式有三种：左对齐、右对齐、居中对齐。重点元素可以依次左右摆放，让用户有一个视觉浏览的惯性，左-右-左-右-左-右。

构图

上面我们介绍了一些排版和平面的基本原理。那么实际上我们在应用中要做的就是将这些知识运用在具体的需求里。让多个元素能够完美地展现在一个画面里也是一种能力，我们管这种能力叫做构图能力。那么下面我来简单讲一下构图能力有哪些要点。

重心

我们的任何一个排版里都会出现重心。重心是我们人类的一个心智模型，我们从物理世界里学习了重心的规律，在看平面作品的时候也会莫名地关注重心问题。在设计中我们可以利用这一点创作出倾斜的重心、居中的重心、左对齐的重心等。但是请大家注意，如果我们的排版里一个单元是居中的，那么这个单元内的元素也应该重心居中而不应该重心不稳，否则会感觉大厦即将倾倒。

骨骼

设计某个元素或者几个元素组成的单元也要注重骨骼，骨骼有外延骨骼和内在骨骼两种。在做完设计以后可以将作品元素的外围连个线，看看是什么形状。有时我们会发现一些骨骼不好的设计确实会给人不舒服的感受。

栅格系统

1692年法国国王路易十四命令成立管理印刷的皇家特别委员会。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样印刷版面就有 2304个小格组成，在严谨的几何网格中设计字体和版面来试验视觉传达的功能。栅格系统英文是"grid systems"，是一种平面设计的方法。栅格系统运用固定的格子设计版面布局，其风格工整简洁，这种方法现在也被应用在移动设备和网站设计等领域里。科学的栅格会给人一种秩序的美感和现代感。

网格系统在书籍排版的应用 作品:Dale magazine by Rocio Gomez

网格系统在图形中的应用 作品:Pixty App Branding by Ramotion

为你的设计建立栅格

我们在设计任何作品时，首先考虑的是应用的尺寸。如iPhone8的分辨率为750x1334px、安卓1080P分辨率为1080x1920px等。在我们确立了我们排版的尺寸后，我们就可以根据这个宽度设计可以被整除的栅格了。我们把整体宽度定义为W。然后整个宽度分成多个等分单元A。每个单元A中有元素a和间距i。所以他们之间的关系就是 W =（a×n）+（n-1）i 。当然每个应用的尺寸不止可以整除成一种栅格，这就要看我们内容排版的疏密程度了。之后，我们将过多内容的栅格和另一个栅格相加得到更大的排版空间；其他元素都须老老实实呆在自己的栅格内，这样就完成了一个布局非常科学的设计了。

比如一个网页宽度是1000px的情况中我们可以使用：20列每列40px和10像素间隔、20列每列30px和20像素间隔、25列每列30px和10像素间隔、25列每列20px和20像素间隔。如果网页宽度是990px我们可以使用：11列每列80px和10像素间隔、18列每列35px和20像素间隔、25列每列45px和10像素间隔、33列每列20px和10像素间隔。如果网页宽度是页宽980px我们可以使用：14列每列60px和10像素间隔、14列每列50px和20像素间隔、28列每列25px和10像素间隔。

8像素栅格

用8当然不是因为数字吉利，而是因为 8 是偶数，并且8可以被成倍缩小三次！（就是8可以缩小一倍到4,4可以缩小一倍到2，这对于移动端适配来说太有优势了）考虑到移动设计中的适配特殊性，缩小到其它尺寸可能会出现虚边和半像素，用偶数可以避免这种情况。 为什么是8？因为比如1920x1080、1280x1024、1280x800、1024x768都是8的倍数（尽管部分尺寸不是8的倍数，但也不会显得奇怪）。除此之外，我们在做其它设计时也可以将不同的留白设计成有倍数关系的数字，比如10px、20px、30px等，让设计内部更有逻辑性。

黄金比例

黄金比例是一个定义为 (√5-1)/2的无理数。 运用到的层面相当的广阔，例如：数学、物理、建筑、美术甚至是音乐。 黄金比例的独特性质首先被应用在分割一条线段上。如果有一条线段的总长度为黄金比例的 分母加分子的单位长，若我们把他分割为两半，长的为分母单位长度，短的为分子单位长度，则短线长度与长线长度的比值即为黄金比例。

黄金比例（以下简称"黄金比"）约为： 0.618:1。

使用黄金

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/