UI设计 认识色彩

一、认识色彩

1.主体色（主色）

主色是决定画面风格趋向的色彩，主色可能是多种颜色。主色一般在界面的LOGO和视觉面积比较大的导航栏上使用。主色的选择过程称为定色调，它的成败不仅影响到界面视觉传达的效果，也会影响到网站使用者的情绪。因此确定主色调是色彩设计非常关键的一步。

2.辅助色

辅助色主要作用是辅助主色，使画面更完美丰富。辅助色一般在网站的各种组件、图标和插图上使用。

3.点睛色

点睛色是指色彩组合中占据面积小，视觉效果比较醒目的颜色。点睛色主要在一些提示性的小图标，或者需要突出的图形中使用。

初识RGB与HSB

RGB色彩模式是一种颜色标准，是通过对红（R）、绿（G）、蓝（B）三个颜色通道的变化以及它们相互之间的叠加来得到各种颜色。RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

HSB色彩模式是通过色相、饱和度和明度三个元素来表达颜色的。

1.色相（Hues）
指色彩的相貌，用来区分不同的颜色，我们说这是一个紫色，指的就是色相。下图是最基本的色相，有红橙黄绿青蓝紫。

2.饱和度（Saturation）
指色彩的鲜艳程度。我们说这个颜色好艳，就是指这个颜色的饱和度很高

3.明度（Brightness）
指色彩的明暗度，即深浅程度。色彩越接近黑色明度越低，越接近白色明度越高。我们说这个颜色好亮，就是指这个颜色的明度很高。

三、颜色搭配基础

1.色环

色环其实就是在彩色光谱中所见的长条形的色彩序列，只是将首尾连在一起，使红色链接到另一端的紫色。色环通常包括12种不同的颜色。

2.互补色

在色环中相对的颜色就是互补色。如红色的互补色是青色，绿色的互补色是品红色。

3.三色搭配原则
三色搭配原则是指一个设计作品中，单个界面的颜色应该保持在三种以内。这里的颜色是指色相，就是HSB色值中的H值。界面中色相不要超过三种，超过三种会觉得界面眼花缭乱。

二、颜色的性格

1.白色

如何选择颜色
白色象征纯洁、神圣、善良、信任与开放，但网站中白色面积太大，会给人疏离、梦幻的感觉。在一些文艺范的网站中，会使用白色作为主色，以及配合大量的留白，体现一种格调的感觉。
白色在东方也意味着死亡，所以某些场合要慎用。

旅游、文艺的博客、

2.蓝色
蓝色是灵性和知性兼具的色彩，在色彩心理学的测试中发现计划没有人对蓝色反感。明亮的天空蓝，象征希望、理想和独立；暗沉的蓝，意味着诚实、信赖和权威。正蓝、宝蓝在热情中带着坚定与智能；淡蓝、粉蓝可以让自己、也让对方完全放松。蓝色无论在美术设计中，还是在网站和APP的设计中，都是使用最广泛的颜色之一。

海关、政府、知乎

3.红色
红色象征热情、性感、权威和自信，是一种能量充沛的色彩。这种色彩充满了自信，全然地要别人注意你。不过也会给别人血腥、暴力的印象，容易造成心理压力。在一些需要烘托热烈气氛的网站和APP中可以考虑使用红色。

4.橙色
橙色给人亲切、坦率、开朗和健康的感觉，有阳光一般的热情。橙色的快乐和活力可以很好地表现激情和参与的理念。想想芬达的广告是不是充满了健康阳光且具有活力。所以橙色可以应用在从事社会服务工作等专业类的网站和应用中，另外电商类网站和应用也是非常青睐橙色系，希望激起人们的购物欲望。

5.黄色

黄色是明度极高的颜色，能刺激大脑与焦虑有关的区域，具有警告的效果。艳黄色象征信心、聪明和希望；淡黄色显得天真、浪漫和娇嫩。虽然各种黄色色调并不十分有魅力，但其明亮和愉快的特质能向潜在的用户传递一些温暖和乐观。黄色是一种非常难于处理的颜色，黄色在明度较低的时候会显得很脏，所以慎用黄色。

6.绿色

绿色给人无限的安全感受，象征自由和平、新鲜和舒适。黄绿色给人清新、有活力、快乐的感受；明度较低的草绿、墨绿和橄榄绿则给人沉稳、知性的印象。所以绿色可以使用在安全杀毒类的电脑应用和APP，也可以使用在环保、健康类的网站和APP中。

7.粉红色

黑色象征权威、高雅、低调和创意，也意味着执着、冷漠和防御。当你设计的行业网站或应用需要极度权威及表现专业时，可以选择使用黑色座位主色。黑色也意味着高端、品味优雅，所以奢侈品电商网站和应用也可以选用黑色。当然在西方黑色也会被解读与死亡、病态和邪恶等意味，所以尽量避免黑色用于健康医疗相关的界面设计。

9.灰色
灰色象征诚恳、沉稳、和考究。其中的铁灰、炭灰、暗灰，在无形中散发出智能、成功及强烈权威等信息，中灰与淡灰色则带有哲学家的沉静，特别受金融业人士喜爱；当你需要体现智能、成功、权威、诚恳、认真和沉稳等性格时，可以使用灰色。

为什么选择HSB？

在界面设计中，需要有规律地调节一组颜色时，通过HSB会更加直观。通过HSB的数值可以知道他们是同一种色相，明度和饱和度有变化，而通过RGB的数值则无法快速分辨。我们在界面设计的时候使用颜色也是如此，经常会使用微弱的渐变色去构成界面。设计组件的时候，可以保持色相H值不变，有规律地调整饱和度S、明度B即可。

另外，HSB也是重要的颜色观察方式。如图所示灰度色板，色值分别是#333333、#666666、#999999、#cccccc。
是不是觉得一长串字幕挺杂挺难记的，换算成HSB值分别为
H0 S0 B20、H0 S0 B40、H0 S0 B60、H0 S0 B80。
这样就简单多了，我们只需要记住B值的变化即可。

二、创建调色板

如何创建调色板？

一个完整的调色板，应包含主色、辅助色、点睛色和灰度色。主色一般选用品牌LOGO的主色。我们以下图为例，使用主色为红色的调色板。我们先添加一个补色，之前在颜色搭配基础中有介绍过，辅助色一般是在色相环中增加或减少30°处的颜色，而实际应用中辅助色一般是在主色上加减35°到50°的色相环。我们再添加一个对比色。对比色一般在色相环中增加或减少180°的位置，实际应用中我们取对比色，色相差一般为主色加减180°到200°都可以。对比色与主色对比强烈，所以使用场景比较少。

1.中性色：灰度色

alt+backspace：前景色
ctrl+空格：中英文切换