《写给大家看的设计书》读书笔记至平面设计四原则

本书是美国一位作家Robin所著，书中除了四个原则外，还包括色彩，字体等运用。我个人觉得这四个基本原则最为经典，也非常有启发性，所以这里在这里只介绍了这四个原则。

对于其他的内容，如有小伙伴也感兴趣可以留邮箱给我，我将电子版书分享给你。

      设计四个基础的原则（这里是重点）

一、设计四个基础原则：亲密性（proximity）、对齐（alignment）、重复（repetition）、对比（contrast）

        

1.亲密性（proximity）将相关的项组织在一起

物理位置项目靠近，亲近的项目将被看做是凝聚为一体的一个组，而不再是一堆彼此无关的片段。

比如下图：物理位置的接近就意味着存在关联（生活中也是如此）

这在名片设计中，有更直观的表现：以下这张名片将会在线面内容中反复出现

在这小小的名片中，放置了五项孤立的内容，眼睛从中间想四周飘逸，没有明确的方向与停歇。信息难以组织阅读和记忆。如果内容增加的话，将会更加惨不忍睹。

上图中，只是对信息的物理位置做了一点改变，其他都没有变化。把相关的元素分在一组，使它们建立更近的亲密性。名片信息无论是从理解上还是从视觉上都看得很有调理，表达更加清晰。

下面的简报刊头也是如此：

上图中，除了增进了相关元素的亲密性，还做了一下改动

1把所有大写变为小写，保留合适的首字母大写，这样能更加节省空间，使得标题更大更醒目

2圆角变为直角，刊头的外观更加整洁、突出

3图放大，超出边际线，放在显眼位置

4并且更换了打印后显示更清晰的字体。

这样内容看上去更加易读，一目了然了

以下这个页面看上去很乏味，没有吸引阅读正文的内容，不仅如此，即使希望阅读正文内容，也能难找到所需要的信息。

亲密性的含义并不是所有一切都要更加靠近，而是如果某些元素在理解上存在关联，或者相互之间存在某种关系，那么这些元素在视觉上也应当有关联。除此之外，其他孤立的元素或元素组则不应存在亲密性。位置是否靠近体现出元素之间是否存在关系。

上图中的信息更具内容进行分组，并适当改变字体大小，所以的信息便清晰展现出来。

以下舞蹈课宣传卡片更是如此

当然，你可能会觉得，第一张卡片形式更活泼，更符合舞蹈的感觉。但是这毕竟不是艺术，而是宣传卡片，是需要传达给消费者，让人们一眼能够辨认出里面的主要信息的。这种情况下，清晰，有条理的呈现出内容更加重要。

下面这个传单的人在每个标题和段落后面都用空行来营造距离感，这样，大小标题与正文间就有了相同的距离感，所以看上去它们之间是孤立的，没有任何关联的项目。无法分清标题属于上面的文字还是属于下面的内容。

其实有很多空白可以使用，比如标题与其相关正文之间的 空白，如果像这样“截留”空白，从视觉上看就会把元素分隔开来。

将有关系的项目归为一组，如果页面上有些区域的组织不太清晰，则要看看这些项目是否存在本不该有的亲密性。使用这个简单的设计原则来管理空间，不仅会使得页面更加有条理。看上去也更美观。

把标题移到离相关文本更近的位置。这样会带来很多的变化；

条理更加清晰

元素内部不在截留空白

页面上有更多的空间，减少拥挤感

电话和邮箱分行放置，但归为一组，与其他信息区分开来

居中对齐更改为左对齐（对齐原则），留出更多的空间以放大图片。

亲密性是有意识利用位置的紧密程度来反映元素间的关系，一旦了解各元素之间的关系和何等的重要，就会注意到亲密性的效果，而一旦开始注意到这种效果，就会很自然的加以运用。

如果多个项目之间存在很近的亲密性，他们将成为一个视觉单元，而不是多个孤立的元素。彼此相关的项目应当归在一组。更有意识注意你是怎样阅读，视线的移动过程。有确定的开始，有确定的结束，整个过程都是合理的。

1.对齐（alignment）任何元素都不能在页面上随意安放，每一项都应当与页面上的某个内容存在某种视觉联系。

如果页面上的一些项目是对齐的，这会得到一个更内聚的单元，即使对齐的元素物理位置是分离的，但在视觉上，也会有一条看不见的线将它们联系在一起。

以下仍然是这张名片，所以的信息好像是随意扔上去一样，元素之间在视觉上均没有关联

把所有的元素都移到右侧，按照同一种方式对齐，并且稍微运用亲密性的原则，所有的信息便立刻有了条理

文本有了一个共同的边界，这个边界把它们联系到了一起。右侧的边界线为整个布局提供了边界的力度。

在之前提到的案例中，所有的文本也是对齐的，但是使用居中对齐，这种对齐方式边界是软弱无力的，同右对齐相比，缺少一条强而有力的线将其串联在一起。

因此在使用对齐原则中，不推荐无理由的使用居中对齐。这种方式看起来很安全，感觉也不错，但是这种对齐方式非常乏味，如果你用心留意就会发现，大多数精巧的设计都没有采用居中对齐。

下图中的报告封面两种排版的对比就可以看出，一侧对齐，在视觉上远比居中对齐要更加精致。

右对齐中，尽管作者的名字离标题很远，但是那条看不见的强而有力的线提供了对齐基准，将这两块文本连接在一起。

信纸的设计，在对齐中显示更加突出。

掌握对齐与亲密性原则后，布局可以大胆一些

并不是建议绝对不要居中，只是居中对齐想要呈现好的视觉效果，需要多花些心思

或者，请结合一侧对齐与居中对齐使用，把这两种方式融合在一起，先一侧对齐，在一侧对齐中使用居中对齐，即将文本居中，但是文本块本身并不居中。

也可以将文本放在页面的上方，增加紧张感，或者使用一些比较有趣的字体。

但是千万不要出现下图的排版，不仅字体乏味，字号太大，文本拥挤在一起，每块之间间隔死板，双边框线更加的呆板。

最后一定要坚持一个原则：页面上只使用一种文本对齐，所以文本一侧对齐，或全部居中对齐。

此外，两端对齐（又称之为方形左右对齐，块对齐）这种文本两端均对齐，要尽量避免，除非在大段文字中，行足够长，能够避免文字间出现难看的空隙。

如果有图片图标元素，要将其边界与页面的其他边界对齐。绝对不要任意摆放。以下的排版，统一项目不仅缺少亲密性，对齐方式也十分凌乱。我们的眼镜喜欢看到有序的事物，这会给人一种平静、安全的感觉，也有助于表达信息。

优秀的设计，都可以在对象间画出对齐线，即使这些设计总体表现为汇集了大量奇特的内容，甚至动感十足，这种“对齐线”也很明确。

设计新手常常在缩进段落上面居中放置标题和子标题

如果能找到一条基准线，放置内容，则会更加清晰、精美。

找到一条明确的对齐线，并坚持以他为基准。如果文本左对齐，则标题和子标题也设置为左对齐。

并且首段不缩进

只有意识到规则的存在，然后再打破它，这样才叫创新。所以在突破对齐基准线之前，要明白基准线在哪里。

3.重复（repetition)设计的某些方面需要在整个作品中重复，重复的目的是为了让一个作品内部产生关联性。

重复内容可能是一种粗字体、一条粗线，某个符号、颜色、设计要素、某种格式、空间关系等。

还是这张名片，看到末尾，你的视线是不是在整个名片上面游离，没有落脚点？

把末尾的字体加粗，使得与开始重复。这样当你读到最后的时候，是不是不由自主的回到开始的地方？这正是重复的主旨，它能把整个作品联系到一起，提供统一性。

以下设计中，重复的元素包括：粗字体，细字体，方块项目符号，缩进，间隔，对齐

重复的项目并一定完全相同，而只是存在明确的关联的紧密相关的现象。重复的好处就是使得各项看起来属于同一组，但是元素又度不完全相同。一旦建议起一组关键的重复项，你就可以变换这些项仍可保持一致的外观。这在公司的VR系统中运用突出。

4.对比（contrast）不要畏畏缩缩

对比是增强页面视觉效果的最优效的途径之一，很容易吸引读者去看一个页面；但是好的对比效果一定要大胆。

如果两个元素不同会产生对比，若差异不是很大，那么这种效果很容易引起读者误解，产生冲突。

如果两项不完全相同，就应当使其截然不同

对比的产生有很多种

大字体与小字体对比，衬线体与非衬线体对比，细线与粗线，冷色与暖色，水平与倾斜，紧凑与稀松，大图与小图。

在重复一遍：对比不要畏畏缩缩

以下两份页面，内容相容，哪一份更能吸引你

   

显然，第二份更能吸引读者阅读。

要增加有意思的对比，最 简单的就是增加字体的对比

  字体与线之间确实存在一些不同，但是这两种不同并没有产生强烈的对比，反而会给人一种是不是弄错了的感觉。

 字体的对比，与线之间的对比增强，效果比较明显，显然不会再产生弄错了的感觉。

 线的弄外一种用法，把粗线放在了白色字体的后面，整体效果更加鲜明，精美。开始与结束很清楚的表现出来。

以下这份作品中除了字体之间的对比，水平方向的长标题与又高又窄的垂直列之间也存在一定的对比。

在设计原则中，对比最有意思，同时效果也最为显著，只需要小小的改动，就能把一个普通的设计变成一个精美的设计

把标题从大写改为小写，可以留出更多的空间，这样能让标题更大，更粗。

这是一本书的广告，那么把显得更大

同时重复了非常粗的字体

把作者的头像移到另外一边以释放出更多的空间，增加呼吸感。

对比元素也可以用作重复元素

                                            

以上的简报做以下处理

1去掉Times Roman和Arial字体，

2去掉居中对齐

3找出页面上有意思的东西加以强调，最重要的是商店的名字，

4把信息分为一些逻辑组，合理利用空间，把各项分开或者联系起来

5找出可重复元素（包括对比）

6增加对比，黑白对比，灰度对比，字体大小对比，和字体对比

7同时把小狗的目光方向指向商店名字

改版后是不是比原版更加吸引目光，突出重点？

有时候只增加一点对比，也可以得到意想不到的效果

只增加了深色的背景，是不是更加醒目、生动了？

对比的根本目的在两个方面：1增强页面的效果，如果一个页面在视觉上更加有意思，往往更具有可读性

2有助于信息的组织，从一项到另外一项的逻辑流程。对比元素不能混淆也不能错误的强调重点。

下面使用一个例子在复习着四个原则

原图是一个相当乏味的居中排版设计

亲密性

                                                        

对齐

重复

重复