上次分享了《一切為了程序猿！詳析手機端的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】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：