你的图片为什么会“糊”

上次分享了《一切为了程序猿！详析手机端的8PX原理》后，Akanelee 妹纸特地提醒小编有后续文，谢谢！ ^_^

妹纸是中国台湾设计师，分享的文章都是干货满满的。

《中国台湾设计师吐槽：我们的UI到底怎么了？》
《找工作必备！教你一眼识穿招聘公司有木有坑》
《"没有它我就不会切图！"省时省力的切图神器SLICY下载》

8px那篇引起很多回应，我想这要从几个角度来解释。UI 口中的「糊」和 RD 眼里的「糊」是有差别的。图片会糊的原因分成几种：

1. 小图放大会糊。< 这是废话，BJ4。
2. 大图缩小会糊。< 一定有人想问为什么。
3. 就算是向量档，只要像素没有对齐一样会糊。
4. PX 非整数。< Pixel 没有0.x 这种数值。

大图缩小会糊

这只老鼠的照片，缩小后屁股那边的毛色就糊成一团了。这就是为什么 Desktop icon 在制作上会建议不要放文字、图片越简单干净越好。512px 的精致设计到了72px 就什么也不剩了。

比如这张唱片好了，非常漂亮，很多的细节，缩小之后文字上的纹路糊了、左下方的字也看不清楚，背景的人像硬币也只剩色块，细节通通不见了。这也是一种模糊的方式。

画向量会糊

我的 BLOG 读者应该是 RD 人数比较多，所以这部份相信你们很少接触。（连很多 UI 都没留意到这个问题了）。即使是用向量制图还是会糊的！举个例子：

可以看到左边那个矩型好像有长毛边、右边那个边缘锐利。

左右两个矩形其实是同一个，只差在有没有对齐像素网格线而已。

要保持向量图的锐利边缘，可以这样设定：Photoshop > 偏好设定 > 接口。

只要是形状图层，记得一定要把对齐边缘勾起来。就算是从 illustrator 贴过来的也要勾，会明显看到边缘变干净了。

这种糊在画大图的时候不怎么明显，一切图下去就容易在小尺寸的 icon 上出现问题。所以做小图放大最安全，但做大图再缩小画面精致，看要怎么取舍了。

Web 上要用 8px 进行设计的条件

8px 的文章很多人问我为什么不是 Web，8px 设计法是为了解决「图片会糊」的问题，基于 web、8px 这两点为前提做出说明。

如果在 640px 屏幕上变动宽度的方式放上 4px 的图，他需要占画面宽的 0.625%，所以在 240px 屏幕的情况下该图片的宽度就会变成是 1.5px。但 1.5px 不存在，所以表现出来一定是 1px 或 2px，造成模糊。这就是 8px 设计想要避免的状况。

但在 8px 设计法在 reponsive design 实务上会遇到困难。在 web 上的图片有两种型式，固定呎吋和变动呎吋。固定呎吋就不用提了，屏幕呎吋再怎么变他就是这么大。但变动呎吋是跟着父元素的大小变化，如果说这其中参杂着固定呎吋的设定就会产生问题。

举例来说，在 640px 的 HTML 里放一个 div，padding 设左右 8px，里面再放一个 div，并在此 div 内放上一张宽 100% 的图片。所以该图片在 640px 下的宽度会是 624px，但在 HTML 宽度变成 240px 的情况下时就会变成 224px。从 8px 设计的概念来看，624px 是 8px (640px 的基数) 的倍数没错，但 224px 并不是 3px (240px 的基数) 的倍数，这就违反了该设计的原则了。

简单说，在 responsive web 上要用 8px 为单位做图不是不行。但条件是所有的 margin, border, padding, width, height 全都得用 % 去设，而且 % 也得算的刚好，不然也会破功。

（此部份感谢老公说明：8px 用在 Web 设计上...何苦呢...）

App

iOS 注意双数问题、注意像素对齐，基本上不太会糊。Android 比较麻烦，切图前请向你家 RD 询问如何切图及标示文件怎么标，做9-patch的话、底图和文字是不是要分开切？图片是要用固定 px 还是算等份之类通通问清楚做笔记。注意因应屏幕尺寸产出的各种切图清晰度，或干脆产出 3 套不同尺寸的 psd 档、各别调整后再切图。

原文地址：blog.akanelee
作者：Akanelee

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量68万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：