8px那篇引起很多回應，我想這要從幾個角度來解釋。UI 口中的「糊」和 RD 眼裡的「糊」是有差的。圖片會糊的原因分成幾種：
- 小圖放大會糊。< 這是廢話，BJ4。
- 大圖縮小會糊。< 一定有人想問為什麼。
- 就算是向量檔，只要像素沒有對齊一樣會糊。
- PX 非整數。< Pixel 沒有0.x 這種數值。
大圖縮小會糊
最上方那隻老鼠的照片，縮小後屁股那邊的毛色就糊成一團了。這就是為什麼 Desktop icon 在製作上會建議不要放文字、圖片越簡單乾淨越好。512px 的精緻設計到了72px 就什麼也不剩了。
比如這張唱片好了，非常漂亮，很多的細節，縮小之後文字上的紋路糊了、左下方的字也看不清楚，背景的人像硬幣也只剩色塊，細節通通不見了。這也是一種模糊的方式。
圖片取自：http://en.wikipedia.org/wiki/Born_and_Raised_(John_Mayer_album)
畫向量會糊
我的 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 檔、各別調整後再切圖。
