四大基本原则

1. 对比——避免元素太过相似
2. 重复——让视觉要素重复出现，即能增强条理性，又能增强统一性
3. 对齐——每一个元素都应当与页面的另一个元素有某种视觉联系
4. 亲密性——彼此相关的项互相靠近，有助于组织信息，减少混乱，提供清晰的结构

千万不要畏畏缩缩，大胆的运用这些原则。

• 不要害怕空白，留白也是一种美；
• 不要害怕不对称，不居中往往能使效果更强烈；
• 不要害怕太大或太小，有趣、能留住人的设计才重要；
• 只要最后的结果能支持或强调你的设计或观点，就坚持它

亲密性

有意识的注意到视觉的移动路径，阅读的整个过程应当是一个合理的过程，有确定的开始，而且要有确定的结束。亲密性的根本目标是实现组织性，亲密性原则能够帮助你关注空间，以及空间对于表达的重要性。通过亲密性原则，可以很容易的建立信息条理性和组织性，更容易阅读和被记忆。此外，通过亲密性原则，能够使页面有一定留白，更美观。

实现

统计页面上的项一旦超过 3~5 个，就应该考虑建立更近的亲密性。

• 避免页面有太多孤立元素；
• 不属同一组的不要留出相同大小的空白；
• 不属同组的不要建立联系，而是分开；
• 不要仅仅因为有空白就将元素放到空白处；
• 标题、子标题、图片、图标标题能否归入其相关材料？在有很近亲密性的元素之间建立关系。

对齐

任何元素都不能在页面上随意放置，每一项都应当与页面上的某个内容存在某种视觉联系。统一性是设计中一个重要的概念，对齐的根本目的就是让页面统一且有条理。

居中是初学者常用的对齐方式，居中对齐看起来很安全，也很舒服，会创建一种更正式、更稳重的外观，这种外观中规中矩，，但通常很乏味。通过充分你用亲密性，并结合明确的右对齐或左对齐，你会惊异于设计的改观。

居中布局的小技巧

你可以将文本居中，但文本块本身不居中，或者将文本放在页面上方，增加紧张性，或者在很正式的居中布局中设置一种随意、有趣的字体。

TIPS

1. 绝对不要在左对齐的正文或缩进的文本上方将标题居中。因为如果没有明确的左边界和右边界，就无法区分标题是否居中，看起来只是悬着而已；
2. **找到一条明确的对齐线，并坚持以它为基准对齐。**如果文本左对齐，标题和子标题也左对齐，图片也选择与一边或以基线对齐；
3. 章节的首段不需要缩进，缩进的目的是告诉读者这是新的段落，很明显第一段当然是新段。

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

打破规则本身也有一条 Robin 规则：在打破规则前必须清楚规则是声明。

实现

要特别注意元素的摆放位置。

• 避免在页面上使用多种文本对齐方式；
• 着力避免居中对齐，居中对齐太无聊了，想想有没有更好的对齐方式吧。

重复

重复能够保持页面的一致性，这是一种统一设计各个部分的有意识的行为。可重复的元素可以是一种字体、一根线条、某种符号、颜色、格式、空间关系等等任何你有意重复的东西。

在多页面的出版物中，重复性更显重要，它是使这些页面合为一体的主要因素。读者打开第一页和第一百页，他应当能充分且明显地感受到这些页面是同一个出版物的一部分。比如统一的边距与页眉页脚，相同的页码位置等等。当出版物有很好的一致性，就可以放一些与众不同的元素，是读者真正注意到你希望他们关注的内容。

重复还会为你的作品带来一种权威性和专业性，因为它让读者能够感受到有人在负责，因为重复显然是一种经过深思熟虑的设计决策。

实现

• 保持作品的一致性并将其更进一步；
• 思考有哪些可以增加的重复性元素来增强设计效果，比如使用另一种字体、为列表增加一种有趣的编号符号等；
• 可以把一个元素从现有设计中抽取出来，并根据这个元素创建一个新的设计；
• 要避免太多的重复一个元素；
• 注意对比的价值。

对比

对比是增强视觉效果的有效途径，也能够有效的组织信息的层次结构。通过对页面上不同元素的对比，能够达到吸引读者的作用。要记住，想要达到这些目的，对比一定要强烈，不要畏畏缩缩。不要用 1px 的线条与 2px 的线条对比，人家还以为你弄错了，要对比，就来 1px 与 10px 的对比。

对比的方式很多，可以是字体的对比；颜色的对比；线条粗细的对比；材质的对比；水平元素与垂直元素的对比；大小的对比；空间的对比等等。

对比这两个海报的变化：

• 边框变得更细
• 把全大写的文案改为大小混写
• 删掉饿了诸如 telephone、zip code、area code 之类的不必要信息，腾出更大空间
• 放大派并让他飘起来
• 调整了菜单的顺序，这样更好配合空间
• 大部分字体都换成了别的字体
• 大部分文字左对齐；一些元素右对齐
• slogan 重复了标题的字体
• slogan 设为曲线形
• 把 a pie gallery 移动到标题位置，因为店里本来就有派艺术展

我们可以看到，我们在这里不仅运用了对比，还运用了前面介绍的几项原则。在设计中，这些原则都是必不可少的。

实现

• 找到你想要强调的元素增强它；
• 可以通过字体、线宽、颜色、形状、大小、空间、反差等各种方式增强对比；
• 不要犹豫，一定让他们截然不同。

颜色使用技巧

色轮

色轮是以红黄蓝三种颜色为基础，混合得到的 12 种颜色。其中，这三种基础颜色成为三原色，三原色混合产生的是二次色，二次色混合产生了三次色。

通过给色轮的各颜色增加白色或黑色，就可以构成颜色的明暗。

色彩搭配

单色搭配

单色组合由一种色调及其多种明色和暗色组成。常见的按钮，正常色与 hover 后的颜色关系一般就是由单色搭配构成的；另外黑白照片也属于单色搭配。

类似色搭配

类似色有色轮上彼此相邻的颜色组成，它们有相同的基础色，形成了一个协调的组合，能够产生一种低对比度的和谐美感。

互补色搭配

色轮上相对的颜色为互补色，由于它们如此对立，所以最佳搭配是一种作为主色，一种用于强调。

三色组搭配

彼此等距的三种颜色通常会形成让人愉悦的三色组。红黄蓝就是其中之一，不过红黄蓝一般用于儿童产品。

分裂互补色搭配

另一种形式的三色组成为分裂互补三色组，从色轮中选择一种颜色，找到它互补色两边相邻的颜色，即一组分裂互补色。这样的组合既有类似色的低对比度美感，又有互补色的力量感，形成一种即和谐又有重点的颜色关系。

技巧

• 大自然永远是最厉害的颜色搭配好手，可以选择大自然中已有的颜色组合作为你的选择。
• 网页中本色不宜过多，一般不超过三种。