火星网校
学会这7招UI配色方案，让你快速进阶成为UI大神!
发布时间：2024-04-12 09:11:11 浏览量：329次
有很多对设计感兴趣的朋友们，以及刚入行UI的朋友对设计的配色很头疼。
经常有朋友向u叔咨询如何做出高大上的UI设计作品，u叔经过几天艰苦奋斗，终于整理出来了这7招配色方案与技巧，相信这篇文章能解决朋友们所头疼的问题。
一、掌握6:3:1配色原则
U叔先为大家介绍一下，
6:3:1 原则最早是源自于室内设计领域，室内设计师借助这一原则，创造出协调的室内设计配色。
u叔认为这一原则就是为了达到平衡的配色，将几种色彩遵循60%—30%—10%这样的色彩配比。
其中占据60% 的是主色，30%则是辅助色，而占据10%的色彩应当为强调色。
朋友们只要掌握这个原则，u叔相信你的作品颜色搭配就不会跑偏。
二、色彩的对比
u叔认为色彩的对比几乎是任何视觉构图的关键部分。
对比度创造了UI元素的差异，也赋予它们以性格。值得朋友们注意的是，UI当中来自同一色系的色彩往往不会呈现出明显的对比度，而可识别度较低的文本更是界面信息传达和交互的障碍。
我们需要根据设计目标，来合理地控制整个作品色彩的对比度高低。
u叔来为大家举个例子，如果你需要让用户注意到特定的元素，那么最好使用高对比度的色彩来达到引人瞩目的视觉体验，比如使用高对比度的红色和蓝色。
CTA按钮常常就是使用这样的色彩。
但是u叔认为，如果将UI视作为整体的话，高对比度的色彩可能并总能奏效。
文本内容和背景的对比需要控制在一个合理的度上面，否则就会因为对比过大产生「晕影」的视觉效果，这会影响用户长时间阅读的阅读体验。
所以u叔建议朋友们采用温和的对比度控制，并且只在特定的元素上使用高对比度。
通过在不同的设备上测试，可以让我们的作品保持配色的可用性和泛用性。
三、色彩心理学
我们所熟知的设计工作流程都是基于心理学原理开展的。
色彩心理学是和设计息息相关的一个心理学分支，它主要研究色彩对于人类情绪和行为上的影响。
我们大脑对于色彩的反应其实是相当敏感和多样的，但是在日常生活中我们很难直观地、迅速地感受到。
当人的眼睛感知到一种色彩的时候，会向大脑内的分泌系统发出信号，并且释放刺激产生对应情绪的激素。
色环
u叔认为每种色彩对于我们的感知和思维都有独特的影响力，了解这些可能的反应最终可以帮助我们正确地传递信息，并且引导用户按照我们的预期来执行。
下面u叔为大家介绍一些颜色的基本的特征和含义：
· 红色：象征爱情，自信，激情和愤怒，它是充满活力和温暖的色彩，给人带来兴奋的感觉。
红
· 黄色：能传递出幸福，阳光，喜悦和温暖的情绪。
黄
· 绿色：则常常能给人自然、清新、富有生命力的感觉。
绿
· 蓝色：是目前最受欢迎的颜色之一，企业常常会使用蓝色来传递自信和让人信赖的感觉。
蓝
· 紫色：和皇室、财富关联密切，这也是代表神秘和茉莉的色彩。
紫
· 黑色：虽然和死亡、悲剧有关，但是也能营造沉稳大气的高级感。
黑
· 白色：代表纯洁无暇，传达出高雅，纯粹和清晰的感觉。
白
除此之外，我们还需要明白一个事情，就是人和人的视觉感受通常是不同的，对于色彩的认知还受到文化背景的影响，性别的因素对于色彩偏好的影响也不小。
因此，u叔认为了解我们用户的特征是很有必要的。
四、色彩心理学
朋友们都知道文化背景对于色彩有着深刻的影响。
不同的文化有着不同的传统文化和信仰特征，甚至同一种颜色在不同的国家有着截然不同的解读方式。
秀禾服
婚纱
白色在欧美国家常常象征着纯洁和高贵，但是在亚洲地区，丧事也常常被称为“白事”，代表着死亡和悲伤。
在中国，色彩饱和度高的正色是传承了几千年的视觉文化元素，但是在日本，却以间色和低饱和度的色彩为美。
u叔建议大家在设计之前，应该深入了解受众当地的文化特征，这样才能让我们更好的降低被误解的风险，创造出优秀的设计。
五、色彩协调
u叔认为协调的UI设计是设计师的目标之一，而这意味着配色一定要和谐并令人感到舒适。
我们可以通过色彩来营造富有吸引力的协调设计，能够让用户清晰明了地感知到UI中的内容，同时留下良好的第一印象。
随着u叔多年的摸索，在配色方案上总结了一些基本的配色方法：
· 单色配色。单色配色并不是说只有一种颜色，而是基于同一色系来进行配色，不同明暗、饱和度的色彩组合到一起，构成配色方案。
单色配色
· 类似色。在色轮上彼此靠近的颜色构成的配色方案。
类似色
· 对比色。色轮上彼此处于相对位置的色彩能够构成鲜明的对比，这些对比色能够构成高对比度的配色方案。
对比色
· 拆分互补色。拆分互补色的配色原理和互补色相似，但是不同的地方在于，这样的配色当中会采用更多的颜色，当你选择蓝色之后，与之搭配的不是对位上的橙色，而是橙色两侧的黄色和红色。
互补色
· 三元色。它是在色轮上挑选互为120度角的三个颜色类进行配色。使用其中的一种色彩为主导，另外两种色彩用来提亮。
三原色
· 双互补色。采用两对互补色来作为主要的配色方案。
六、自然获取配色
u叔认为：大自然是世界上最好的艺术家和设计师。
我们在自然环境中看到的色彩组合大多都非常的协调，甚至可以说接近完美。
人们所喜欢的日落和黎明，喜欢秋日的落叶和冬天的山野，因为这些色彩组合有着独特的美感。
所以u叔建议大家尝试从自然风景中获取配色。
后期u叔会为朋友们详细介绍如何从自然风景中获取想要的配色。
七、配色网站
U叔在这里为朋友们分享了一些优秀的配色网站，希望能够帮助大家。
配色网站
漂亮的渐变颜色：
https://uigradients.com/#CoolSky
colourlovers:
//www.colourlovers.com/
colorfavs:
http://www.colorfavs.com/
日本传统色词典：
http://nipponcolors.com/
kuler：
https://color.adobe.com/zh/
U叔送个朋友们一段话：
在我们追梦的过程，必须有坚强的信念。
无论你的起点是什么样的，前方都有一条适合你的道路等着你。
遇到最困难的事情时，你只有两个选择，敢或不敢！
如果你有设计梦想就不要放弃，不要纠结，不要犹豫，有梦想我们一起实现。
虽然追梦的道路很艰辛，但是在这条路上我们会遇见别样的风景让我们一起为梦想前行吧。
U叔会陪伴朋友们在设计这条道路上一直走下去的。
END
本文由【UI进阶手册】在今日头条原创首发，欢迎转载，转载请注明文字来源。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
