8px那篇引起很多回應,我想這要從幾個角度來解釋。UI 口中的「糊」和 RD 眼裡的「糊」是有差的。圖片會糊的原因分成幾種:

  1. 小圖放大會糊。< 這是廢話,BJ4。
  2. 大圖縮小會糊。< 一定有人想問為什麼。
  3. 就算是向量檔,只要像素沒有對齊一樣會糊。
  4. PX 非整數。< Pixel 沒有0.x 這種數值。

大圖縮小會糊

最上方那隻老鼠的照片,縮小後屁股那邊的毛色就糊成一團了。這就是為什麼 Desktop icon 在製作上會建議不要放文字、圖片越簡單乾淨越好。512px 的精緻設計到了72px 就什麼也不剩了。

比如這張唱片好了,非常漂亮,很多的細節,縮小之後文字上的紋路糊了、左下方的字也看不清楚,背景的人像硬幣也只剩色塊,細節通通不見了。這也是一種模糊的方式。 圖片取自:http://en.wikipedia.org/wiki/Born_andRaised(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 檔、各別調整後再切圖。

comments powered by Disqus