兰亭妙微ui设计公司分享:做好这 3 点,配色不再凭感觉

兰亭妙微ui设计公司分享:很多做视觉、设计相关工作的朋友,想法和画面构图都做得不错,却常常栽在配色上。你是不是也总被配色问题搞得头疼?

今天结合学员的实操改图案例,拆解 3 个落地好用的色彩逻辑。只调整配色,就能直接改善画面的协调度,整体质感瞬间提升。

01 色相呼应:告别画面割裂感

image.png

画面里出现某一个颜色,不要只让它孤零零出现。要在画面别的位置,重复出现这个色彩,一处、两处甚至多处,形成色相呼应,把整张画面的各个元素串联在一起。

举个例子:画面人物主体是黑色,带有绿色装饰细节,但背景是蓝色,文字又是白色。人物身上的黑色和环境完全脱节,悬浮在画面当中,观感割裂。

image.png

做好色相呼应,可以分三步调整:

  1. 背景承接主体主色:将背景调整为黑色,大面积黑色和人物的黑色形成色彩呼应,消除主体悬浮脱节的问题。image.png
  2. 点缀色渗透到环境中:人物带有绿色细节,背景也要布置绿色元素。给人物增加绿色光晕,搭配绿色装饰球体,让画面过渡更柔和。image.png
  3. 文字色彩适配整体氛围:原本的白色文字,会把画面切割开,破坏整体感。把字体换成绿色,和人物、背景的绿色元素互相呼应。

经过色相呼应调整之后,画面各个元素色彩互相关联,整体协调度会明显变好。

02 色相层级:色调统一,同时突出主体

image.png

 

还有一种高频问题:主体色彩和环境脱节。如果简单粗暴直接把背景改成和主体一模一样的颜色,色彩是统一了,但主体会被背景吞没,看不清视觉重点,这时候就要用到色相层级

色相层级,就是在同一组同类色内部,依靠色相、明度的细微变化,制造出强、中、弱不同的视觉力度,拉开画面主次关系。

 

拿橙色调举例:在同类色中,柠檬黄视觉冲击力最强,黄色次之,橙红色最弱,三者天然形成视觉层级。

image.png

如果整体想要橙色氛围,既想要色调统一,又要主体能够凸显,可以这样处理:背景选用偏暗的橙红色,主体向黄色、柠檬黄做渐变过渡。

背景和主体同属一个色彩体系,整体氛围和谐;同时色彩层次拉开,主体可以清晰跳脱出来,兼顾氛围感与画面层次。

image.png

03 色相数量:控制色彩,避开花哨杂乱

image.png

有些图拆开看每个局部都没问题,但整体看着花哨吵闹,质感上不去,大多是画面颜色种类太多导致的。image.png

就像案例原图,一共堆砌了 6 种完全不一样的色相,各色之间互不关联,视觉信息过载,看着很累。

修改的核心思路就是控制色相的总数量

 

  1. 天空、地面的色相互相靠近,只用明暗区分层次,不再新增多余颜色;
  2. 月亮的黄色融入背景渐变,减弱月亮和天空强烈的色彩对抗;
  3. 文字颜色向背景色调靠拢,和环境形成色彩呼应。

修改之后,画面色相精简到 3 种,画面干净克制,观感舒服很多。


配色从来不是凭感觉挑选好看的颜色,而是一套有方法可循的逻辑: 色相呼应:色彩不要孤立存在,多处复用,解决画面割裂; 色相层级:同类色打造强弱对比,兼顾色调统一和主体突出; 色相数量:把控画面色相数量,拒绝色彩堆砌带来的杂乱感。

掌握这三个配色小技巧,可以帮你避开日常作图里大部分色彩雷区。

 

转载:站酷

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档