对比和等同网页UI设计理浅析.docxVIP

学IT技能上我学院网 Unity3D|Cocos|php|HTML5|Java|ios|Android|C#|AS3|UI设计|原画设计|动漫美术|游戏策划 对比和等同的网页UI设计理论 等同和对比，联系与分别，归类和不归类等都是能将元素中相同或不同的元素加以区别的方式。基于它们所承载的信息，我们希望等同的元素能发生某种联系，用以表明它们在某一方面的相似性。我们同样也希望不同的元素加以区分，以显示它们分属不同的类别。 等同和对比是通过元素之间所呈现的关系表现出来的，如果两个元素有着某种联系，可以确定这两个元素必定有相同的特性。当然，两个不同元素也必定看上去不同。 基础特性 你是如何表达元素间的等同和对比性的?是的，从它们的基础特性中表现出来。 那么，什么是元素的基础特性呢?基础特性就是指的元素本身所固有的特点。举例来说，这个元素是什么颜色?它有多大?它是什么形状? 这些特性都试图传递着关于元素的最本质的信息。如果一个标题看上去比另一个标题更大，那么我们就会预估第一个标题更加重要。我们也会把那些尖锐的凹凸不平的东西视为危险信号。 通常，元素的一类特质通过与另一元素的同类特质相比较才具有意义，上面关于标题就是这样一个例子。一个标题必须与另一个标题或另外一片文字相比较才能凸显它的重要性。在这里，大小成为一个很重要的对比特质。通过比较，元素才得以表达出它们之间的等同和对比。 另外一种情况是，我们让几个元素在视觉上出现相同的特质，让这些元素成为一组同类元素。如果一个网页上出现两个元素：两个红色圆圈，用户自然就会对此产生好奇，为什么它们都是红色?为什么都是圆圈?这会引发出的结论是也许它们不止是外观上的等同，还有其他更深的联系。元素外观的等同也会让人联想到它们会携带相似的信息。 同样的，如果我们让两个元素外观上不同，那么它们表达出的就是两个完全不同的元素，它们的意义也有所不同。 任何可以被改变的元素特性，都可以让元素变得等同或不同。下面所列出的元素特性便是如此： 尺寸|形状|颜色|赋值|纹理|位置|方向 一个长方形和一个圆形的形状对比很明显，而两个红色元素在颜色上具有一致性。一个红色长方形和一个红色圆形就会出现形状各异而颜色相同的情况。你怎样平衡元素中的等同和不同的元素特性，这将决定你的元素要与用户沟通些什么。 注意：基础特性是区分类似与不同的基本方法，但还有其他方式可以对它们加以区分：元素实际上所承载的信息内容。例如“停”和“走”这两个字的对比，“停止”和“停下”这两个词的相似。图片对比文字，长文章对应短文章，等等。 对比 当人类看到不同的元素会本能地产生紧张的反应，这是自然进化的生存机制，以使我们能迅速辨认出威胁，让我们快速反应出是否需要立刻飞奔回到安全的地方。 我们的这种分辨异类的能力使“对比”这一方式变得特别强大。凡对比定会引起注意。它就是吸引眼球的方法。想要让某个元素得到注意，那就让它在视觉外观区别于其他元素即可。如此一来，我们便能制造出视觉焦点。事实上，正因为让元素从环境中脱颖而出的方法是如此简单，我们也不难猜测，如果想要你的设计变得更有趣，这或许也是一个最有效方法。 对比的确可以增强吸引力。它也能在两种元素间建立起分界。举例来说，主要内容和花絮内容的不同背景色就能轻松将它们区分开来，让用户一看便知哪里是主要内容，哪里是花絮。 对比也能起强调的作用，高亮显示某一重点元素和内容。越是明显的不同，对比越明显，其重要性就越强。 例如，有两种不同的文字标注方式：加粗和斜体。加粗通常会让对比更为明显。即使是远距离一瞥也能比斜体文字更易辨认。 如果你想要区分两个元素，那就将放大它们之间的对比。相信你不希望让用户自己来判断它们是否不同吧?确保对比直观且显而易见。不要有模糊不清的地方，让人产生困惑。不要用16px的文字去对比15px的文字。人们通常不会注意到细微的差别，就算是注意到，也会发生误判。‘ 但是，也请不要对比得太过火。慎用对比。如果所有元素都有区别，都在争抢注意力，那么，其实就等于没有对比一样。过多的干扰产生视觉混乱。 太多的对比也会打破设计中的和谐，造成不必要的紧张和凌乱。也许在某些特别的设计中需要用到它，但是平时绝对少碰为妙。首先确认哪些元素需要突出，然后让它们与其他元素发生对比。 对比与格式塔 格式塔完型规律在某方面也是依赖于等同和对比的。对于图案背景和突出焦点来说，对比是特别重要的。 图案背景 当我们看到一个对象，我们第一件事就是去区分哪里是背景哪里是主角。这对关系决定了这一对象中其他元素的角色内容。主角与背景必须要有显而易见的对比，否则我们将很难区分它们。 焦点 焦点是指那些最具吸引和趣味的元素。设计它们时就需要让它们从周围环境中凸显出来。这一对比也让他们脱颖而出从而获得注意。在一个对象中最突出的就是这个对象的首要元素，而