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

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

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