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 設計上&hellip;何苦呢…)

　　App

　　iOS 注意雙數問題、注意像素對齊，基本上不太會糊。Android 比較麻煩，切圖前請向你家 RD 詢問如何切圖及標示文件怎么標，做9-patch的話、底圖和文字是不是要分開切?圖片是要用固定 px 還是算等份之類通通問清楚做筆記。注意因應屏幕尺寸產出的各種切圖清晰度，或干脆產出 3 套不同尺寸的 PSD 檔、各別調整后再切圖。