网站建设案例推广高端H5电商设计公司了解价格
QQ联系
微信联系
手机联系
QQ联系
微信联系
手机联系

为什么你的配色总是看起来不舒服?朝这儿看!(下)

发布时间:2019-02-18
发布者:eidea
浏览次数:934
配色总是看起来不舒服?如何才能让配色更高级?

很多人在设计完成后,总是对配色不满意,却又无从下手。如何分析设计中的配色问题?如何通过系统的方法,提升配色能力?

配色并没有所谓的固定方程式,生搬硬套配色理论并不能真正解决问题。本文带你从配色的策略性角度出发,深入分析配色的正确打开方式,让你从本质上解决不同场景的配色问题,并通过配色提升整体的设计品质



 

三、选择正确的色系

 

明确配色目标,确定主色以及色彩层级后,如何进行下一步的配色?

 

这时候我们可以根据不同的配色目标来选择合适的色系,丰富整个画面的配色。需要注意的是,在丰富配色的同时,仍然要严格控制色彩层级,以保证整体色彩层级的精简。

 

1、巧用同色系,统一不单调

 

同色系是指在色环上相距不超过45°的两种颜色,我们可以选择主色的同色系范围内的颜色来丰富整体配色。

 

那么如何选择同色系的颜色呢?

 

首先在色环中确定颜色的位置,通过色环两边45°延展出我们所需要的同色系。

 

 

 

在主色的同色系范围内,我们可以选出同色系颜色作为延展色,单独使用或者组合成渐变色进行使用。

 

下面的案例页面就是运用同色系原理来进行配色的。 可以看到,整个页面在保持色彩的统一的前提下,增强了画面的层次和丰富性,从而提升了整个页面的层次感和品质感。


 

同色系的配色特点是整体页面统一而富有层次,从而传递出一种稳定、专业的形象适合绝大多数的场景使用,是最为简单和有效的配色方式。

 


我们可以总结一下同色系的配色方法。首先确定主色,主色两边45°以内的同色系色彩范围,在范围中选取合适的单色作为辅助色,或者选取一段渐变色单独使用。



 

2、 不同场景的对比色用法

 

对比色是指在色环上相距120°-180°之间的两种颜色(180°时则互为互补色)。处于对比色关系的两种颜色,通常色相差异较大,能够相互产生强烈的对比效果,我们可以利用这种原理来增强画面的吸引力。


 

在不同的场景中,对比色同样有着不一样的使用方式。

 

在产品设计中,通过小面的颜色对比,可以加强主色的活力与整体丰富性;而在推广设计中,通常会使用大面的的对比色在增强页面的吸引力。

 


 

1)产品界面中的对比色应用

 

产品界面的配色对于产品来说至关重要,好的配色不仅能够准确地反映产品的调性,还能正确地引导用户阅读并理解产品。

 

通过这个案例我们可以发现,整体配色的改变,可以极大的提升官网对于用户的第一印象。

 

用户往往在进来的一瞬间就决定了对官网的印象,并最终影响用户是否进一步阅读,而配色则是其中非常重要的一部分,正确的配色能够让用户更愿意停留并阅读内容。

 


2)推广活动页面中的对比色应用

 

推广页面的设计中,通常需要用营造强烈的视觉冲击,以达到快速吸引用户并传递信息的目标。这就需要大面积的对比色,来达到强烈的对比效果。而在较大面积使用对比色时,整体色彩的主次和整体平衡至关重要。

 

我们可以来看一个案例:


 

可以看到,整个页面主由橙色和深蓝紫色两个主要对比色构成。

 

大面积的对比色产生了强烈的视觉冲击,让整个页面充满了吸引力。整个画面用最强烈的对比色重点突出了两个主要的人物角色,从而吸引用户注意并进行阅读,最终将用户引导至购买入口。至此,整个页面的任务也算是完成了。

 

在推广页面中,我们需要注意的是,重点信息并非只能是文字内容,也可以是最吸引用户的画面核心元素。


 

 

3、尝试更多创新配色

 

除了掌握以上的几种基本色系的配色方法外,大家可以在此基础上尝试更多的配色风格。比如在同色系、对比色系的基础上,有目的地加入色彩元素丰富色调,在保持整体色彩层级的同时,加入更丰富的变化,从而达到配色目标。

 

更清新的同色系配色


 

 

更丰富的同色系配色



 

更多彩的对比色配色



 

复古的平面风配色

 


而对于很多初学者来说,我建议大家能够首先明确配色的目标,在配色时保持色彩层级的精简明确。在此基础上,循序渐进,逐步去尝试更多地配色风格。只有这样,才能养成良好的配色习惯。

 



四、提升品质感

 

我们按照之前的方法,正确的确定了配色的目标,选择了合适的配色方向,并逐步完成了整体的设计排版。很多同学到这一步之后,就觉得作品已经完成,便停止继续深入了,而这也是初级设计师经常容易出现的问题。这个时候的作品,从整体上看并没有太多问题。但是当用户被页面吸引,开始仔细欣赏作品时,往往会发现作品没什么看点。

 

出现这种问题的原因,就是作品缺乏足够的细节和品质,导致作品不够耐看。就像一本书有着精美的封面,但是打开以后却平淡无奇,最终对整本书都非常失望。

 

想要让作品更优秀,除了基本的版式和配色之外,往往还需要更深入地去雕刻作品,让作品带有一种更高级的气质,而这种气质就是我们所说的品质感。

 

1、什么是品质感?


 

品质感是对于设计作品来说,是一个综合性的评价。我们可以将这个词分为代表物体本身的品相和细节,而则代表质感。

 

怎样的设计才算是有品质感的?如何提升设计的品质感?我们可以首先来研究一些优秀的设计案例,寻找其中的共同点。

 

苹果的产品和页面设计,是比较公认的具有较高品质感的,我们可以来看一下苹果的部分官网页面。


 

苹果的所有产品和页面,从产品图到页面的设计都非常有质感。

 

为什么这种质感会如此吸引我们,令我们觉得非常舒适?如何才能让设计产生质感?

 

要了解如何产生质感,首先要了解一下物体产生质感的原理。

 

 

 

当光线照射在富有质感的物体表面时,会产生不同程度的漫反射,最终反射进入我们的眼球后,就会显现出一层富有质感的渐变色。

 

所以想让物体获得质感,渐变是一个关键要素。

 

我们可以利用这一原理来提升质感。

 

下面的案例,是FisnDesign组件库官网的一个局部页面。其中就运用了大量的渐变色质感原理,将渐变色融入到icon和页面元素中,从而提升了整个页面的质感。



 

2、获得品质感的关键要素

 

渐变只是是获得品质感的关键因素之一,苹果官网将渐变这种原理加入到页面和元素中,配合精美的产品图片,让页面保持了非常高的品质感。

 

那么是否还有其他要素的存在,能够提升质感呢?


 

仔细观察苹果的所有元素设计,在渐变的同时,还加入了微量的投影和丰富的细节,使所有的元素在简洁中充满了细腻的质感。  我们可以总结一下,让设计获得品质感的几个要点:细腻的渐变+轻微的光影+细节/纹理。


 

 总结:最后,我们将前面讲的配色法则做一个简要的总结:明确目标-确定主色-精简层级-选择色系-丰富配色-提升品质感。

 

转载至http://www.zhisheji.com/jiaocheng/1211349.html


网站案例欣赏

森晨科技

智能健康家电行业响应式网站设计

天禹文化

响应式企业官网

宝亿莱软装设计

企业官网