1.2　UI界面设计中的图像

在UI界面设计中，人们总会与各种各样的图像打交道，这些图像来自不同的渠道，它们的颜色、格式、大小、用途都不尽相同。本节将会介绍一些常用的数字化图像的知识，帮助大家在学习和工作中可以准确地使用不同格式的图像。

1.2.1　常见的图像格式

图像的格式非常多，不同的图像存储格式各有利弊。在实际的UI界面设计工作中，用户应该根据图像的具体用途选择合适的图像存储格式。如图1-14所示为不同的图像格式，下面将对常用的图像格式进行简单介绍。

●JPEG格式

JPEG格式是目前最常使用的存储格式，这种格式也是保障优质照片质量的压缩格式，是目前所有图像格式中压缩率最高的，所以这种格式的文件体积极小。

JPEG格式会丢失一些数据，保存后的照片品质会有所降低，但是人眼难以分辨，所以在一般情况下并不会影响浏览效果。在UI界面设计中，一些不透底的素材图像可以保存为JPEG格式。

●PNG格式

PNG格式主要应用于网络图像，可以保存24位真彩图像，并且支持透明背景和消除锯齿功能，它还可以在不失真的情况下压缩保存图像。所以，PNG格式是UI界面设计中最常使用的图像格式。

●GIF格式

GIF格式使用的压缩方式会将图像压缩得很小，非常利于在互联网上进行传输，此外它还支持以动画方式存储图像，所以GIF图像常常被用在广告宣传上。

GIF格式只支持256种颜色，而且压缩率较高，在存储颜色线条较简单的图像时非常有优势。

●BMP格式

BMP格式最早应用于微软公司的Windows操作系统，是一种Windows标准的位图图形文件格式。这种格式几乎不压缩图像数据，图片质量较高，但文件体积也相对较大。

●TIFF格式

TIFF格式便于在应用程序和计算机平台之间进行数据交换，是一种灵活的图像格式。这种图像格式是非破坏性的存储格式，占用的存储空间较大。如果图像需要出版印刷，建议存储为该种格式。

1.2.2　常见的图像类型

在常用的Photoshop软件中，“图像模式”和“颜色模式”是一个概念。Photoshop中共有九种颜色模式，包括RGB模式、CMYK模式、Lab模式、HSB模式、位图模式、灰度模式、多通道模式、双色调模式和索引颜色模式。下面为大家讲解设计师们常用的几种模式。

●RGB模式

RGB模式是数码图像中重要的颜色模式，同时也是UI界面设计中经常使用的颜色模式。

RGB模式为24位颜色深度，该模式的图像有红、绿、蓝三个颜色通道，每个通道都有八位深度，三个通道合在一起可生成1 677万种颜色，被称为“真彩色”。如图1-15所示为RGB颜色模式图像及其“通道”面板。

●CMYK模式

CMYK模式是用来打印或印刷的模式，这种格式的图像有青、洋红、黄、黑四个颜色通道，但是Photoshop的很多功能不支持CMYK模式。

RGB模式的色域范围比CMYK模式大，印刷颜料在印刷过程中不能重现RGB色彩。如图1-16所示为CMYK颜色模式图像及其“通道”面板。

●Lab模式

Lab模式的图像同样拥有三个通道：一个亮度通道L和两个颜色分量通道a和b。Lab模式是色域范围最广的颜色模式。

●灰度模式

灰度模式是八位深度的图像模式，在全黑和全白之间插有254个灰度等级的颜色来描绘灰度模式的图像。所有模式的图像都能转换成灰度模式，甚至位图也可转换为灰度模式。Photoshop几乎所有的功能都支持灰度模式。