上QQ阅读APP看书，第一时间看更新

第2章设计的4大基本原则

2.1亲密性原则

我们在设计一幅作品的同时，如果单词、短语和图片四处分布，连角落也不放过，并且占据了画面的每一处空间，以至于根本没有留下任何的空白，那么这不是一幅成功的设计作品。很多设计者在设计中不敢留有空白，一个设计中充斥着太多的内容，这个页面就会显得杂乱无章，读者也无法很准确地从页面中很快地看到所需的信息。

2.1.1 什么是亲密性

将相关的元素组织在一起，移动这些元素，让它们的物理位置相互靠近，这样一来，相关的元素将被看作是凝聚为一体的一个组，而不再是一堆彼此无关的片段。如果某些信息元素彼此之间没有关联，这些元素就不应存在很近的亲密性，这些就能为读者提供一个直观的提示，使读者马上了解页面的内容。

2.1.2 亲密性例子分析

下面我们将通过一款名片的3种布局方式来详细分析下“亲密性”原则所要注意的相关问题。

案例分析一

下面我们来看一款名片设计，如图2-1所示。这是为一位从事设计工作（注意，是从事设计行业）的执行总监所设计的一款名片，虽然这是一种很典型的布局，但是所犯的错误是致命的，在如此小的空间内你看到多少个单独的元素。

图2-1

你觉得从事设计的人能选这款名片吗？显然不会！

找出问题

第1点：在这个小小的空间中放置了5处孤立的内容，观者不知道该从哪里开始阅读，可能是中间的部分，因为中间的字体相对于较粗，并且字体设置得比较大，如图2-2所示。

图2-2

第2点：阅读的顺序相当混乱，并且造成读者的视觉不知道最后会落在哪个视觉点上，总体看完一遍，还要确定没有遗漏任何信息。

案例分析二

现在来换下信息的布局，将电话信息摆放在名片的中上部，同时将职务信息向右移动一小段距离，如图2-3所示。

图2-3

现在你觉得这位设计总监会选这款名片吗？我觉得依然不会。

找出问题

第1点：这种情况比上一个案例的分布更加糟糕，空间中有两个主体元素，读者不知道是从角落开始阅读还是中间，如图2-4所示。

图2-4

第2点：元素分布散落的后果，造成观者看完中间的信息还要费劲地去寻找角落里的信息。

案例分析三

下面我们对名片的内容进行调整，将相关的元素归纳为一组，使它们建立更近的亲密性，这样就可以很好地解决上面两个案例所犯的错误，如图2-5所示。

图2-5

如果这位设计总监对这款名片的用色以及元素搭配没什么特殊要求的话，我相信他会选这款名片。

成功原因

第1点：如果多个元素相互之间有很近的亲密关系，那么它们就会成为一个视觉单元，而不是多个孤立分布的元素，就像运用在实际设计作品时，元素的亲密性相互都存在这关联性。

第2点：元素之间的亲密性会给我们在实际的设计作品中带来很多巨大的变化。首先，页面会变得更加有条理性；其次，读者会更清晰地意识到该从哪里开始阅读信息，从哪里结束。除此之外，空白的区域也会变得更有组织性。

技术专题：在设计作品中实现亲密性原则

当我们设计一个作品时，可以观察页面上的元素个数，如果元素的使用量超过3～5个（视具体情况而定），那么我们就要将这些孤立的元素归纳到一组，并让它们产生亲密性，使之成为一个视觉单元。

2.1.3 亲密性原则总结

在设计中，如果画面中的元素都存在相关的亲密性，那么它们之间就能成为一个视觉单元，而不是多个孤立的视觉元素。将彼此相关的元素归纳到一个系统中，使读者在阅读时可以有意识地移动视线，即从哪里开始，沿着怎样的路线去阅读，视线从哪里结束；在一个系统单元结束后，我们的视线将从哪里继续。

亲密性的最根本目的在于实现组织性。也许在其他原则中我们也可以达到实现组织性原则的目的，不过只有亲密性可以将简单的元素归纳成一个系统的单元，使画面更具有条理性和组织性。如果一个设计作品的信息具有条理，那么读者将更加容易阅读，也更容易被记住。此外，利用亲密性可以使空白区域更美观、更具有条理性。

疑难问答：

在运用亲密性原则时要注意哪些问题？

在设计作品时，运用亲密性原则要注意以下5点问题。

第1点：不要因为有空白就放孤立元素。

第3点：不要在视觉元素之间留到角落或中央区域。

第2点：避免一个页面上有太多处相同大小的空白，属于同一单元的元素除外。

第4点：将标题、子标题、图片素材整理好关系，建立合理的元素关系。

第5点：不同组元素不可以建立亲密关系，如果元素之间无关，必须将它们分开。

2.1.4 实战：设计公交站台广告

项目背景分析

本例要制作的是一款房地产站台广告设计，运用简洁大方的背景配合有设计感的文字表达出广告的含义。亲密性原则是整个作品最突出的特点，也是在广告设计中最常见的广告类型，其阅读人群很广，因此在设计广告时要注重元素之间亲密性的体现。

方案设计分析

在本项目中，我们设计了3种方案。

方案一

虽然在这幅设计作品中运用了很明显的对齐原则，但没有运用到亲密性原则，这是所犯的致命错误，在空间内把所有的元素放在了一起，并且看不出哪些元素具有联系性，如图2-6所示。

图2-6

方案二

虽然我们将标题的文字放大，使标题与文字区分开，但是画面显得杂乱无章，视觉元素也混在一起了，如图2-7所示。

图2-7

方案三

在这幅设计作品中，我们重新排放了每个元素的具体位置，并为该设计加了一个装饰边框，使整个设计作品更加牢固，视觉效果也更加突出，如图2-8所示。

图2-8

项目制作流程

寻找合适背景

由于是站台广告，所以我们在选择背景时要选择简洁大方的，这样可以达到良好的视觉效果。

01启动Photoshop CS6，按Ctrl+N组合键新建一个“站台广告”文件，具体参数设置如图2-9所示。

图2-9

02打开光盘中的“素材文件>CH02>素材2-1.jpg”文件，然后将其拖曳到当前操作界面中的合适位置，并将新生成的图层更名为“图层1”，如图2-10所示。

图2-10

制作装饰条

制作一条黑色的装饰条，目的是为了使文字更美观地排列组合起来，也使整个版面更加整洁大方。

01新建一个“图层2”，然后单击“工具箱”中的“矩形选框工具”，接着框选出下面的空白区域，并用黑色填充选区，完成后按Ctrl+D组合键取消选区，效果如图2-11所示。

图2-11

TIPS

这里填充黑色的主要原因是为了更好地搭配画面的图像。

02新建一个“图层3”，然后单击“工具箱”中的“矩形选框工具”，接着框选出整个画面，效果如图2-12所示。

图2-12

03执行“编辑>描边”菜单命令，然后在弹出的对话框中设置“宽度”为60像素、“颜色”为（R：135，G：114， B：84）、“位置”为“内部”，具体参数设置如图2-13所示，效果如图2-14所示。

图2-13

图2-14

TIPS

为图像进行描边的主要目的是使整个画面更具有稳定性。

04确定“图层3”为当前图层，然后使用“矩形选框工具”在上一步的描边图像的内部绘制一个如图2-15所示的矩形选区。

图2-15

05执行“编辑>描边”菜单命令，然后在弹出的“描边”对话框中设置“宽度”为7像素、“颜色”为白色、“位置”为“居外”，具体参数设置如图2-16所示，效果如图2-17所示。

图2-16

图2-17

建立文字之间的亲密性

将文字有秩序地排列在一起，使读者在阅读文字信息时更加舒适和方便。

01使用“横排文字工具”（字体：Adobe黑体std）在绘图区域输入相应的文字信息，效果如图2-18所示。

图2-18

TIPS

运用“横排文字工具”输入文字时，我们结合使用了设计4大原则中的亲密性原则和对齐原则。

02新建一个“图层4”图层，然后设置前景色为（R：218，G：184， B：102），接着使用“钢笔工具”在绘图区域绘制出一个合适的路径，并按Ctrl+Enter组合键将路径变为选区，最后按Alt+Delete组合键用前景色填充选区，完成后按Crtl+D组合键取消选区，效果如图2-19所示。

图2-19

03确定“图层4”为当前图层，然后按Ctrl+J组合键复制一个“图层4副本”，接着执行“编辑>变化>水平翻转”菜单命令，并调整好位置，最后按Ctrl+E组合键将这两个图层合并，效果如图2-20所示。

图2-20

04使用“钢笔工具”在绘图区域绘制出花纹的路径，然后按Ctrl+Enter组合键将路径变为选区，最后用前景色填充选区，效果如图2-21所示。

图2-21

05继续使用“钢笔工具”将底部的花边勾出来，然后使用白色填充，最终效果如图2-22所示。

图2-22

TIPS

报纸设计主要体现在构图的方式和文字的排版上，这点是很难把握的，可以利用设计中的亲密性原则进行设计。

2.1.5 实战：设计旅游宣传DM单

项目背景分析

本例要制作的是一款旅游DM单，DM宣传单是日常生活中最常见的读物，其阅读人群很广，因此在设计时一定要注重元素之间的亲密性，使主体文字和次要文字信息区分开来，以达到最好的视觉阅读效果。

方案设计分析

在本项目中，我们设计了3种方案。

方案一

这是为一所旅游社设计的宣传单，如图2-23所示。虽然我们将文字整齐地排列出来，但是当读者拿到这张宣传单的时候，就会发现一个致命的问题，即将所有的信息堆在了一起。

图2-23

方案二

现在来换下信息的布局，虽然将每个单元的信息元素使用不同的字体区别开了，但是前面标题的字体过于突出，显得与整张的宣传单不够协调，如图2-24所示。

图2-24

方案三

下面我们对宣传单的内容进行调整，将相关的元素归纳为一组，使它们建立更近的亲密性，并将每个单元的内容添加一个底色，这样不仅能让读者的视线不自觉地将底色中的元素归为一个单元，也让宣传单更具有设计感，如图2-25所示。

图2-25

项目制作流程

调整主体照片和文字

突出主体文字，使整个DM单的视觉效果更加突出

01启动Photoshop CS6，按Ctrl+N组合键新建一个“旅行社DM单”文件，具体参数设置如图2-26所示。

图2-26

02设置前景色为（R：216，G：236，B：237），然后按Alt+Delete组合键用前景色填充“背景”图层，效果如图2-27所示。

图2-27

03按Ctrl+R组合键显示出标尺，然后添加出如图2-28所示的参考线，将顶、侧、正面分出来。

图2-28

04导入光盘中的“素材文件>CH02>素材2-2.jpg”文件，然后将其放在版面的上方，效果如图2-29所示。

图2-29

05设置前景色为（R：227，G：116， B：32），然后使用“横排文字工具”（字体：Adobe黑体std）在版面上输入文字信息，并进行旋转变换，接着使用“钢笔工具”绘制出一个椭圆体，并使用前景色进行填充，效果如图2-30所示。

图2-30

制作文字色标

制作文字色标，使文字信息可以有序地排列在一起，使设计中的亲密性原则很好地得到体现，也能达到最佳的阅读效果。

01使用“矩形工具”绘制出5个矩形选区，并使用合适的颜色进行填充，效果如图2-31所示。

图2-31

02设置前景色为（R：216，G：236，B：237），然后使用“横排文字工具”在矩形色块上输入文字信息，接着新建一个图层，并使用“矩形选框工具”绘制一个合适的矩形选区，并使用前景色进行填充，最后按住Alt+Shift组合键复制出若干个矩形图形，并调整好大小，效果如图2-32所示。

图2-32

03选择合适的字体，然后在版面中输入相应的文字信息，效果如图2-33所示。

图2-33

TIPS

为每个单元添加一个底色图层，目的是为了将单元内的元素组合在一起。

2.1.6 实战：设计美食网页界面

项目背景分析

本例要制作的是一款美食网页界面，运用红色作为该设计的主色调，同时添加具有中国风的素材。在文字的编排和设计上，运用设计中的亲密原则，将不同的文字信息进行编组，形成一个单元。在背景的处理上，将版面进行区域分割，制作出凹凸质感效果。然后添加网页主题照片，以吸引食客眼球。

方案设计分析

在本项目中，我们设计了3种方案。

方案一

这是为一家餐饮连锁所设计的网页界面，可能你会认为再没有比这更糟糕的网页设计了，而且最严重的问题是将所有问题都凌乱地摆放在了一起，没有主次感，同类的信息也没有很好地归为一个单元，如图2-34所示。

图2-34

方案二

现在来换下信息的布局，使用背景色块将信息有效地分割成两部分，并且添加了一些装饰元素和分割线，但是文字信息依然混乱，读者不知道哪些是链接，哪些是网站介绍，如图2-35所示。

图2-35

方案三

下面我们对网站的内容进行调整，将相关的元素归纳为一组，使它们建立更近的亲密性，并将每个单元的内容添加一个底色，这样既能让读者的视线不自觉地将底色中的元素归为一个单元，也能让网页更具有设计感，如图2-36所示。

图2-36

项目制作流程

制作背景

背景的颜色规定了整个作品的大色调中，所以在选择颜色上需要多加考虑。

01启动Photoshop CS6，按Ctrl+N组合键新建一个“美食网页设计”文件，具体参数设置如图2-37所示。

图2-37

02选择“渐变工具”，然后打开“渐变编辑器”，接着设置第1个色标为（R：32，G：16，B：16）、第2个色标为（R：75，G：24，B：21），如图2-38所示，最后从上至下为“背景”图层填充使用线性渐变色，效果如图2-39所示。

图2-38

图2-39

03新建“组1”图层组，然后在该组中新建“图层1”，接着使用“矩形选框工具”在画面上方创建矩形选区，效果如图2-40所示。

图2-40

04选择“渐变工具”，然后打开“渐变编辑器”，接着设置第1个色标为（R：164，G：56，B：52）、第2个色标为（R：76，G：25，B：24），如图2-41所示，同时在选项栏单击“径向渐变”按钮，最后在选区中心往外拖动鼠标为“图层1”填充使用径向渐变色，效果如图2-42所示。

图2-41

图2-42

05执行“滤镜>模糊>高斯模糊”命令，然后在弹出的“高斯模糊”对话框中设置“半径”为52.1像素，如图2-43所示，效果如图2-44所示。

图2-43

图2-44

制作光效和分割画面布局

制作光效使整个页面更具有立体感，布局的分割使信息内容能够有效地建立起单元组。

01新建“图层2”，然后使用“矩形选框工具”在画面中间创建一个矩形选区，接着按下Ctrl+Delete组合键填充背景色，效果如图2-45所示。

图2-45

02新建“图层3”，然后使用“矩形选框工具”在画面上方创建一个矩形选区，接着打开“渐变编辑器”，设置第1个色标为白色、“不透明度”为0%，第2个色标为（R：185，G：73，B：63）、“不透明度”为100%，第3个色标为白色、“不透明度”为0%，如图2-46所示，最后从左至右为“图层3”填充使用对称线性渐变色，效果如图2-47所示。

图2-46

图2-47

03按照前面相同的方法，继续创建更多图形，效果如图2-48所示。

图2-48

04新建“组2”图层组，然后选择“圆角矩形工具”，接着在选项栏中设置绘制模式为“形状”、填充方式为（R：59，G：28，B：30）到（R：82，G：42，B：43）渐变、“缩放”为50%，最后在画面中绘制一个圆角矩形，效果如图2-49所示。

图2-49

05新建“图层9”，然后使用“矩形选框工具”在导航栏创建一个矩形选区，接着打开“渐变编辑器”，设置第1个色标为白色、“不透明度”为0%，第2个色标为白色、“不透明度”为100%，第3个色标为白色、“不透明度”为0%，如图2-50所示，最后从上至下为“图层9”填充使用对称线性渐变色，再多次复制该图层并调整，效果如图2-51所示。

图2-50

图2-51

06新建“组3”图层组，然后打开光盘中的“素材文件>CH02>素材2-3.png”文件，然后将其拖曳至当前文件中，接着执行“编辑>自由变换”命令，最后按住Ctrl键同时拖曳锚点调整图像，效果如图2-52所示。

图2-52

添加具有中国风的素材

素材的添加，永远是依据作品的需要而添加。

01打开光盘中的“素材文件>CH02>素材2-4.png”文件，然后将其拖曳至当前文件中，效果如图2-53所示。

图2-53

02在“图层”面板下方单击“创建新的填充或调整图层”按钮，然后在弹出的菜单中选择“亮度/对比度”命令，接着在“属性”面板设置“亮度”为-38、“对比度”为14，如图2-54所示，最后按下Ctrl+Alt+G组合键创建剪贴蒙版，效果如图2-55所示。

图2-54

图2-55

03打开光盘中的“素材文件>CH02>素材2-5.png”文件，然后将其拖曳至当前文件中，效果如图2-56所示。

图2-56

04按住Ctrl键同时单击“图层13”缩览图创建选区，然后新建“图层14”，接着打开“渐变编辑器”，同时设置第1个色标为黑色、“不透明度”为100%，第2个色标为白色、“不透明度”为0%，第3个色标为黑色、“不透明度”为100%，如图2-57所示，最后从左至右为“图层14”填充使用线性渐变色，再设置该图层“混合模式”为“叠加”，效果如图2-58所示。