SPARKFUL

Blog

SPARKFUL 團隊心得與生活點滴

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

Decill Changuser-interface-design
name

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

這點在設計製作 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 的執行能力以及該介面的重要程度來看,這一點也不讓人意外。

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


Image via PaulElijahKline, CC license

Decill Chang
Decill Chang
Principal Designer
A しばいぬ lover.
divider
相關文章
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...閱讀更多
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...閱讀更多
name

為使用者撒下「麵包屑」

大家小時候應該都有看過或聽過《糖果屋》(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面...閱讀更多