版面设计的原理 -伊达千代

0. 设计是为了信息
   设计的本质是为了将信息更有效率地传达。设计好比疏导交通，好的设计使得信息流畅地传达，失败的设计则引起信息的大堵塞。

0.1 设计流程
STEP1. 理解。了解受众是谁，设计作品的目的是什么，以及怎样达到这个目的，提出design solution
STEP2. 整理信息，按照内容将其大致分为几大块
STEP3. 将已经打组的信息制作成表格，重要信息高亮
STEP4. 确定版式，使用灰阶确定信息的层级和版面的平衡
STEP5. 确定look guide (基色，强调色和辅色，以及字体和字号)，以便设计中进行复用 [ 详见6.2 ]
STEP6. 将信息结合look guide放置到板块中
STEP7. 在重点信息的设计上添加变化
STEP8. 添加细节(装饰，图标等)

0.2 重要&不重要
重要的信息：大，重，粗，个性，大留白，高彩度，高明度，夸张，富有变化
不重要的信息：小，轻，细，共性，小留白，低彩度，低明度，合理，遵循规则

1. 排版
   1.1 以分量来思考
   设计前，要先在脑海中把元素转换为分量进行模拟思考，确保版面平衡(或不平衡)。将版面转换为灰阶有助于进行这种模拟。平衡的页面四平八稳，而故意打破平衡的页面具有张力。

1.2 比例
黄金比例是1:1.618，1:2被称作白银比例，日常使用的A型，B型规格的纸张都是这个比例。这个比例的特点是将长边对折后形成的四边形长短边之比还是1:2，比如A3纸对折后就成了A4纸。
比黄金比例更宽的图片给人更强的稳定感。
比黄金比例更窄的图片并不常见，给人新鲜的感觉。

1.3 图文配置
文字流和图片的关系，可以想象成河流和石头。读者摄取信息时是「顺流而下」的，一般是从上到下，从左到右。如果图像这块「石头」被配置在文字的河水流过的地方，阅读就会被阻断，造成不好的阅读体验。切记要保持河流的畅通。

1.4 留白
留白是负空间，设计时要注意负空间的形状。
有关联的要素之间留白要小，而重点信息周围大量留白可以起到强调作用。
整体而言，面积大的留白给人奢华和高级感，但是相对显得冷清；而面积小的留白让人感到热闹欢快，但显得拘束紧迫，甚至有点廉价。

1.5 网格
所谓「网格系统」，就是事先把版面用网格分割开，再将文字和图片适配进网格的设计手法。早在1950年就在欧洲开始使用了。
pro: 条理清晰，复用性强
con: 制约了设计的灵气，使得版面死板
网格系统比较适合用于文字量大，页数多，风格严谨而理性的作品。

1.6 版心
设计时，要在叫做「版心」的假想边框内进行设计。绝大多数元素的配置都不可以超出版心。
1.版面率
版心占据整个版面的比例叫做「版面率」。
版面率高，四周留白少，会由于登载的信息量大而带来欢快热闹的感觉，但也可能会因为信息overwhelm而影响阅读体验，或者带来廉价的感觉。
版面率低，四周大量留白，虽然降低了登载的信息量，但这些留白会给人高雅平静的印象。希望读者能在短时间内理解每一页的信息，快速流畅地翻页时(如名牌时装的商品目录)，经常使用降低版面率的手法。
可以模拟思考为：
巴士人多，亲民，日常；高级轿车只能坐很少的人，但是高级有档次。
2.版心位置
版心较高的排版会带来创新，新鲜的印象；版心较低的排版重心低，会显得更稳重。
3.出版物的版心
书的版心的上下边界成为天头和地脚。
在为对开的装订书设计时，装订边要比裁切边多预留5-10 mm的空白。
注意：

1. 有时将图片或元素的一部分设置在版心边界之外，可以给平淡死板的排版带来变化🔨

2. 版心线不是出血线！

3. 格式塔(Gestalt)原理
   格式塔学派是心理学重要的学派之一，兴起于20世纪初的德国，又称为「完形心理学」。Gestalt在德语中意为「模式，形状，形式」。格式塔学派主张「人脑对事物的感知并非单单通过对其组件的感知，而是通过融合过去的经验，将事物作为整体来感知」
   格式塔在设计中的5项法则是：简单，相似，接近，闭合，连续
   2.1 简单
   大脑倾向于将看到的各个部分整合成一个更易于理解的，简单的统一体。因此在设计时要注意作品的整体形状，养成大局观。

2.2 相似
我们容易关注那些外表相似的物体，不管它们位置是否相邻，大脑总是把它们联系起来。因此在设计时注意使用重复的手法。

2.3 接近
元素之间的距离接近，视觉上会形成一个比较大的整体，而其中的单个视觉元素的个性会减弱。因此把传达信息接近的元素打组靠近配置，而不相关的信息之间要远离。

2.4 闭合
人们在观察熟悉的视觉形象时，会把不完整的局部形象当做一个整体的形象来感知，这种视觉上的结束，称之为「闭合」。如果局部形象过于陌生或简略，则不会产生整体闭合的联想。利用闭合原理，设计时隐藏部分元素，可以使设计变得有趣。

2.5 连续
人的视觉追随一个特定的方向延续，以便把元素连接在一起，使它们看起来是连续向着特定的方向。设计时可以利用这一点，强调元素的方向性。

3. 文字的编排
   3.1 字体
   统一字体会带来整洁的感觉，但是在一些作品上可能会显得太过朴素，设计感不足；而过于频繁地使用新奇的字体会让人产生厌烦感。
   字体本身是具有性格的，彼此之间也存在情绪对比。此外，字体具有装饰性。
   矮胖/粗的字体显得稳重，瘦高/细的字体显得新鲜。曲线的笔画显得柔美，直线显得刚硬。

3.2 字距和行距
日文的横排需要适当缩小字距，以免显得松散。
文字间的空白叫做「中宫」，一般来说，字距不可以小于中宫，行距不可以小于字距，栏之间的距离不可以小于行距，否则就会造成阅读困难。
一般来说，将明朝体(宋体，serif字体)的行高设置得宽一些，而黑体(san serif字体)的行高设置得窄一些。
一般来说，报纸一行16个字，杂志20个字，单行本40个字是比较适合阅读的行长。过长的行长容易造成阅读错行，而过短的行长使文章显得零碎。

3.3 日文和英文
横排的日文需要适当缩小字距，以免显得过于松散。
日文和英文混合存在时，会觉得英文小且与日文的位置错离。这时候需要加大英文的字号并且调整位置。
若在竖排文章中加入英文或数字的话，这部分文字必须转动90°。

4. 线
   线条同时具有联系和分隔两种作用。
   4.1 联系
   线条可以引导视线。人们的目光会随着手画线条的方向移动。
   线条还可以连接要素。在文字块等组合的旁边加上线条，能让人理解它们是有连续性的整体，从而显得有条理。

4.2 分隔
隔线的分隔作用随着它的粗细，长短和深浅而变化。
较细的隔线优雅纤细，但有时也让人感觉冷酷或神经质。较粗的隔线温和且醒目，但是有时会让人感到沉重的氛围。
文字的粗度/深浅和隔线的粗度/深浅需要明确地区分开，避免阅读时造成视觉上的混乱。
此外，用不同颜色的面，也可以对版面起到分隔的作用。需要注意的是，面的形状也是一个重要的因素，面的边界是直线还是曲线，是色块还是渐变还是花边影响着版面的个性。

5. 对比
   在设计中，控制元素之间的对比度有助于建立信息的视觉层次，让关键信息突出展示。
   5.1 尺寸对比
   元素之间的大小比例也称为「跳跃率」。跳跃率小的版面平稳安定，跳跃率大的版面显得活泼有朝气，大的元素给人印象也比较突出。
   此外，要强调这种尺寸上的对比时，将大的元素和小的元素并置效果更好。

5.2 色相H(冷暖)，彩度S(灰艳)，明度B(深浅)对比
需要注意的一点是，两个并置的元素能否被看清，只取决于它们的明度对比。

5.3 有机无机对比
有机的形状，字体(比如手写体，装饰体)与规整的，无机的形状和字体构成对比。有机的形状和字体令人感到新鲜，意外，感性，而无机的形状和字体令人感到安稳，成熟，理性，有条理。
（注意：字体对比本身也存在大小，粗细，疏密，曲直，高矮，宽窄，繁简等对比，而这种对比只有特别明显时才能达到效果）

5.4 软硬对比
软：柔软的纹理材质，曲线，圆角，渐变，软的色彩(低彩度，高明度，暖色)，女性或儿童的形象，小动物，自然，感性
硬：坚硬的纹理材质，直线，直角或锐角，块垒分明的色块，硬的色彩(高彩度，低明度，冷色)，男性形象，工业，理性
注意：当纹理和材质覆盖整个版面时，对版面的氛围起到决定性左右，可能会导致整个版面都被该材质的效果所支配。所以作为背景时，纹理材质的选择宜微妙。

5.5 虚实对比
虚：模糊，高透明度，低对比度（比如背景）
实：清晰，无透明度，高对比度（比如前景）

5.6 疏密对比
密集：留白小，重要性低，个性不明显，有热闹感，甚至显得庸碌
稀疏：元素周围大量留白，重要性高，个性明显，有宁静的感觉

5.7 秩序对比
当设计遵循某种秩序时，打破该秩序的元素与该秩序构成对比。比如在网格设计中加入打破网格的动态元素，可以突显该动态元素。

5.8 繁简对比
繁复的花样，pattern或者照片，与简单的色块，字体形状可以构成对比。简单的背景与复杂的字体或者点缀也可以构成对比。繁复的花样和字体使人感到复古，庄重，华丽，而简单的形状和字体使人感到现代，轻松，随意。

5.9 轻重对比
轻：浅，细，小，轻而上升的元素(羽毛，泡泡)
重：深，粗，大，重而下沉的元素(铅块，石头)

6. 配色
   6.1 配色方案
   配色是否和谐，只取决于彩度和明度。
   「色调」是指同一彩度和明度的一组不同色相的颜色。配色时只要从同一色调选择颜色，页面的色调就会和谐。
   使用何种配色方案，取决于版面本身的风格。若比较素净，可以选择多一些素色，但若本身颜色就艳丽，不宜使用超过两种颜色。可以模拟思考为服饰搭配：若身着朴素的衣物，就容易搭配出统一感；而若身着鲜艳华丽夸张的衣物，便比较难以谐调。（pattern也是一样，若使用太多就难以谐调，且越华丽的花纹越难以谐调。花纹越大存在感就越强，可以适当将花纹缩小。）
   单色方案：没有辅色，或者辅色与基色仅仅构成明度上的对比
   相似色方案：辅色与基色是是相邻色
   互补色方案：辅色与基色是互补色，也就是色环上对面的颜色
   分离式对比色方案：辅色是基色的互补色两侧的邻色✨
   对称三色方案：辅色和基色是中差色，也就是在色环上相距120°

6.2 UI设计的配色流程
因为UI设计会用到很多灰度，所以本身可以带来天然的灰艳对比。也就是说，基色要艳。
STEP1. 确定基色的色相。根据品牌的目标用户和设计目的确定基本的风格和情绪。可以根据关键词google相关的图片获得一些感觉，然后找到一个大致的颜色。注意跳出思维定势，比如为年轻女孩设计网站不一定就要用粉色。如果客户已经有logo，那前2步可以忽略。
STEP2. 确定一个大致的明度和彩度。
STEP3. 在Dribbble里搜索这个颜色的设计，看一下它在其他的设计里是如何被运用的，然后确定基色。
STEP4. 根据网站的气质决定配色方案，然后通过配色方案选取辅色。(可以借助paletton寻找颜色)
STEP5. 将基色以overlay模式混合给#424242(深灰)和#fafafa(浅灰)，透明度调节至5%-10%，拾色，确定灰度色(如果基色是蓝色的话，透明度可以高达40%)。
STEP6. 将基色，辅色，灰度色，黑(深灰)，白(浅灰)制作成color palette。

7. 最后，细节
   Devil is in the detail.
   7.1 阴影
   阴影的位置能表明光源方向，阴影的模糊程度能表现要素浮起的高度。
   若要为图片加入阴影，要确保影子方向和图片中的影子方向一致。
   若是为同一版面中的多个元素添加阴影，要确保所有元素阴影的方向一致，并且阴影的方向要结合版面所暗示的光源方向。比如，若背景使用了浅色到深色的渐变，阴影要在深色的一边。
   注意：
   在一个光源下，多个物体投下的阴影的重叠部分是不会有透明度的叠加的。
   有几个光源，就有几个阴影。不同光源投下的阴影会有透明度的叠加。
   如果物体有透明度的话，阴影的颜色会随着物体的颜色改变。
   除了阴影意外，要注意物体脚下的反光。反光的颜色是物体的颜色。
   如果有颜色的光线照射黑色的阴影，阴影会呈现该有色光的颜色。

7.2 面孔
人脑对面孔具有天然的敏感度，因此面孔的使用可以使整个版面得到强调。
面孔在版面中的尺寸大，或者面孔占全身的比例大，会使得人物的人格特性突显(理性的，权威的，富有经验的，痛苦的，妖娆性感的，神秘的……)，表情或感情等内在特征也会随之浮现。
若版面内出现人物的身体，视线就会被分散到整个身体上，读者就会漠然地认为版面中有「某人」。
成熟的面孔，使版面具有知识性或权威性的理性气氛，孩子气的面孔则能营造纯真或柔弱的感性气氛。
此外，其他的生物，特别是眼部及其周围的面部特征也可以强烈吸引视线。

-end-