在众多的 UI 设计规范中，色彩部分的介绍，都必然包含三种类型，分别是：

• 主色：应用的核心色彩，品牌色

• 辅色：丰富页面视觉和传达效果的次要颜色

• 中性：没有色相的文字、背景用色

  

  
  

主色

主色是指产品中的品牌色彩，是整套项目最核心，重要性最高的颜色。在网页中最主要的颜色，包括大面积的背景色、装饰图形颜色等构成视觉中心的颜色。

主色是网页配色的中心色，通常以此为基础搭配其他颜色。

网页主色的选择通常有两种方式：要产生鲜明、生动的效果，则选择与背景色或者辅色呈对比的色彩；要整体协调、稳重，则应该选择与背景色、辅色相近的同色相的颜色或邻近色。

应用的范围：

• LOGO

• 关键按钮

• 选中状态

• 高亮文本、图标

• 标签用色

  
  

辅色

辅色用来在系统中进行强调、标识、区分的彩色系统。视觉重要性和体积次于主色和背景色，常常用于陪衬主色，使主色更加突出。辅色通常应用于网页中较小的元素，如按钮、图标等。

辅色与主色的色相相反，起突出主体的作用。

B 端彩色的搭配原则只有一个，那就是 —— 能省就省。

B 端彩色的搭配设计目的是为了设计一个用来使用的软件系统。——一定是清晰的、高效的、安全的。这是其中设计的三个原色，从视觉方面出发。

B 端项目添加的辅助色类型其实也非常的有限，按寓意划分常见的也就以下几种：

• 正确、通过

• 链接、选中

• 警示、错误

• 提醒、注意

• 失效、未完成

  
  

中性色

中性色：是一套系统中色彩使用的相关灰色，无色相、无冷暖区别。中性色的应用场景一般在在文字、背景、分割线等基础元素中，在视觉层次上比较靠后。

任何完整的 B 端的项目，同一个界面中都包含了多个模块、层级，以及数之不尽的文本字段。在这么多的内容中，我们要根据模块、文字的权重，选择合理的中性色填充。

色彩配色方法

单色系配色法：同⼀个色系内根据颜色的明度和纯度不同去做区分，形成层级关系、对比关系的配色方法。例如：深蓝、天蓝、浅蓝这样的层级变化。

邻近色配色法：相邻的色系进行搭配。例如：黄色、橙色、红色。

对比色配色法：对比的色系进行搭配。例如：黄色、紫色。

色彩心理作用配色

色彩心理作用是指色彩作用与人的情感所产生的心理感受与综合性生理感觉作用。它影响着人们的记忆、感知、联想和情感，刺激着视觉，在设计中有着不可忽视的作用。色彩的直接心理作用对设计有着重大的影响，关系到对用户心理的把握。

色彩心理作用包括色彩的直接心理效应和间接心理效应。

直接心理

色彩的直接心理效应是有色彩本身的属性即色相、明度、纯度等感官印象造成的心理感受。

间接心理

色彩的间接心理效应是由色彩的直观感受反映到大脑所产生的联想效果。

单色配色是什么？

单色配色并非仅仅只有一种颜色，而是指一种色相，以不同的饱和度、不同的明度等组合搭配的结果。

单色UI常常被人们认为是非常经典的UI配色选择，它也是易于创建的U色彩方案。

色彩由色相、饱和度、明度三要素构成，分别对应颜色种类、鲜艳度和颜色的亮暗。

色相：指色彩的外相，是在不同波长的光照射下，人眼所感觉不同的颜色。比如红黄蓝绿青蓝紫等，

饱和度：指的是色彩的鲜艳程度，也称作纯度。

明度：指色彩的明亮程度。色彩的明度有两种情况：一是同一色相不同明度。如同一颜色在强光照射下显得明亮，弱光照射下显得较灰暗;同一颜色加黑以后能产生各种不同的明暗层次。

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！

優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開(kāi)發(fā)）、微信定制開(kāi)發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。