详细解析你的图片为什么会模糊

【 tulaoshi.com - 平面设计 】

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

1. 小图放大会糊。

大图缩小会糊

这只老鼠的照片，缩小后屁股那边的毛色就糊成一团了。这就是为什么 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 档、各别调整后再切图。