【UI进阶手册】学会这7招UI配色方案,让你快速进阶成为UI大神!

有很多对设计感兴趣的朋友们,以及刚入行UI的朋友对设计的配色很头疼。

经常有朋友向u叔咨询如何做出高大上的UI设计作品,u叔经过几天艰苦奋斗,终于整理出来了这7招配色方案与技巧,相信这篇文章能解决朋友们所头疼的问题。

图片发自简书App

1 .掌握6:3:1配色原则

图片发自简书App

U叔先为大家介绍一下,6:3:1 原则最早是源自于室内设计领域,室内设计师借助这一原则,创造出协调的室内设计配色

u叔认为这一原则就是为了达到平衡的配色,将几种色彩遵循60%—30%—10%这样的色彩配比。

其中占据60% 的是主色,30%则是辅助色,而占据10%的色彩应当为强调色

朋友们只要掌握这个原则,u叔相信你的作品颜色搭配就不会跑偏。

2.色彩的对比

u叔认为色彩的对比几乎是任何视觉构图的关键部分。

图片发自简书App

对比度创造了UI元素的差异,也赋予它们以性格。值得朋友们注意的是,UI当中来自同一色系的色彩往往不会呈现出明显的对比度,而可识别度较低的文本更是界面信息传达和交互的障碍。

我们需要根据设计目标,来合理地控制整个作品色彩的对比度高低。

u叔来为大家举个例子,如果你需要让用户注意到特定的元素,那么最好使用高对比度的色彩来达到引人瞩目的视觉体验,比如使用高对比度的红色和蓝色。

CTA按钮常常就是使用这样的色彩。

图片发自简书App

但是u叔认为,如果将UI视作为整体的话,高对比度的色彩可能并总能奏效。

文本内容和背景的对比需要控制在一个合理的度上面,否则就会因为对比过大产生「晕影」的视觉效果,这会影响用户长时间阅读的阅读体验。

图片发自简书App

所以u叔建议朋友们采用温和的对比度控制,并且只在特定的元素上使用高对比度。

通过在不同的设备上测试,可以让我们的作品保持配色的可用性和泛用性。

3.色彩心理学

我们所熟知的设计工作流程都是基于心理学原理开展的。

色彩心理学是和设计息息相关的一个心理学分支,它主要研究色彩对于人类情绪和行为上的影响。

我们大脑对于色彩的反应其实是相当敏感和多样的,但是在日常生活中我们很难直观地、迅速地感受到。

当人的眼睛感知到一种色彩的时候,会向大脑内的分泌系统发出信号,并且释放刺激产生对应情绪的激素。

图片发自简书App

u叔认为每种色彩对于我们的感知和思维都有独特的影响力,了解这些可能的反应最终可以帮助我们正确地传递信息,并且引导用户按照我们的预期来执行。

下面u叔为大家介绍一些颜色的基本的特征和含义

· 红色:象征爱情,自信,激情和愤怒,它是充满活力和温暖的色彩,给人带来兴奋的感觉。

图片发自简书App

· 黄色:能传递出幸福,阳光,喜悦和温暖的情绪。

图片发自简书App

· 绿色:则常常能给人自然、清新、富有生命力的感觉。

图片发自简书App

· 蓝色:是目前最受欢迎的颜色之一,企业常常会使用蓝色来传递自信和让人信赖的感觉。

图片发自简书App

· 紫色:和皇室、财富关联密切,这也是代表神秘和茉莉的色彩。

图片发自简书App

· 黑色:虽然和死亡、悲剧有关,但是也能营造沉稳大气的高级感。

图片发自简书App

· 白色:代表纯洁无暇,传达出高雅,纯粹和清晰的感觉。

图片发自简书App

除此之外,我们还需要明白一个事情,就是人和人的视觉感受通常是不同的,对于色彩的认知还受到文化背景的影响,性别的因素对于色彩偏好的影响也不小。

因此,u叔认为了解我们用户的特征是很有必要的。

4.色彩心理学

朋友们都知道文化背景对于色彩有着深刻的影响。

不同的文化有着不同的传统文化和信仰特征,甚至同一种颜色在不同的国家有着截然不同的解读方式。

图片发自简书App
图片发自简书App

白色在欧美国家常常象征着纯洁和高贵,但是在亚洲地区,丧事也常常被称为“白事”,代表着死亡和悲伤。

在中国,色彩饱和度高的正色是传承了几千年的视觉文化元素,但是在日本,却以间色和低饱和度的色彩为美。

u叔建议大家在设计之前,应该深入了解受众当地的文化特征,这样才能让我们更好的降低被误解的风险,创造出优秀的设计。

5.色彩协调

u叔认为协调的UI设计是设计师的目标之一,而这意味着配色一定要和谐并令人感到舒适

我们可以通过色彩来营造富有吸引力的协调设计,能够让用户清晰明了地感知到UI中的内容,同时留下良好的第一印象。

随着u叔多年的摸索,在配色方案上总结了一些基本的配色方法:

· 单色配色。单色配色并不是说只有一种颜色,而是基于同一色系来进行配色,不同明暗、饱和度的色彩组合到一起,构成配色方案。

图片发自简书App

· 类似色。在色轮上彼此靠近的颜色构成的配色方案。

图片发自简书App

· 对比色。色轮上彼此处于相对位置的色彩能够构成鲜明的对比,这些对比色能够构成高对比度的配色方案。

图片发自简书App

· 拆分互补色。拆分互补色的配色原理和互补色相似,但是不同的地方在于,这样的配色当中会采用更多的颜色,当你选择蓝色之后,与之搭配的不是对位上的橙色,而是橙色两侧的黄色和红色。

图片发自简书App

· 三元色。它是在色轮上挑选互为120度角的三个颜色类进行配色。使用其中的一种色彩为主导,另外两种色彩用来提亮。

图片发自简书App

· 双互补色。采用两对互补色来作为主要的配色方案。

6.自然获取配色

u叔认为:大自然是世界上最好的艺术家和设计师。

我们在自然环境中看到的色彩组合大多都非常的协调,甚至可以说接近完美。

人们所喜欢的日落和黎明,喜欢秋日的落叶和冬天的山野,因为这些色彩组合有着独特的美感。

图片发自简书App
图片发自简书App

所以u叔建议大家尝试从自然风景中获取配色。

后期u叔会为朋友们详细介绍如何从自然风景中获取想要的配色。

7.配色网站

U叔在这里为朋友们分享了一些优秀的配色网站,希望能够帮助大家。

图片发自简书App

漂亮的渐变颜色

https://uigradients.com/#CoolSky

colourlovers:

//www.colourlovers.com/

colorfavs:

http://www.colorfavs.com/

日本传统色词典:

http://nipponcolors.com/

kuler:

https://color.adobe.com/zh/

U叔送个朋友们一段话:

在我们追梦的过程,必须有坚强的信念

无论你的起点是什么样的,前方都有一条适合你的道路等着你。

遇到最困难的事情时,你只有两个选择,敢或不敢!

如果你有设计梦想就不要放弃,不要纠结,不要犹豫,有梦想我们一起实现。

虽然追梦的道路很艰辛,但是在这条路上我们会遇见别样的风景让我们一起为梦想前行吧。

U叔会陪伴朋友们在设计这条道路上一直走下去的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容