We're always optimizing for whatever's most important to us right now

只有在 Pixel Perfect 很重要的時候才應該關注他，否則往往會讓你得到一個雙輸的局面。

這個問題我覺得有兩個根本原因：

• 有些 UI 設計師沒有網頁的基礎知識，導致他們很容易用平面設計的思維去設計網頁
• 他們希望設計稿跟最終呈現出來的結果一模一樣

為什麼平面設計不能套用在網頁

平面設計通常有固定的尺寸、排版，因此視角完全不同，字體上也常以 pt 這類固定大小的方式做排版與設計。

然而網頁天生具備各種互動與大小：

• 使用者的 viewport 不固定
• 使用者的設備不固定
• 使用者的字體不固定
• 使用者的 scale 設定不固定
• 網頁可以水平、垂直滾動
• 網頁有互動元件如按鈕、輸入框
• 呈上，有 hover、focus 狀態等等

字體大小、字型甚至也會受到使用者的設定而有影響。（除非放棄治療把字輸出成圖）

一旦有了 Pixel Perfect 的思維，那反映在產品中就是為了特定尺寸而優化，而非為了適應多個裝置而優化。

一些例子

不同螢幕寬度排版

比如說使用 CSS Grid 的 auto-fill 與 auto-fit 來達到「填滿螢幕（或容器）寬度」的排版可以這樣寫。

在一些情況中，特別是希望善用寬螢幕的優勢時，這種 UI 特別有用：

但這種 UI 呈現很難在設計稿當中被清楚定義出來，尤其是非網頁 UI 出身的設計師。這時如果去追求 Pixel Perfect，反而直接捨棄了可能對使用者體驗更好的選擇。

表格

表格設計是門大學問。我在以前的文章有寫過，在網頁設計表格有一些眉角需要注意，像是

一般來說文字會靠左對齊，而數字則是靠右對齊。在數字會變化的情況下，可以另外加上 font-variant-numeric: tabular-nums（如果字體有支援），來避免數字變化造成寬度不斷移動。

vh/vw 單位

在 CSS 當中 vh/vw 其實是很好用的單位，但如果被限制在 Pixel Perfect 的思維裡頭，可能最後為了方便交差，就是直接用一個固定值寫上去。

瀏覽器與 OS 設定等等

在 iOS Safari 當中可以選擇網址列要放在哪裡，在 iOS 12 之後有所謂的 Safe Area 可以利用或做排版效果。在這種情況下，如果要把所有的裝置一一條列出來，對開發、設計都是一大負擔。

真正想要的是什麼？

需要知道雙方追求的目的是什麼。以設計來說，他們希望設計稿的 UI 可以完美呈現；以開發來說，他們會希望用容易維護、自適應的方式達到 UI 需求。

我們真正想要的是設計系統。一個只要定義好一些空白、間距、字體大小配置，可以套用在不同的裝置上。

RWD 仍然歷久彌新。CSS 越來越進步，跟十年前比起來要把這件事情做好已經容易許多。

解方

最近很常追蹤一位 Design Engineer 的推特。他的 CSS 爐火純青，有很多 UI 動畫、互動，都需要長期關注 CSS 動向與一些創意才做得到。也正是因為他對 CSS 的熟悉，才能在網頁上做出生動的效果。

我認為一位理想的 UI 設計師（以網頁而言），至少要能做到這樣。然而在台灣要達成可能有難度：

• 公司通常不會注重 UI，沒有這種缺
• 就算有，通常也是以 UI 設計為主，不一定會要求對 CSS、網頁的熟悉度
• 薪水要求高，可遇不可求