设计师必备四大基本原则你懂了多少丨4-对比原则
对比(Repetition)
Robin对比原则指出:页面上的不同元素之间要有对比效果,达到吸引读者的对比效果。如果两个项不完全相同,就应当使之不同,而且应当是截然不同。
对比不仅可以用来吸引眼球,还可以用来组织信息、清晰层级、在页面上指引读者,并且制造焦点。





对比是为页面增加视觉效果的最有效的途径之一,很容易吸引读者去看一个页面;另外对比还能在不同元素之间建立一种有组织的层次结构。要记住一个重要规则:要想实现有效的对比,对比就必须强烈。千万不要畏畏缩缩。
用一张图简单表达:

举个简单的例子:


在标题和子标题中使用了一种更突出、更粗的字体。这里还在新闻简报的题目上重复了这种字体(重复原则)。由于题目从全部大写改为混合有大小写,所以现在能使用一种更大更粗的字体,这还有助于突出对比效果。另外,由于现在题目如此突出,还可以沿顶部在题目下加一个黑条,再重复这种黑色来强调对比。
这个简单的案例只是运用了颜色对比、字体对比与粗细对比,当然对比方式远远不止这些,常用的对比方式还可以是以下这些方面:

优秀案例分析:









对比小结
在页面上增加对比能吸引人的眼球。我们的眼睛喜欢看到对比的事物。如果页面上 放两个不完全相同的元素(比如有两种不同字体,或者有两种不同线宽),它们就不能类似。要实现有效的对比,这两个元素必须截然不同。
根本目的
对比的根本目的有两个,这两个目的相辅相成,无法分开。一个目的是增强页面的 效果,如果一个页面看起来很有意思,往往更有可读性。另一个目的是有助于信息的组织。读者应当能立即了解信息以何种方式组织,以及从一项到另一项的逻辑流程。对比元素不能让读者混淆,也不能错误地强调重点(即本不该是重点的元素)。
如何实现
可以通过字体选择(见下一部分)、线宽、颜色、形状、大小、空间等来增加对比。重要的是:对比一定要强烈。
要避免的问题
不要犹豫。如果你想形成对比,就加大力度。不要将一种粗线与一种更粗的线进行 对比。不要将棕色文本与黑色标题建立对比。要避免使用两种或多种类似的字体。