2018-5-23 资深UI设计者
提起平面设计，也许很容易联想到平面设计师。其实平面设计不仅是职业也是一个重要的设计知识体系，在我工作中发现平面设计知识是UI设计和其他设计领域中必备的能力，然而很多朋友认为「平面设计是属于纸媒行业的事」而忽略这部分知识的重要性，为此我想简明地将平面设计知识体系中最重要的知识点提出供大家汲取。
平面设计（graphic design），也称做视觉传达设计，是指在二维平面内通过多种设计组合来借此传递信息的视觉表现设计。平面版式设计需要使用字体知识（Font）、视觉设计（Visual Design）、版面（Layout）等方面的专业技巧来达成创作计划的目的。平面设计非常重视版式的设计，而版式并非只有纸媒才需要重视。如果想做好移动端设计、网页设计甚至是别的领域的设计，那么一定要加强学习平面版式的基础知识。
在我们开始学习平面版式基础之前，我们先来讲一下简明平面构成原理。平面构成是运用点、线、面和其他技法来构成基本元素的学习方法。它是在我们工作之前必须要学会的视觉语言。以下的内容希望如果您有时间进行练习，边练边摄取知识效果才能更好。
点是组成平面构成的基础要素。点可以是不同大小的；可以是不同疏密的；可以是不同虚实的。可以是整齐的点，也可以是随意排列的点。在一个画面上也可以有大小、疏密、虚实、整齐和随意对比的，对比就会产生韵律感。仅仅依靠点来构建画面时，我们会想方设法地让画面丰富，体会点的变化。
线有哪些呢？垂直线、水平线、斜线、曲线等。垂直和水平都会有稳定的感觉，斜线会更加有冲击力，曲线会感受更加柔和。由不同粗细、不同韵律的线条组合，作品将更加有视觉引导的效果。尝试只用线条构建一个画面，你会体会到不一样的视觉感受。
面的种类有不规则形状和几何形状两种。在《纪念碑谷》游戏中有个词叫做「神圣几何」，我非常的喜欢。几何图形真的是很神奇的存在，几何形是可以用数学表达出来的，也是我们在初中时就开始学习的。比如三角形、圆形、矩形、正方形、椭圆等。这些几何形在视觉上是非常令人感觉舒适的，如果你在创作时没有灵感时，可以从几何形中寻求灵感。不规则形状其实也可以分解成不同的几何形的组合。
平面构成的形式有重复构成形式、近似构成形式、渐变构成形式、发射构成形式、密集构成形式、对比构成形式、肌理构成形式等，如果平时您发现在工作中排版的图形能力比较差，那么建议您了解一下构成形式加以练习。
重复构成形式就是用一个基本的元素在一定的形式下重复排列，排列对方向和疏密会产生一种秩序的美感。谈起重复构成，我想顺便介绍一下重复构成的两种方式：第一种：二方连续。二方连续是图案的一种组织方法。二方连续是由一个单位纹样向上下或左右两个方向反复连续而形成的纹样。第二种：四方连续，是由几个纹样组成一个单位向四周重复地连续和延伸扩展而成的图案形式。
近似构成形式是使用相似的元素进行构成的一种方式。近似构成讲求在统一中带有变化。设计上采用基本形状之间相加相减求得近似的基本形。基本形类似的构成形式就是近似构成形式。总结来说就是看着一样实则要有变化。
渐变构成形式是把基本元素的大小、方向、虚实、色彩等关系进行渐次变化排列的构成形式。渐变可以是通过颜色、方向、虚实的变化也可以是通过外形的变化来完成，不一定是我们通常理解的颜色渐变。
发射构成形式是以一个点或多个点为中心向周围发射扩散等效果，就会具有较强的动感及节奏感。首先我们需要有骨骼线。骨骼线就是我们画面走向的一个看不见的线索。其次我们可以选择使用离心式、向心式、同心式几种发射方法来设计。
特异构成形式是在整体画面都有规律有固定形态的状况中进行小部分的变异以突破单调画面的形式。特异构成的部分可以用颜色、形状、线条等方法来做。很多运营类设计也会应用到特异构成形式。
密集构成就是在画面中使用大量重复密集的元素来给观察者一种压迫感和与留白的对比，密集构成很容易给观察者造成震撼和心理压力。
我们做对比构成的时候，可以使用元素的形状、大小、方向、位置、色彩、肌理等进行对比，以及重心、空间、有与无、虚与实的关系元素的对比。对比会产生强烈的反差和感官刺激。
视觉可理解的物体表面图案的纹理，我们就叫做肌理，以肌理为构成的设计，就是肌理构成。我们在做肌理构成时如果用Photoshop的时候会非常的方便，可以用图案、贴图等方式。
在平面设计的过程中，我们其实是在组织图片、文字、按钮、图标等最小元素的信息架构。这些元素是画面中的最小单位，它们本身就附着着某个信息，比如作品的标题、一个功能、去展览的地址、一个景点的照片等。这些排版中的元素需要我们放在画面中，不可以因为好不好看而删去必要的信息，然后根据他们的重要性进行排列组合。
字体是排版中最重要的元素，也是最直接的信息传达方式。一般来说设计师通常需要了解的字体有中文和西文字体两种：西文字体由来已久，由最早的罗马字体到我们现在苹果手机里的SFUI字体，西文字体经历了许多的设计上的变革。西文字体可以分为：罗马字体或衬线体（roman，serif）、无衬线体（sanserif）、手写体（s cript）、雕刻字系（glayphic）、典籍体字系（Classical）、装饰体字系（decorative）、展示体字系（Display）、当代字体字系（Contemporary）、符号字系（Symbol）等。中文字体由于起先版权不够重视其实并没有西文字体发展得顺利，数量上也远远落后于西文字体甚至是日文字体。好在中国设计正在崛起，在一大批设计师前赴后继的努力中，中文字体的数量正在呈指数级别增加。中文字体分为三种：第一种是黑体（笔画上没有装饰的字体）。黑体也有不同的具体字体如苹方、微软雅黑、思源等；第二种是由书法作品演变来的字体如从宋代活字印刷而来的宋体（对了，日本因为误解原因将宋体叫做明朝体）、楷体、仿宋体、行楷、隶体、魏体、舒体、颜体以及钢笔书写的字体；第三种是美术字体，比如综艺体、美黑体、水柱体、娃娃体等。
这里我引用了前端工程师在CSS样式表（一种用来表述网页样式的代码）中的族类概念。常见的族类有五种：衬线体（serif）、非衬线体（sans-serif）、手写体（cursive）、梦幻字体族（fantasy）、等宽字体族（monospace）。衬线体的特点就是笔画结尾处有装饰的处理，比如我们熟悉的Times New Roman、Georgia、宋体等。非衬线字体粗细比较均匀，比较现代并且在缩小的情况下依旧保持了可读性。非衬线字体如Arial、Helvatica、幼圆、楷体等。手写字体族就是由手写而产生的字体，比如迷你简黄草、Caflisch s cript等。梦幻字体族听上去稍显非主流，但是也是字体中不可忽视的一支力量。常见的梦幻字体族有WingDings、WingDings 2等。等宽字体族将西文的二十六个字母全部变成等宽，这样做的好处就是排版大大地轻松了。常见的等宽字族有Courier、Prestige等。总体来说字体的族类是衬线体和非衬线体两个大类，大家可以简洁地记忆：衬线就是笔画处有装饰的字体族，非衬线就是笔画较为相同粗细的字体族。
一个族类下面是不同的字体，然而一个字体又可能有好几个字族。字体文件中通常会包含几个字族，如果你安装了Helvetica，在Photoshop中你会发现字体选择器下包含了三十多个前缀是Helvetica的字族。原因很简单，字体设计师除了设计从A到Z的大小写字体、从0到9的数字、标点符号后，还为我们设计了同样字体的不同族类来协助我们在不同地使用场景下表达合适的意思。字族一般有：正常（Regular）、窄体（Narrow）、斜体（Italic）、粗体（Bold）、粗体斜体（Bold Ltalic）、黑体（Black）等等。虽然字体的字族有多有少，但是一般都具有正常、斜体、粗体、粗体斜体四种基本字族。应用场景上：粗体通常表示强调、斜体表示引用、正常是正文。很多时候我会发现很多设计师乱用斜体，其实斜体的设计并不是为了好看，而是在书中代表本段文字来自引用另一个著作的含义。
举个使用斜体的例子：「设计的作用在于寻找功能和社会间的接点，在功能足以说明一切的前提下，装饰成分是可以节制的，如何把握节制的度是考验一个设计师是否成熟的标尺。」 -《设计的觉醒》田中一光
一个字族中的任何一个字体也会有不同的笔画粗细变化。这种粗细变化的字体称之为字重（Font Weight），字族后面的字重选项如「Thin」、「Light」「Regular」「Book」「Bold」「Black」「Heavy」都是一个字族下的不同粗细变化。实际上，国际标准 ISO组织规定了九种字重，但是由于有些字重不常见，我们就记忆以上七种字重即可。中文字体也有相应的字重，如「极细」、「细」、「标准」、「常规」、「中等」、「粗」、「特粗」。在使用场景中，如果我们需要强调一个内容，比如标题时，一般会用粗体；如果在正文的设计中，那么就会用常规或标准等字体。英文也类似，这些字重是为了我们突出文字使用的。注意一点：在PS中我们也可以通过字体面板给文字人工加粗，这种加粗如果变成形状时会提示「该字体使用了加粗样式，不能变换」，所以可见这种人工加粗是有一点缺陷的。
任何字体都具有自身的气质。比如一款圆角萌萌的字体会给人温柔调皮的感觉；而边角锋利的字体会给人一种强硬的感觉；书法字体会让用户觉得充满中国风和个性；瘦长纤细的字体会给人一种未来感等等。每个字体都具有一定的感受，这与色彩心理学中每种颜色带给人不同的感觉一样，字体的外形和笔画也会给人一些心理暗示。
全角指一个字符占用两个标准字符位置。中文字符、全角的英文字符、国标GB2312-80中的图形符号、特殊字符都是全角字符。半角指字符占用一个标准的字符位置。
通常的英文字母、数字键、符号键都是半角字符。半角全角主要是针对标点符号来说的，因为正常情况我们没有打全角英文的需求。
半角英文 english
全角英文 ｅｎｇｌｉｓｈ
半角符号 ,.’」;:{}_+!@#$%^&*()
全角符号，＇＂；：｛｝＿＋！＠＃＄％＾＆＊（）
计算机编程基于英文，也就是半角字符。所以在编程中符号一定都是半角的，如：
name=”郗鉴”
全角符号编程就会无效，如：
name=「郗鉴」
在我们设计作品时也一定要记得中文搭配全角符号，英文搭配半角符号。不要出现如「好的．」或者「ｔｈａｎｋｓ。」这样的错误。全角半角的切换在中文输入法下按SHIFT+空格可相互转换，这个知识点虽然非常基础，但是无疑我们经常看到用错的设计。
我们在一个设计中一定会依靠一些配图或者照片素材来进行排版。有时我们会选择寻找素材或者是自己去拍，无论如何，作品中使用的图片一定要与整体设计色调相符，冷色暖色中性色都要符合整体的色调，一定是邻近色或对比色等色彩关系，不要因为自己的主观放置没有色彩关系的配图或者会抵消画面色彩倾向的配图。另外注意色彩会产生「水彩效果」，即两种颜色放在一起，如果其中一种是灰色或者比较脏的颜色，那么另一个颜色在我们大脑中也会感觉变脏了。类似于这种效果可以在作图中慢慢体会。
在一个设计中，图片与文字的量应该有一定的对比。人天生喜欢看图片而不是阅读，实际上人类有阅读能力的历史只有几千年，而欣赏图片的能力是天然的。如果你的需求上文字需求非常多，尝试与需求方商讨减少文字量。文字量越少，图形化设计越多，那么视觉上这个作品看起来就更轻松。
在平面设计中，因为最终目的是印刷，对我们的图片尺寸没有非常严格的要求。但是如果我们是为了互联网产品的设计的话，可能会涉及一些需要网站编辑直接上传的图片，如果你的尺寸不是一个固定尺寸，那么可能原本网站编辑不需要裁剪图片而可以直接上传的工序，要因为我们的一个尺寸变得很复杂。所以请牢记以下三个尺寸：4:3，16:9，1:1。4:3的原因是相机的画幅一般是4比3，所以我们看到的新闻客户端的图片大多是4:3。16:9的原因是视频宽荧幕画幅就是16:9，所以我们看到视频网站的截图一般都是直接由机器抓取的图片。1:1一般用于封面等图片素材的尺寸是正方形的。
任何一个设计中都需要把各个元素分级分清主次，这样才能更好的抓住重点。你可以想象自己在管理着一部玛丽苏电视剧，这部剧中谁是主角？谁是女二号？谁是群演？主角需要独立的化妆间和助理；女二号可能只有一个助理；群演可能就是整个剧里的一个过客。我们的设计也是如此，哪个信息是主角？哪个信息是女二号？哪些元素又仅仅是群演呢？女主元素首先要站C位（网络流行词，来源center）霸占画面的中心，然后这个元素要尽量突出，可以使用更鲜艳的颜色、更夸张的字重、加边框等方式突出；女二号信息一定不要抢了女主信息的风头，所以要和女主元素有一定的对比，字号上也要小很多，尽量让用户第一眼看到主要元素。而群演的元素一定要淡化，仅仅让人感知有这些元素就可以了，比如文字可以缩小到刚刚能注意到，颜色可以是接近背景色等。那么如何让这些信息按照他们的身份来排版呢？我们就要用到CRAP原则了，CRAP是这四个原则的首字母缩写，分别是对比、重复、对齐、亲密性四个原则。
在同一个视觉区域内的逻辑不同的元素应该有所区别，避免视觉上相似。这样就可以有效地区分谁是主角谁是配角了。为了让主要元素更突出，让次要元素更后退，我们可以尽量使它们的颜色、字体、大小、留白不同。如果两个元素不尽相同，请让它们截然不同。比如如果你想使用12px的正文与14px的标题区分明显，不如用12px与40px进行区分反差更大，更容易区分哪个内容是需要优先浏览的、哪个内容是次要的。对比的方式有以下几种：
色彩对比
在我们排版时首先要产生对比效果的就是背景和文字了。文字是第一阅读元素，背景和文字如果颜色很接近，那么就不容易区分出来引发注意了。一般来说在很多媒介的设计中我们习惯了白纸黑字，即白色背景和黑色文字。我指的不仅是纯黑和纯白，也包括其他类似明度颜色的对比。黑纸白字是另一个选择，深色背景和浅色文字的搭配其实不适合大量阅读，如果你的作品信息不多是没有问题的，但是如果用户阅读很久黑纸白字的界面，就会产生视疲劳（比如再次盯着白色的墙的时候文字还会出现等）不舒服的感受。当然一切取决于用户使用场景，如果我们的设计被应用在夜晚等较暗的环境，黑纸白字更利于阅读。总之，不管你的设计采用橙蓝、黑白、蓝紫配色，一定要记住文字和背景的对比关系。
除了文字之外，图标和其他装饰信息的色彩对比也是非常重要的。辅助信息或者辅助功能的图标尽量淡化以突出主要功能和图标；重要功能如订单等按钮则需要突出和醒目。色彩对比是设计中一个非常常见的手法。
大小对比
大小对比是指文字、图片、图标等元素为了区分重要性采用的区分方法。比如两行文字：郗鉴和相声演员，同属文字但权重不同：第二行的文字用于解释第一行的内容，所以第二行内容应该通过大小和颜色变成次级，让用户阅读时分清主次。与此类似，比如音乐播放界面中的三个按钮一般并排放在一起：上一首歌、播放、下一首歌，哪个应该更大呢？当然是常用的、重要的功能-播放按钮。当然如果图标同属一个级别也应该放在一个尺寸的级别上。
如果相同的内容（如标题等）属于同一个逻辑，可使它们的颜色、字体、大小、留白保持相同。这样可以增加条理性和加强设计的统一性。这个原则看似简单，但是新手很容易犯这个问题，所以再次提醒，一个级别的信息尽量使用一种设计来保持用户的认知，避免用户认为是另一种信息分类。这就是重复原则。在一个属性或逻辑单元里的内容应该尽可能地使用重复的颜色、大小、间距。我们来看，一个注册页面可含有：注册、登录、忘记密码、跳过等内容。如果我们把登录页面分为四个属性，那么可能我们需要四种字体或四个不同的区域。但如果我们把它们分为两类呢？注册和其他。那么同一个分类就可以重复使用一种字体了。看上去就不会很乱了。在重复原则下，用户会因为视觉惯性变成寻找线索的「僵尸」，会根据线索而顺畅地浏览下去。
任何内容在版面上都尽量应该上下左右对齐。随意摆放绝对是错误的。这一点一定要和大家多次强调，比如一个元素上下左右的间距都要是一样的。大家看到网页和app设计之中经常会有间距和留白，留白和对齐都是我们在设计时需要考量的，留白不是随意的。
在逻辑上有关系的两个元素应该尽量放在一起。两个视觉元素在一起就会变成一个视觉单元。比如注册页面中的登录视觉单元是由输入表单和登录按钮组成的。相同的内容，如小标题等，属于同一个逻辑。可使它们的颜色、字体、大小、留白保持相同，这样可以增加条理性和加强设计的统一性。
左到右阅读：从左到右是受现代社会影响后天影响我们的一种习惯。我们看一个比较大面积的设计时也会从左到右依次阅读，这也就是为什么网站的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可以缩小一倍到4,4可以缩小一倍到2，这对于移动端适配来说太有优势了）考虑到移动设计中的适配特殊性，缩小到其它尺寸可能会出现虚边和半像素，用偶数可以避免这种情况。 为什么是8？因为比如1920×1080、1280×1024、1280×800、1024×768都是8的倍数（尽管部分尺寸不是8的倍数，但也不会显得奇怪）。除此之外，我们在做其它设计时也可以将不同的留白设计成有倍数关系的数字，比如10px、20px、30px等，让设计内部更有逻辑性。
黄金比例是一个定义为 (√5-1)/2的无理数。 运用到的层面相当的广阔，例如：数学、物理、建筑、美术甚至是音乐。 黄金比例的独特性质首先被应用在分割一条线段上。如果有一条线段的总长度为黄金比例的 分母加分子的单位长，若我们把他分割为两半，长的为分母单位长度，短的为分子单位长度，则短线长度与长线长度的比值即为黄金比例。
黄金比例（以下简称「黄金比」）约为： 0.618:1。
△ 使用黄金比例设计出来的苹果logo
斐波那契螺旋线也被叫做「黄金螺旋」，是根据斐波那契数列画出来的螺旋曲线，自然界中存在许多斐波那契螺旋线的图案，是自然界最完美的经典黄金比例。斐波那契螺旋线，以斐波那契数为边的正方形拼成的长方形，然后在正方形里面画一个90度的扇形，连起来的弧线就是斐波那契螺旋线。
斐波那契数列（FibonacciSequence），又称为黄金分割数列。在数学上，斐波那契数列是以递归的方法来定义：
F0=1
F1=1
Fn=Fn-1+Fn-2
△ 符合斐波那契螺旋线设计的Twitter logo
以64px为一个单位，即a=64px。那么大正方形的边长的一半=8a，大圆半径=7a，中圆半径=4.25a，小圆半径=3a。 8a/(8a-3a)=1.6 小圆与大正方形接近黄金比 7a/4.25a≈1.647 中圆与大圆接近黄金比 4.25a/3a≈1.417 中圆与小圆比例接近√2 整个栅格系统中的尺寸都是通过黄金比例互相联系的。
△ 内部符合斐波那契螺旋线和黄金分割的IOS启动图标骨骼
iOS的启动图标非常重要。并且苹果规定所有应用程序的启动图标都必须是圆角正方形作为图标背板。这个背板也给我们了一些参考线，苹果使用黄金分割和斐波那契螺旋线将画面分割为若干部分。如果我们绘制启动图标时可以贴合这些参考线。8a/(8a-3a)=1.6 小圆与大正方形接近黄金比7a/4.25a≈1.647 ，中圆与大圆接近黄金比，4.25a/3a≈1.417 中圆与小圆比例接近√2。
平面与版式的设计知识涵盖了字体的选择、图片的选择、平面构成基础、排版的CRAP原则、栅格化设计、黄金比例等多个知识点。如果我们现在接到一个需求，可以首先将内容放进画面并排列好重要性、然后选择合适气质的字体和图片、使用CRAP的排版原则将信息排成合理的顺序、利用栅格化和黄金比例让画面更加科学、最后如果发现画面比较空可以加入几何形装饰。怎么样，思路清晰了吗？平面与版式知识背后是人类读取信息几千年来形成的习惯以及现代社会约定俗成的阅读方式和心理学等，要想成为一个优秀的设计师，我们还需要进一步地了解设计背后的原理以及表达信息的多种方法。希望本篇文章能够对您的平面与版式设计有所启迪。