《写给大家看的设计书》

1、写给大家看的设计书 The Non-Designers Design BookThe Non-Designers Design Book 第一讲：设计原则 优秀的设计优秀的设计 就这么容易 1 2 3 学习学习4 4大基本原则。大基本原则。 它们比你想像得要简单。 认识到自己没有运用这些原则。认识到自己没有运用这些原则。 形诸文字-陈述问题。 应用基本原则。应用基本原则。 结果将使你大吃一惊。 n对比（Contrast） 基本思想是，避免页面上元素太过相似。如果元素，如字体、颜色、大小、线宽、形 状和空间等不相同，就让它们截然不同。 n 对齐（Alignment） 每个元素都应与页面上另一个元

2、素有某种视觉联系。在对齐很明显的基础上，可以偶 尔打破对齐规则。 n重复（Repetition） 可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片等，增加条理性和 加强统一性。 n 亲密性（Proximity） 彼此相关的项应当靠近，归组在一起。若多个项之间存在很近的亲密性，它们会形成 一个视觉单元，而不是多个孤立的元素。 设计的四大原则 1 亲密性原则 实现组织性实现组织性 也许光从字面上来说，版式设计中的“亲密性”似乎不太好理解， 正常的情况下，我们都会把“亲密性”理解为人与人之间的关系的一种 表现，事实上在版式设计中的“亲密性”的确也有类似人与人之间的关 系的意思。 也正是印证

3、了那句话物以类聚，人以群分！ “亲密性”的原则即是将逻辑上存在关联的元素排列组合在一起， 使其被看作是一个密切相关的整体，而不是一堆杂乱无章的元素。 亲密性 n从书中所给的例子，可以看出版式设计中的“亲密性”实际上是对 信息的分类整理。即是通过这个“亲密性”原则，对页面中出现的杂乱 无章的元素重新组合，使其有一个清晰明了的结构，可以让读者在最短 的时间内获取页面中的正确的内容。 亲密性 亲密性 进行“亲密性”原则设计的第一步，即是对元素的归类组合，将页 面中所需要出现的元素按照某种逻辑进行归类划分，对于同一组合内的 元素在物理位置上赋予其更近的距离，而不同组合之间的物理位置显然 要更远。 这也

4、是页面留白设计的一个核心。 然而对于一个页面的设计来说，仅仅只是依靠“亲密性”原则并不 能解决问题，除了“亲密性”之外，在页面的设计中还需要使用到对齐、 对比、重复等原则，“亲密性”只是版式设计的第一步，更多的意义是 在于对元素的组织性上。 亲密性 亲密性 亲密性小结 如果多个项之间存在很近的亲密性，它们将成为一个视觉单元，而不 是多个孤立的元素。彼此相关的项应当归在一组。要有意识的注意你是 怎样阅读的，你的视线怎样移动：开始 路径 结束；读完后，接下 来看哪里？整个过程应当是一个合理的过程，有确定的开始，而且要有 确定的结束。 n 根本目的 实现组织性。 将相关的元素建立亲密性，更容易阅读，

5、更容易被记 住，还可以使空白更美观。 亲密性小结 n 如何实现 眯起眼睛，统计眼睛停顿的次数，来数数页面上有多少元素； n 要避免的问题 不要仅仅因为有空白就把元素放在角落或者中央； 避免一个页面上出现太多的孤立元素； 不要在元素之间留出同样大小的空白，除非各组属于同一个子集； 在有很近亲密性的元素间建立关系； 不属于一组的元素不要建立关系，分开。 2 对齐原则 使页面统一且有条理使页面统一且有条理 n如果说亲密性原则是对元素的归类组合，是将元素之间逻辑理解上的差异 在视觉上表现出来，是属于信息分类的话，那么对齐原则即是在视觉上串起 这些差异化元素组合之间的那根线，即是保证元素之间的统一性。

6、n虽然亲密性原则说的是在逻辑理解上没有关系的元素组合之间应该以更远 的距离表现出来，但对于同一个页面内的元素组合而言，它们都是围绕着同 一个主题核心的，它们的差异性在逻辑上只是同一个主题的不同属性而已， 所以需要一种方式，让页面中的所有元素看上去统一、有联系而且彼此相关， 将这些不同元素之间的关联在视觉上表达出来。 这种方式，即是对齐。 对齐 n对齐的方式可分为左对齐、右对齐、居中对齐以及两端对齐。虽然对 齐的方式有多种，但并不意味着可以在一个页面中使用多种对齐方式， 那样只会让页面中的元素显得凌乱，而在页面中只使用一种对齐方式将 会使页面统一而有条理。 n在这四种对齐方式里，左对齐或是右对齐

7、是最经常被使用到的，而对 于有一定行长的文本而言，两端对齐也是一个好的方式，而居中对齐则 是四种对齐方式中最不推荐使用的对齐方式。因为对于读者而言，居中 对齐可能导致视线的跳跃性太大，尤其是当页面中存在大量文本，那简 直就是一种灾难。 对齐 n在明白对齐的规则之后， 可以试着有意识的去打破 这个规则，然而即使是打 破对齐规则的设计，在更 大的范围之内依然是遵循 着对齐原则的。 n从左边这个图中可以看 出，那一小段引用的文本， 虽然在页面的元素之间是 打破了对齐规则的，但是 其仍然与标题是左对齐的。 对齐 对齐 对齐小结 n根本目的 使页面统一且有条理，就是要把丢在到处的书收在一个架子上的意思。

8、 n如何实现 每个元素都能找到与之对齐的元素。 n要避免的问题 不要用混合对齐，就是用了右对齐就别用居中了。 不要用居中！因为很呆。 3 重复原则 统一并增加视觉效果统一并增加视觉效果 n通过亲密性原则，我们可以将一个页面中的元素按照某种逻辑理解上 的差异划分成不同的元素组合；再通过对齐原则，使这些不同的元素组 合在视觉上看起来彼此相关。 n不同的元素组合之间的关系可以是平等的、从属的或是毫不相关的， 这些元素组合之间的关系在视觉上仅靠亲密性原则以及对齐原则并不能 完整的呈现。比如两个平等关系的元素组合，虽然通过亲密性原则使其 之间保持一定的距离，再通过对齐原则使其在一个页面中看起来彼此相 关

9、，但如果这两个元素组合使用不同的字体以及字号，我们依然无法从 视觉上辨别出它们之间的关系。 n拥有良好的组织性，同时保证了元素间的统一性，但很有可能缺乏一 致性。这样的页面设计会成为妨碍读者通过视觉快速获取页面正确的内 容的关键。这就需要使用到第三个原则重复原则。 重复原则 n同样的顶线及底线、同样是两端对齐的方式、同样的字体及字号，还有 三角形。这两个页面有太多相同的东西，所以很容易从视觉上快速判断出 这两张纸是属于同一本书里的内容。这就是重复的力量！ 重复原则 重复原则并不仅仅只是表现在字体上，页面中任何一个元素都可以 成为设计中重复的对象：字体、字号、颜色、图案，甚至是版式。 犹如在上一

10、个对齐原则中所说的一样，规则是可以打破的。在设计 中使用到的重复元素并没有规定必须保证高度的一致性，高度的一致性 很有可能会导致页面设计的呆板无趣。 同样的字体及字号，可以使用不同的颜色；同样的形状，可以使用 不同的大小这些都是可以使重复性在页面上的运用不会那么枯燥的方 法。 就像大部分单一的设计都会让人感到无趣一样，在设计中使用单一 的重复元素，仍然会让设计显得枯燥无味，然而物极必反的道理也是通 用的，过多的使用重复元素则会让页面显得凌乱。 这里就涉及到一个对比度的问题。 重复原则 使作品具有一致性的方法就是对形状、颜色或某些数值进行重复。 当你看到一个设计元素在一个平面里，其不同部分被反复

11、应用，我们的 眼睛自然就会跟随着它们，有时就算它们并不是放在一起，但我们的视 觉仍会将它们视作是一个整体。我们会潜意识地在它们之间画上连线。 n应用重复最简单的方法就是在海报的背景中创造一个图案然后重复应 用。在背景中这些重复的图案会产生一种很有趣的视觉及构图效果，然 后将背景与前景的元素联接起来。 n另一个应用重复的方法是一行重复的元素引导观众的眼睛到一个重要 的信息、标志或图片上。重复的元素能够产生一条路径引导我们的视线， 使观众创造出一种好奇心另一端是什么来的？这其实是一种讲故事 的方式，吸引观众继续看下去。 如何应用重复原则 n左图中，重复的毛虫图案引导观众的视线去到 INNU 这个标

12、志上。经 过这个标志后又是一些蝴蝶的重复图案，表示你去了这个美容院后前后 的区别，构思巧妙。 n右图中，这些小点是采用标志中的元素，而我们在图中再次重复应 用就产生了一致性，吸引了别人的注意，并且强化了品牌的宣传。 重复小结 设计中视觉元素的重复可以将作品中的各部分连在一起，从而统一 并增强整个作品，否则这些部分只是彼此孤立的单元。重复不仅对只有 一页的作品很有用，对于多页文档的设计更显重要（对此我们通常称之 为保持一致）。 n根本目的 重复的目的就是统一，并增强视觉效果。不要低估页面视觉效果的威 力，如果一个作品看起来很有趣，它往往也更易于阅读。 重复可以认为是保持一致性，而且我相信你早已经

13、这样做过。现在，需要 把现有的一致性更向前推进一步。可不可以专门做一个图片设计，并且将某些一 致元素（如标题）作为这个图片设计的一部分？在每个页面底部或每个标题下面 使用一条粗细为1点的线吗？或者是不是使用一条更粗的线（4点），使重复元素 显得更明显，更生动？ 再看看有没有可能增加一些纯粹为建立重复而设计的元素。是不是有一个编 号项列表？可不可以使用另外一种字体或逆序数字，然后对出版物中的每一个编 号列表都重复同样的处理？最初，可以只是找出现有的重复，然后将其加强。熟 悉了这种思想之后，再开始创建新的重复元素，来增强设计的效果并提高信息的 清晰度。 重复就像是强调你的衣着。如果一位女士穿着一件

14、可爱的黑色晚礼服，戴着 一顶别致的帽子，她可能会用红色高跟鞋、红色口红和一朵红色小花来突出她的 晚礼服。 重复小结 要避免的问题 要避免太多地重复一个元素，重复太多会让人讨厌。要注意对比的价值 太多的重复将混淆重点。 n一致的网站标志和导航栏 网站设计中重复性(一致性) 它们可以说是最体现网站特征的部分。就像VIS（视觉识别系统）一样，应该对 LOGO的颜色、大小、位置等方面都有严格的说明。如果一个网站里面每个网页的 LOGO都大小不同，或者位置不统一，或者导航栏在某些页面突然多出两个子选项， 给浏览者的感觉一定很不好。 n一致的页面布局 这可以说是一种“包装”，我们使用图片或者图表来表达一些

15、信息。如果 某些页面的等级是一致的，那么它们的“包装”风格也应是一致的，用户 应该使用同样的浏览方式来阅读这些网页。 网站设计中重复性(一致性) n一致平衡的信息结构 网站每个栏目的信息量应当合理分配。除了一些特定的内容（例如“网站地图” 和“联系方式”），所有分支的信息量应当相对平衡。如果用户在A栏目看到有 20多个下级栏目，但B栏目中却只有3个，他们肯定会有点头昏脑胀-你迫使他们 去思考“为什么会这样” n一致的重复性元素 如果使用了文本框，那么网站中所有文本框的形式都应当一致。如果某个图标的 尺寸是40*40，那么相类似的图标大小都应该差不多。 n一致和谐的字体和色彩 字体和色彩也应遵循

16、同样的标准。你可以为不同的版块设置不同的色系，但是如 果这个版块用的是桔红，那么它所有的页面都应该是桔红。版块与版块之间的差 异也应该明显。 网站设计中重复性(一致性) n一致，但不一样 需要注意的是,一致性并不 是“相似性”。如果太相似， 很可能用户无法区别彼此之 间的不同。例如下面的网页， 图片之间的颜色、形式过于 相似，尽管图标能代表各选 项的功能和概念，但用户一 眼看上去无法觉察出差异， 图标没有体现出明确辅助标 识的作用。 网站设计中重复性(一致性) 4 对比原则 增强页面的效果和组织性增强页面的效果和组织性 n假如一个页面中的文本采用的都是同样的字体、同样的字号、同样的 颜色，做为

17、读者的你能轻易的区分出哪里是标题，哪里是正文内容吗？ 所以通常情况下，设计师会对标题采用加大字号、加粗字体、改变字体、 更换颜色等方式进行处理以使其区别于正文内容。 n这就是对比原则的一个表现。 n没有对比的页面，在读者的眼里就像是平静的海面，视线可及之处没 有一个焦点；当出现了对比，突出了视觉重点，也即意义着平静的海面 上有个小岛之类的可以吸引住视觉焦点。 对比 n对比要强烈！这是书中一直强调的一个观点，其本意应该是通过视觉 上的强烈差异化来增强页面的效果，以及强调元素之间的差异性。可是 这个强烈依然涉及到一个度的问题，过于强烈的对比，很有可能导致读 者对于在页面中处于对比弱的那些元素的忽视

18、。 对比 n纸面及网页这两种载体有着各自的局限性，在对比的处理上，网页所 受到的局限性会更大。比如在字体的对比上，这一点尤其是在中文网页 上，利用字体进行对比处理的局限性相当之大，因为系统默认带有的中 文字体不多，所以很多时候在中文网页上对于文本的对比处理依然是在 字号、加粗以及颜色上面。 n对比元素可以做为重复元素来使用，而与亲密性原则对元素的归类组 织类似，对比原则除了可以增强视觉效果外，同样有助于信息的组织。 n亲密性、对齐、重复、对比，这是四个相辅相成的设计原则，单一的 处理方式并不能给设计带来多大的改观，但当同时应用这四个原则的时 候，虽然不可能说让设计变得非常精美，起码也可以让读者

19、在扫视后快 速正确的获取到设计中所想表达的内容。 对比 对比小结 在页面上增加对比能吸引人的眼球。我们的眼睛喜欢看到对比的事 物。如果页面上放两个不完全相同的元素（比如有两种不同字体，或者 有两种不同线宽），它们就不能类似。要实现有效的对比，这两个元素 必须截然不同。 n根本目的 对比的根本目的有两方面，这两个方面相辅相成，无法分开。一个目 的是增强页面的效果，如果一个页面看起来很有意思，往往更有可读性。 另一个目的是有助于信息的组织。读者应当能立即了解信息以何种方式 组织，以及从一项到另一项的逻辑流程。对比元素不能让读者混淆，也 不能错误地强调重点 n如何实现 可以通过字体选择（见下一部分）

20、、线宽、颜色、形状、大小、空间 等等来增加对比。增加对比很容易，途径有很多，这可能是增加视觉效 果最有意思也最让人满意的方法了。重要的是：对比一定要强烈。 n要避免的问题 不要犹豫。如果你想形成对比，就加大力度。不要将一种粗线与一种 更粗的线进行对比。不要将棕色文本与黑色标题建立对比。要避免使用 两种或多种类似的字体。如果各个项不完全一样，干脆让它们截然不同！ 对比小结 复习 实现组织性实现组织性 n对比（Contrast） 基本思想是，避免页面上元素太过相似。如果元素，如字体、颜色、大小、线宽、形 状和空间等不相同，就让它们截然不同。 n 对齐（Alignment） 每个元素都应与页面上另一个元素