設計基石 經典傳承
極簡主義
以簡潔為核心，去除多餘元素，強調視覺焦點與留白的設計哲學。
設計基石 經典傳承
扁平設計／功能優先
捨棄冗餘的裝飾與擬真質感，透過色彩與排版精準傳達功能的設計方式。
少陰影、少擬真質感
強調清楚資訊與可用性
圖示／元件語意明確
網站案例
設計基石 經典傳承
Material Design
由 Google 開發，結合物理質感、陰影層次與動效引導的系統化設計語言。
卡片與層級（Elevation）清楚
一致的元件規範與動效
設計系統導向
結構佈局 經典傳承
網格系統佈局
基於嚴謹的網格框架排版，確保資訊在不同載體下皆具備平衡感與規律性。
對齊嚴謹、節奏一致
模組化區塊便於擴展
常與品牌字體系統一起出現
網站案例
結構佈局 當代潮流
Bento 便當盒佈局
將各類資訊封裝在大小不一的圓角方盒中，呈現高度秩序感與現代氣息的熱門版面佈局。
多個大小不一的「方盒」並列
同屏呈現多資訊但仍有秩序
常見於產品官網／功能總覽
結構佈局 當代潮流
現代 B2B SaaS
針對軟體服務設計的典型網頁佈局，強調價值主張、功能展示與快速轉化。
字體主義 經典傳承
瑞士風／國際主義排版
又稱國際主義設計風格，強調客觀性、可讀性，並以嚴謹的網格與無襯線字體為核心。
網格極強、對齊嚴謹
無襯線字體、資訊優先
強留白與視覺秩序
網站案例
字體主義 經典傳承
雜誌風／編輯式排版
藉鑒雜誌與報紙的排版方式，透過多欄結構與高度對比的字體營造深度內容體驗。
多欄結構、段落節奏清楚
標題層級強、留白講究
適合長內容與形象敘事
網站案例
字體主義 經典傳承
大字體風格
字體本身即為視覺主角，透過誇張的字級對比與排版張力營造強烈的品牌印象。
字體是主角（大標佔屏）
字級差距大、層級強烈
常搭配簡潔圖像或強烈留白
網站案例
視覺敘事 經典傳承
客製插畫導向
透過具備品牌辨識度的客製化插畫系統，讓抽象的服務更具親和力與故事性。
插畫風格一致，形成品牌語言
降低理性產品的距離感
常用於 SaaS／教育／新創
網站案例
視覺敘事 經典傳承
手繪／草圖風
以手繪線條、草圖與不完美質感展現品牌溫度，營造放鬆且具親和力的視覺氛圍。
線條不規則、刻意不精緻
更強情緒與親和力
常用於品牌故事、創意產業
網站案例
視覺敘事 經典傳承
等角插畫（偽 3D）
利用等角投影法展現三維空間感，適合展示複雜的產品結構或資訊地圖。
30°/45° 等角視角的空間感
結構整齊、資訊可視化友善
常見於 SaaS 功能解說
質感層效 當代潮流
新擬態
利用柔和的陰影與高光展現「浮雕」感，營造極致簡約且具觸感的單色介面。
同色系浮雕、陰影很柔
元件像「壓下／浮起」
可用性（對比）需特別注意
網站案例
質感層效 當代潮流
黏土風
模擬黏土或塑膠般的膨潤立體質感，結合圓潤造型與飽和色彩，展現親切有趣的設計風格。
像黏土／塑膠的膨潤立體元件
飽和柔和色、陰影明顯但圓潤
常用於插畫 UI、行銷頁視覺
質感層效 當代潮流
玻璃擬態
透過半透明卡片、背景模糊（Background Blur）與細緻邊框營造毛玻璃質感的科技美學。
半透明卡片＋背景模糊
層疊感強、偏科技氛圍
常用於 Dashboard／Landing
網站案例
質感層效 當代潮流
真 3D 網站
在瀏覽器中渲染真實三維模型，透過滑鼠與滾動互動引發沈浸式的空間探索體驗。
真 3D 模型／場景互動
滑鼠、滾動驅動鏡頭或物件
需要嚴格效能預算
動態體驗 當代潮流
滾動敘事
將網頁內容轉化為分鏡故事，透過滾動觸發動效與轉場，引導使用者完成一場敘事旅程。
滾動觸發分鏡式動畫
一屏一段故事
常見於品牌頁與產品發表頁
動態體驗 經典傳承
視差滾動
透過前後景不同步的移動速度，在平面的螢幕上創造出層次分明的空間深度感。
前後景不同速度移動
創造空間層次與景深感
常見於形象頁／遊戲頁
網站案例
動態體驗 當代潮流
資料敘事／資訊視覺化優先
將數據結構結合視覺藝術與互動動效，把資訊傳達轉化為可探索、具美感的動態故事。
以圖表與互動為主角
把資料結構轉成可探索的故事
常見於媒體、研究、品牌內容專案
實驗風格 經典傳承
粗獷主義
以未經修飾的粗獷線條、原始材質感與大膽的排版，傳達一種反主流、純粹且具衝擊力的視覺態度。
刻意不精緻、反主流美學
強對比、可讀性不一定優先
更像藝術／態度表達
實驗風格 當代潮流
極簡粗獷
結合粗獷主義的張力與極簡主義的克制，在保有原始力道的同時提升了資訊的易讀性與功能性。
排版與結構很克制
但保留『硬』的對比與材質感
比 Brutalism 更可用、比 Minimalism 更有態度
實驗風格 當代潮流
反設計
刻意無視傳統的排版與美學規則，透過混亂、重疊與非對稱設計，創造極具爭議且令人難忘的視覺衝擊。
故意違反整潔、對齊規則
高噪訊視覺、混搭元素
目的通常是『被記住』
實驗風格 當代潮流
新粗獷主義
粗獷主義的現代演化，利用粗邊框、高飽和色塊與強烈投影，打造活潑、具結構感且易用的介面。
超粗黑框、方塊布局
高彩度色塊＋硬陰影
粗獷但更重視可用性
實驗風格 當代潮流
極繁主義
奉行「多即是多」的哲學，藉由高度密集的視覺元素、豐富的圖樣與色彩堆疊，營造強烈的情感共鳴。
元素密集、視覺刺激強
色彩、圖樣、媒體大量堆疊
常用於活動、藝術、音樂
網站案例
實驗風格 當代潮流
終端機美學
以開發者熟悉的終端機（CLI）為藍本，運用等寬字體與黑色背景，形塑極具極客精神的技術質感。
黑底等寬字體、命令列提示符
互動以鍵盤為核心
常用於工程師作品集
網站案例
舊時情懷 經典傳承
復古／懷舊
透過復刻過往年代的特定色彩、字體與材質，營造充滿懷舊感與情感連結的視覺體驗。
復刻某年代字體與配色
印刷品質感、顆粒或紋理
情緒價值大於功能效率
網站案例
舊時情懷 經典傳承
油漬／破損風
以破損紋理、髒汙背景與不規則排版為特色，展現出一種反叛、次文化且具情緒張力的視覺語言。
破損紋理、顆粒、髒汙背景
不規則邊緣、拼貼感
強烈次文化／音樂海報語言
舊時情懷 當代潮流
Y2K 千禧年美學
復刻 90 年代末至 2000 年代初的低保真數位美學，融合亮色漸層、金屬質感與強烈的裝飾元素。
金屬字／泡泡字／亮色漸層
低保真導覽、強烈裝飾
故意『像舊網頁』但用現代技術
意象風格 當代潮流
蒸汽波／賽博美學
結合 80-90 年代消費文化與早期數位藝術，利用霓虹漸層、低像素物件營造迷幻且憂鬱的復古美學。
紫藍粉霓虹、迷幻色系
glitch、像素、復古數位元素
次文化氛圍強
意象風格 當代潮流
孟菲斯風
源自 80 年代的叛逆設計風格，以豐富的幾何圖形、高彩度對比與跳躍的圖樣展現頑皮與活力。
高彩度＋幾何圖形
圖樣密度高、反理性秩序
常用於活動、品牌行銷
意象風格 經典傳承
包浩斯風
遵循「形式追隨功能」的哲學，運用基礎幾何形狀與原色對比，展現理性且具構成感的經典美學。
基本幾何形（圓/方/三角）
原色/高對比、構成感強
強秩序感
尖端趨勢 當代潮流
深色模式優先
以深色調作為品牌的主要視覺底盤，結合高對比點綴色，營造專業、沈穩且富科技感的現代氣息。
深底色作為主要品牌底盤
高彩點綴色／霓虹對比更常見
需特別注意對比與閱讀疲勞
網站案例
尖端趨勢 當代潮流
極光漸層
運用柔順、流動的網格漸層（Mesh Gradient），营造出如極光般夢幻且具現代感的視覺氛圍。
大面積柔和漸層
常搭配深色底盤與玻璃卡片
氛圍優先：用『光感』塑造品牌氣質
尖端趨勢 當代潮流
無障礙優先
遵循無障礙設計規範，透過高對比、明確的語義化結構，確保所有人都能無礙地使用網頁功能。
高可讀性與對比
鍵盤可操作
表單與訊息回饋具語意
舊時情懷 經典傳承
擬真設計
模仿現實世界物件的細節（如皮革質感、實體按鈕），利用熟悉的物理隱喻降低數位工具的學習成本。
模擬真實材質：皮革、金屬
強光影與真實深度
用『熟悉感』降低學習成本
尖端趨勢 當代潮流
AI 輔助／生成式
利用生成式 AI 技術輔助設計流程，從色彩搭配、版面佈局到圖像生成，大幅提升創意產出的效率。
以提示詞快速生成版面
視覺可快速產生多版本
偏流程趨勢，但已影響風格產出
網站案例
意象風格 當代潮流
賽博龐克
融合高科技與低生活底色的反烏托邦美學，以霓虹光感、HUD 介面與數位雜訊展現未來主義的叛逆氣息。
霓虹高對比（紫/藍/青）
HUD/介面感元素
偏沉浸式：聲光/動效/粒子
意象風格 當代潮流
故障風
將數位訊號錯誤（如錯位、色偏）轉化為藝術表現，展現出一種具備破壞美感與動態張力的視覺風格。
畫面錯位、色偏、破碎
強烈不穩定感
常用於音樂、藝術、遊戲
網站案例
意象風格 當代潮流
田園風格
嚮往田園牧歌生活的浪漫美學，利用手繪碎花、自然紋理與柔和配色，營造溫暖且具慢活感的感性視覺。
意象風格 當代潮流
暗黑學院風
以高等教育、文學與古典藝術為核心的美學，利用沈穩的色調、襯線字體與紙張質感營造濃厚的學術氣息。
深棕、深綠、米色等復古色調
襯線字體、古典文學氛圍
紙張紋理、墨水質感
視覺敘事 當代潮流
企業孟菲斯
扁平化的向量插畫風格，以誇張的人物比例與繽紛色彩為標誌，廣泛應用於科技巨頭的介面展示。
扁平向量插畫、比例誇張的人物
高彩度配色、歡樂氛圍
常見於科技巨頭（Facebook/Google）
舊時情懷 經典傳承
Web 2.0 水晶質感
2000 年代中期的指標性設計，以水晶質感按鈕、鏡面反射與豐富的漸層色彩定義了早期社群網路的視覺。
水晶質感按鈕、倒影
漸層明顯、圓角豐富
早期社群網路（2005-2010）風格
網站案例
意象風格 當代潮流
雷射／全像質感
模擬全像投影或雷射貼紙的變色效果，利用銀色金屬光澤與彩虹漸層，塑造夢幻且具科幻感的視覺質量。
像雷射貼紙般的反光變色
銀色、粉彩金屬光澤
未來的夢幻感
網站案例
動態體驗 當代潮流
動態文字為主
透過動效、變形與互動讓文字「活起來」，適合用極具張力的動態排版傳達強而有力的品牌宣言。
文字本身就是主要視覺與動效
跑馬燈、變形、跟隨游標
衝擊力強，適合強調宣言
網站案例