在下面的这个设计案例中,在照片上配上文字会使其变得难以阅读,在白色的文字上添加紫色到蓝色的渐变色,就成了一个很好的对比。
2.利用色相,色调增加对比
色相,色调(英:hue)是指,在从很久以前就开始使用的12色色轮中,所选择的特定的颜色名称的绘画用语。但是这种色彩的原理,不管是绘画还是网页设计,都可以去利用他。不知道从什么世纪开始,为了创建出对比的组合,画家们就开始利用色轮上的对比色了。
1.互补色(英: complementary):他指的是选择色轮上面对面的那一组颜色,例如红和绿,蓝和橙。互补色的特点是高对比度,所以如何掌握颜色之间的平衡,也就成了难点。
在下面的设计案例中,使用了简单的互补色,他看起来非常的有吸引力,他将图像中的各种情报都整理的很好,是非常具有实际意义的设计案例。
2.分散互补色(英: split-complementary):他只的是选中主色之后,分布在主色对面的互补色两侧相邻的颜色。这种配色有较强的视觉对比,可以设计出有着强烈碰撞的设计效果。
3.三色系(英: triadic):他指的是选中主色后,以主色画一个等边三角形的配色方案。
当你在使用色轮进行设计时,我们要有“没必要只是用纯色”这样的念头。在越来越多的实践中,不断的去尝试提高降低颜色的明度和各种各样的颜色组合,来表现出最棒的对比效果吧。
3.利用色温增加对比
所有的颜色都是有温度的,他可以被分为暖色(英: warm)、冷色(英: cool)或者中性色(英: neutral)。红色、橙色或者黄色会给人温暖的感觉,而蓝色、绿色则会给人冷的感觉,黑和白就给人中性的感觉(还有些不常见的米色和茶色,也归属这一类。),颜色就按这样来进行划分。利用颜色的温度的不同来进行配色,例如暖色和冷色进行组合,可以给人一种巨大的反差。
就好像下面这个设计案例,使用鲜艳的蓝色和黄色这样不同的色温,在网页布局上实现了对比。像这样,call−to−action(行为召唤:http://cued.xunlei.com/log046)将按钮与背景区分出来,产生引人注意的效果。更进一步来说,什么样的颜色被称为寒色(呈绿色的色调:英: ‘greenish’ tinge)等,已经有一个统一的对比的组合。
4.利用颜色的浓度增加对比
颜色的浓度(英: the intensity of a color),也被称为色彩饱和度(英: saturation)。纯粹明亮的颜色,他的饱和度状态就是100%;越是接近灰色,他的饱和度也就越低。明亮的色调和黑色一起使用的话,就能产生特别的引人注意的效果。在设计中可以作为一个特别的组成部分,为了强调出重要的部分,一定要谨慎的使用。
在下面的这个设计案例中,可以使用降低了饱和度的橙红色,将其放置在山顶同样降低了饱和度的绿色上。利用互补色组合(英:complementary color scheme),通过调整色彩的饱和度来吸引眼球,为你的设计赋予更多的活力。
5.利用图形增加对比:几何图形vs不规则图形
大多数图形(英: shape),是可以被分类为具有几何意义的几何图形(英: geometric)(例如长方形,三角形和圆形),或者不规则(英: organic)(流线型(英: fluid)或者受自然影响的形状(英:nature-inspired))。在均匀对称的几何图形的角落,使用一些柔和的非对称(英: asymmetrical quality)的不规则图形,可以进行很好的对比。
下面的这个设计案例,在复杂抽象的(英: abstract)有机图片中,我们可以看到,很好的插入了强调排版的直线和曲线,他们补充的位置非常好。
6.利用图形增加对比:锐角边vs曲线边
在使用图形帮助设计的另一个方法,就是利用边框。在任何设计要素中,比如按钮,就可以使用锐角边(英: edges)或者是曲线边(英: corner)。按钮的形状越柔软,圆滑,给人的视觉效果就越友好。角的形状越是整齐,给人的感觉就越是严肃。(参考:http://www.jianshu.com/p/f575891409c8)通过两种不同的形状,我们可以创建一个对比。在下面这个设计案例中,我们可以看到很好的利用了锐角和曲线进行排版,表现出了一种惊人的对比感。
7.利用纹理增加对比
图片相同,设计的要素不同,例如使用纹理(英: textures),对比的效果也就出来了。粗糙(英: rough)与细致(英: smooth),硬(英:hard)与软(英: soft),立体(英: raised)与平面(英: flat)等。作为特殊的打印加工,纹理和别的技术不同,可以应用于任何内容。通过使用网络上免费的素材,可能性是非常广阔的。
在下面这个案例中,在清爽的logo上,添加上砂质纹理(英: gritty),表现出一种复古的质感。粗糙质感的纹理和复古的颜色,是为了表现出复古氛围的最佳选择。
8.利用比例和尺寸增加对比
对比不仅可以增加视觉趣味,也可以帮助我们展现相关联的设计要素的优先级。如果设计要素的尺寸相同,就无法表现出他们的层级(英: hierachy)关系。不管是怎样的读者,我们都需要将重要的东西优先传达给他们。有效的利用比例(英: scale),在实践中不仅非常重要,在添加动态布局设计中,也是非常简单的一种技术。
在下面这个设计案例中,使用了被扩展的非常大的照片作为杂志封面,也不会对其他的设计要素进行干扰。实际上,通过调整大小,形状和配色、版式,可以强调出照片的焦点部分。
9.利用视觉重量增加对比
在比例和尺寸相同的情况下,利用视觉重量(英: visual weight)【http://uec.nq.com/works/176】就可以将设计中重要的部分给凸显出来了。在视觉重量中,将那个元素与剩余的元素进行显著的区分,这种方法我们称之为高对比度(英: high-contrast)。被视觉重量所采用的设计要素,没有必要是最大的。此外,通过使用纹理。配色和图形等,给他一种【重(英: weighty)】的印象,也能做出有魅力的设计。
在下面的设计案例中,是介绍在美国辛辛那提,有着当地文化气息的建筑的明信片。当然,建筑在明信片中是最大的设计要素,但关键词“enjoy more”却更能吸引眼球。这当然是因为,他的颜色是最暗(英: darkest)的。
10.利用留白增加对比
在有限的空间中,为了最大化的填入信息,我们常利用填补式的设计,但留白或者空白(英: blank),负(英: negative)空间等方法,将设计要素进行区分/整理,做成一个平衡的布局,也是非常重要的。当然,如果你在设计时使用了很多复杂的布局,在设计重要的要素时就要记得留白。通过这种方法,你可以将用户的时间集中到重要的要素上,从而和其他的要素产生有效的对比。
在下面的这个设计案例中,留白和细边框线相结合,我们就完成了将网页信息精辟概括的设计模型。在左右上下进行了适当的留白,在产品信息中也利用了留白,引起了用户的兴趣。