不会给UI设计作品配色？没关系看完就全懂了——武汉网站建设

作者： 时间：2024-07-25 浏览：

一 色彩的基础知识

配色、排版、字体是视觉设计中重要的三大要素。三个要素都能够影响到视觉设计的出现。

在设计中，色彩是整个画面中最能影响用户体会情感的元素之一，一起来体会色彩的国际。

1 色彩的基本知识

在设计与绘画艺术中，将冷暖色分为三种色彩：

1 暖色彩：赤色、橙色、黄色。

2 冷色彩：青色、蓝色。

3 中性色彩：紫色和绿色相对中性色彩。

冷暖色在设计中的应留意其份额、轻重、色环的位置，武汉网站设计小编为大家解析最后的视觉出现要契合人们视觉上和心理上的舒适感。

冷色会让人想到大海、冰雪等，让人发生宽广、安静、冷的感觉；暖色则会让人联想到太阳、篝火等，让人发生了温暖、热心的感觉。

三原色

传统美术色彩的三原色是：红，黄，蓝。简称 RGB，R（红Red）、G（绿Green）、B（蓝Blue）。原色的色彩纯度最高、最纯真，也最艳丽，能够调配出绝大多数色彩，是一种加色模型。而其他色彩则不能调配出三原色。



间色是两种原色配组成的色彩。如红和黄配组成的橙色，黄和蓝配组成的绿色，红和蓝配组成的紫色。



橙、绿、紫三种色彩又叫“三间色”。

复色是用原色与间色相调或用间色与间色相调而成的"三次色"。复色是最丰厚的色彩宗族。复色包含了除原色和间色以外的所有色彩。因含有三原色,所以含有黑色成分,纯度低,复色品种繁多,千变万化。比如：赤色和紫色混合而成紫赤色，黄色和橙色混合而成得到橙黄色。



互补色/同类色/比照色

1.互补色是色相环中呈180度角的两种色彩，如赤色与绿色、蓝色与橙色、黄色与紫色等。

互补色能补充色彩情感表达的缺失感，调理互补色的明度和饱和度能改动情感的走向。

2. 同类色是同一色相中不同倾向的系列色彩，如黄色系里的橘黄色、中黄、淡黄色等色彩。色相环内是15°以内。

3. 比照色是色相环中呈120度至150度的任意两种色彩，如赤色与蓝色等。



冷色/暖色/无五颜六色

冷暖色(Cool/Cold & Warm colour) 指色彩心理上的冷热感觉。

色彩的冷暖感觉又被称为冷暖特点。色彩的冷暖感觉是相对的，色彩的冷暖感觉都是相对存在的。比如说紫色和黄色，紫色中的红紫色较暖，而蓝紫色则较冷。

无五颜六色（achromatic color）指除了五颜六色以外的其它色彩，常见的有黑、白、灰。明度从0改动到100，而饱和度很小接近于0。

无五颜六色是指金、银、黑、白、灰。试将纯黑逐步加白，使其由黑、深灰、中灰、浅灰直到纯白，分为11个阶梯，成为明度突变，做成一个明度色标（也可用于有五颜六色系），凡明度在0°～3°的色彩称为低调色，4°～6°的色彩称为中调色，7°～10°的色彩称为高调色。



素：色相/纯度/明度

色相是指不同的色彩的容颜，与亮度、饱和度无关。在通常的运用中，色相由色彩的称号标识，如赤色、橙色或绿色等色相。

纯度通常是指色彩的艳丽的饱和程度。色彩含有色成分的份额越大，则纯度越高。含有色成分的份额越小，纯度越低。当一种色彩掺入白色时，纯度就会降低。

明度是指色彩的明暗程度。

武汉网站设计指出同一色彩在强光照射下显得较亮堂，而在弱光照射下显得较灰暗、模糊。针对同一种色彩，深化不同的黑色或白色后，会发生不同的明暗层次感。

黄色明度最高，蓝紫色明度最低，赤色和绿色的明度中等。一般纯度发生改动时，明度也会随之改动。

色彩在界面设计中的作用

五颜六色文字会告诉用户能够点击的文字链接，而灰色的按钮则会让用户认为此按钮不行点击。

全体思考色彩在设计中的构成元素

图形化用户界面，用户在看到一个界面时，是一个由布景色、矩形按钮及图标ICON 设计、卡片等设计元素构成的。在设计界面时，借助色彩能够直观的展示布景色、导航栏、状态栏和操作按钮等构成的设计元素，并让产品设计的界面的逻辑架构和信息层级得到很好的展示。

色相比照

（1）同类色比照

运用同类色比照的优点是，能够营建出和谐统一的界面作用；

在界面设计中，一些品牌风格比较明显的产品一般都运用同类色比照。

（2）互补色比照

运用互补色比照的优点是，能够让画面更具张力，营建出视觉上的反差，吸引用户关注。常见的互补色有赤色与绿色、黄色与紫色、以及橙色与蓝色等。因而，在运用互补色比照时，设计师通常需求遵从大谐和，小比照的准则，即将一种色彩大面积运用，然后将其比照色部分运用。将明度相同、彩度很高的等量互补色调，能够使界面看起来明显，如赤色配绿色等。黄色与紫色因为明度距离较大，不会发生刺眼的作用，因而黄色与紫色的比照调配方式也经常被用到。

纯度比照

运用纯度比照的优点是，让页面分清主次。若将比较重要的元素设置为纯度较高的色彩，则能够被人优先留意到。

在纯色调配中，纯度比照越弱，画面冲击力也越弱，画面作用较温文，适合长期和近距离观看；纯度比照越强，画面越明朗富有生气，画面表达越直观。

明度比照

明度比照是指色彩的明暗程度的比照，也指色彩的黑白灰的比照。在心理学中，明度比照也称明暗比照或亮度比照。物体受不同明度布景的影响，能够发生不同的视觉感触。灰色卡在白色布景下感觉变暗。在黑色布景下，感觉变亮了。

在明度比照中，黑色和白色是最强的比照组合，而黑色与深灰色、白色与浅灰色是较弱的比照组合。在同一色相、同一纯度的色彩中混入的黑色越多，明度就越低；在同一色相、同一纯度的色彩中混入的白色越多，明度就越高。利用明度比照，可展示出色彩的前后空间感、画面的层次感、体积感等。

明度比照合理，能够让信息层级展示更明晰和直观，提高用户的阅读功率和愉悦感。

视觉设计心理学，明度越低的物体越往后，明度越高的物体越靠前。在进行界面设计时，一般不能将深色卡片悬浮在浅色布景上，不契合用户的视觉体会设计习气。

面积比照

蓝色和黄色 1:1 的调配，视觉感官不舒畅。但是大面积的蓝色配一点黄色，就会有不错的视觉作用。

色彩调配时，调整出合理的色彩面积比。色彩上的层次感，添加了节奏感，给用户带来画面的视觉冲击感。

界面设计中的用色，运用精约设计的风格，文字运用无五颜六色，要点的按钮等运用有五颜六色设计。

配色时，只需求侧重考虑-不同色相的面积比照就能够了。

冷色与暖色的运用

在界面设计中，冷色会让用户发生安静、安全、高科技的感触，因而在人工智能和交际类产品的界面设计中较常用。暖色会让用户发生活泼、喜庆、美食的感触，因而在美食类、母婴类等产品界面设计中常用。电商类 App界面 中运用的暖橙色给界面营建出一种活泼、生动和欢乐的视觉气氛。东西类 App 界面中运用的蓝色给界面营建出一种镇定的视觉气氛感，是一种配色的设计规则。