新手学习UI设计一定要了解这些内容

有人把设计师的工作比作戴着镣铐起舞，说的就是设计师要在各种严格的规范之下做出美观、易用的设计方案来。UI 设计师更是亦然，移动互联网时代，又要求 UI 设计师把手掌大小的方寸之地作为自己的主战场施展自己的创意和才华。

这并不是一件简单的事情，在对显示设备了解不深的情况下，仅仅靠用户视角，很难做出一套真正意义上的 UI 设计方案。这里小编给大家整理了一些UI 设计师必须要懂得的基础常识，涉及到现在的主流显示设备常识，色彩常识和现在主流的设计模式，建议直接收藏~

作为UI设计师，首先要了解UI 设计单位（像素&分辨率）

1.像素（pixel,缩写 px）

是指在由一个数字序列表示的图像中的一个最小单位，称为像素。像素仅仅只是分辨率的尺寸单位，而不是画质。

2.dp: dip

Density-independent pixel（密度无关像素），是安卓开发用的长度单位，1dp 表示在屏幕像素点密度为 160ppi 时 1px 长度。

3.pt：point 点

印刷行业常用单位，是一个量度单位，表示一个点，是屏幕的一个物理长度，等于 1/72 英寸。

4.分辨率

PPI：像素每英寸。更多用于显示领域

DPI：点每英寸。更多用于打印、印刷领域

分辨率指单位长度内像素点的数量，它的单位通常为像素/英寸（ppi）。例如 72ppi 表示 1 英寸包含 72 个像素点，300 ppi 表示每英寸含 300 个像素点。分辨率决定了位图细节的精细程度，通常情况下，分辨率越高包含的像素就越高，图像就越清晰。

这也就是为什么当下很多屏幕都是高清屏幕、视网膜屏，图像显示效果非常优越。

其次，作为UI设计师，一定要有一定的色彩基础及常见的图片格式，这里也给大家整理了一些基础内容：

1. 颜色的三要素

色相

是指色彩的相貌，色相被用来区分颜色，根据光的不同波长，色彩具有红色、黄色或绿色等性质，这被称之为色相。

明度

是色彩从亮到暗的明暗程度，黑色的绝对明度被定义为 0 （理想黑）,而白色的绝对明度被定义为 100 （理想白），其他系列灰色则介于两者之间。

纯度

纯度通常是指色彩的鲜艳度。从科学的角度看，一种颜色的鲜艳度取决于这一色相发射光的单一程度。色彩的纯度强弱，是指色相感觉明确或含糊、鲜艳或混浊的程度。

2. 色彩模式

HSB ：在 HSB 模式中，H（Hues）表示色相，S（Saturation）表示饱和度，B（Brightness）表示亮度。

RGB ：三原色红、绿、蓝叠加最终为白色（加色模式）。常用于光源光情况下，例如显示屏幕。

CMYK：三基色洋红、黄、青叠加最终为黑色（减色模式）。常用于反射光情况下，例如印刷。

LAB ：LAB 色彩模型是由亮度（L）和有关色彩的 A，B 三个要素组成。L 表示亮度（Luminosity），A 表示从洋红色至绿色的范围，B表示从黄色至蓝色的范围。

3.常见的图像格式

JPG：以 24 位颜色存储单个位图，能够在提供良好的压缩性能的同时，具有比较好的图片质量，应用非常广泛。

PNG：是一种无损压缩位图图形形式，最常见的是 PNG 32 格式，包括 8 位 Alpha 通道，可用于边缘平滑背景透明的图像。

GIF：连续色调的无损压缩格式，最多只支持 256 色，可存储多幅图片组成的简单动画。

SVG：是带有图形原始节点信息的源代码格式，可作为矢量图形输出及使用，也可以直接使用源代码生成图形。

4.矢量图和位图

矢量图：基于计算机指令模拟的⼀系列点、线、面组成的图，放大缩小均不会失真。常见的字体文件、AI 文件，都属于矢量图形。常见矢量图格式：dwg、svg、ai、dxf 等。

位图：像素点阵构成，色彩丰富，层级多变。多数情况下在放大时会出现像素损耗、失真。我们平时拍摄的照片就属于位图。常见位图格式：jpg、bmp、tiff、gif、png 等。