图片格式设计的选择与用户体验.pdfVIP

图片格式设计的选择与用户体验 这是我 10年的时候写的一篇博客，偶尔翻出来，觉得挺好玩的。貌似当时是因为莫名其妙的去看 了jpeg 的压缩算法，但是看的云里雾里。进而想到为啥要出这么多图片的格式呢？他们肯定各有 所长。而在软件开发的时候 B/S 项目用什么格式、 C/S 项目用什么格式、 logo 图片用什么格式、背景 图片用什么格式等等。所以写了一篇文字。今天拿出来，重新编辑一下，不知道各位是怎么想的， 老肥非常恳切的希望与您交流。 要写这个东西，我们先设定一个范围，我们对比就拿常见的 gif 、png 、jpeg 三种格式来说说。 首先我们看一下三种格式的对比。 以上是对于三种常见格式的对比，其实还有 bmp 等格式，但是对于我们在做设计的时候这种格式其 实应用不是特别多，所以暂就不怎么讲了，不过坦率的说这个格式还是不错的，因为这玩意它不压 缩文件，但是比同样的一张图其他格式的大很多，所以在页面上其实用的比较少的。而 jpeg 格式还 有一种 jpg 的写法，很多人都以为这是一回事，不过如果从单纯使用角度也算是一回事，实际上 jpg 是使用 jpeg 文件交换格式存储的编码图像文件扩展名。而 jpeg 是一种压缩标准。 那么明白了这三种格式的定义、优点、缺点，我们什么时候该使用这三种格式的图片呢？ 老肥建议如果你的图片色彩较为单一、只是由色块或者文字组成的时候可以考虑使用 gif ，因为这样 可以减少很大的体积。但是反过来说 png 可以说是 gif 格式的替代品，而且着实表现很优秀。同样的 表现， png 的更小。所以这种情况下你还是能用 png 就别用 gif 了。有人说了，你说这么多废话就直接 说让我们用 png 好了。但是要考虑一点，如果你设计的产品面对的用户他们通常采用的浏览器比较 老套或者一些旧的移动设备，比如非智能机等。或者说图像质量较差的机器。那你还是得用 gif ，因 为这些老物件不支持 png 。gif 最多不会多于 256 种颜色。如果你的图片有很多过渡色、渐变色等依然 得选择 png 。 那jpeg 和 png 对比呢？ jpeg 适合储存有很多颜色的图片，因为通过压缩后可以在网络上较快地加载。那么图片要是含有图 形或者文字的话可以考虑用 png ，反之亦然。否则 jpg 压缩以后就会变得比较模糊。 对于jpeg 其实咱得单独拿出来说说，有些同学可能知道可能不知道，这玩意其实有两种保存方式， 一种是标准型，用鸟语讲就是 Baseline JPEG ，还有一种是渐进型也就是 Progressive JPEG 。这是 一对双胞胎，什么都一样，但是纵使是我们生活中的双胞胎，很多都一样也必然有不一样的地方， 这哥俩不一样的地方就是他 ~ 们~ 的~ 显~ 示~方 ~式 ~ 不~ 同。 标准型的 jpeg 文件存储方式是按照从上到下的扫描方式存储的。每一行顺序的保存在文件中。打开 这个文件的时候，就按照存储时候的顺序从上到下一行一行的显示。直到所有的都打开。所以如果 你的文件很大或者用户网络一般、去想象一下效果吧。其实这种显示方式没啥太大的有点。所以推 荐后者。 而渐进型的是多次扫描。在你打开的时候会先显示整个图片的轮廓。然后多次扫描，图片主见清晰 。这个好处无需多言，同时用户在使用的时候可以根据轮廓大致知道这个图片是什么。如果你的图 片很大，可以考虑用这种。 对比两种方式，看看后者，这样你的用户体验不就提升很多了么？其实只是你保存的时候一个小动 作是不是？但是对于用户来讲，那个体验是什么？前者：什么破玩意啊，半天出不来，要不就是一 条条的，关掉关掉关掉！后者：哎，出来个框了，等一下，越来越清晰，激动啊！而这个，是不是 也和我们在研究用户体验时，跟进度条的道理差不多呢？ 当然如果你的图片是 JPEG 的标准型的话，你想转化成渐进型，可以这样做：在 ps 中打开图片后， 【存储为web 所用格式】，然后勾选【连续】就是渐进型了。 写在最后，其实这篇文章无论你是设计师还是产品