上次分享了《一切為了程序猿！詳析手機(jī)端的8PX原理》后，Akanelee 妹紙?zhí)氐靥嵝研【幱泻罄m(xù)文，謝謝！ ^_^

妹紙是中國(guó)臺(tái)灣設(shè)計(jì)師，分享的文章都是干貨滿滿的。

《中國(guó)臺(tái)灣設(shè)計(jì)師吐槽：我們的UI到底怎么了？》
《找工作必備！教你一眼識(shí)穿招聘公司有木有坑》
《"沒(méi)有它我就不會(huì)切圖！"省時(shí)省力的切圖神器SLICY下載》

8px那篇引起很多回應(yīng)，我想這要從幾個(gè)角度來(lái)解釋。UI 口中的「糊」和 RD 眼里的「糊」是有差別的。圖片會(huì)糊的原因分成幾種：

1. 小圖放大會(huì)糊。< 這是廢話，BJ4。
2. 大圖縮小會(huì)糊。< 一定有人想問(wèn)為什么。
3. 就算是向量檔，只要像素沒(méi)有對(duì)齊一樣會(huì)糊。
4. PX 非整數(shù)。< Pixel 沒(méi)有0.x 這種數(shù)值。

大圖縮小會(huì)糊

這只老鼠的照片，縮小后屁股那邊的毛色就糊成一團(tuán)了。這就是為什么 Desktop icon 在制作上會(huì)建議不要放文字、圖片越簡(jiǎn)單干凈越好。512px 的精致設(shè)計(jì)到了72px 就什么也不剩了。

比如這張唱片好了，非常漂亮，很多的細(xì)節(jié)，縮小之后文字上的紋路糊了、左下方的字也看不清楚，背景的人像硬幣也只剩色塊，細(xì)節(jié)通通不見(jiàn)了。這也是一種模糊的方式。

畫(huà)向量會(huì)糊

我的 BLOG 讀者應(yīng)該是 RD 人數(shù)比較多，所以這部份相信你們很少接觸。（連很多 UI 都沒(méi)留意到這個(gè)問(wèn)題了）。即使是用向量制圖還是會(huì)糊的！舉個(gè)例子：

可以看到左邊那個(gè)矩型好像有長(zhǎng)毛邊、右邊那個(gè)邊緣銳利。

左右兩個(gè)矩形其實(shí)是同一個(gè)，只差在有沒(méi)有對(duì)齊像素網(wǎng)格線而已。

要保持向量圖的銳利邊緣，可以這樣設(shè)定：Photoshop > 偏好設(shè)定 > 接口。

只要是形狀圖層，記得一定要把對(duì)齊邊緣勾起來(lái)。就算是從 illustrator 貼過(guò)來(lái)的也要勾，會(huì)明顯看到邊緣變干凈了。

這種糊在畫(huà)大圖的時(shí)候不怎么明顯，一切圖下去就容易在小尺寸的 icon 上出現(xiàn)問(wèn)題。所以做小圖放大最安全，但做大圖再縮小畫(huà)面精致，看要怎么取舍了。

Web 上要用 8px 進(jìn)行設(shè)計(jì)的條件

8px 的文章很多人問(wèn)我為什么不是 Web，8px 設(shè)計(jì)法是為了解決「圖片會(huì)糊」的問(wèn)題，基于 web、8px 這兩點(diǎn)為前提做出說(shuō)明。

如果在 640px 屏幕上變動(dòng)寬度的方式放上 4px 的圖，他需要占畫(huà)面寬的 0.625%，所以在 240px 屏幕的情況下該圖片的寬度就會(huì)變成是 1.5px。但 1.5px 不存在，所以表現(xiàn)出來(lái)一定是 1px 或 2px，造成模糊。這就是 8px 設(shè)計(jì)想要避免的狀況。

但在 8px 設(shè)計(jì)法在 reponsive design 實(shí)務(wù)上會(huì)遇到困難。在 web 上的圖片有兩種型式，固定呎吋和變動(dòng)呎吋。固定呎吋就不用提了，屏幕呎吋再怎么變他就是這么大。但變動(dòng)呎吋是跟著父元素的大小變化，如果說(shuō)這其中參雜著固定呎吋的設(shè)定就會(huì)產(chǎn)生問(wèn)題。

舉例來(lái)說(shuō)，在 640px 的 HTML 里放一個(gè) div，padding 設(shè)左右 8px，里面再放一個(gè) div，并在此 div 內(nèi)放上一張寬 100% 的圖片。所以該圖片在 640px 下的寬度會(huì)是 624px，但在 HTML 寬度變成 240px 的情況下時(shí)就會(huì)變成 224px。從 8px 設(shè)計(jì)的概念來(lái)看，624px 是 8px (640px 的基數(shù)) 的倍數(shù)沒(méi)錯(cuò)，但 224px 并不是 3px (240px 的基數(shù)) 的倍數(shù)，這就違反了該設(shè)計(jì)的原則了。

簡(jiǎn)單說(shuō)，在 responsive web 上要用 8px 為單位做圖不是不行。但條件是所有的 margin, border, padding, width, height 全都得用 % 去設(shè)，而且 % 也得算的剛好，不然也會(huì)破功。

（此部份感謝老公說(shuō)明：8px 用在 Web 設(shè)計(jì)上...何苦呢...）

App

iOS 注意雙數(shù)問(wèn)題、注意像素對(duì)齊，基本上不太會(huì)糊。Android 比較麻煩，切圖前請(qǐng)向你家 RD 詢問(wèn)如何切圖及標(biāo)示文件怎么標(biāo)，做9-patch的話、底圖和文字是不是要分開(kāi)切？圖片是要用固定 px 還是算等份之類(lèi)通通問(wèn)清楚做筆記。注意因應(yīng)屏幕尺寸產(chǎn)出的各種切圖清晰度，或干脆產(chǎn)出 3 套不同尺寸的 psd 檔、各別調(diào)整后再切圖。

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量68萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：