智慧型手機剛普及的那幾年打開手機，常會看到這樣的畫面：計算機長得像實體計算機，筆記本有皮革縫線，書架上鋪著木紋，按鈕帶著光澤與立體陰影。幾年之後，這些質感陸續消失，換成純色色塊、線條簡潔的圖示和清爽的字體，這種風格就是扁平化設計（Flat Design）。很多人以為這只是美學流行換季，但從做網站的角度來看，背後其實是使用環境與技術條件的改變：螢幕尺寸越來越多、解析度越來越高、使用者大量改用行動網路上網。這篇從實務面說明扁平化為什麼能取代擬物化，以及它在載入速度與跨螢幕一致性上帶來的好處。
擬物化設計的出發點與包袱
擬物化（Skeuomorphism）在當時有它的道理。觸控螢幕剛普及時，多數人還不熟悉「用手指點玻璃」這件事，把介面做得像現實物品，可以降低學習成本：按鈕看起來凸起，使用者自然知道能按；開關做成實體撥桿的樣子，一看就懂要滑動。現實世界的隱喻，等於在幫使用者上第一堂課。
但落到網站實作上，擬物化的包袱很重。漸層、陰影、紋理背景、帶光澤的圓角按鈕，幾乎都要靠設計師切成圖片，再由工程師拼成 CSS Sprite 使用。按鈕的一般、滑鼠移入、按下狀態各要一張圖；客戶想把「立即購買」改成「加入購物車」，就得回到繪圖軟體重切。高解析度螢幕出現後，原本的切圖在新螢幕上顯得模糊，又得另外準備兩倍尺寸的版本，檔案量跟著增加。在手機的小螢幕上，繁複的紋理和陰影還會佔掉空間、搶走內容的注意力。
扁平化設計能取代擬物化的原因
最根本的原因是使用者變了。經過幾年的智慧型手機使用，大家已經熟悉觸控操作與數位介面的慣例，不再需要木紋和皮革來提示「這是什麼」。當教學的需求消失，過多的裝飾就從輔助變成干擾。網站的主角回到內容本身：文字、照片、商品資訊，介面只要清楚地把它們呈現出來即可。
另一個原因是響應式設計的需求。同一個網頁要在桌機、平板、手機上自動重新排版，元素必須能伸縮、能重新排列。以純色與線條構成的扁平元件，本質上就是幾何形狀加文字，寬度改變時不會出現圖片被拉扯變形的問題，比擬物化的固定尺寸切圖好處理得多。
扁平化也不是一路走到極端。早期完全扁平的介面常被批評「看不出哪裡能點」，後來業界逐漸加入輕微陰影、層次與動態回饋，有人稱為扁平化 2.0。實務上有個簡單的判斷方式：把設計稿轉成灰階或稍微模糊，看看還能不能一眼找出按鈕和可點擊的連結。如果按鈕和一般標籤長得一模一樣，就代表扁平過頭，需要用顏色、外框或陰影補回可點擊的提示。
載入速度：從切圖轉向 CSS 與向量圖
扁平化在效能上最直接的好處，是大量視覺元素可以不用圖片。一顆按鈕的底色、圓角、外框、滑鼠移入時的變色，用幾行 CSS 就能完成，按鈕上的字也是真正的文字，修改內容不用重新切圖，搜尋引擎與螢幕閱讀器也讀得到：
.btn {
background-color: #1a73e8;
color: #fff;
border-radius: 6px;
padding: 12px 24px;
}
.btn:hover {
background-color: #155ab6;
}圖示則可以改用 SVG 向量圖。一個 SVG 檔在任何尺寸下都清晰，不必為不同解析度準備多組圖片；圖示造型簡單時，SVG 的檔案通常很小，還能直接內嵌在 HTML 裡，省下額外的網路請求，並用 currentColor 讓圖示跟著文字顏色變化。請求數與傳輸量減少，在行動網路下通常有助於讓第一個畫面更快出現。
不過要提醒，扁平化不會自動讓網站變快。很多扁平風格的網站搭配滿版大照片、影片背景或好幾套網頁字型，一樣會拖慢速度。檢查時可以這樣做：
- 打開瀏覽器開發者工具的 Network 面板，看圖片與字型各佔多少傳輸量。
- 能用 CSS 畫的漸層、色塊、分隔線，就不要用圖片。
- 照片依顯示尺寸輸出並壓縮，可考慮 WebP 等較新的格式。
- 中文網頁字型檔案大，評估是否真的需要，或只載入必要的字重。
跨螢幕一致性：同一套元件，在每個裝置上都穩定
擬物化的細緻質感，在不同螢幕上的表現差異很大。細膩的漸層在色彩表現較差的螢幕上容易出現色階斷層，柔和的陰影在戶外強光下幾乎看不見，低解析度螢幕又會讓紋理糊成一片。純色塊、清楚的線條與足夠的對比，受螢幕品質影響較小，使用者不管拿什麼裝置，看到的畫面都比較接近設計稿。
扁平化也讓「設計系統」變得容易落實。把色票、字級、間距、圓角整理成固定規格，再用 CSS 變數集中管理，例如在 :root 裡定義 --color-primary、--radius，全站元件都引用這些變數。桌機、平板、手機共用同一套元件，只調整排版方式；品牌主色要調整時，改一個地方就能全站生效，網站、App 和社群素材的視覺也比較容易統一。
另外，一致不等於每個裝置長得一模一樣。觸控螢幕沒有滑鼠移入效果，靠 hover 才出現的提示在手機上會失效，需要改用常駐的視覺提示；手機上的按鈕與連結要有足夠的點擊範圍，避免使用者誤觸。視覺語言保持一致，互動細節依裝置調整，才是跨螢幕一致性真正的意思。