设计师必须要掌握的版式基础，你了解几个呢？

设计师必须要掌握的版式基础，你了解几个呢？提起平面设计，也许很容易联想到平面设计师。其实平面设计不仅是职业也是一个重要的设计知识体系，在我工作中发现平面设计知识是UI设计和其他设计领域中必备的能力，然而很多朋友认为「平面设计是属于纸媒行业的事」而忽略这部分知识的重要性，为此我想简明地将平面设计知识体系中最重要的知识点提出供大家汲取。关于设计师必须要掌握的版式基础你知道几个？

一、关于平面设计知识

平面设计（graphic design），也称做视觉传达设计，是指在二维平面内通过多种设计组合来借此传递信息的视觉表现设计。平面版式设计需要使用字体知识（Font）、视觉设计（Visual Design）、版面（Layout）等方面的专业技巧来达成创作计划的目的。平面设计非常重视版式的设计，而版式并非只有纸媒才需要重视。如果想做好移动端设计、网页设计甚至是别的领域的设计，那么一定要加强学习平面版式的基础知识。

二、平面构成

在我们开始学习平面版式基础之前，我们先来讲一下简明平面构成原理。平面构成是运用点、线、面和其他技法来构成基本元素的学习方法。它是在我们工作之前必须要学会的视觉语言。以下的内容希望如果您有时间进行练习，边练边摄取知识效果才能更好。

1. 点的构成

点是组成平面构成的基础要素。点可以是不同大小的；可以是不同疏密的；可以是不同虚实的。可以是整齐的点，也可以是随意排列的点。在一个画面上也可以有大小、疏密、虚实、整齐和随意对比的，对比就会产生韵律感。仅仅依靠点来构建画面时，我们会想方设法地让画面丰富，体会点的变化。

2. 线的构成

线有哪些呢？垂直线、水平线、斜线、曲线等。垂直和水平都会有稳定的感觉，斜线会更加有冲击力，曲线会感受更加柔和。由不同粗细、不同韵律的线条组合，作品将更加有视觉引导的效果。尝试只用线条构建一个画面，你会体会到不一样的视觉感受。

3. 面的构成

面的种类有不规则形状和几何形状两种。在《纪念碑谷》游戏中有个词叫做「神圣几何」，我非常的喜欢。几何图形真的是很神奇的存在，几何形是可以用数学表达出来的，也是我们在初中时就开始学习的。比如三角形、圆形、矩形、正方形、椭圆等。这些几何形在视觉上是非常令人感觉舒适的，如果你在创作时没有灵感时，可以从几何形中寻求灵感。不规则形状其实也可以分解成不同的几何形的组合。

4. 平面构成的八种形式

平面构成的形式有重复构成形式、近似构成形式、渐变构成形式、发射构成形式、密集构成形式、对比构成形式、肌理构成形式等，如果平时您发现在工作中排版的图形能力比较差，那么建议您了解一下构成形式加以练习。

三、排版中的元素

在平面设计的过程中，我们其实是在组织图片、文字、按钮、图标等最小元素的信息架构。这些元素是画面中的最小单位，它们本身就附着着某个信息，比如作品的标题、一个功能、去展览的地址、一个景点的照片等。这些排版中的元素需要我们放在画面中，不可以因为好不好看而删去必要的信息，然后根据他们的重要性进行排列组合。

1. 字体

字体是排版中最重要的元素，也是最直接的信息传达方式。一般来说设计师通常需要了解的字体有中文和西文字体两种：西文字体由来已久，由最早的罗马字体到我们现在苹果手机里的SFUI字体，西文字体经历了许多的设计上的变革。西文字体可以分为：罗马字体或衬线体（roman，serif）、无衬线体（sanserif）、手写体（s cript）、雕刻字系（glayphic）、典籍体字系（Classical）、装饰体字系（decorative）、展示体字系（Display）、当代字体字系（Contemporary）、符号字系（Symbol）等。中文字体由于起先版权不够重视其实并没有西文字体发展得顺利，数量上也远远落后于西文字体甚至是日文字体。好在中国设计正在崛起，在一大批设计师前赴后继的努力中，中文字体的数量正在呈指数级别增加。中文字体分为三种：第一种是黑体（笔画上没有装饰的字体）。黑体也有不同的具体字体如苹方、微软雅黑、思源等；第二种是由书法作品演变来的字体如从宋代活字印刷而来的宋体（对了，日本因为误解原因将宋体叫做明朝体）、楷体、仿宋体、行楷、隶体、魏体、舒体、颜体以及钢笔书写的字体；第三种是美术字体，比如综艺体、美黑体、水柱体、娃娃体等。

2. 族类（generic family）

这里我引用了前端工程师在CSS样式表（一种用来表述网页样式的代码）中的族类概念。常见的族类有五种：衬线体（serif）、非衬线体（sans-serif）、手写体（cursive）、梦幻字体族（fantasy）、等宽字体族（monospace）。衬线体的特点就是笔画结尾处有装饰的处理，比如我们熟悉的Times New Roman、Georgia、宋体等。非衬线字体粗细比较均匀，比较现代并且在缩小的情况下依旧保持了可读性。非衬线字体如Arial、Helvatica、幼圆、楷体等。手写字体族就是由手写而产生的字体，比如迷你简黄草、Caflisch s cript等。梦幻字体族听上去稍显非主流，但是也是字体中不可忽视的一支力量。常见的梦幻字体族有WingDings、WingDings 2等。等宽字体族将西文的二十六个字母全部变成等宽，这样做的好处就是排版大大地轻松了。常见的等宽字族有Courier、Prestige等。总体来说字体的族类是衬线体和非衬线体两个大类，大家可以简洁地记忆：衬线就是笔画处有装饰的字体族，非衬线就是笔画较为相同粗细的字体族。

3. 字族（font family）

一个族类下面是不同的字体，然而一个字体又可能有好几个字族。字体文件中通常会包含几个字族，如果你安装了Helvetica，在Photoshop中你会发现字体选择器下包含了三十多个前缀是Helvetica的字族。原因很简单，字体设计师除了设计从A到Z的大小写字体、从0到9的数字、标点符号后，还为我们设计了同样字体的不同族类来协助我们在不同地使用场景下表达合适的意思。字族一般有：正常（Regular）、窄体（Narrow）、斜体（Italic）、粗体（Bold）、粗体斜体（Bold Ltalic）、黑体（Black）等等。虽然字体的字族有多有少，但是一般都具有正常、斜体、粗体、粗体斜体四种基本字族。应用场景上：粗体通常表示强调、斜体表示引用、正常是正文。很多时候我会发现很多设计师乱用斜体，其实斜体的设计并不是为了好看，而是在书中代表本段文字来自引用另一个著作的含义。

举个使用斜体的例子：「设计的作用在于寻找功能和社会间的接点，在功能足以说明一切的前提下，装饰成分是可以节制的，如何把握节制的度是考验一个设计师是否成熟的标尺。」 -《设计的觉醒》田中一光

4. 字重（Font Weight）

一个字族中的任何一个字体也会有不同的笔画粗细变化。这种粗细变化的字体称之为字重（Font Weight），字族后面的字重选项如「Thin」、「Light」「Regular」「Book」「Bold」「Black」「Heavy」都是一个字族下的不同粗细变化。实际上，国际标准 ISO组织规定了九种字重，但是由于有些字重不常见，我们就记忆以上七种字重即可。中文字体也有相应的字重，如「极细」、「细」、「标准」、「常规」、「中等」、「粗」、「特粗」。在使用场景中，如果我们需要强调一个内容，比如标题时，一般会用粗体；如果在正文的设计中，那么就会用常规或标准等字体。英文也类似，这些字重是为了我们突出文字使用的。注意一点：在PS中我们也可以通过字体面板给文字人工加粗，这种加粗如果变成形状时会提示「该字体使用了加粗样式，不能变换」，所以可见这种人工加粗是有一点缺陷的。

四、文字排版八条定律

第一，保证文字是可读的。

第二，不要在一个版面中使用三种以上的字体。

第三，如果英文标题或单独进行排版时，尽量全部使用大写而非首字母大写。中文标题或单独进行排版时结尾不需要句号。

第四，文字之间的间距在UI设计中一般设置为0，行距一般为字号本身的1.5倍到2倍。但是考虑到用户使用场景，比如用户在地铁内阅读新闻时可能地铁会出现晃的情况而导致串行，就需要我们考虑增加行距。总之字间距和行距以及文字大小都要依据实际场景来决定。在UI设计中文字大小单位须设置成PX（像素），大小必须是偶数。如：24px、26px、28px等。

第五，文字阅读需要清晰地背景区分，比如黑纸白字和白纸黑字原则。

第六，除非不得已尽量避免在一个版式中使用中英文混排。

第七，文本左边对齐同时右边也需要对齐。可以通过PS中的段落面板设置间距组合和避头尾法则，但是有时半角符号可能会让我们很棘手，那就要通过调整间距和空格等方式让文本尽量对齐。

第八，中文前面需要空两个全角字符空格，英文前面无需空格，但需要大写。

五、排版的图片

在一个设计中一定会依靠一些配图或者照片素材来进行排版。我们会选择寻找素材或者是自己去拍，无论如何，作品中使用的图片一定要与整体设计色调相符，冷色暖色中性色都要符合整体的色调，一定是邻近色或对比色等色彩关系，不要因为自己的主观放置没有色彩关系的配图或者会抵消画面色彩倾向的配图。另外注意色彩会产生「水彩效果」，即两种颜色放在一起，如果其中一种是灰色或者比较脏的颜色，那么另一个颜色在我们大脑中也会感觉变脏了。类似于这种效果可以在作图中慢慢体会。

1. 图文比例

在一个设计中，图片与文字的量应该有一定的对比。人天生喜欢看图片而不是阅读，实际上人类有阅读能力的历史只有几千年，而欣赏图片的能力是天然的。如果你的需求上文字需求非常多，尝试与需求方商讨减少文字量。文字量越少，图形化设计越多，那么视觉上这个作品看起来就更轻松。

2. 图片比例

在平面设计中，因为最终目的是印刷，对我们的图片尺寸没有非常严格的要求。但是如果我们是为了互联网产品的设计的话，可能会涉及一些需要网站编辑直接上传的图片，如果你的尺寸不是一个固定尺寸，那么可能原本网站编辑不需要裁剪图片而可以直接上传的工序，要因为我们的一个尺寸变得很复杂。所以请牢记以下三个尺寸：4:3，16:9，1:1。4:3的原因是相机的画幅一般是4比3，所以我们看到的新闻客户端的图片大多是4:3。16:9的原因是视频宽荧幕画幅就是16:9，所以我们看到视频网站的截图一般都是直接由机器抓取的图片。1:1一般用于封面等图片素材的尺寸是正方形的。

六、排版的CRAP原则

1. 排版中的逻辑关系

任何一个设计中都需要把各个元素分级分清主次，这样才能更好的抓住重点。你可以想象自己在管理着一部玛丽苏电视剧，这部剧中谁是主角？谁是女二号？谁是群演？主角需要独立的化妆间和助理；女二号可能只有一个助理；群演可能就是整个剧里的一个过客。我们的设计也是如此，哪个信息是主角？哪个信息是女二号？哪些元素又仅仅是群演呢？女主元素首先要站C位（网络流行词，来源center）霸占画面的中心，然后这个元素要尽量突出，可以使用更鲜艳的颜色、更夸张的字重、加边框等方式突出；女二号信息一定不要抢了女主信息的风头，所以要和女主元素有一定的对比，字号上也要小很多，尽量让用户第一眼看到主要元素。而群演的元素一定要淡化，仅仅让人感知有这些元素就可以了，比如文字可以缩小到刚刚能注意到，颜色可以是接近背景色等。那么如何让这些信息按照他们的身份来排版呢？我们就要用到CRAP原则了，CRAP是这四个原则的首字母缩写，分别是对比、重复、对齐、亲密性四个原则。

2. 对比 CONTRAST

在同一个视觉区域内的逻辑不同的元素应该有所区别，避免视觉上相似。这样就可以有效地区分谁是主角谁是配角了。为了让主要元素更突出，让次要元素更后退，我们可以尽量使它们的颜色、字体、大小、留白不同。如果两个元素不尽相同，请让它们截然不同。比如如果你想使用12px的正文与14px的标题区分明显，不如用12px与40px进行区分反差更大，更容易区分哪个内容是需要优先浏览的、哪个内容是次要的。对比的方式有以下几种：

色彩对比

在我们排版时首先要产生对比效果的就是背景和文字了。文字是第一阅读元素，背景和文字如果颜色很接近，那么就不容易区分出来引发注意了。一般来说在很多媒介的设计中我们习惯了白纸黑字，即白色背景和黑色文字。我指的不仅是纯黑和纯白，也包括其他类似明度颜色的对比。黑纸白字是另一个选择，深色背景和浅色文字的搭配其实不适合大量阅读，如果你的作品信息不多是没有问题的，但是如果用户阅读很久黑纸白字的界面，就会产生视疲劳（比如再次盯着白色的墙的时候文字还会出现等）不舒服的感受。当然一切取决于用户使用场景，如果我们的设计被应用在夜晚等较暗的环境，黑纸白字更利于阅读。总之，不管你的设计采用橙蓝、黑白、蓝紫配色，一定要记住文字和背景的对比关系。

除了文字之外，图标和其他装饰信息的色彩对比也是非常重要的。辅助信息或者辅助功能的图标尽量淡化以突出主要功能和图标；重要功能如订单等按钮则需要突出和醒目。色彩对比是设计中一个非常常见的手法。

大小对比

大小对比是指文字、图片、图标等元素为了区分重要性采用的区分方法。比如两行文字：郗鉴和相声演员，同属文字但权重不同：第二行的文字用于解释第一行的内容，所以第二行内容应该通过大小和颜色变成次级，让用户阅读时分清主次。与此类似，比如音乐播放界面中的三个按钮一般并排放在一起：上一首歌、播放、下一首歌，哪个应该更大呢？当然是常用的、重要的功能-播放按钮。当然如果图标同属一个级别也应该放在一个尺寸的级别上。

3. 重复 REPETITION

如果相同的内容（如标题等）属于同一个逻辑，可使它们的颜色、字体、大小、留白保持相同。这样可以增加条理性和加强设计的统一性。这个原则看似简单，但是新手很容易犯这个问题，所以再次提醒，一个级别的信息尽量使用一种设计来保持用户的认知，避免用户认为是另一种信息分类。这就是重复原则。在一个属性或逻辑单元里的内容应该尽可能地使用重复的颜色、大小、间距。我们来看，一个注册页面可含有：注册、登录、忘记密码、跳过等内容。如果我们把登录页面分为四个属性，那么可能我们需要四种字体或四个不同的区域。但如果我们把它们分为两类呢？注册和其他。那么同一个分类就可以重复使用一种字体了。看上去就不会很乱了。在重复原则下，用户会因为视觉惯性变成寻找线索的「僵尸」，会根据线索而顺畅地浏览下去。

4. 对齐 ALIGNMENT

任何内容在版面上都尽量应该上下左右对齐。随意摆放绝对是错误的。这一点一定要和大家多次强调，比如一个元素上下左右的间距都要是一样的。大家看到网页和app设计之中经常会有间距和留白，留白和对齐都是我们在设计时需要考量的，留白不是随意的。

七、用户浏览定律

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