---
title: "過去十年的網站設計趨勢：從 iOS 7 扁平化，到 Apple Liquid Glass"
slug: web-design-trends-past-decade
url: https://rar.design/posts/web-design-trends-past-decade
published_at: 2026-05-31
modified_at: 2026-05-31
author: "設計師 Riven"
category: "UI/UX 設計"
access: public_access
---

# 過去十年的網站設計趨勢：從 iOS 7 扁平化，到 Apple Liquid Glass

> 扁平、玻璃、新粗野、AI⋯⋯ 每個趨勢都在否定上一個。但真正在變的，從來不是審美，而是做出質感的成本。

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-05-31

UI/UX · DESIGN TRENDS · 2026 ▲ 過去十年的網站設計趨勢——從極簡、動效到 AI。但這條線真正在變的，是做出質感的成本。 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）成了預設，一套版面要在手機、平板、桌機上都成立，越複雜的擬真質感越難跨裝置維護。扁平不是因為比較好看，是因為比較好活。 ▲ 2015–2017：極簡與留白把扁平推到高峰——黑白、中性色、大量留白成為主流。 但純扁平很快暴露問題：少了陰影與層次，使用者分不出哪個能點、哪個只是裝飾。隔年 Google 推出 Material Design，幫扁平補上一套有邏輯的光影系統——卡片有高度、按鈕會浮起、轉場有物理慣性。它沒有走回擬物，而是把「質感」抽象成一套可以被工程化的規則。這是十年裡第一個關鍵動作：質感不再是手繪出來的，是被寫成系統的。 iOS 7 砍掉的不只是擬物，是「質感要靠手畫」這個假設。 CHAPTER 02 · THE QUIET RETURN 2016–2019：扁平太扁，質感偷溜回來 扁平流行沒幾年，鐘擺就開始往回盪。原因很簡單——全部扁平之後，網站長得都一樣，也太冷。設計師開始在扁平的地基上，一點一點把質感加回去，但加得很克制。 2016 年 Instagram 把用了五年的擬真相機圖示，換成一抹紫橘漸層，引爆漸層復興。Stripe 那種柔和的多色漸層背景變成 SaaS 標配。卡片式設計回歸，幫資訊重新長出層次；微互動（micro-interaction）與 Lottie 動畫讓介面有了呼吸感；2019 年 iOS 13 與 Android 10 把深色模式變成系統級功能，深色介面對「光暈、玻璃感」這類效果特別友善——因為暗底襯亮，質感更容易做出來。 同一時間，字體本身也站上了舞台——超大標題變成主視覺、非對稱編排帶來節奏感。網站不再只是排版資訊，而是開始像雜誌封面一樣用字體說故事，品牌個性也跟著鮮明起來。 ▲ 2018–2019：大膽字體與編排——字體開始成為品牌的臉。 這一階段的關鍵字是「半扁平」。它證明了一件事：使用者要的從來不是純粹的扁，是恰到好處的層次與溫度。鐘擺第一次盪回來，但盪得很輕——因為大家都還記得擬物時代維護的痛，加質感的時候，本能地挑成本最低的那種加法。 CHAPTER 03 · THE GLASS EXPERIMENT 2020–2021：一行 CSS 就能做毛玻璃 這個時期，介面也整體變得更柔、更有情緒——柔和漸層、客製插畫、3D 元素大量出現，網站開始願意用視覺替自己建立記憶點，畫面從「資訊」慢慢變成「氛圍」。 ▲ 2020–2021：漸層、插畫、3D 崛起，畫面從「資訊」變成「氛圍」。 而在視覺變柔的同時，2020 年也冒出兩個方向相反的實驗。一個是新擬物（neumorphism）——把元件做成像從同色背景裡「擠」出來的軟塑膠，靠一明一暗兩道陰影撐立體感。它美，但很快被無障礙社群釘在牆上：對比太低，弱視使用者根本看不出按鈕在哪。新擬物紅了三個月就退場。 另一個活下來了，而且活得很好：玻璃擬態（glassmorphism）。半透明、毛玻璃模糊、彩色光透過來——macOS Big Sur 在 2020 年大量使用，Windows 11 在 2021 年用它的 Acrylic 材質跟進。 ▲ 玻璃擬態：半透明、模糊、透光——曾經要疊好幾層圖才做得出的質感。 這裡藏著整篇文章最該記住的一個技術細節。玻璃擬態之所以能瞬間鋪天蓋地，是因為 CSS 給了一行 backdrop-filter: blur()。以前要做出背景模糊透視的效果，得在設計軟體裡疊圖層、輸出圖片、切給工程；現在一行 CSS，瀏覽器即時幫你算。擬物時代要手繪的質感，這一刻變成一個屬性值。鐘擺盪回「有質感」這一邊，但做出質感的成本，又掉了一階。 ▲ 2021–2022：玻璃擬態與沉浸式體驗鋪滿產業——毛玻璃卡片、大圖光影，介面像一個有氛圍的數位空間。 CHAPTER 04 · THE BACKLASH 2022–2024：無障礙與設計系統的反撲 盪過頭，就會有反作用力。低對比的扁平與新擬物累積的無障礙債，在這幾年集中爆發。歐盟的無障礙法規逼近、WCAG 對比標準變成硬要求，「好看但看不清」不再是風格選擇，是會被告的問題。設計被迫把對比、可讀性重新放回第一順位。 同一時間，設計系統（design system）從大公司的內部規範，變成所有人的預設。Tailwind CSS、shadcn/ui 這類工具讓「一套有系統的質感」變成複製貼上就有的東西。好處是品質地板抬高了，壞處是網站開始長得像同一個模子——大家都在用同一套預設。 對「都長一樣」最直接的反抗，是新粗野主義（neubrutalism）。Gumroad 在 2022 年改版帶頭：粗黑框、硬陰影、衝突色、刻意不對齊。它醜得很故意，而這個「故意」本身就是訊息——在一個 AI 與模板讓一切越來越平滑的年代，粗糙、手感、不完美，反而成了「這是人做的」的證明。與此平行的還有 3D 與 WebGL 的普及、bento grid 便當式排版、超大字體。熱鬧，但全都繞著同一個母題打轉：質感要嘛交給系統量產，要嘛刻意粗糙來證明有人在。 也是在這幾年，動效與互動從「加分項」變成「標配」——hover、微動畫、scrollytelling 讓網站不只是被閱讀，而是被操作、被感受。但那條暗線還在：連動效都越來越便宜，一個現成的 library、一段套好的捲動動畫就有，所以它能這麼快變成基本盤。 ▲ 2022–2023：動效與互動成為標配，好的動效讓體驗更有記憶點。 年代這一擺質感成本2013 扁平拿掉質感歸零2016 半扁平輕輕加回一抹漸層2020 玻璃擬態加回透光感一行 CSS2022 反撲系統量產 / 故意粗糙複製貼上2025 Liquid Glass全面加回系統著色器 CHAPTER 05 · LIQUID GLASS 2025：Apple 把質感變成系統著色器 2025 年 6 月的 WWDC，Apple 發表 Liquid Glass，並稱它是史上範圍最廣的一次軟體設計更新。這套材質半透明、會折射與反射周遭內容，最關鍵的是——它會即時運算，高光會隨著你傾斜裝置而流動，顏色會依亮色或暗色環境自動調整。它橫跨 iOS 26、iPadOS 26、macOS Tahoe、watchOS 與 tvOS，是 Apple 自 2013 年 iOS 7 以來最大的視覺轉向。 ▲ Liquid Glass 橫跨 Apple 全系統——同一套會即時運算的玻璃材質。 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 把不會寫程式的設計師，也推進了「描述完就有成品」的世界。 ▲ 2024–現在：Bento Grid、AI 與個人化——網站越來越像產品介面，清楚、模組化，而且更聰明。 所以真正該問的，從來不是「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）。而從零到把網站真正做上線的完整流程，我把它拆成了一堂能跟著做的課： COURSE · FRAMERFramer 網站設計課：從零開始不用寫 code，用設計師熟悉的視覺邏輯，把版面、互動、RWD 到上線一次走完。這堂課就是這篇文章結論的實作版——與其追每年換的風格，不如練一套能直接做出成品的工作流。✦ 不寫 code，用設計師的邏輯做網站✦ 版面、互動、RWD 一次搞懂✦ 直接做出能上線的真實網站看 Framer 課程 → SUBSCRIPTION · AIWAKENAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的應用。✦ AI 工具實測與工作流✦ 設計師角度 Prompt 技巧✦ 每週 AI × 設計新知了解訂閱方案 →