1.1 版式设计的应用场景:

版式设计一般可分为印刷品和互联网产品（移动应用、web界面、硬件设备系统界面等）两个方面，包括书籍排版，海报招贴，宣传单页，banner、运营图、作品展示页等等。

1.2.1 样式的八要素：

视觉度、图版率、文字的跳跃率、照片的跳跃率、网格的拘束率、版面率、构成的类型、字体印象。

可以理解为表现力、视觉张力。明快的插图，给人强烈的印象，视觉度就高。空灵/安静的照片、纯文字等，视觉度低。

视觉度高，给人的感觉就像是邻家大妈，更加亲切、更具亲和力、“接地气”。适合招募、吸引人参与的活动宣传。

视觉度低，与人有距离感、看上去高冷、专业、没有情感。适合奢侈品、“高大上”的产品格调。

版式设计中，要依据想要表达的风格气质的差异，选择合适的视觉度。

图片的干净、整洁程度。纯净度高，氛围安静、舒缓；纯净度低，则显得杂乱、喧嚣。与视觉度意思一致。

除文字外的视觉元素（图片、插图、装饰元素等内容）所占面积与整体版面的比率。如纯文字书籍的图版率为0%，全部是图片的杂志图版率为100%。

图版率高，整体更加活跃、热闹，适合快速浏览，适合运营类、报表类等设计（风格也与图片内容强相关，如果图片本身留白较多、风格素雅，则只会放大图片本身的气质，整体风格气质与图片的风格气质更接近。）

图版率低，则更加安静、雅致，偏向于细细阅读，适合阅读、文档等应用的设计。

提高图版率的方法（目的都是增加图形元素、增加图形占比）：

将图片重复化、增加图片数量/面积；

填充底色、增加色彩面积；

将视觉信息图形化（如数字放大作为图形、使用数据图表代替数字、使用图解或符号等增加说明性）；

增加图形（点线面）、图标、纹理、图案作为装饰、背景；

主要信息在整体中所占的比例。与“数据墨水比”类似。重点都是强调弱化分割线、辅助元素等，突出主要信息、主要指报。

各部分内容所占尺寸的比率。优先率高，各部分内容尺寸差异较大，具有鲜明的对比，页面内容富于变化，具有动感、节奏感；反之，则给人沉稳、可靠的印象。

跳跃率包括文字跳跃率和图片跳跃率。分别指文字尺寸之间的对比和各图片尺寸之间的对比。

对于图片而言，图片内容本身的气质和跳跃率一起，决定了整个版面的活力/沉稳。即视觉度较低的图片，尺寸放大，也不能体现活力，而是更强调画面的安静氛围。因此，图片的选用与整体的风格气质也应该要和谐一致。

对照片而言，大面积宜用局部特写照片，小尺寸用全局照片。强调大小对比，形成有跳跃距离感的空间，视线移动时会有深度变化，更加错落、节奏富于变化。

开始版面设计之前，首先应该确定布局网格，即栅格系统。

原则上，版面中的元素都要依据网格线放置。这样的版面，是被网格约束住的版面。或者无视网格线，自由配置，形成脱离网格约束的版面。

 约束率高体现理性、庄重、严谨，男性化，适合严肃、传统的活动。约束率低则更加自由、随性、女性化，适合轻松、愉悦的氛围。

按照版式设计的流程，一般是先建立条理/秩序：按照栅格系统，依据信息层次排布各个元素，然后是添加变化：根据整体的风格定位适当地制造对比、跳出网格约束。    

照片的外形包括角版和挖版。

角版：依据网格约束，四四方方，稳定、权威，适合重要的人物、严谨的规划图。

挖版：退底，去除照片的背景，只保留主体，适合具有亲和力的人物、与背景更好融合的主题。打破网格的约束，更加自由。

角版和挖版的不同搭配、对比，可以在严谨、端正与自由、趣味中调节整体的氛围。例如，如果整体使用角版而显得过于拘谨，可以将某些照片处理组成挖版，增加版面的自由度、透气性。

网格系统：通过竖向和横向的参考线，将页面分割成大小一致的格子，通过网格作为参考来构建具有秩序感的版面。

运营设计中，一般使用既有横向又有竖向参考线的交叉网格。

网页设计中，一般只有竖向的参考线，分为内容部分的列和用作间距的水槽，通过构建栅格来划分内容与留白。

栅格系统的作用：整理版面内的元素，让版面的布局更有条理、元素之间的关系更紧密。通过设定规则，在同一系统内部的不同页面之间形成统一。

栅格系统的要素：版面的宽度、列数、列宽、水槽（Gutter）、安全边距。

960栅格系统（内容宽度为960px，分成12列，列宽60px，水槽20px）

8pt栅格系统（列宽、水槽、安全边距等均采用8的倍数）

版面率是指所有内容在整体画面中所占的比率。版面率比较高时，留白较少，页面整体的利用率比较高，让然感觉丰富、热闹；反之，则给人一种宁静、典雅、高端的感觉。

版面中，去除天头、地脚、页边距后内容所占的区域。

留白：版面中的空白区域，负空间。

    02 改变页面整体的印象：留白多——版面率低，高端、冷淡；留白少——版面率高，热闹、廉价；

    05 使页面得到扩展，给人意犹未尽的感觉；

    06 突出主体，主体周围留白大，所占的视觉强度也会增加。

留白比较完整、规则，页面会更加清晰整洁。

文字的对齐方式：齐行型&齐左型、居中型、自由型。

齐行型&齐左型：齐行型两端对齐，合理的、标准的、面向商业的。齐左型及只是左侧对齐，比齐行型更加自然、自由，比自由型更加规范、标准。

居中型：居中对齐，优雅、高品质、有格调。

自由型：没有一定的对齐中心，有时也依据图片而变化排列的形状，或与图片穿插、重叠。自由的、随意的、有活力的。

字体的类型、字重、字号、字距、行距、颜色、字体跳跃率等，都会影响整体的气质。

如无衬线体感觉干净、现代、简约；衬线体则体现典雅、古朴、时尚的气质；粗体字象征男性化、力量感，细体字象征女性化、时髦、纤细。

明确主题、分开副主题、群化（组合化）、暧昧给人不安的感觉、整理流向、空白时主题的领地、抑制四角、利用版心线。

明确主题：分清主次，区分层级，使空间整洁。明确主题，可以让视线有焦点，而不会无处安放，可以增加安定感。

分开副主题：主题、副主题都应该有各自的空间。整体才会更加平衡、透气。避免压抑、局促。

群化（组织化）：四大原则中的组织原则，格式塔心理学的接近/临近律。将同一类信息组织到一起，让页面信息更有条理，通过形式反映信息结构。

暧昧使人不安：元素之间的关系需要明确，如照片和对应的说明文字、段落与段落之间的关系、不同位置元素之间的关系。

整理流向：视线的移动方向，元素之间应该尽量协调，让视线的移动流畅、有序，而不是相悖、杂乱。

空白是主题的领地：留白的大小，反映了元素的重要程度，留白越大，元素的重要性越强。

抑制四角：四角是版面中最重要的部分，只要在四角配置小的形态，就能安定整个版面。

利用版心线：版心线是隐藏的基准线，沿着这条线进行设计，可以轻松稳定版面。

节奏：在一味的重复中形成差异，形成变化。

对比：尺寸、粗细、颜色等的变化，形成变化。

重点：对于重点的内容，使用差异化的形式来突出，强化主题。

比例：利用斐波那契数列、黄金分割比、白银分割比等，让元素之间的变化更有规律。

平衡：版面的重心应该稳定，增加可靠性、信赖感，而不会让人感觉不安。

融合：即元素之间的呼应，让整体关系更加紧密而不是显得松散、拼凑。同时元素之间应该产生联系，不论是形式、方向、位置还是前后关系上，才像是一个整体。

样式八要素、造型八原则参考：《七日掌握版面设计基础》。

俄国形式主义运动的领袖人物维克多·什克洛夫斯基在《作为手法的艺术》中提出了奇异化的概念，就是说在表达的时候，不仅要关注表达的内容，也要关注表达的形式。通过陌生化的视角所呈现的对象，即便是之前已经很熟悉的事物，也能激发人们的兴趣，唤醒人们内心的感受。

即用新奇的形式表达人们熟悉的概念，也会让人有耳目一新的感觉，会更有吸引力。

仰视 - 物体会显得高大、表达尊重，权威

平视 - 平和、普通的氛围

俯视 - 自由、掌控全局的感觉

以常规的视角看物体，人们比较熟悉。以非常规的视角看物体，会给人新颖、独特的感受，形成陌生化表达，从而显得更有创意。

《写给大家看的设计书》中，提出了版式设计的4大基本原则：对比、对齐、亲密、重复。

对比能够突出视觉焦点，形成节奏感。让页面更加错落、更有层次、变化，提升文字跳跃率、图片跳跃率，增加版面的视觉度，给人以更强的视觉印象，从而避免呆板、无趣。

对比的目的是突出主要元素，所以首先应该对信息的层级进行区分，然后通过强化与其他元素的差异来突出重点。

冯·雷斯托夫效应（Von Restorff Effect）：也称为隔离效应（The Isolation Effect），在多个相似的对象中，与众不同的那个比其它的更能让人记住。

空间：充满-空置、积极活跃-消极被动、前进-后退、近-远、二维-三维、封闭-开放

形式：简单-复杂、美-丑、抽象-具象、清晰-模糊、几何形式-有机形式、直线-曲线、对称-非对称、完整-破碎

结构：井井有条-混乱无序、排列成序-随意放置、衬线字体-无衬线字体、机械-手工、密集-稀疏

纹理：细-粗、平滑-粗糙、反光-哑光、滑-黏、锐-钝

位置：顶部-底部、高-低、右-左、上-下、前-后、有节奏-随意、单独-分组、接近-远离、中心-边缘、整齐排列-互不关联、内-外

方向：垂直-水平、垂直线-对角线、向前-向后、稳定-活动、内聚-分散、顺时针方向-逆时针方向、凹形-凸形、正体字-斜体字、正-反

尺寸：大-小、长-短、窄-宽、扩大-收缩、深-浅

颜色：黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、饱和（深色）-无色（素色）

密度：透明-晦暗、稠密-稀薄、液体-固体

重力：轻-重、稳定-不稳定

（摘自《平面设计原理》一书）

文字：字体、字号、字重、字间距、行间距、方向、颜色、纹理、虚实、描边/填充

对齐能够产生秩序感，让人觉得内容不是杂乱无章的随意处理，而是经过精心安排的，看起来严谨、专业。

《社会性动物》：在一个简单的演示中，阅读用清晰易辩的字体打印出来的论点的人，比阅读同样的内容但用模糊字体打印出来的人更容易相信他们所读过的东西。

设计是一种表达方式，通过对比、清晰大图等形式，与要传达的信息一起，来构建整体的专业感、可信赖感。

同时，对齐让分散在页面中的元素形成联系，增加整体感。通过对齐所产生的“无形的线”会引导用户的视线。

如同格式塔心理学的接近法则所说，同一模块的内容距离上应该更亲近，这样人才会把他们当成一个整体。

在UI设计中，通过间距的大小来划分不同的内容，可以减少分割线的使用，减少视觉干扰，让页面的内容更加突出。

格式塔心理学的相似法则，人们的眼睛往往将设计中相似的元素视为完整的图片、形状、组合，即使这些元素是分开的。

各元素之间尺寸、样式、颜色等一种或多种属性的一致性，可以互相呼应，让版面更加统一，形成整体感。重复也可以形成节奏，增加画面的韵律感。

在重复中增加变化（大小、颜色等），可以避免过度重复带来的单调。在重复的“度”中更好地平衡。

构成是“组装”“组合”的意思，是研究“要素”和组合原则、思维方法。

平面构成的概念要素：点、线、面。

元素之间的关系要素：方向、位置、空间、重心。

形象是指视觉所能见到的事物的外形、特征等，或是设计中借以表达一定含义的视觉要素。形象的存在方式：分离、接触、覆盖、透叠、联合、减缺、差叠、重合。

构成的手法：重复、渐变、发射、近似、变异、对比、集结、特异、空间与矛盾空间、分割、肌理及错视等等。

重复构成：一个或一组相同的单位形不断重复出现的构成。单纯、平静、统一、乏味。

渐变构成：单位形象与编排遵循某一方面做规律性变动的构成。包括：形的渐变、大小渐变、数量渐变、位置渐变、方向渐变、空间渐变、重心渐变等。

发射构成：单位形或编排环绕着一个或几个中心所作的构成。包括：同心发射、离心发射、向心发射。

对称构成：单位形或编排呈对称关系。包括点对称、线对称、近似对称。

平衡构成：对称构成以形的关系为准，平衡以重心的保持和重心感的安定为主。

对比构成：对比构成强调局部与局部的差异性，使整体成为有显著对照关系的构成。

特异构成：特异构成或称突变构成，整体具有某种规则性，局部因为打破规则，而特别引人注目的构成。

比例构成：按一定的比例渐进变化，常见的有等差数列、等比数列、黄金分割比、斐波那契数列等。

分割构成：将一个整体按需划分成不同的部分，如龟裂的土地。分割构成有规则分割、自由分割、功能分割、装饰分割。

群化构成：将简单的基本形，用不同的方法，组合在一起成为新的基本形。

1.7 格式塔心理学（完形心理学） 

格式塔心理学的格式塔是德文Gestalt的音译，一般又称为完形心理学。

格式塔心理学主要研究整体与构成整体的各个部分之间有何联系，强调研究对象的整体性，不是单纯的各个元素本身的特性，而是他们所构成的整体的特性。格式塔心理学认为所有元素相加之和一定会小于研究对象的整体性呈现。

通过补全、简化等机制，通过简化、组织、归纳的方式来理解外部世界的复杂信息点，将多个点看成一个整体，减少大脑的认知负荷。

视觉倾向于感知连续的、整体的形式而不是分散的碎片，通过找到元素间非常微小的共性，将多个不同的信息结合成一个整体，减少视觉触点，减轻认知负荷。

问题的解决不是由于尝试错误，而是由于顿悟。所谓顿悟，就是内在地把握情境的关系性，并依此改变整个情境。

格式塔的几个基本原则：

接近/临近：距离的远近能够传达关系的亲疏，放在一起的会被认为是一组的；距离较远的会认为是不同的组的。两个元素越是接近，组合在一起的可能性就越大。

相似/类似：形式上（如颜色、形状等）相似的元素，人们在感知过程中会认为其是一组的。就像球赛中，穿着一样队服的，就是同一个球队的成员。

连续/连通：连续性是指，人们会将分离的各个有关联的点，在脑海中自动构建一个完整的线，最终成为一个整体的形状。

闭合/封闭：与连续性类似，也是大脑的一种自动补全机制。我们的视觉感知系统会通过已知的模糊信息，通过以往的经验自动补齐残缺的部分，将局部的信息当做一个整体的形象来感知。但是这种查漏补缺的形式是建立在，我们已感知的对象提供的是有规律的形态，而非完全分离的碎片和信息。

图形-背景：我们在看到一个事物的时候，大脑会自动帮助我们在视觉区域区分出主体和背景两个部分，在这个事物中占据了我们主要的注意力的就是主体，然后剩下的部分就是背景。

“图形”是一个格式塔，一个突出的实体，是我们知觉到的事物。“背景”是尚未分化的、衬托图形的东西。知觉帮助我们从背景中将图形分化出来。图形与背景的对比差异越大，图形的轮廓越明显，则图形越容易被发觉。

同方向/共同命运：相似原则的一种，这里共同的形式就是运动方向。即具有相同运动方向的元素，会被认为是具有关联的，一个组内的。

简单/简化：格式塔的核心思想，是指为了更方便的理解这个世界，人类会将接受到的大量信息进行过滤和简化，因为这种解释需要我们付出最少的认知努力，避免我们被纷繁复杂的外部信息所淹没。

1.8 其它原理/法则

古滕堡图表，又称为对角线平衡法则。因为人们通常都是从左至右、由上往下地阅读，久而久之视线自然会沿着这一路径移动。

1.9 视觉焦点与视觉层次

视觉焦点是受众第一眼就注意到的对象，是传达信息中的重点。视觉需要有焦点，才能吸引注意力、形成节奏感。如果焦点，观众的视线就会游离、飘忽，继而失去兴趣。

冯·雷斯托夫效应：也称为隔离效应（The Isolation Effect），在多个相似的对象中，与众不同的那个比其它的更能让人记住。

视觉焦点的形成：焦点就是不一样的、独特的、占比较大的、占据视觉重心元素。

1 对比形成差异、重复后异化。（大小对比、形状对比、色彩对比、位置对比、间距/疏密对比、肌理对比、形式对比、角度对比、方向对比、字体对比）

2 视线引导。通过具有指向性的元素（箭头、三角、线条等）、图片（道路、灯光等）、人物视线等，引导用户视线关注到重点内容。

3 特殊视角。不常见的视角照片会让人感到陌生、新奇，从而吸引人的注意力。

4 增加背景。在主要信息的下方增加背景层，通过形状、纹理、色彩等的与众不同来吸引视线，突出主体。

页面的黄金分割点、网格布局的交叉点、左上角到右下角的连线上。

视觉层次就是信息的重要优先级区分，通过形式来表明信息的层级结构关系。信息表达需要有层级、有主次，就像音乐旋律需要有节奏、剧情需要有起伏一样。一成不变、千篇一律会让人感到无趣、乏味，难以集中注意力。

视觉层次是利用格式塔心理学的接近、相似等原则，对内容进行组织，以层次化、结构化的方式，简化信息的复杂度，通过预先设定好的结构，引导、暗示用户，让受众按照你设定的思维轨迹解读、思考、组合信息，而不会因为每个人的知识背景、文化习俗、生活经历、性格等的差异而造成千人千面的解读。

视觉层次的丰富，可以增加画面的空间感、跳跃率，让整体氛围更加生动，避免显得空洞。

对于文字而言，视觉层次的划分主要通过字体、字号、字重、颜色、字间距、行间距、背景色、图标等方式来区分。

对于一般的元素而言，区分的方式则主要是尺寸大小、线条粗细、颜色色调与明暗、透明度、模糊程度、复杂程度、与背景的对比反差、留白的大小、阴影、有无装饰元素、边框等。即通过制造对比、形成差异来划分层级。

层次的划分应该适度、合理，没有层次就没有节奏，但是划分得过于琐碎就失去了组织信息的含义。层次之间应该也有重复、呼应，来保持整体感。

1.10 视觉设计的维度

让用户看得明白，快速、清晰获取信息

容器整合 —— 信息组织，形成整体，让信息分层，在大的层级上减少视觉触点，更加整体、整洁一些。

局部放大 —— 拉开视觉层次，突出重点，强化节奏。

让用户看得舒服，美观舒适。

呼应 —— 页面内元素、颜色、形式的呼应，整体感更强，更加和谐而非拼凑感。

节奏 —— 形式上有所变化，增加韵律感。避免一成不变的乏味无趣。

饱满 —— 负空间的规整，让整体感觉更加满足格式塔定律中的简洁定律，人们会以最简单的形状来感知内容块。

让用户看得惊喜，形成记忆点。

品牌延展 —— 结合品牌形象，强化品牌认知。

图形延展 —— 将语义图形化，增加趣味性、设计感，让人更加容易理解信息

《版面设计的原理》一书中认为，版式设计是反复进行保持条理与添加变化的工作。

从设计方案的层面而言，设计的流程可大致分为：理解-提取-布置

理解是指对设计需求的梳理，了解设计目的和背景是什么、在何处展示、受众的特点等等，定义清楚问题。

明确设计意图、风格特点的要求（严谨/活泼、高级感/亲和力）、受众特点、场景、商业目的等。确定设计的方向，有的放矢。

对于设计师而言，最重要的是为品牌、产品、用户创造价值。在面对不同的需求描述时，应该分析需求背后的本质原因、目的，再根据目的与风格的匹配进行设计。

得到设计师总结的对接需求时的解决思路：

翻译需求，弄明白他说这个到底是什么意思。

专业匹配，从我掌握的设计技巧中，找到合适的方法去实现需求。

必要时，可以通过情绪板的方式来统一理解，同时吸取与目标风格相关的形式、元素、颜色等方式。

提取是指将所要传达对信息进行整理、组织、分类，并区分出优先级，明确作品内容中那些是最重要的。这个时候还需要考虑的是，如何让受众对最重要的的信息产生兴趣/被重视。

提取的另一各方面是找到与主题关联的元素、风格形式等，准备好版面的“零部件”。

布置是将“零部件”组装的过程，部件之间的结合关系，最后总决定了版面的气质。

布置不是简单对摆放，需要从构图、形式、装饰点缀等角度让整体符合设计的目的，也就是传达主题气质与传达的形式之间互相映衬，给人一种统一、明晰的心理感受。

主要步骤可分为建立条理/秩序 —— 添加变化/突出强调/图形化 —— 整体氛围和谐

2.3.1建立条理/秩序：

建立条理是让整体清晰、明白，为信息建立秩序。一般会用到四大法则中的对齐、亲密、重复原则。

建立条理的过程是将信息的结构、分类视觉化的过程。

2.3.2添加变化/突出强调：

建立条理的目的是让页面更加规整、清晰，但是一味的对齐、重复，像康德的作息一样千篇一律，会给人以古板、无趣的感觉。这时候就需要增加变化来“打破”过度的一致，让整体表达上更加生动一些。

图形化、对比、打破常规（形式、颜色、视角、位置等进行变化、翻转等）

图形化：图形化的表达，增加趣味性、设计感，让人更加容易理解信息。如增加图标、将文字图形化等。

对比：增加对比（色彩、大小、形式）来区分信息的层次，形成差异，突出重要信息，让页面形成节奏感、韵律感。

对比的形式包括：光影、渐变、纹理、装饰元素、留白大小、旋转角度、填充/描边、远近、清晰与模糊、风格（传统与未来）、杂乱与整齐、字体类型、字重、字号等等。

打破常规：故意的翻转、位移；采用特殊的视角；夸张的放大；

2.3.3整体氛围和谐：

在布置好所有元素以后，还需要考虑色彩的冷暖、风格的软硬、视觉上的重心等的和谐、融洽，让整体的氛围、气质与设计的主题目标相吻合。

同时，元素、色彩、风格之间有呼应，形成合力。视线的流动流畅，负空间的形状完整、规整等。

颜色可以分为冷色与暖色，蓝色、青色等冷色让人联想到冰块、海水等意象，给人的心理感觉凉爽、安宁。红色、橙色等暖色则让人联想到太阳、火焰等意象，让人感觉到温暖、活跃。

当大面积使用某一种类型颜色时，如冷色，有可能会让整体氛围阴冷、呆板；反之，则会让整体显得浮躁、扎眼。除了让整体氛围与表达的主题相吻合以外，也要考虑整体给人的感受，在过于偏向一方而让人不适时，通过点缀对应的颜色让整体更加和谐。

冷暖色彩面积差异越大，对比的效果会越明显、突出，同时冲突、不和谐的感觉会减少。

曲线、圆角、粉色调、明亮浅淡的颜色等偏软，直线、直角、深色调、强烈鲜明的颜色等偏硬。偏软的元素让人更容易亲近，风格上更加可爱，更具女性化，但是容易变得廉价、低幼。偏硬等元素呈现出秩序、理性等特征，但是容易让整体变得呆板、无趣。

一方面，可以在比较呆板的画面中加入软一点的元素来调和画面或者反之；另一方面，可以在不断重复的硬元素中加入偏软的元素作为主要信息点来突出强调。

2.3.3.3 轻重调和（重心平衡）

版面中的元素依据大小、色彩的差异，会产生大小不一的视觉引力。整个画面的视觉重心就在各元素的拉扯中形成。若是主要元素都偏向于一侧，那么整个画面会有一种向一边倾倒的趋势，需要在对应的一侧增加一些元素来让左右平衡。

同时，视觉重心偏高会让整体氛围更加的具有跃动感、不安稳感；反之，则整体会更加平稳、踏实。依据索要传达的主题意象的差异，也会选择不同的重心布置。需要合理的处理与布置元素的大小、色彩等会，来构建与整体气质相符的视觉重心，让内容与形式更加契合。

2.3.3.4 深浅调和（层次分明）

在浅色模式下，深色部分一般被认为是比较重要的、着重强调的。浅色部分一般是次要的、辅助信息。

在深色模式下，深色部分一般会被当做背景，浅色、亮色的部分会在背景中凸显出来，成为主要的内容。

深浅调和就是既突出内容，又与整体的风格气质一致，或对比强烈，或者安静平和。

将版面看作一个系统，每个元素都是系统的要素，每个模块就是子系统。按照《高效能人士的七个习惯》《系统之美》的观点，应该统合各个部分，让各部分的目标与整体的一致，最终实现1+1＞2的效果。

页面的色彩、字体、辅助元素、背景的风格应该与整体的风格基调保持一致，强化整体的风格印象。同时元素之间应该有一定的呼应关系，强化整体感。

如稳重、安静、格调感的氛围需要轻柔色调/浅灰色调/浊色调、印刷体、直线、纯净度高的背景等元素来烘托，同时留白较多，元素变化较小、跳跃率低；而鲜艳色调/明亮色调/强烈色调、手写体、斜线、曲线等与活泼、热闹的风格更搭，同时留白较少，图版率较高，元素的跳跃率更大一些。

设计方案流程：整体-局部-整体（建立条理-添加变化/突出强调-整体氛围和谐）

模块划分：当信息、数据过于复杂、需要进行模块划分，让平铺的信息初步分组成为独立的信息单元。

为什么区分：组织信息，简化认知负担。

区分形式：设计的原理包括同域原则、接近/亲密法则、相似法则。具体的形式：间距、分隔线、卡片背景（纯色、阴影、线框等）、色彩。

构图可以引导观者的视线流动，平衡整体的画面重心。一般而言，构图形式可以分为对称构图，中心构图，左右构图，对角线构图，发散构图，满版构图，形状构图，S形构图，X构图。

格式塔心理学中的简化对称原则：人们往往倾向于感知匀称物体围绕中心对称后形成的形状。在纷繁复杂的信息中寻找规律、简单、有序的对象。

对称构图分为中心对称、左右对称、上下对称、对角对称、混合对称。构图中可以将文字、图片、装饰元素等互相融合、反转，让二者之间的关系更加紧密，同时打破固化、呆板的印象。

中心对称即居中对齐，与构成的三种类型中提到的居中型一样，表现优雅、高品质、有格调的气质。画面比较安静、和谐。

左右对称即均分画面，将版面分割为左右1:1两部分，适合表达某种对立、反差的事物，画面平衡、稳定、秩序感。

上下对称将画面分为上下两个部分，重心靠上或靠下。

对角对称将元素放在画面的对角，在对称中增加一点活泼。

混合对称即结合多种对称方式，如中心对称+对角对称。

中心构图可以看成是对称构图的一种特殊形式，将主体放在视觉中心，其它的元素围绕主题排布（一般是对称的，以保持平衡），起到突出强调的作用。

通过主体与辅助元素在尺寸、颜色、背景、阴影等方面的对比、差异，形成视觉焦点。增加跳跃率，让整体的节奏更加鲜明。

左右构图可以看成是对称构图的一种特殊形式，通过将画面分为左右两个部分，来达到一种平衡、稳定的状态。

构图的比例划分一般有1:1、1:0.618、1:1.414、1:2、1:3等。 均分的比例，二者之间势均力敌，画面比较均衡稳定；不对称的比例，跳跃率会更高一些，更有活力。

1:1将画面均等划分，两者呈现一种对立的关系。

1:0.618、1:1.414分别是黄金分割比例和白银分割比例，与1:1相比，更有层次和节奏感。

1:2、1:3则一般是图片作为主体，占据画面较大比例，文字作为辅助的标题、说明等。

左右的空间并不一定需要全部占满，占据一定比例后，通过留白、内部再次划分等方式，让画面的节奏感更强一些。

分割的形式也不一定是直线分割，形状蒙版、曲线、斜线等分割形式，会显得更加灵动一些，适合于稍显活泼的气质。

同时也可以增加连接/跨越两个部分的元素、文字等，或者去除图片的背景，让左右两部分的关系更加紧密一些。

上下构图可以看成是对称构图的一种特殊形式，将画面分为上下两个部分，只是切分的比例和左右构图类似，并非一定是对称构图中的1:1，也可以使用:0.618、1:1.414、1:2、1:3等。

不同的比例和元素布置，重心会有所不同。重心靠下，整体比较稳定；重心靠上，整体更具有动感。

与左右构图类似，划分的各个空间并不一定需要全部占满，占据一定比例后，通过留白、内部再次划分、内部的跳跃率提升等方式，让画面的节奏感更强一些。

分割的形式也不一定是直线分割，形状蒙版、曲线、斜线等分割形式，会显得更加灵动一些，适合于稍显活泼的气质。

划分的两部分中，面积较大的部分视觉度的提升，可以增加整体版面的活力与动感，避免空洞、呆板。

主体、文字、背景、装饰元素中所有/局部的元素倾斜放置，让画面显得不稳定，形成动感、速度感。倾斜的角度一般在15° — 60°之间。

3.2.6 发散/放射构图构图

发散构图是重复原则的极致运用，辅助元素围绕主体，呈发射状。形式上包括离心式、向心式、同心式、移心式、多心式。引导视线、焦点突出、形成空间感。

将图片、文字、装饰元素等充满整个版面，让画面视觉度更高、版面率更大、留白变少、丰富饱满。

3.2.8 形状构图/几何构图

将元素组织成某种形状，让页面的布局更加规整。常见的形状有三角形（正三角、倒三角、斜三角）、四边形（平面、透视）、圆形（平面、透视）

S形构图可以看成是形状构图的一种特殊形式，画面的主要元素呈S型排布。

X形构图可以看成是形状构图的一种特殊形式，画面的主要元素呈X型排布。

模拟现实中的物体（与主题相关），将信息拼合成物体的外形，更紧扣主题。

背景的类型：纯色、色块、渐变、高光点、文字、图片、图形、纹理等。

纯色的使用，具有强烈的视觉倾向，整体风格气质与背景色的气质接近。

色块的使用可以让整体显得现代、简约，在画面比较空洞时，可以作为背景的辅助元素，让整体更加丰富、耐看。

渐变色的使用，让整体色彩更丰富/形成光照产生的变化感。细节层次更加丰富。

通过增加光源/高光部分，形成视觉引导，区分层次。

通过将文字放大的方式，可以突出文字的图形感，弱化其作为语言载体的属性。减少视觉重量后，作为背景元素，可以让画面层次更加丰富。

在图片上增加文字、色块等，图版率较大。

叠加质感图片/几里/图案，可以丰富画面，让背景更加丰富、耐看、有品质。可以选用多张图片叠加的形式，结合蒙版、图层混合模式的变化，可以产生多样、奇妙的效果。

图形的设计可以看成是纹理的一种。

3.4 字体的处理方式

UI设计中的大部分字体都是跟随系统设置，所以一般不会特意指定字体。对于web端的产品，一般会制定建议的字体顺序。设计中一般使用苹方、思源黑体等字重种类丰富、常用的字体类型。字体的处理一般而言就是字号变化、字重变化、行间距的调整、字间距的调整、字体颜色的调整。

即文字的大小，web设计中一般最小为12px，移动端设计中，一般2X图的设计尺寸下，最小尺寸为20px，也就是10pt/sp。

在iOS中，默认字体单位是「pt」，正文字号不应小于11pt，建议在15-18pt之间。在使用较大的字体来获得更好的易读性同时，也应该相应地减小字体的字重，因为过重的字体会太过醒目厚重，影响其他内容的显示效果。

字重即字体笔画的粗细。字重较大，比较醒目、稳重，适合于标题、强调文字。字重较小，更偏轻盈、秀气一些，适合说明、辅助文字。

在UI设计中，字重于字号、颜色一起，是区分层级的重要手段。

字符间的距离，对西文字体而言，就是词距。一般保持默认的标准间距（NA）。对于大段文本，调大字间距可以让整体透气性更好，减少给人的压迫感，阅读性更好。

在设计软件中，一般通过调节对齐方式来调整字距形成的留白空间，同时需要注意某些标点符号不能放在头尾的规则。

一行文字所占据的高度，UI设计中，一般建议行高为字号的1.5~2倍，奇数行高则向上+1取偶数。

一行所占据的长度。行长过长易读性就会变差，读者阅读时容易串行，造成阅读困难。

行与行之间的距离。行间距与字间距一起，决定了一段内容的宽松/紧凑程度，也体现出舒适、松散/压迫、紧密的感觉。

段与段之间的距离。划分不同的内容块，让整体形成节奏感。一般取一行的高度的作为段间距。

文字颜色的选择与背景、整体的色调关系密切。

对比度一方面影响文字的识别性，一方面也是层级关系的体现。在sketch中，可以使用插件（Color Contrast Analyser）来检查对比度是否满足WCAG的要求，一般最少达到AA级别。

3.4.2 字体的处理方式-运营设计

运营设计中，字体包含标题、辅助文字、说明文字等，一般会依据整体的风格氛围等对字体形态、样式、色彩等进行处理。同时，调整字体的跳跃率来符合整体的氛围。

依据目的、使用场景的差异，字体的处理需要在个性化与可识别性中取得平衡。

黑体 —— 干净、现代、简约；

衬线体 —— 典雅、古朴、时尚；

圆体 —— 圆润、可爱、亲切；

书法体 —— 复古、气势磅礴、历史底蕴；

哥特体 —— 凌厉、魔法、童话等；

意大利体 —— 手写感，意大利体在英文中，通常会在表示强调、标记外来语、以及表示作品名时会用到。

铜板花饰体 —— 优雅、女性化，装饰感较强。

字体&字号对比：如无衬线体中文+手写英文，在严肃中增加一丝活泼的氛围。

图形化：放大文字、将文字排列成某种形状，强化装饰性。如将文字排成一个圆圈，作为装饰元素出现，可以在版面中增加一些曲线的元素，与直线的元素形成对比，柔化整体的气质。

间距与行距：扩大文字的间距和行距，也是图形化的一种形式，弱化文字属性，增加文字在版面中的空间占比。

重复：将文字不断重复，然后排成某种形状。引导视线、增加图形感。

重点在通过重复、变化于形成对比与节奏，图形化文字，让形式更加新颖，形成陌生化的表达。

不同字体、字号的搭配：形成对比、节奏。

文字的对齐与错落：比较自由随性。

增加间距：松散、自由的氛围，增加版面率。

角度变换（45°+45°、30°+60°），更具有动感

加描边/镂空：描边文字/镂空文字与实心文字形成对比，增加版面的变化。

加质感肌理：通过叠加、内发光等形式增加文字的肌理效果，让画面细节更丰富。

颜色对比：突出重点，形成节奏。

文字蒙版：将文字作为蒙版，剪切图片，增加文字的视觉度。

增加色彩背景：与背景区隔开，整体感更强。

加蒙版背景/边框：与增加色彩背景的目的类似，整体感较强。

加阴影（一般阴影、长投影、弥散阴影、层叠）：与其他的文字/背景等形成前后关系，增加层次感。

加icon/图案：丰富画面，增加趣味性。

图形化：将文字与主题更好地关联起来。

增加透视、立体化：将文字三维化处理，强化图形感、空间感。

部分模糊：形成形式上的对比，文字的图形化属性得到强化。

视觉焦点是画面的主题、舞台的主角；装饰元素是群演、烘托氛围的存在。增加装饰元素也就是增加图版率、视觉度

装饰元素的意义：装饰元素又被称为“视觉糖”，包括点、线、面、图标、纹理、阴影等，本身没有什么意义，但是被用来甜化原本无味和无意义的设计，让设计更有“味道”、更丰富。一般在运营设计中，装饰元素可以丰富画面、平衡版面、让整个画面更加饱满、有层次，避免整体效果空洞呆板乏味。

装饰元素的形式：点-线-面-图标

点：包括圆形、方形、三角形、不规则形等，点缀画面，定位元素。可以形成视觉张力，平衡画面，让整体不显得空。

线：线包括直线、斜线、曲线、实线、虚线、开放、封闭等，方向与粗细的变化表达不同的气质（安静/动感、严谨/自由等）。引导视线、划分内容、强调重点、关联元素。

面：包括几何形、不规则形等，表达严谨/自由的气质。可以组织内容、提高图版率，增加画面重量。

图标：图标根据大小可以成为点元素或面元素，比抽象的点线面更契合主题，帮助解释含义。也更容易表达出趣味性、人性化，而不是冷冰冰的理性感、机械感。

肌理/纹理/图案：与元素结合丰富视觉层次、提升整体的质感。

格式塔心理学的相似法则，人们的眼睛往往将设计中相似的元素视为完整的图片、形状、组合，即使这些元素是分开的，也会被认为是一个整体的。

呼应让整体感更强，让所有的元素为同一个主题服务，而不是各自为政，变成没有方向、目的的“视觉噪音”。

呼应的方式并不是简单的重复，而是重复后发生变化，已形成节奏感。变化的部分包括形状、尺寸、方向、颜色等要素中的一种或几种，既有相似，又有差异。

1、与背景隔离，增加主体的识别性。

2、增加空间感、层次感、纵深感。

3、增加质感，表现出格调、高级的感觉。

4、将投影作为画面主体，与常规的认知相反，形式上比较新颖，增加形式感。

常规投影、外弧形投影、内弧形投影、接触投影、倒影、悬空投影、弥散阴影、长投影、形状投影。

将整个版面看作是一个系统，各个元素是系统的要素，元素之间的关系是要素之间的连接，版面的商业诉求、风格定位等是系统的功能、目标。检查时主要考虑整体的和谐、呼应、平衡、生动（陌生化的表达），各元素及关系与整体目标的一致性。

四大原则：即对比、对齐、亲密、重复。

层次的划分、内容的组织：页面的层次划分是否明确，重点是否突出。即整体的骨架、结构是否合理、有逻辑、有节奏感。

留白、呼吸性：留白部分的形状、整体的透气性、以及空间的延伸感、开阔感。如果信息贵阳冗、视线被阻挡、视野受限不够开阔，会让人觉得比较压抑、喘不过气。

细节部分：字体（字体类型、字号、字重、字间距、行间距），分割线（粗细、颜色、分割方式），颜色（冷暖、明暗、轻重、对比度），画面的平衡。

整体的一致性、呼应：整体风格的趋同、协调。版面率、构图、色彩、装饰元素、字体等元素的风格倾向是一致的，让人感觉是一个自然、有机的整体，而不是各种不同的零件强行拼凑出来的。

通过让引导用户的视觉焦点，有意识的影响观察的先后顺序，让用户关注到重点内容，保证信息传达的效率、质量。

高光：高光点与周围的环境形成对比，吸引视线，效果与 中所提到的“subtle”比较接近，巧妙地、微妙地。

渐变：渐变的方向性引导视线的流动，引导形式比较含蓄。

线条：线条的趋势、方向让目光追随，具有极强的视觉引导性。

方向性的图形：具有指向性的图形、纹理等，让目光移动到指示的方向，比较刻意、强烈。

运动趋势：画面中的物体有往哪个方向运动的趋势，会引导视线跟着这个趋势。

照片中主角的视线：对于画面中有人物元素的版式，人物对于人的吸引力较大，大多数人会首先关注人物的脸部，并进一步受到人物视线的引导。

3.9.1 如何让页面不显得空：

整体的思路是增加画面的视觉度，提高图版率，减少留白。

·增加水印文字作为背景

·增加辅助小元素——点、线、icon、小的文字（网格点，球状点，直线，斜线，波浪线，圆形，方形，不规则多边形，流体形，阵列的线，阵列点）

·增加材质、肌理（星空，雾气，云，无意义的图案，纸张质感，石材质感，水波）

·增加色块（大，小，形状），引导视觉中心

·提高主体占整个画面的比例

·增加装饰图案（飘带、框线……）

3.9.2 页面太乱如何解决：

交互设计简约设计四大法则：组织、隐藏、删除、转移。视觉设计中，组织、删除、对齐、重复是简化页面的几个基本原则。

·增加内容容器，让整体组织关系更加清晰。

·减少字体、字号、颜色（色相、明度、纯度）的数量/变化

·减少分割线等元素，利用间距、色彩、背景等实现模块之间的划分。

·对齐:有形/无形的对齐线

·统一元素间的关系：即重复。风格形式、颜色、元素之间的轮廓关系、背景样式等保持统一来形成整体感；

主要思路是丰富页面，增加页面的视觉度、图版率、跳跃率，减少网格拘束率。优化节奏感、对比。

·选用视觉度更大的背景图片

·增加视觉糖（渐变、阴影、描边、纹理、图标、动效、点线面元素等）；

·增加质感、纹理、色块等

·增加光影的运用（侧光、逆光……）

·元素角度变化（倾斜产生动感、对称/翻转形成重复与变化）

·增加跳跃率（文字跳跃率、图片跳跃率）

·强化层次与对比、变化（形态对比、大小对比、色彩对比、远小近大的空间对比、Z轴高低的空间对比，留白空间大小对比）

主要思路是明确主题，建立情绪板（mood board），从页面整体布局、构图、色彩到细节的装饰元素、文字类型及对齐方式等方面，全部向目标风格靠近。同时整体协调、一致、呼应，强化印象。

渲染节日氛围、促销的宣传类设计，一般采用高版面率，给人热闹、亲切、有张力的感觉。高级品牌、商务宣传一般采用低版面率，给人以稳重、典雅、有距离的感觉。

不同的构图形式，版面率、平衡性、稳定性等会有一定的差异。如发散构图、倾斜构图更有动感，对称构图则更加稳定。

颜色的种类、数量，颜色之间的相似、类似、对比等关系，对于整个气质有较大的的影响。

背景/图片的气质，奠定了整个版面的基础风格。

·不同视角对气质的影响

平静、温和的画面，一般采用常规的观察角度，新奇、动感的风格，一般使用特意、不常见的角度（如仰视角度看一个人）。

设计形式是在要素和要素关系上，利用一些技巧，形成陌生化的表达。

通过元素的叠压，增加版面的图版率、让画面整体更加饱满、元素更多，层次更丰富，画面整体风格也会更加热闹活泼。

位置叠压的类型：图前文后、图后文前、图文穿插、文字透叠、图文透叠、图片透叠。

格式塔心理学的同域原则、信息传递中的容器整合。

文字下方加上别背景色块，面状化，更加整体、突出、醒目。在复杂的背景中，增加色块也可以增加文字的辨识度。

补丁的类型：色块、描边、形状变化、颜色变化、透明度变化、质感变化（增加肌理、材质）、二维角度变化、视角变化（透视、俯视、仰视）、文字变化（字重、字号、间距等）、位置变化（文字与补丁的位置错开、补丁之间的重叠与嵌套）、组合/结合（各个色块之间、色块与描边之间、各种风格之间）

对元素的处理形式，扭曲、重复等形式让常规的元素变得陌生。

将版面看成一个系统，《系统之美》中提到系统的三要素：要素、连接、目标。

对应到版式设计中，要素=文字、装饰元素、背景、纹理、色块、色彩等。

连接=元素之间的构成关系，包括分离、接触、覆盖、透叠、联合、减缺、差叠、重合。

目标=版式的风格定位、表达的诉求、信息的优先级。

在样式八要素中，视觉度、字体印象关注的是版面中的要素，即要素的改变对整体风格的影响。图版率、文字跳跃率、图片跳跃率、网格拘束率、版面率、构成的三种类型都是关注的要素之间的连接关系，即个部分之间的连接方式发生变化后，版面的风格气质会随之变化。

对于要素的处理技巧：重复、扭曲、翻转、描边/填充、增加装饰元素、肌理、色块、投影、角版/挖版、改变字体/颜色。

对于连接/关系的处理技巧：对比、对齐、亲密、组织、构图的形式、构成关系、明确主题、整理流向、抑制四角、利用版心线。

在版式设计中，应该以目标为中心，从要素和要素之间的连接入手，逐层优化，每一层都应该是为整体服务的，统合各要素、各层级、子系统，最终达到整体的和谐一致、风格明确。

《七日掌握版面设计基础》

《高效能人士的七个习惯》