過去十年的網站設計趨勢：從 iOS 7 扁平化，到 Apple Liquid Glass
2026年5月31日 下午 3:57
UI/UX 設計UI/UX · DESIGN TRENDS · 2026
QUICK ANSWER
過去十年的網站設計，從 2013 年 iOS 7 一刀砍掉擬物開始，一路盪到 2025 年 Apple Liquid Glass 又把質感加回來。表面上是扁平到玻璃的審美輪替，骨子裡是一條更現實的暗線——每次鐘擺盪回「有質感」，做出那個質感的成本就更低一次：擬物要手繪、玻璃擬態一行 CSS、Liquid Glass 是系統著色器、AI 是一句 prompt。設計師真正在追的，從來不是美學，是越來越便宜的質感。
2025 年 6 月，Apple 把用了十二年的扁平介面打掉，端出一套叫 Liquid Glass 的新設計語言。整個設計圈當天就吵翻了——有人說終於不扁了，有人翻白眼說這不就 iOS 6 的擬物回魂、繞了一圈又走回頭路？
兩邊都沒講到重點。
我做設計快十年，看著這條趨勢線從 iOS 7 砍擬物、盪到扁平、再盪到今天 Liquid Glass 把玻璃加回來。看久了你會發現一件事：趨勢不是進步，是鐘擺。它從來不會停在中間，每隔幾年就往反方向盪一次。而真正有意思的，是鐘擺背後那條沒人明講的暗線——每一次它盪回「有質感」這一邊，做出那個質感的成本，就比上一次更低。
過去十年的設計趨勢，不是審美在進步，是做出質感的成本，一次比一次便宜。
這篇只切最近這十年，從 iOS 7 講到 Liquid Glass。想看更早的源頭——從 CERN 第一個純文字網頁、表格切版到 Flash 王國——我另外寫過一篇 《網頁設計的發展歷史》，那篇看的是「誰掌握版面控制權」。這篇換一個鏡頭：不是誰控制版面，而是「質感」這件事，怎麼從一筆一筆手工畫，變成一句指令就生得出來。
CHAPTER 01 · THE FLATTENING
2013：一刀砍掉所有質感
2013 年 iOS 7 發表，Jony Ive 把 Apple 用了六年的擬物設計——皮革行事曆、綠呢賭桌、書櫃木紋——一次清光。按鈕不再有立體高光，圖示變成單純的色塊，陰影幾乎消失。扁平化（flat design）正式登基，而且因為是 Apple 帶頭，半年內整個產業跟著扁。
為什麼是這個時間點？兩個很現實的原因。一是 Retina 螢幕普及，像素細到看不出顆粒，那些用來模擬真實材質的漸層、紋理、厚重陰影，放大檢視全是負擔。二是響應式設計（RWD）成了預設，一套版面要在手機、平板、桌機上都成立，越複雜的擬真質感越難跨裝置維護。扁平不是因為比較好看，是因為比較好活。
但純扁平很快暴露問題：少了陰影與層次，使用者分不出哪個能點、哪個只是裝飾。隔年 Google 推出 Material Design，幫扁平補上一套有邏輯的光影系統——卡片有高度、按鈕會浮起、轉場有物理慣性。它沒有走回擬物，而是把「質感」抽象成一套可以被工程化的規則。這是十年裡第一個關鍵動作：質感不再是手繪出來的，是被寫成系統的。
iOS 7 砍掉的不只是擬物，是「質感要靠手畫」這個假設。
CHAPTER 02 · THE QUIET RETURN
2016–2019：扁平太扁，質感偷溜回來
扁平流行沒幾年，鐘擺就開始往回盪。原因很簡單——全部扁平之後，網站長得都一樣，也太冷。設計師開始在扁平的地基上，一點一點把質感加回去，但加得很克制。
2016 年 Instagram 把用了五年的擬真相機圖示，換成一抹紫橘漸層，引爆漸層復興。Stripe 那種柔和的多色漸層背景變成 SaaS 標配。卡片式設計回歸，幫資訊重新長出層次；微互動（micro-interaction）與 Lottie 動畫讓介面有了呼吸感；2019 年 iOS 13 與 Android 10 把深色模式變成系統級功能，深色介面對「光暈、玻璃感」這類效果特別友善——因為暗底襯亮，質感更容易做出來。
同一時間，字體本身也站上了舞台——超大標題變成主視覺、非對稱編排帶來節奏感。網站不再只是排版資訊，而是開始像雜誌封面一樣用字體說故事，品牌個性也跟著鮮明起來。
這一階段的關鍵字是「半扁平」。它證明了一件事：使用者要的從來不是純粹的扁，是恰到好處的層次與溫度。鐘擺第一次盪回來，但盪得很輕——因為大家都還記得擬物時代維護的痛，加質感的時候，本能地挑成本最低的那種加法。
CHAPTER 03 · THE GLASS EXPERIMENT
2020–2021：一行 CSS 就能做毛玻璃
這個時期，介面也整體變得更柔、更有情緒——柔和漸層、客製插畫、3D 元素大量出現，網站開始願意用視覺替自己建立記憶點，畫面從「資訊」慢慢變成「氛圍」。
而在視覺變柔的同時，2020 年也冒出兩個方向相反的實驗。一個是新擬物（neumorphism）——把元件做成像從同色背景裡「擠」出來的軟塑膠，靠一明一暗兩道陰影撐立體感。它美，但很快被無障礙社群釘在牆上：對比太低，弱視使用者根本看不出按鈕在哪。新擬物紅了三個月就退場。
另一個活下來了，而且活得很好：玻璃擬態（glassmorphism）。半透明、毛玻璃模糊、彩色光透過來——macOS Big Sur 在 2020 年大量使用，Windows 11 在 2021 年用它的 Acrylic 材質跟進。
這裡藏著整篇文章最該記住的一個技術細節。玻璃擬態之所以能瞬間鋪天蓋地，是因為 CSS 給了一行 backdrop-filter: blur()。以前要做出背景模糊透視的效果，得在設計軟體裡疊圖層、輸出圖片、切給工程；現在一行 CSS，瀏覽器即時幫你算。擬物時代要手繪的質感，這一刻變成一個屬性值。鐘擺盪回「有質感」這一邊，但做出質感的成本，又掉了一階。
CHAPTER 04 · THE BACKLASH
2022–2024：無障礙與設計系統的反撲
盪過頭，就會有反作用力。低對比的扁平與新擬物累積的無障礙債，在這幾年集中爆發。歐盟的無障礙法規逼近、WCAG 對比標準變成硬要求，「好看但看不清」不再是風格選擇，是會被告的問題。設計被迫把對比、可讀性重新放回第一順位。
同一時間，設計系統（design system）從大公司的內部規範，變成所有人的預設。Tailwind CSS、shadcn/ui 這類工具讓「一套有系統的質感」變成複製貼上就有的東西。好處是品質地板抬高了，壞處是網站開始長得像同一個模子——大家都在用同一套預設。
對「都長一樣」最直接的反抗，是新粗野主義（neubrutalism）。Gumroad 在 2022 年改版帶頭：粗黑框、硬陰影、衝突色、刻意不對齊。它醜得很故意，而這個「故意」本身就是訊息——在一個 AI 與模板讓一切越來越平滑的年代，粗糙、手感、不完美，反而成了「這是人做的」的證明。與此平行的還有 3D 與 WebGL 的普及、bento grid 便當式排版、超大字體。熱鬧，但全都繞著同一個母題打轉：質感要嘛交給系統量產，要嘛刻意粗糙來證明有人在。
也是在這幾年，動效與互動從「加分項」變成「標配」——hover、微動畫、scrollytelling 讓網站不只是被閱讀，而是被操作、被感受。但那條暗線還在：連動效都越來越便宜，一個現成的 library、一段套好的捲動動畫就有，所以它能這麼快變成基本盤。
CHAPTER 05 · LIQUID GLASS
2025：Apple 把質感變成系統著色器
2025 年 6 月的 WWDC，Apple 發表 Liquid Glass，並稱它是史上範圍最廣的一次軟體設計更新。這套材質半透明、會折射與反射周遭內容，最關鍵的是——它會即時運算，高光會隨著你傾斜裝置而流動，顏色會依亮色或暗色環境自動調整。它橫跨 iOS 26、iPadOS 26、macOS Tahoe、watchOS 與 tvOS，是 Apple 自 2013 年 iOS 7 以來最大的視覺轉向。
Apple 人機介面設計副總 Alan Dye 給它的定位，是把玻璃的光學特性，結合一種只有 Apple 做得到的流動感，並讓介面隨內容與情境變形。翻成白話：這不是貼上去的玻璃貼圖，是系統層級的著色器（shader），由 GPU 即時算出反射、折射與高光。
你發現這條線了嗎？2013 年 Apple 親手砍掉擬物，說質感是負擔；十二年後，Apple 又把質感大張旗鼓地加回來，只是這次它不是手繪的皮革紋理，是一段跑在晶片上的程式。Liquid Glass 本質上，是 Apple 對自己十二年前那一刀的道歉——而道歉的成本，已經低到只是打開一個系統開關。
十二年前 Apple 說質感是負擔，現在它說質感是一段著色器。
當然，它一發表就引來無障礙與可讀性的爭論——半透明在某些背景下讓文字變難讀，這幾乎是必然的代價。想看它實際怎麼動，Apple 這支官方影片講得最清楚：
CHAPTER 06 · THE PATTERN
鐘擺背後，那條越來越便宜的線
把這十年攤平，鐘擺的軌跡很清楚：擬物 → 扁平 → 半扁平 → 玻璃擬態 → 系統量產 → Liquid Glass。左右來回，看起來像時尚輪迴。但如果你只看「審美在哪一邊」，你會以為這是一場沒有終點的繞圈。
真正在動的不是審美，是成本。把「做出質感」這件事，沿著時間排開：
擬物時代
最貴
手繪每一道高光、陰影、材質貼圖
扁平時代
歸零
乾脆全部拿掉，不做了
玻璃擬態
一行 CSS
一行 backdrop-filter，瀏覽器即時算
Liquid Glass
一個開關
打開系統著色器，GPU 幫你算
AI 生成
一句話
一句 prompt，工具直接生出能跑的版
同樣是「讓畫面有質感」，從手繪一路掉到一句話。這才是過去十年真正發生的事——不是設計變美了，是質感變便宜了。每一次鐘擺盪回有質感的那一邊，門檻就降一階，會做的人就多一批。到了 2025 年，Figma Make 這類工具甚至讓你用一句話，直接生出一個能跑的網站；Lovable、v0、Framer 把不會寫程式的設計師，也推進了「描述完就有成品」的世界。
所以真正該問的，從來不是「AI 會不會取代設計師」。而是——當做出質感的成本掉到趨近於零，設計師的價值，會剩下什麼？
CHAPTER 07 · TAKEAWAYS
質感免費之後，設計師站哪裡
答案藏在鐘擺本身。質感的成本一直在掉，但「什麼時候該加、什麼時候該收」這件事，成本從來沒掉過。iOS 7 的價值不在它扁，在它判斷出當時該扁；Liquid Glass 的價值也不在它有玻璃，在 Apple 判斷出現在市場想要溫度回來。工具負責把質感做出來，判斷負責決定要不要、做多少。
對設計師最實際的一句話：別再把力氣花在「學會某個效果怎麼做」。那個效果，明年就會變成一個內建選項或一句 prompt。把力氣花在判斷力——看得懂層次、對比、無障礙、節奏，知道這個產品這一刻該加質感還是該收。這些是工具還搬不走的。
TAKEAWAYS
→
趨勢不是進步，是鐘擺。扁平與質感每隔幾年互相否定一次，別把當下的風格當成終點。
→
鐘擺背後的真實變化是成本：擬物手繪、玻璃一行 CSS、Liquid Glass 系統著色器、AI 一句 prompt，質感越來越便宜。
→
質感變免費，設計師的價值就從「做得出」移到「判斷得準」——何時加、何時收，工具還學不會。
→
先把不會過期的底層練起來：層次、對比、無障礙、節奏。風格會輪替，這些不會。
CHEATSHEET · 一分鐘懶人包
✦ 2013 iOS 7 一刀砍掉擬物，扁平化登基，因為 Retina 與 RWD 讓擬真質感變負擔
✦ 2016–2019 漸層、卡片、微互動、深色模式，質感克制地溜回來；大膽字體讓品牌個性鮮明
✦ 2020–2021 漸層 / 插畫 / 3D 變柔，玻璃擬態靠一行 backdrop-filter 鋪開，新擬物因對比太低退場
✦ 2022–2024 無障礙反撲、設計系統量產、新粗野主義對抗同質化，動效與互動成為標配
✦ 2025 Liquid Glass：Apple 用系統著色器，向十二年前自己砍掉的質感道歉
✦ 鐵律：做質感的成本一直在掉，判斷何時加何時收的成本沒掉——那才是設計師的價值
CHAPTER 08 · FAQ
常見問題
Q：Apple Liquid Glass 是什麼？跟以前的玻璃擬態有何不同？
A：Liquid Glass 是 Apple 在 2025 年 6 月 WWDC 發表的設計語言，橫跨 iOS 26、iPadOS 26、macOS Tahoe、watchOS 與 tvOS。跟以前用圖層疊出來的玻璃擬態不同，它是系統層級的著色器，由 GPU 即時運算反射、折射與高光，會隨裝置傾斜流動、依亮暗環境自動調整顏色。
Q：為什麼 2013 年大家突然都改用扁平化設計？
A：主因是技術環境改變。Retina 高解析螢幕讓擬真材質的漸層與紋理變成視覺負擔，響應式設計（RWD）又要求一套版面跨手機平板桌機都成立，複雜的擬物質感難以維護。iOS 7 帶頭砍掉擬物後，整個產業半年內跟進。
Q：玻璃擬態（glassmorphism）為什麼能流行起來？
A：關鍵是 CSS 的 backdrop-filter 屬性。過去要做背景模糊透視得在設計軟體疊圖層、輸出圖片再切給工程，backdrop-filter: blur() 讓瀏覽器一行就能即時算出毛玻璃效果，大幅降低製作成本，於是 macOS Big Sur 與 Windows 11 帶頭普及。
Q：新粗野主義（neubrutalism）為什麼會紅？
A：它是對「網站越來越像同一個模板」的反抗。在 AI 與設計系統讓介面越來越平滑統一的年代，粗黑框、硬陰影、衝突色這種刻意的粗糙，反而成了「這是人做的、不是套模板」的辨識訊號。Gumroad 2022 年改版是代表案例。
Q：AI 生成設計會取代網站設計師嗎？
A：短期內不會取代懂判斷的設計師。Figma Make、Lovable、v0 這類工具大幅降低了「做出質感」的成本，但決定何時該加質感、何時該收，以及層次、對比、無障礙這些底層判斷，工具還搬不走。會被淘汰的是只會操作某個效果、看不懂底層邏輯的人。
Q：想學網站設計，該從哪裡開始？
A：別從追最新的風格或效果開始，先把不會過期的底層練穩：版面層次、對比與可讀性、無障礙原則、設計系統思維。把這套地基蓋好，之後不管風格輪替到扁平、玻璃還是 AI 生成，你都站得住。如果想用一條最貼近設計師思維的路把網站真正做上線，可以從 Framer 入門。
CHAPTER 09 · RESOURCES
延伸資源
講完過去十年，想知道這條鐘擺接下來盪去哪，可以接著看 《2026 UI/UX 設計趨勢全解析》，那篇整理了十個正在改寫介面的方向。
如果你想把「不會過期的底層」練成可上手的工作流，可以看我整理的 《100 種 Figma 設計的方法》，從元件到設計系統一次蓋穩。
而這篇從頭到尾在講的「不寫 code 也能把設計變成上線網站」——這條路我最推 Framer。它是這一波 vibe coding 浪潮裡，最貼近設計師思維的工具（想試的話用我的連結註冊：Framer）。而從零到把網站真正做上線的完整流程，我把它拆成了一堂能跟著做的課：
