一 色彩的基础知识

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

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

　　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 设计、卡片等设计元素构成的。在设计界面时，借助色彩能够直观的展示布景色、导航栏、状态栏和操作按钮等构成的设计元素，并让产品设计的界面的逻辑架构和信息层级得到很好的展示。

　　明确视觉层级联系

　　产品界面设计中，不同的内容应该出现出不同的层级联系。例如，使命与背包间的同级联系，蚂蚁森林与内容间的丛属联系等。

　　利用同色系、色彩之间的色相差异可十分直观的区别内容的层级联系，一起还能够经过色彩间的强比照杰出关键内容。如图所示，蚂蚁森林经过色彩的强弱区别视觉层级，绿色在视觉上层级最高，重要按钮与文字运用绿色，能够让画面内容的层级联系更明晰明确。

　　杰出产品风格

　　色彩的调配能够直接反映出这种产品的风格和产品特点。例如，金融类 App 界面中常用的蓝色，东西类App 界面中常用的蓝色等。如图所示。左面金融 App 界面中的蓝色与右边美团买菜App界面中的多色图标的设计，都是经过色彩来营建产品气氛的，提高用户体会设计感，展示产品设计中的功用。

　　色彩的比照

　　色相比照

　　（1）同类色比照

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

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

　　（2）互补色比照

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

　　纯度比照

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

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

　　明度比照

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

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

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

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

　　面积比照

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

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

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

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

　　色彩的性情

　　冷色与暖色的运用

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

　　不同色彩赋予产品的不同性情

　　（1） 白色的运用

　　白色代表着纯真、神圣、信赖和安静、朴素、典雅，是一种充溢纯真的色彩。白色被称为无五颜六色，它与任何色彩进行和谐的调配。

　　（2）蓝色的运用

　　蓝色代表着宽广的天空、镇定、诚实、期望与科技、视觉上很舒畅的色彩。蓝色给人自在和安静的感觉。在科技资讯、职场等类别的产品界面设计中运用较多，如：36Kr、钉钉 等东西类产品。

　　（3）赤色的运用

　　赤色标志着热心、喜庆、自信、斗志、能量，是一种充溢能量的色彩，在电商类、新闻资讯类等需求营建活泼气氛的产品界面较常运用。

　　（4）橙色的运用

　　橙色给人感觉很亲切、很有生机。橙色有添加食欲和激发消费愿望的作用，橙色代表着温暖、阳光、健康、欢乐，因而在社会服务类、电商类的产品界面设计中较常运用，如淘宝产品、安全、滴滴出行、大众点评等产品。

　　（5）黄色的运用

　　黄色代表着期望、温暖、青春、生机和乐观，明度高，是一种生机色彩。在旅游类或目标用户为年轻人的产品界面设计中较常运用，如马蜂窝、OFO 共享单车图标、好好学习 等产品设计。

　　（6）绿色的运用

　　绿色代表着健康、安全、生命力、青春，给人一种充溢期望的温文色彩。因而绿色强调安全感。如 拉勾 图标、种子习气、医鹿等产品。

　　（7）紫色的运用

　　“紫色，标志高贵的色彩。略带种忧郁而富有魅力的色彩，代表声望、深入和典雅。中国传统中紫色代表圣人，帝王之气。如北京故宫又称为“紫禁城”。这都是源于古代对北极星的崇拜。在西方，紫色亦代表显贵，常成为贵族所爱用的色彩。这源于古罗马帝国蒂尔人，常用的紫色染料仅供贵族穿着。”

　　界面设计中，紫色由温暖的赤色和镇定的蓝色混合而成的色彩，是极佳的影响色。网页运用紫色为主色彩，魅力十足，十分契合这个网页设计的定位。