写给大家看的设计书精选文档.pptVIP

1 写给大家看的设计书 The Non-Designers Design Book 第一讲：设计原则 2 优秀的设计 就这么容易 …… 1 2 3 学习 4 大基本原则。 它们比你想像得要简单。 认识到自己没有运用这些原则。 形诸文字 ---- 陈述问题。 应用基本原则。 结果将使你大吃一惊。 3 ? 对比（ Contrast ） 基本思想是，避免页面上元素太过相似。如果元素，如字体、颜色、大小、线宽、形 状和空间等不相同，就让它们截然不同。 ? 对齐（ Alignment ） 每个元素都应与页面上另一个元素有某种视觉联系。在对齐很明显的基础上，可以偶 尔打破对齐规则。 ? 重复（ Repetition ） 可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片等，增加条理性和 加强统一性。 ? 亲密性（ Proximity ） 彼此相关的项应当靠近，归组在一起。若多个项之间存在很近的亲密性，它们会形成 一个视觉单元，而不是多个孤立的元素。 设计的四大原则 ‘ 4 1 亲密性原则 实现组织性 5 也许光从字面上来说，版式设计中的“亲密性”似乎不太好理解， 正常的情况下，我们都会把“亲密性”理解为人与人之间的关系的一种 表现，事实上在版式设计中的“亲密性”的确也有类似人与人之间的关 系的意思。 也正是印证了那句话 —— 物以类聚，人以群分 ！ “亲密性”的原则即是将逻辑上存在关联的元素排列组合在一起， 使其被看作是一个密切相关的整体，而不是一堆杂乱无章的元素。 亲密性 ‘ 6 ? 从书中所给的例子，可以看出版式设计中的“亲密性”实际上是对 信息的分类整理。即是通过这个“亲密性”原则，对页面中出现的杂乱 无章的元素重新组合，使其有一个清晰明了的结构，可以让读者在最短 的时间内获取页面中的正确的内容。 亲密性 ‘ 7 进行“亲密性”原则设计的第一步，即是对元素的归类组合，将页 面中所需要出现的元素按照某种逻辑进行归类划分，对于同一组合内的 元素在物理位置上赋予其更近的距离，而不同组合之间的物理位置显然 要更远。 这也是 页面留白设计 的一个核心。 然而对于一个页面的设计来说，仅仅只是依靠“亲密性”原则并不 能解决问题，除了“亲密性”之外，在页面的设计中还需要使用到对齐、 对比、重复等原则，“亲密性”只是版式设计的第一步，更多的意义是 在于对元素的组织性上。 亲密性 ‘ 8 亲密性 ‘ 9 亲密性小结 如果多个项之间存在很近的亲密性，它们将成为一个视觉单元，而不 是多个孤立的元素。彼此相关的项应当归在一组。要有意识的注意你是 怎样阅读的，你的视线怎样移动：开始 → 路径 → 结束；读完后，接下 来看哪里？整个过程应当是一个合理的过程，有确定的开始，而且要有 确定的结束。 ? 根本目的 实现组织性。 将相关的元素建立亲密性，更容易阅读，更容易被记 住，还可以使空白更美观。 ‘ 10 亲密性小结 ? 如何实现 眯起眼睛，统计眼睛停顿的次数，来数数页面上有多少元素； ? 要避免的问题 不要仅仅因为有空白就把元素放在角落或者中央； 避免一个页面上出现太多的孤立元素； 不要在元素之间留出同样大小的空白，除非各组属于同一个子集； 在有很近亲密性的元素间建立关系； 不属于一组的元素不要建立关系，分开。 ‘ 11 2 对齐原则 使页面统一且有条理 12 ? 如果说亲密性原则是对元素的归类组合，是将元素之间逻辑理解上的差异 在视觉上表现出来，是属于信息分类的话，那么对齐原则即是在视觉上串起 这些差异化元素组合之间的那根线，即是 保证元素之间的统一性。 ? 虽然亲密性原则说的是在逻辑理解上没有关系的元素组合之间应该以更远 的距离表现出来，但对于同一个页面内的元素组合而言，它们都是围绕着同 一个主题核心的，它们的差异性在逻辑上只是同一个主题的不同属性而已， 所以需要一种方式，让页面中的所有元素看上去统一、有联系而且彼此相关， 将这些不同元素之间的关联在视觉上表达出来。 这种方式，即是对齐。 对齐 ‘ 13 ? 对齐的方式可分为左对齐、右对齐、居中对齐以及两端对齐。虽然对 齐的方式有多种，但并不意味着可以在一个页面中使用多种对齐方式， 那样只会让页面中的元素显得凌乱，而在页面中只使用一种对齐方式将 会使页面统一而有条理。 ? 在这四种对齐方式里，左对齐或是右对齐是最经常被使用到的，而对 于有一定行长的文本而言，两端对齐也是一个好的方式，而居中对齐则 是四种对齐方式中最不推荐使用的对齐方式。因为对于读者而言，居中 对齐可能导致视线的跳跃性太大，尤其是当页面中存在大量文本，那简 直就是一种灾难。 对齐 ‘ 14 ? 在明白对齐的规则之后， 可以试着有意识的去打破 这个规则，然而即使是打 破对齐规则的设计，在更 大的范围之内依然是遵循 着对齐原则的。 ?