【完美的像素】像素決定了一切

對設計師而言,準確地掌握作品最後呈現在觀賞者眼前的效果是控制品質很重要的一個環節,如果是平面設計,從一開始的設計、選紙、打樣調整、輸出…都是為了讓最後呈現出來的作品更貼近原本設計。而在數位化載體上時,最基本單位則變成了為像素,所有影像最後被呈現在顯示器上的時候都被轉換成像素來顯示。

這點在設計製作 UI 介面時特別的重要,UI 介面為了在顯示器上顯示而生,顯示器上的每個像素決定了這些 UI 介面顯示出來的最終結果。換句話說,在 UI介面上,實際上最小的單位就是像素。

這表示即使是放大以及縮小這類簡單的動作都必須格外地小心處理。使用一個最間單的矩形元件,在 Photoshop 中做不同比例的放大後,我們將會得到如下的結果:

由於圖形不論是經過放大還是縮小的處理,最後的圖像都必須對應到像素的格點中,但是並不是每一次的縮放都會準確的對齊在格點上,因此有了 重新取樣 這件事情的發生。實際上在大部分的狀況下, Photoshop 軟體都會自動幫我們選擇最適合的演算法做處理。例如上圖中的 125% 以及 175%的狀況,由於重新取樣的關係、影像變得較為模糊,因此程式在形成模糊狀況的交界處,少量地提高影像的對比度,以降低模糊感。

 即使是最簡單的兩倍縮放,要取得完美的像素也有很多細節要注意:

以開發 iOS APP 的狀況為例,舊款 iDevices 手持裝置的螢幕解析度為 480 x 320,到了 Retina 螢幕則是提高到 960 x 640 的解析度,解析度恰好為兩倍,這當然是蘋果公司刻意設計安排的。最新款的 iPhone5 則是使用了 1136 x 640 的解析度,但由於帶來的只有長邊的改變,實際上影響的只有畫面顯示內容的多寡,畫面上的元件並不需要因此改變比例或解析度,因此在接下來將不特別提出討論。

由於新螢幕解析度提昇了,UI 設計師必須為不同機型提供不同的圖檔以適應需求,最保險的解決方式是依舊繪製 320 x 480 的圖像,然後在使用不使用重新取樣的狀況做下等比例放大,但此種作法很明顯就失去了 Retina 的優勢,畫面將會缺乏細節:

 

以設計師的角度來思考,當然就是選擇先繪製 Retina 解析度的圖像,再等比例縮小以提供低解析度狀況的需求。但是當你在高解析度圖檔中繪製例如 1px 細節的部分時,就會遇到必須重新取樣的問題:(Resizer 軟體)

雖然持有以及使用非 Retina 機型的使用者已經越來越少,日後也只會減少不會提高,但想要兼顧各種不同裝置上的顯示品質時,設計師就勢必特地為兩種裝置重新繪製圖形,但相應的研發製作成本就會提高很多。在不符合經濟效益的情況下,大部分的開發者都選擇第二種方式來達到目標:少量犧牲非 Retina 裝置的觀賞體驗,將研發精力投資在其他地方。

而下圖為 iOS Facebook APP在兩種顯示器上的呈現效果,設計師很明顯為了兩者重新繪製過圖檔,當然以 Facebook 的執行能力以及該介面的重要程度來看,這一點也不讓人意外。

 

一個更好的解決方式是,將畫面上大部分需要清晰的圖形以及視覺效果,交由程式端運行計算。就跟顯示文字的原理一樣,如此能同時兼顧顯示資源以及品質。事實上我們平常看到的大部分介面上的細節,都是如此完成的:

 

延伸閱讀:

十個好用的 iOS 開發輔助工具與資源

為什麼又多了一個像素?

【完美的像素】旋轉時會發生的災難

 

Image via PaulElijahKline, CC license

RGB 與 CMYK 是大家很熟悉的色彩描述系統,在許多地方我們都可以發現使用這兩種方式標示色彩的色彩碼,雖然這兩種系統的組成原理不一樣,但是是可以透過轉換取得...
「如果你不夠小心,在 Photoshop 中旋轉圖像時,可能會毀了你辛苦完成的作品!」 ~ Marc Edward 在 Photoshop 中旋轉圖像時(這邊指...
「映射(mapping)」是設計介面的時候一個非常重要的思考方式,所謂「映射」就是操作方式與介面和要操作的對象和結果有著相似的外觀或行為,如此一來,才能讓使用者...
世界上大約有 8% 的男性人口擁有某種形式的色盲,女性約 0.5%。以這比例去推算,臺灣的色盲者將近 116 萬人。可以說是一個相當龐大的族群。 這些人不只在網...
資訊是一種體驗的商品。所謂體驗的商品,就是使用者必須要「體驗」過後,才能知道這個商品的價值。 舉例來說,CNN 是一個新聞網站,每天都會在網站上發佈最新的新聞,...
「有感覺不一定會有知覺」,就像是自己的心跳聲,雖然平常我們都沒有知覺,只要靜下心來就會聽的到;平時我們幾乎都不會注意牆上的時鐘的滴答聲,但是一旦開始要注意時間的...
© 2013 Desiring Clicks. All Rights Reserved.
Top