搜索
免费下载
设计灵感
设计规范
👑
充值会员
流体渐变
渐变配色
色彩搭配
注册
登录
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
APP设计
原型demo
GUI
小程序界面
网页UI
网页设计
原型demo
软件设计
字体下载
衬线字体
非衬线字体
圆角字体
手写字体
网页字体
图标字体
书法字体
交互动效
加载loading
转场动效
ICON图标
面性图标
线性图标
拟物图标
2.5D图标
卡通图标
像素图标
按钮图标
多色图标
活动图标
插图/插画
扁平化插画
多彩渐变插画
2.5D插画
样机贴图
手机样机
名片样机
动画样机
电脑样机
笔记本样机
穿戴设备样机
UI作品样机
设计导航
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
网页UI
字体下载
交互动效
ICON图标
插图/插画
样机贴图
设计导航
为什么你的设计配色总是很丑?
搜UI
>
文章/作品
>
设计教程
>
设计规范
© 共享素材,请勿商用
举报
[db:内容描述]
设计
配色
总是
为什么
UI自学
发布时间:2020-05-26
关注
色彩是一种语言、一种信息,色彩是具有感情的,能让人产生联想,让人感到冷暖。在色彩搭配中,设计师把握好色彩的冷暖对比,明暗对比,面积对比,混合调和,明暗调和等,就能够保持画面的均衡和色彩的条理性。
154017986512875486.jpg
(107.5 KB, 下载次数: 0, 售价: 1 U点)
色彩包涵的内容丰富多彩,但只要我们掌握了色彩的搭配方法,并遵循色彩构成的均衡、韵律、强调、反复等法则,以色彩美感为最终目的,将色彩组织安排在平面设计作品的画面上,便能得到一种和谐的、优美的、令人心情愉悦的视觉效果。
1540179865145532585.jpg
(95.33 KB, 下载次数: 0, 售价: 3 U点)
以色相为主的色彩搭配
这个配色方法是以色相环为基础,按区域性进行不同色相的配色方案。当进行平面设计作品时首先应依照主题的思想、内容的特点、构想的效果、表现的因素等来决定主色或重点色。是冷色还是暖色、是艳色还是淡色、是柔色还是硬色等。主色决定后再决定配色,再将主色带入色相环便可以按照同一色相、类似色相、对比色相、互补色相以及多色相进行配色。1、同一色相的配色是指相同的颜色,主要靠明暗程度不同深浅的变化来构成色彩的搭配。由于它只是单色的明暗、深浅变化,所以它使人感到稳定、柔和、统一。但变化太小,会使色彩产生单调、呆滞、阴沉的感觉。
1540179865146428870.jpg
(612.17 KB, 下载次数: 0, 售价: 3 U点)
2、类似色相的配色包括的范围较广,配色角度越大越显得活泼而富有朝气,角度越小越有稳定性和统一性。但如果太小就产生阴沉、灰暗、呆滞的感觉,反之太大,产生色彩之间相互排斥、不和谐的画面效果。
1540179865116203380.jpg
(227.03 KB, 下载次数: 0, 售价: 1 U点)
3、对比色相的配色,其配色角度大、距离远,颜色差异大,其效果活泼、跳跃、华丽、明朗、爽快。但如果两色都是纯度高的颜色,则会对比强烈、刺眼,使人产生不舒服的感觉。
154017986585116288.jpg
(221.79 KB, 下载次数: 0, 售价: 3 U点)
互补色相的配色具有完整性的色彩领域,占有三原色的色素,所以其特色清晰、明亮、艳丽、灿烂。但它是色相中对比最强烈的配色,如果再加上色彩的纯度高,就会产生冲击力强烈、辛辣、嘈杂的感觉。
154017986519572525.jpg
(135.1 KB, 下载次数: 0, 售价: 2 U点)
以明度为主的色彩搭配
前面谈到每一个色相都有不同的明暗程度,且它的变化可以控制色彩的表情,利用色彩高低不同的明暗调子,可以产生不同的心理感受。如高明度给人明朗、华丽、醒目、通畅、洁净、积极的感觉,中明度给人柔和、甜蜜、端庄、高雅的感觉,低明度给人严肃、谨慎、稳定、神秘、苦闷、钝重的感觉。
1540179866202102382.jpg
(149.48 KB, 下载次数: 0, 售价: 6 U点)
以纯度为主的色彩搭配
纯度也就是色彩的饱和度,平面设计作品中,纯度的运用起着决定画面吸引力的作用。纯度越高,色彩越鲜艳、活泼、引人注意、冲突性越强;纯度越低,色彩越朴素、典雅、安静、温和。因此常用高纯度的色彩作为突出主题的色彩,用低纯度的色彩作为衬托主题的色彩,也就是高纯度的色彩做主色,低纯度的色彩做辅色。
1540179866142477282.jpg
(294.36 KB, 下载次数: 0, 售价: 1 U点)
面积因素
除色相、明度、纯度外,色彩面积大小是直接影响色调的重要因素。色彩搭配首先考虑大面积色的安排,大面积色彩具有远距离的视觉效果。另外,在两色对比过强时,可以不改变色相、纯度、明度、而扩大或缩小其中某一色的面积来进行调和
154017986672002965.jpg
(249.36 KB, 下载次数: 0, 售价: 6 U点)
七种颜色法则
- 强调色 -强调色是总色调中重点用色,是面积因素和视认度结合考虑的用色。一般要求明度和统度上高于周围的色彩,在面积上则要小于周围的色彩,否则起不到强调作用。
154017986644496960.jpg
(196.02 KB, 下载次数: 0, 售价: 2 U点)
- 间隔色 -间隔色运用是指在相邻而呈强烈对比的不同色彩的中间,用另一种色彩加以间隔或作共用,可以加强协调,减弱对比。间隔色自身以偏中性的黑、白、灰、金、银色为主。如采用有彩色间隔时,要求间隔色与被分离的颜色在色相、明度、纯度上有较大差别。
154017986651615626.jpg
(282.81 KB, 下载次数: 0, 售价: 6 U点)
- 渐层色 -渐层是渐渐变化的用色,色相、明度、纯度都可作渐层变化。渐层色具有和谐而丰富的色彩效果,在广告的色彩处理中运用较多。
1540179867160420581.jpg
(119.43 KB, 下载次数: 0, 售价: 4 U点)
- 对比色 -对比色不同于强调色,这是面积相近而色相明度加以对比的用色,这种用色具有强烈的视觉效果,从而具有“广告性”,可以瞬间吸引人的目光。
1540179867179430124.jpg
(103.97 KB, 下载次数: 0, 售价: 1 U点)
viaATOMIC14- 象征色 -这是不直接模仿内容物色彩特征,而且根据广大消费者的共同认识加以象征应用的一种观念性的用色。主要用于产品的某种精神属性的表现或一定品牌意念的表现。
154017986737099280.jpg
(146.39 KB, 下载次数: 0, 售价: 2 U点)
- 标志色 -这里讲的标志色不是指LOGO的色彩,而是用色彩区别不同种类、或同类不同品种产品的系列用色。例如以不同的色彩区别同一品牌的化妆品,不同成分用不同的色彩。在处理上,面积、形状、位置应加以变化。比如说之前大大君写过的国货化妆品牌羽西,在产品及海报的色彩搭配上,充分考虑到产品本身成分所带有的色彩元素。
154017986799404396.jpg
(234.62 KB, 下载次数: 0, 售价: 1 U点)
154017986738918100.jpg
(130.97 KB, 下载次数: 0, 售价: 4 U点)
- 辅助色 -这是与强调色相反的用色,是对总色调或强调色起调剂作用的辅助性用色方法,用以加强色调层次,取得丰富的色彩效果。在设计处理中,要注意不能喧宾夺主,不能盲目滥用。比如下面这张海航现代物流的广告图,画面以橙色作为强调色,而“A”字中间的一点蓝色,则是作为辅助色存在,对读者视觉起缓冲作用。
154017986863102814.jpg
(206.63 KB, 下载次数: 0, 售价: 6 U点)
黄金法则
这是一个很基本的法则60:30:10,主色彩是60%的比例,次要色彩是30%的比例,辅助色彩是10%的比例。这个法则是黄金法则,在任何时间任何地方都是非常正确的。
154017986872278489.jpg
(192.24 KB, 下载次数: 0, 售价: 4 U点)
配色禁忌
- 太亮的霓虹色 -
154017986898705305.jpg
(47.12 KB, 下载次数: 0, 售价: 4 U点)
闪亮的霓虹色看起来很有趣,似乎能让页面显得非常潮、非常流行。但是他们并不会让眼睛觉得舒服,往往会给人以“闪瞎了”的不适感觉。想解决这个问题,你可以试着降低霓虹色的亮度,让它看起来更暗,让它看起来更加微妙;或者是增加颜色的灰度,为整个页面增添柔和、亲近的感觉。
1540179868125961249.jpg
(132.2 KB, 下载次数: 0, 售价: 2 U点)
- “震颤”色彩 -
当高饱和度的色彩搭配在一起的时候,它们会产生一种“震颤效应”, 会让你觉得两种色彩之间会产生模糊、震颤或者发出光晕的视觉效果,令人不适。 不过即使你没有尝试搭配,也可以通过它们的基础特征,合理规避“震颤”配色:它们都是高饱和度的色彩两种色彩在色轮上是互补色他们在色轮上相隔180度,处于对称的位置将两种色彩转化为灰度之后,两者灰度非常接近如果说你必须使用“震颤”配色,这个矛盾也不是不能调和的:加入中性的色彩将两者分隔开就好了。- 浅色+浅色 -
浅色+浅色的搭配也是最常见的错误之一。也许你在某个平面设计或者印刷相关的项目上这么配色,最终没造成可读性的影响,这可能是设置的问题或者色差造成的,但是在绝大多数的情况下,是错误的。无论你怎么设计,这样的配色一定很难阅读其中的内容。想要修复这个问题其实非常简单:选择色彩均匀统一的背景,文字部分可以与之构成对比。
viasay417如果无法修改背景,可以在背景和文字之间加一层,增加对比。
vialokngs尝试调整整个背景图片的色调、明暗、饱和度等,以达成提升对比度的目的。
- 彩虹式配色 -
“彩虹飘飘”,设计师一定是也生无可恋了。想想看,当一大堆各种各样的色彩都成为配色的一部分的话,各种色彩之间的干涉,都不知道打破了多少配色的规则。这种设计虽然可能在一开始会吸引用户的注意力,但是随后让用户产生的恶心和不适绝对会远超设计者的预期,即使内容再好,都无法被人识别。如果你真的希望让页面更加“多彩”,那么不要让色彩都混杂到一起,试着使用卡片式设计来承载不同的色彩,合理的排布,既可以让色彩更加灵活,也可以保证组织性和流动感。
- 亮色+亮色/深色+深色 -
就像浅色+浅色的搭配一样,亮色+亮色或者深色+深色的搭配,都是因为饱和度接近而造成的辨识度问题。毫无疑问,这也是要规避的问题。即使是经验丰富的设计师,也可能会在这个时候掉坑里。就像几天前大大君讲的饿了么星选LOGO,里面有几张品牌之间“对话”的海报:
评论区下有粉丝留言“晃眼睛”,这就是两个亮度过高的颜色搭配在一起,造成的视觉不适感。
总之,千万注意配色的对比度,在视觉对比和可读性之间做出适当的平衡。- “K”黑 -
我们常说的CMYK中的K是黑色。许多设计师的设计作品会横跨网页版和印刷品,有时候会在做印刷品的设计的时候,会误将网络配色中的黑色用上去。印刷品,包括我们日常生活中的许多黑色,其实分很多种,它们通常是某种色彩叠加了很多之后产生的效果,比如渡鸦的羽毛是黑色的,但是你仔细看它会微微泛蓝。
所以,在设计这个黑色的时候,最好是挑选一个带有品牌色调的黑色(而非#000000)。这样可以在印刷的时候更容易协调。其实以上所谈到的所有的配色的问题,几乎都是关于对比度和可读性问题的。实际上,只要确保色彩和内容的对比度和配色美感,几乎所有的色彩都是能用的。注:本文来自网络由公众号PS视觉教程(xiaoyong920922)整编,如有侵权,请联系我删除!转载地址:https://mp.weixin.qq.com/s/BbNVfmj0GuWGA0z5cEyfRg
UI自学作品
为什么你的设计配色总是很丑?相关作品
收藏
小程序设计
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
其他设计规范
最新素材
其他设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
Load More
最新素材
收藏
面性图标
收藏
像素图标
收藏
线性图标
收藏
线性图标
收藏
多色图标
收藏
面性图标
收藏
书法字体
收藏
书法字体
Load More