网站制作：掌握设计对比原则（一）

编者按：前几天有一篇给大学生的成都网站制作教程很火，看过的同学还记得作者重点圈出来的网站制作四大原则吗？为了帮同学们有效掌握，并且灵活运用它们，今天我们深入聊一下四大原则中的对比，全文近5000字，案例生动，赶紧趁着这回把对比原则学个透吧！

创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的沾益网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

等同和对比，联系与分别，归类和不归类等都是能将元素中相同或不同的元素加以区别的方式。基于它们所承载的信息，我们希望等同的元素能发生某种联系，用以表明它们在某一方面的相似性。我们同样也希望不同的元素加以区分，以显示它们分属不同的类别。

等同和对比是通过元素之间所呈现的关系表现出来的，如果两个元素有着某种联系，可以确定这两个元素必定有相同的特性。当然，两个不同元素也必定看上去不同。

基础特性

你是如何表达元素间的等同和对比性的？是的，从它们的基础特性中表现出来。

那么，什么是元素的基础特性呢？基础特性就是指的元素本身所固有的特点。举例来说，这个元素是什么颜色？它有多大？它是什么形状？

这些特性都试图传递着关于元素的较本质的信息。如果一个标题看上去比另一个标题更大，那么我们就会预估先进个标题更加重要。我们也会把那些尖锐的凹凸不平的东西视为危险信号。

通常，元素的一类特质通过与另一元素的同类特质相比较才具有意义，上面关于标题就是这样一个例子。一个标题必须与另一个标题或另外一片文字相比较才能凸显它的重要性。在这里，大小成为一个很重要的对比特质。通过比较，元素才得以表达出它们之间的等同和对比。

另外一种情况是，我们让几个元素在视觉上出现相同的特质，让这些元素成为一组同类元素。如果一个网页上出现两个元素：两个红色圆圈，用户自然就会对此产生好奇，为什么它们都是红色？为什么都是圆圈？这会引发出的结论是也许它们不止是外观上的等同，还有其他更深的联系。元素外观的等同也会让人联想到它们会携带相似的信息。

同样的，如果我们让两个元素外观上不同，那么它们表达出的就是两个有效不同的元素，它们的意义也有所不同。

任何可以被改变的元素特性，都可以让成都网站制作元素变得等同或不同。下面所列出的成都网站制作元素特性便是如此：

尺寸 形状 颜色 赋值 纹理 位置 方向

一个长方形和一个圆形的形状对比很明显，而两个红色元素在颜色上具有一致性。一个红色长方形和一个红色圆形就会出现形状各异而颜色相同的情况。你怎样平衡元素中的等同和不同的元素特性，这将决定你的元素要与用户沟通些什么。

注意：

基础特性是区分类似与不同的基本方法，但还有其他方式可以对它们加以区分：元素实际上所承载的信息内容。例如“停”和“走”这两个字的对比，“停止”和“停下”这两个词的相似。图片对比文字，长文章对应短文章，等等。

对比

当人类看到不同的元素会本能地产生紧张的反应，这是自然进化的生存机制，以使我们能迅速辨认出威胁，让我们快速反应出是否需要立刻飞奔回到安全的地方。

我们的这种分辨异类的能力使“对比”这一方式变得特别强大。凡对比定会引起注意。它就是吸引眼球的方法。想要让某个元素得到注意，那就让它在视觉外观区别于其他元素即可。如此一来，我们便能制造出视觉焦点。事实上，正因为让元素从环境中脱颖而出的方法是如此简单，我们也不难猜测，如果想要你的设计变得更有趣，这或许也是一个较有效方法。

对比的确可以增强吸引力。它也能在两种元素间建立起分界。举例来说，主要内容和花絮内容的不同背景色就能轻松将它们区分开来，让用户一看便知哪里是主要内容，哪里是花絮。

对比也能起强调的作用，高亮显示某一重点元素和内容。越是明显的不同，对比越明显，其重要性就越强。

例如，有两种不同的文字标注方式：加粗和斜体。加粗通常会让对比更为明显。即使是远距离一瞥也能比斜体文字更易辨认。

如果你想要区分两个元素，那就将放大它们之间的对比。相信你不希望让用户自己来判断它们是否不同吧？对比直观且显而易见。不要有模糊不清的地方，让人产生困惑。不要用16px的文字去对比15px的文字。人们通常不会注意到细微的差别，就算是注意到，也会发生误判。

但是，也请不要对比得太过火。慎用对比。如果所有元素都有区别，都在争抢注意力，那么，其实就等于没有对比一样。过多的干扰产生视觉混乱。

太多的对比也会打破设计中的和谐，造成不必要的紧张和凌乱。也许在某些特别的设计中需要用到它，但是平时绝对少碰为妙。*先确认哪些元素需要突出，然后让它们与其他元素发生对比。

对比与格式塔

格式塔完形规律在某方面也是依赖于等同和对比的。对于图案背景和突出焦点来说，对比是特别重要的。

不清楚什么是格式塔的同学，百度百科：http://baike.baidu.com，维基百科：格式塔心理學美學

图案背景

当我们看到一个对象，我们先进件事就是去区分哪里是背景哪里是主角。这对关系决定了这一对象中其他元素的角色内容。主角与背景必须要有显而易见的对比，否则我们将很难区分它们。

焦点

焦点是指那些较具吸引和趣味的元素。设计它们时就需要让它们从周围环境中凸显出来。这一对比也让他们脱颖而出从而获得注意。在一个对象中较突出的就是这个对象的*要元素，而在此对象中，那些次要突出的就是焦点。

等同

我们人类的另一个生存机制，除了让我们察觉不同，也让我们注意到相同。这让我们能辨认出哪些是我们应该相信的，从而区别于潜在的危险。对等同有着较强的觉知力，这就是为什么人类能很快认出各种模式。模式帮助我们理解周围的世界，提供信息并且快速掌握规律，当形成习惯就能变作我们的直觉和本能。

当我们设计两个或多个同类元素时，我们就在暗示，如果其中一个为真，另外那几个等同的元素也为真。如果一个元素重要，其他几个也同样重要。如果其中一个元素可点击，那么其他几个视觉上类似的元素也可点击。这就是我们这样在大段文字当中识别出哪里是链接。视觉对比使得链接文字和其他文字不同吸引你的注意，同时，其他有链接的文字的类似也提醒了你，如果其中一个链接可点击，其他的也一样可以。

同等能显示出几个元素间存在某种联系。它能给你的设计带来熟悉和一致感。

同等让我们组织信息能力日臻好。当我们环顾视觉环境，并要对其加以理解，我们自然而然会将所有事物进行分类，以此掌握更多的信息，用记忆的形式存储起来。让它变成我们的长期记忆，以备以后分析问题解决问题而使用。

将相同信息的地方设计得外观上也相似，这将会帮助用户处理和理解信息，而这也正是我们设计的目标。

元素中的基础特性共同点越多，它们看上去就越等同，从而也就有更多用户认为它们是相同的。它们看上去在某方面成为同类，即使它们只有其中先进一个特性相同。

我们用等同去构建系统性和模式。任何两个元素的等同都会暗示着它们也许是一个系统。如果再在这个系统里增加一些同类元素，那么就会演变成为一种模式，在视觉上它会形成图案、纹理或者具有节奏感的视觉效果。

不是所有看上去相似的信号都是等同的。如下图所示，你是通过形状或是颜色来分类图形？你看见的是一组圆形和一组方形图形？或者，你看见的是红色图形和蓝色图形？

你也许*先注意到颜色，将元素划分为红色和蓝色。这就说明，颜色所传递的等同的信号比形状更强。这也不是有效绝对的，举个例子，一些红绿色盲的人就不会注意到颜色的区别，他们*先注意到的是图形的形状。

等同和格式塔

我们又快速提到格式塔定律，每个格式塔都是关于我们如何察觉到物体间的等同和对比。下面是一些被认为显示出等同的要点。

封闭

在一个整体中不同的元素都是这个整体的一部分

对称和顺序

对称的元素两相互属

统一性的联结

视觉上有联系的元素间的等同

共同区域

在一个相同的区域里元素的等同

邻近

在一个相同的区域里相续元素的等同

连续

在空间中以某种节奏或频率出现的元素等同

共同命运

在运动中的一致

平行

在方向上的一致

等同和对比之间的关系

等同和对比用以表达元素间的关系。一个独立的元素没有意义。一个元素总是与处于同一环境下的其他元素发生着联系。

一个大圆的一角有一个小圆，这样的设计暗示着什么？一段银灰色文字比其他文字缩进更多这又试图说明什么？

可以这样说，等同和对比就好像是一个天平，一端是有效不同，一端是有效相同。大多数情况都是介于两者之间的，我们设计出的发生关系的元素特性也是部分而已，并非全部。等同和对比就是表达发生在这个天平两极之间的关系。

即便我没有说得很清楚，你都可以知道等同和对比是彼此互补的。它们彼此相依而存在，对比是等同所缺少的，而等同也是对比所缺少的。其互补程度全凭其在天平上的位置。

当你将这两者结合在一起来思考就会感受到它们的作用。你可以只用颜色这一元素特性来制造出区别，给几个元素用上同一颜色就让它们发生了联系，然后用另一颜色又让另外几个元素发生了联系，然后这两组元素由于颜色的不同又发生了对比。

色彩代码就是一个很好例子，它是一种非常有效的编码方式，让写代码的人即使看一眼也能很快理解代码的结构，快速进行成都网站制作。

当一切都等同，无疑会让你感到厌倦。如果一切不同，又会让你烦躁。先进的设计应该让这两者得到很好的平衡，然后又能清楚表达出想要传递的信息。

以上内容由创新互联（成都网站建设,成都网站制作）为您提供，更多精彩内容：https://www.cdcxhl.com/

关注“科技”微信公众号，快速获取互联网较新资讯
文章名称：网站制作：掌握设计对比原则（一）
标题URL：http://scjbc.cn/article/spdohd.html