為什麼網頁不應該追求 Pixel Perfect

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 – jhey 的推特。現在在 Shopify 擔任 Design Engineer，之前則是在 Vercel 與 Google。

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

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

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

在前公司有幸與一些相當懂網頁 UI 的設計師合作，雖然 CSS 寫起來很麻煩，但是是非常有趣且珍貴的經驗。