hello，大家好！我是『小河马的精分爸爸』

为什么写这个，真的很惊喜，前几天我为数不多的粉丝里面有人问我一开始是做什么的，我说最早在4A干美术指导，就广告这个行业你所需要涉及的知识面是非常广的，所以后来就什么都知道一点，粉丝刚好也是一个设计师，就问我能不能分享一下；其实除了设计之外，可以给大家分享的事情非常多；因为我们需要拍广告么，拍之前就需要先对这个产品乃至这个行业非常的了解，才能有好的创意出来去打动消费者；

好了言归正传，这是一个系列的【干货教程】看完应该可以帮助你在UI设计的路上更近一步！整个教程的内容大致分四个板块；

市面上很多付费的培训班讲来讲去其实也就是这些内容，建议收藏了认真看哦！

基础能力

用户界面的变迁

UI设计是一个很大的设计门类，是基于用户体验为主的一门设计学科，我们所讲的UI设计更多的是指GUI，也就是用户界面设计，重点在于信息准确、清晰、有效的视觉传达。

基于文字的用户界面

1973年 施乐奥拖个人电脑

1983年 APPLE LISA

用户界面是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。用户界面介于用户与硬件之间，为彼此之间的交互沟通而设计的，可以使用户能够方便有效地去操作硬件以达成双向交互，完成所希望的工作，用户界面定义广泛，包含了人机交互与图形用户界面，凡参与人类与机械的信息交流的领域都存在着用户界面。这里提到的概念，人机交互与图形用户界面，其实都是属于用户界面的范畴内；

UI设计与用户体验的关系范畴

在任何的设计范畴内，大家都会提到用户体验，用户体验是一个庞大的体系，关户在使用过程中的每一个细节感受，体验其实也就是一系列感官的综合；这一张图应该很能说明UI跟整个用户体验之间的关系；

图片格式

其实所有的图片都可以划分到两种类别里面，位图、矢量图；

位图：由一组像素或者单个块在一起生成的图像，这就好像是一幅大型拼图，每一个块都是一个纯色的像素点；（像素的质量决定了图片的质量，放大或缩小时，图片会发生损伤）

网上的图片大多数都是位图格式；

矢量图：更灵活，是通过数学公式计算获得，而不是使用像素拼成的；

可以在不影响图片质量的前提下，随意的调整大小尺寸；

在图片压缩方面，所有的图片又可以分为两种：

有损：有损压缩方法是把原始数据进行压缩，然后解压，解压后的数据虽然与原始数据不同，但是非常接近，它主要是将一些次要的信息数据给压缩掉，牺牲一些质量来减少数据的大小，从而是压缩比提高；无损：无损压缩会真实的记录图像上的每一个像素点的数据信息，但为了压缩图像，往往会采取一些特殊的算法；

JGP：全程JPEG，以24位颜色存储单个位图，可压缩。储存空间与图像质量兼得，色彩信息保留较好！

优势：

由于采用直接色，JPEG可以使用的颜色有1600万种，而人眼可以识别的颜色数量也不过1万多种；

这种格式是现在为止被使用最大的图片格式；

能够兼容大多数的操作系统以及图片软件，也很容易被打开编辑；

几乎大部分的相机使用的都是JPEG格式；

劣势：

压缩时会去掉一部分图片的原始信息；

压缩后图片可能会发生一定的变化；

不能显示动效与透明效果；

不适合用来存储企业logo、线框类的图；

PNG：是一种文件小、图像失真少、带透明通道的位图格式，是图标输出的首选；

优势：

开放格式；

可使用的颜色也有1600万种；

无损压缩；

对于图片编辑来说，PNG可以说是所有格式中最好的图片格式选择了；

与GIF格式相比占用的空间更小；

支持更好的透明度；

劣势：

对于需要高保真的较复杂的图像，png虽然能无损压缩，但图片文件较大，不适合应用在WEB页面上；

无法支持动画；

不适用与所有浏览器；

GIF：连续色调的无损压缩格式，可储存多幅图片组成的简单动画，唯一不好的一点就是颜色太多的话比较容易失真；

优势：

支持透明的图片；

显示适度的动效；

无损的图片压缩；

适用于对色彩有严格要求的图片；

劣势：

图片的色彩数量限制在256种；

与其他图片格式相比，可能会被认为有点过时；

SVG：是带有图形原始节点信息的源码格式，可作为矢量图形输出及使用，也可以直接使用源代码生成图形，一般在具体项目开发过程中根据需求来输出；这种格式可以存储你设计的激动人心、高分辨率的WEB图形页面，而且在生成高质量的静态或动态动画图形时，它们的尺寸可以随意变化，不会失真；

TIFF：可以编辑然后重新存储而不会有压缩损失；

优势：

位图格式之王；

非常灵活的图片压缩形式，可以是有损或者无损；

它是印刷图片成品的最佳选择之一；

支持非失真压缩与CMYK四色分色，适合用来存储照片、画作等；

保存带有图层的文件；

方便使用于各种需求中，包括处理页面布局、张贴和图片编辑；

劣势：

文件占用的空间特别大；

传输时间比较长；

不适合网络分享传播；

有多重类型的TIFF文件，但是没有一个阅读器可以扫描和读取所有的文件；

PSD：基于位图工作文件的编辑，可包含多图层；

PDF：可保留源文件的文字格式、颜色和图形，最常用于打印；最主要的是兼容所有的操作系统和应用程序；

INDD：支持大量多页面排版工作；

AI：基于矢量工作文件，可以任意缩放不影响清晰度；

除了上面这些之外还有一些图片格式

RAW：记录了数码相机传感器的原始信息，同时记录了由相机拍摄所产生的的一些元数据，RAW的中文是“原材料”“未经处理的东西”，由于每一个相机厂商生产的相机设备不一样，所以各相机所存储的RAW文件结构略有不同，而且这种格式占用的空间也别大，因为里面有很多的未压缩的原始数据，所以通常在编辑图片之前就会转换成TIFF格式；

BMP（Bitmap）：这是一种Windows自带的图片格式，这种格式的图片未经压缩，而且占用的空间同样很大，但是这种格式存储的图片拥有高质量的色彩，被称为绘画图像，这种格式其实一点不友好，现在只局限于Windows的程序使用；

EPS：一种矢量格式，能够比较方便的转到不同程序中进行图片处理，很受欢迎的一种打印格式；

见过最不靠谱的来面试的UI的是设计师，平面转UI的，设计的所有图片都是存JPEG，好多次色彩模式还是CMYK，弄个banner存个几百兆！真的是头大！

OK，图片格式就这么多了！下一期给大家详述一下UI设计师的方法论，5W1H具体要怎么用！

ps：十年广告行业摸爬滚打，现在全职带娃，每天分享各种行业知识，育儿日常；帮助大家快乐育儿，带娃不寂寞——欢迎点赞、关注和转发；想了解什么留言告诉我！