学步园

2014-02-07 08:51:39

复杂的设计原理在这里被浓缩为4个词：亲密性、对齐、重复和对比。

2014-02-10 08:22:17

4大基本原则以下是对基本设计原则的概述，每一个优秀的设计中都应用了这些设计原则。尽管我在后面将逐个讨论各个原则，不过要记住，它们实际上是相互关联的。只应用某一个原则的情况很少。对比（Contrast）对比的基本思想是，要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。重复（Repetition）让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。这样一来，既能增加条理性，还可以加强统一性。

2014-02-10 08:22:41

对齐（Alignment）任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。亲密性（Proximity）彼此相关的项应当靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。

2014-02-10 08:27:11

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

2014-02-10 08:46:26

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

2014-02-10 21:26:24

再没有任何“留白”能让你的眼睛稍作休息。完全可以把文本的字体设置为小于12点。真的，确实可以这么做！

2014-02-10 21:29:03

利用简单的亲密发生原则，信息将收集到多个逻辑组中，使访问者能更容易地在网页上导航。看看你感觉不错的那些网站，你会发现，那些网站的信息都按逻辑做了分组。

2014-02-10 21:34:29

亲密性小结如果多个项相互之间存在很近的亲密性，它们将成为一个视觉单元，而不是多个孤立的元素。彼此相关的项应当归在一组。要有意识地注意你是怎样阅读的，你的视线怎样移动：从哪里开始；沿着怎样的路径；到哪里结束；读完之后，接下来看哪里？整个过程应当是一个合理的过程，有确定的开始，而且要有确定的结束。根本目的亲密性的根本目的是实现组织性。尽管其他原则也能达到这个目的，不过利用亲密性原则，只需简单地将相关的元素分在一组建立更近的亲密性，就能自动地实现条理性和组织性。如果信息很有条理，将更容易阅读，也更容易被记住。此外还有一个很好的“副产品”，利用亲密性原则，还可以使空白（这是设计者们最喜欢的）更美观（也更有条理）。

2014-02-10 21:35:22

如何实现微微眯起眼睛，统计你的眼睛停顿的次数来数一数页面上有多少个元素。如果页面上的项超过3～5个（当然，这取决于具体情况），就要看看哪些孤立的元素可以归在一组建立更近的亲密性，使之成为一个视觉单元。

2014-02-10 21:35:35

要避免的问题不要仅仅因为有空白就把元素放在角落或中央。避免一个页面上有太多孤立的元素。不要在元素之间留出同样大小的空白，除非各组同属于一个子集。标题、子标题、图表标题、图片能否归入其相关材料？在这个问题上一定要非常清楚（哪怕只有一点含糊都要尽量避免）。在有很近亲密性的元素之间建立关系。不同属一组的元素之间不要建立关系！如果元素彼此无关，要把它们分开。

2014-02-10 21:38:19

Robin对齐原则是指：“任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系”。对齐原则要求特别小心，再不能像从前那样，只要页面上刚好有空间就把元素随意“扔”到那里。如果页面上的一些项是对齐的，这会得到一个更内聚的单元。即使对齐的元素物理位置是彼此分离的，但在你眼里（以及在你的心里），它们之间也会有一条看不见的线把它们连在一起。尽管你可能通过分开放置某些元素来指示它们的关系（使用亲密性原则），但对齐原则很“神奇”，它会告诉读者，即使这些项并不靠近，但它们属于同一组。

2014-02-10 21:40:06

如果文本为左对齐或右对齐，让文本联系在一起的那条看不见的线会更明确，因为现在有一条“硬”的竖边。这就使左对齐和右对齐的文本看起来外观更清晰、效果更分明。

2014-02-10 21:42:02

这里右侧有一条看不见的线，将彼此分离的文本连在了一起。这与前面有同样的逻辑布局，不过现在采用右对齐方式。你能看出右边的“硬”边界吗？尽管这是一条看不见的线，但它很明确，连接了这两组文本的边界。现在确实可以看出边界。正是这个边界的强度为布局提供了力度。

2014-02-10 21:43:13

你是不是不由自主地就想一切都居中？居中对齐是初学者最常用的对齐方式，这种对齐看起来很安全，感觉上也很舒服。居中对齐会创建一种更正式、更稳重的外观，这种外观显得更为中规中矩，但通常也很乏味。请注意你喜欢的那些设计。我敢保证，大多数看来精巧的设计都没有采用居中对齐。我知道，作为一个初学者，要完全摒弃居中对齐会很难，但你必须从一开始就强制自己避开它。通过充分利用亲密性，并结合明确的右对齐或左对齐，你会惊异于设计的改观。

2014-02-10 21:46:07

我并不是建议你绝对不要居中！只是要留意这种居中对齐的效果，这真的是你想要表达的效果吗？当然，有时候确实如此；例如，大多数婚礼都很庄重、很正式，所以，如果你想用居中方式设计你的结婚喜帖，完全可以在营造喜庆的同时有意这么做。

2014-02-10 21:48:49

你可能已经习惯了使用文本对齐。在得到更多培训之前，一定要坚持一个原则：页面上只使用一种文本对齐：所有文本都左对齐，或右对齐，或者全部居中。

2014-02-10 21:51:31

在页面上放其他项时，一定要确保每一项都与页面上的其他项存在某种对齐。如果文本行水平摆放，则按其基线对齐。如果有多个单独的文本块，则对齐其左边界或右边界。如果有图片元素，将其边界与页面的其他边界对齐。绝对不要在页面上任意摆放元素！

2014-02-10 21:52:32

如果文档的外观差强人意，可能最大的毛病就是缺乏对齐。我们的眼睛喜欢看到有序的事物；这会给人一种平静、安全的感觉。此外也有助于表达信息。作为优秀的设计，都可以在对齐的对象间画出“对齐线”，即使这些设计总体表现为汇集了大量奇特的内容，甚至动感十足，这种“对齐线”也很明确。

2014-02-10 21:56:14

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

2014-02-10 21:56:58

即使作品的设计起点本来就很高，在对齐方面稍做些调整也会很有好处。作为更为专业的设计，明确的对齐很关键，但这一点通常被遗漏。请检查每一个元素，确保它与页面上的另外某个元素存在某种视觉联系。

2014-02-10 21:59:17

重申一句：应当找一条明确的对齐线，并用它来对齐。如果有一个照片或图片（有明确的直边），可以沿着照片的这个直边与文本的平边对齐

2014-02-10 22:01:25

如果设计中的对齐很明确，那么可以有意识地打破对齐，而且一定要表现出这是有意的。技巧就在于，打破常规对齐时不要怯懦，一定要干脆一些，要么全部采用一种方式，要么全都不采用这种方式。千万不要保守。

2014-02-13 18:59:18

任何元素都不能在页面上随意摆放。每个元素应当与页面上的另外一个元素存在某种视觉联系。在设计中，统一性是一个重要的概念。要让页面上的所有元素看上去统一、有联系而且彼此相关，需要在各个单独的元素之间存在某种视觉纽带。尽管这些孤立元素在页面上的物理位置可能并不靠近，但是通过适当放置，可以让它们看上去是有联系而且相关的，并且与其他信息统一。可以看看你喜欢的那些设计。一个精美的设计不论最初看上去多么杂乱无章，总能找出其中的对齐方式。根本目的对齐的根本目的是使页面统一而且有条理。其效果类似于把客厅里四处零落的洋娃娃捡起来，并把它们放在一个玩具箱中。不论创建精美的、正式的、有趣的还是严肃的外观，通常都可以利用一种明确的对齐（当然，要结合适当的字体）来达到目的。

2014-02-13 18:59:49

如何实现要特别注意元素放在哪里。应当总能在页面上找出与之对齐的元素，尽管这两个对象的物理位置可能相距很远。要避免的问题要避免在页面上混合使用多种文本对齐方式（也就是说，不要将某些文本居中，而另外一些文本右对齐）。另外，要着力避免居中对齐，除非你有意识地想要创建一种比较正式、稳重（通常也更乏味）的表示。并不是完全杜绝使用居中对齐，有时可以有意地选择这种对齐方式，但是不要把它做为默认选择。

2014-02-13 19:00:41

可以把重复认为是“一致性”。

2014-02-13 19:10:18

重复就像是强调你的衣着。如果一位女士穿着一件可爱的黑色晚礼服，戴着一顶别致的帽子，她可能会用红色高跟鞋、红色口红和一朵红色小花来突出她的晚礼服。

2014-02-13 19:11:47

对比是为页面增加视觉效果的最有效的途径之一，很容易吸引读者去看一个页面；另外对比还能在不同元素之间建立一种有组织的层次结构。要记住一个重要规则：要想实现有效的对比，对比就必须强烈。千万不要畏畏缩缩。如果两个元素不同，就会产生对比。倘若两个元素存在某种不同，但差别并不是很大，那么你做出的效果并不是对比，而是冲突。这就是关键，Robin对比原则指出：“如果两个项不完全相同，就应当使之不同，而且应当是截然不同。”可以采用多种方式产生对比。如大字体与小字体的对比；典雅的oldstyle字体与粗体sans serif字体产生对比；细线与粗线的对比；冷色与暖色的对比；平滑材质与粗糙材质的对比；水平元素（如很长的一行文本）与垂直元素（如又高又窄的一列文本）的对比；间隔很宽的文本行与紧凑在一起的文本行形成对比；小图片与大图片的对比，等等。不过，千万不要畏缩。不应该用12点大小的字体与14点大小的字体进行对比。也不要用0.5点的线与1点的线来对比。此外，深棕色与黑色的对比也是不合适的。所以一定要当心。

2014-02-13 19:16:13

要增加有意思的对比，最容易的方法就是实现字体对比（这也是本书第二部分的重点）。不过不要忘记，还可以利用线、颜色、元素之间的间隔、材质等形成对比。如果在列之间使用一条极细的线，需要另一条线时就应该使用2点或4点的粗线，不要在同一个页面上使用0.5点和1点的线。如果要使用另一种颜色来突出效果，一定要确保颜色有反差，对应黑色正文，深棕色或蓝黑色就不能有效地形成对比。

2014-02-13 19:18:44

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

2014-02-14 08:56:52

对比的根本目的有两方面，这两个方面相辅相成，无法分开。一个目的是增强页面的效果，如果一个页面看起来很有意思，往往更有可读性。另一个目的是有助于信息的组织。读者应当能立即了解信息以何种方式组织，以及从一项到另一项的逻辑流程。对比元素不能让读者混淆，也不能错误地强调重点（即本不该是重点的元素）。如何实现可以通过字体选择（见下一部分）、线宽、颜色、形状、大小、空间等等来增加对比。增加对比很容易，途径有很多，这可能是增加视觉效果最有意思也最让人满意的方法了。重要的是：对比一定要强烈。

2014-02-14 08:59:02

有关设计（同时也是有关生活）的一个更一般的指导原则是不要畏畏缩缩：▪ 不要害怕在设计（或生活）中留有空白，这能让你的眼睛（以及心灵）稍作休息。▪ 不要害怕设计是不对称的，使用非居中的格式，不居中往往能使效果更强烈。尽管不建议使用居中，不过有意这么做也无不可。▪ 不要害怕把单词设置得非常大或非常小，不用担心说话声太大或者太小。在合适的场合这都是可以的。▪ 只要最后的结果能支持或强调你的设计或观点，不要害怕让图片太大或太小。

2014-02-17 18:23:17

不要在角落里放东西。角落为空无妨。不要使用Times、Arial或Helvetica字体，否则你的名片看上去总是很老旧，就像是20世纪70年代的一样。不要使用12点大小的字体，否则你的名片看上去会显得太简陋！人们完全可以轻松地阅读8点、9点或10点大小的字体。企业名片通常使用7点字体。请不要使用居中布局，除非能明确说明为什么需要这么做。

2014-02-17 18:30:43

不要把所有一切都放在方框里！由明显的对齐线来建立文本周围的“框”。

2014-02-18 08:24:57

建立字体对比时要遵循这样一条规则：不要太保守！

2014-02-24 17:57:20

粗细对比不仅能使页面更引人注目，也是组织信息的最有效的方式之一。

2014-02-24 17:58:49

如果你的页面看上去“灰乎乎的”（有大篇幅的文字），而且没有空间来增加图片，也无法抽出引用文字把它们设置为图片，就可以用非常粗的粗体设置关键短句。这些设置会把读者吸引过来看你的页面。