UI配色原则

最多使用四种颜色：主色、辅色、底色和强调色

色相配色

以色相环为基础进行思考配色

同一色相配色：色相差为 0
邻近色相配色：色相差为 1
类似色相配色：色相差为 2
中差色相配色：色相差为 3~5
对照色相配色：色相差为 6-7
补色色相配色：色相差为8

类似的颜色进行配色：稳静而统一
距离远的颜色进行配色：一定的对比效果

色调配色

同一色调配色：将相同色屌的不同颜色搭配在一起形成的一种配色关系
类似色调配色：就是将色调图中相邻或接近的两个或两个以上色调搭配在一起的配色
对照色调配色：相隔较远的两个或两个以上的色调搭配在一起的配色

明度配色

相同明度配色：高配高、中配中、低配低
略微不同明度配色：高配中、中配低
对照明度配色：高配低

纯度配色

相同纯度配色：高配高、中配中、低配低
略微不同纯度配色：高配中、中配低
变化纯度配色：高配低

其他配色方法

渐变配色：色相、明度、纯度、色调分阶段有规律的变化。可以看到顺序的配色、表现韵律的效果
强调配色：在淡色配色中、少量的加入一些对比色彩、使它成为焦点、从而使整个画面更引人瞩目
分离配色：在两个颜色或多个颜色之间加入其它颜色，可以缓和强烈的配色冲突或改变模糊的配色关系，起分离作用的颜色具有辅助作用
反复配色：运用两个以上色彩、按一定只需排列、从而增加色彩的调和感
自然配色：一个颜色明度增加向黄色方向靠近、另一个颜色明度降低向蓝色方向靠近
人工配色：表现一种非调和的关系，也被成为不调和的调和配色或者人工配色

色彩原理

色彩的分类

无彩色

黑、白、不通程度的灰色

有彩色

以红橙黄绿蓝靛紫为基本色，按不同比例混合产出的千万种色彩

色彩的三个属性

色相：色彩的相貌
明度：色彩的明暗程度
纯度/饱和度：色彩的鲜艳程度

色彩体系

孟塞尔体系：孟塞尔色环，孟塞尔色立体
CSS体系：色调图

色彩模式

RGB模式：red,green,blue

CMYK模式：

C-cyan-湛蓝
M-megenta-洋红色
Y-yellow-黄色
K-keyplate-定位套版色-黑色

像素和分辨率

像素（图像元素 pixel,px）

屏幕中最小的（纯色）点，作为基本单位来记录图像。

分辨率

显示/屏幕分辨率（dpi）:

屏幕图像的精密度，也就是显示器所能显示的像素有多少
屏幕分辨率越高，所呈现的色彩越多，清晰度越高

图像分辨率(ppi):

是指每英寸图像内的像素点
分辨率越高，像素点的密度越高，图像越逼真

像素和分辨率的关系

像素（个数） = 分辨率 x 英寸

A4 : 297mm x 210mm = 11.69英寸 x8.27英寸

长： 11.69 x 300ppi = 3507（px）

宽： 8.27 x 300ppi = 2481(px)

Web常用尺寸

UI 设计分辨率 72ppi

分辨率 = 屏幕x轴上的像素值 x Y轴上的像素值

目前普遍最小的电脑显示器分辨率： 1024px * 768px

内容长度无限制，宽度 <= 1024px,常用1000px、980px、960px、940px

8pt <= 内容字号 <= 14pt

纸媒常用尺寸

分辨率 300ppi.

巨型喷绘可适当降低至150ppi 及其他

位图和矢量图

位图和矢量图的定义

位图（点阵图）：由一个个像素点排列而成。

利于显示色彩层次丰富的写实图像
文件较大，发达和缩小图像会失真

矢量图：绘图图像由基本元素组成，一系列由线连接的点

文件相对较小，并且放大缩小不会失真
很难表现自然度高的写实图像

手机和网页上能看到的图像都是位图

常见的图片格式

位图：

JPG	PNG	TIF	GIF	BMP
有损压缩	无损压缩	支持图层	支持全透明	除色彩分辨率可选外，不采用压缩
	支持全/半透明	支持全透明	支持动画
		文件很大
常用于展示	UI设计常用格式	常用与印刷	简单的动图	图像资料不丢失

矢量图：

AI ： Adobe lllustrator文件保存格式
CDR : CorelDraw 文件保存格式

JPG和PNG

JPG：

适合显示颜色很多，构成很复杂的图像
图像大小可控制
压缩会使图像质量下降,每次编辑每次下降

PNG

无损压缩
图案颜色层次丰富
保存简单的图像，将其应用于UI设计中

PNG8 和 PNG24

PNG8

256色
1位布尔透明：全透明或者不透明

PNG24

1600W+ 色
8位布尔透明：256个层级的透明

图片和参数设置

颜色表类型：

可感知，可选择、随样性

仿色：模拟计算机的颜色显示系统中未提供的颜色方法

扩散
图像
杂色