火星网校
如何做出诱人的UI配色？学会这些技巧，让你的设计“色”起来！
发布时间：2024-07-09 10:28:12 浏览量：217次
你懂“色”吗？你的作品够“色”吗？你是不是经常在界面设计中为用什么颜色而纠结烦恼？
辛辛苦苦设计好了，却因色彩搭配不合理而被否定？为什么别人家的设计那么优秀？
如果你在UI设计中有以上烦恼，小编可以郑重的告诉你：那是因为你还不懂“色”，或者说你“色”的功底还不够。
所以，我想你现在很有必要，放下手头的事情，好好地学学如何做出诱人的UI配色。
为了照顾初学UI设计的小白，我们还是从最基本的色彩原理说起吧：
认识RGB与HSB
· RGB
RGB是一种用于显示器的色彩模式，由光学三原色（红Red、绿Green、蓝Blue）组成，我们称之为RGB色彩模式。
RGB色彩模式几乎包括了人类视力所能感知的所有颜色，我们可以通过对红（R）、绿（G）、蓝（B）三个颜色通道的变化以及它们相互之间的叠加来得到各种颜色。例如：
· HSB
HSB是色彩的三个要素，分别是色相（Hues）、饱和度（Saturation）和明度（Brightness）。
色相（Hues）
色相，顾名思义，就是指色彩的相貌，是自然状态下的色彩。例如橙色的胡萝卜，这个橙色指的就是色相。
需要注意的是：黑色和白色是无色相的。
饱和度（Saturation）
指色彩的鲜艳程度。例如我们说这位姐姐的唇彩颜色好鲜艳，就是指这个唇彩颜色的饱和度很高。
饱和度最高的色彩就是原色，随着饱和度的降低，色彩就会变黯淡，降到最低就会失去色相，变为无彩色，也就是只剩下灰度（黑白之间的各种灰色）。
明度（Brightness）
指色彩的明暗度，即深浅程度。色彩越接近黑色明度越低，越接近白色明度越高。我们说这个颜色好亮，就是指这个颜色的明度很高。
明度与亮度的区别
亮度是指发光的强度，与物体表面色彩反射的光量有关。一般来说，彩色物体表面的反射光量越多，亮度就越高。
明度是一个心理颜色概念，是指人们所感知到的色彩的明暗程度，它以亮度为基础，但不等同于亮度。例如蓝色的光量很高，但其明度却低。
色彩搭配基础
· 色环
色环对于UI设计师来说是一个重要的工具，特别是对于菜鸟级别的设计师。通常包括12种颜色。
· 单色搭配（ Monochromatic ）
单色搭配就是单一色系的搭配，通过调整颜色的深浅、明暗或饱和度来形成明暗的层次关系。
单色搭配在app UI设计中一直都是一个不错的选择，特别是蓝色系和绿色系。
· 类比色搭配（ Analogous ）
类比色搭配是指选用一款颜色作为主色调，色轮中临近的颜色作为辅色。因为在色轮中相互靠的很近，所以搭配起来不会有很突兀的感觉。
类比色搭配通过一个色彩渐变的效果，来给用户提供不同任务优先级顺序的视觉提示。
· 互补色搭配（ Complement ）
在色轮上直线相对的两种颜色称为互补色。互补色因为互相处于对方的对立面，所以搭配起来会形成强烈的对比效果，进而吸引用户的注意力。
例如，当我们的眼睛看到一大块绿色区域时，一小块红色就会显得特别突出。
色彩心理学
· 色彩的情绪影响
我们身处在一个多彩的世界中，物体的不同颜色，会让我们产生不同的情绪。例如：
· 色彩的性别偏好
男生和女生的色彩偏好是不同的，一般来说，男生较喜欢蓝色系，女生较喜欢红色系。
下图是根据JoeHallock的研究，不同性别的色彩选择，从最喜欢的色彩到不那么喜欢的色彩分别所占的比例。
男生喜欢蓝色、黑色、灰色和白色较多；女生喜欢紫色、红色、黄色较多；男生和女生都喜欢绿色，而且占比一致，看来绿色是男女通吃的色彩；此外，蓝色是所有色系中最受欢迎的色彩。
· 不同性格人群的色彩偏好
不同性格人群面对不同的色彩所产生的心理感受也是有差异的。
CSMP性格系统从宏观上把性格分成了四类：和平型、活泼型、完美型、
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
最新文章
