視覺設計在體驗中的應用（第 1 部分）

視覺設計在體驗中的應用：深度研究報告

================================================================================

一、前言

視覺設計是數位體驗的核心組成部分，它不僅關乎美觀，更直接影響用戶如何理解、
互動與記憶產品。優秀的視覺設計透過精心組織的資訊架構、一致的色彩語言、和諧
的排版系統，以及對空間的敏銳掌控，引導用戶無縫地完成目標任務。

本報告深入探討六大核心領域：視覺層次、排版設計、色彩理論、空間運用、視覺
重量與對齊、以及設計系統中的視覺規範。每個章節均包含理論基礎、實務方法、
具體範例與可操作的指導原則。

================================================================================

二、視覺層次（Visual Hierarchy）原則

2.1 什麼是視覺層次？

視覺層次是指透過有意識地排列和設計視覺元素，引導用戶的注意力優先順序。
它決定了用戶在面對一頁內容時，會先看什麼、再看什麼、最後看什麼。有效的
視覺層次能將複雜的資訊轉化為清晰、易懂的結構。

2.2 視覺層次的建構方法

以下為五種核心的視覺層次建構方法：

--- 方法一：大小與比例（Size & Scale）---

原理：人眼自然會被較大的元素吸引。這是視覺層次中最直接、最有效的手段。

實務應用：

標題字體應明顯大於內文，建議比例至少為 1.5:1
主要行動呼籲按鈕（Primary CTA）應比次要按鈕（Secondary CTA）更大
圖片或插圖的尺寸應與其重要性成正比

比例階梯範例（以 rem 為單位）：
h1: 2.5rem (40px) — 頁面主標題
h2: 2.0rem (32px) — 章節標題
h3: 1.5rem (24px) — 子章節
body: 1.0rem (16px) — 正文
caption: 0.875rem (14px) — 輔助文字

--- 方法二：色彩與對比度（Color & Contrast）---

原理：高對比度的元素在視覺上「跳脫」背景，吸引注意力。

實務應用：

使用亮色或飽和色標記最重要的資訊（如價格、促銷標籤）
背景與前景之間需維持至少 4.5:1 的對比度（WCAG AA 標準）
利用色彩建立資訊分級：主色用於關鍵元素，中性色用於次要內容
避免在重要資訊上使用相近色，以免被忽略

--- 方法三：間距與留白（Spacing & Whitespace）---

原理：元素周圍的空白越多，該元素在視覺上越突出。

實務應用：

重要元素周圍增加邊距，使其從周圍內容中「浮現」
使用間距建立內容區塊之間的視覺分隔，而非依賴分割線
遵循「雙倍間距法則」：區塊間距應至少是區塊內部行高的兩倍
內文段落間距建議為行高的 1.5 至 2 倍

--- 方法四：位置與佈局（Position & Layout）---

原理：用戶閱讀習慣決定了不同位置的視覺權重。

實務應用：

F 型閱讀模式：用戶通常先橫向掃描頂部，然後向下移動並縮短橫向範圍
Z 型閱讀模式：適用於沒有大量文本的頁面（如登陸頁），視線沿著 Z 字路徑移動
左上角是視覺起點，右上角是常見的操作區域（如導航、搜尋）
螢幕中心區域具有最高的視覺權重
上方元素比下方元素更容易被注意到

--- 方法五：重複與一致性（Repetition & Consistency）---

原理：重複的視覺模式建立認知慣性，讓用戶快速理解資訊結構。

實務應用：

所有同級別的標題使用相同的樣式
所有行動呼籲按鈕使用一致的顏色和形狀
圖標風格保持一致（線性 vs. 填充）
卡片式設計中，所有卡片保持相同的內部間距和邊框樣式

2.3 視覺層次的實戰檢查清單

[ ] 用戶能否在 3 秒內識別頁面的主要訊息？
[ ] 最重要的行動呼籲是否是最醒目的元素？
[ ] 次要資訊是否不會干擾主要內容的閱讀？
[ ] 視覺焦點是否與業務目標一致？
[ ] 在不同螢幕尺寸下，層次關係是否仍然清晰？

================================================================================

三、排版設計（Typography）最佳實踐

3.1 排版的四大支柱

排版設計不僅是選擇好看的字型，更是關於資訊的可讀性、可掃描性和整體
視覺和諧。以下是排版的四個核心維度：

--- 支柱一：字型選擇（Font Selection）---

原則：

正文字型應具備優異的可讀性，優先選擇經過時間檢驗的無襯線體（Sans-serif）或高品質的襯線體（Serif）
標題字型可以選擇更具個性的字型，但不可犧牲辨識度
網頁安全字型推薦：Inter、Roboto、Source Sans Pro、Open Sans
高品質付費字型推薦：SF Pro、Helvetica Neue、Georgia

字型類別適用場景：
無襯線體（Sans-serif）：現代數位產品、科技品牌、簡潔介面
襯線體（Serif）：出版媒體、高端品牌、長篇閱讀
手寫體（Script）：僅用於裝飾性標題，不適用於正文
等寬字型（Monospace）：程式碼顯示、技術文件

--- 支柱二：字型配對原則（Font Pairing Principles）---

原則一：對比中求和諧

選擇兩種在風格上相互補充但不衝突的字型
最佳配對策略：一種個性強的字型（用於標題）+ 一種中性易讀的字型（用於正文）

常見有效配對範例：
組合 A（現代感）：
標題：Montserrat（粗體）
正文：Open Sans（常規）

組合 B（經典感）：
標題：Playfair Display（粗體）
正文：Source Sans Pro（常規）

組合 C（科技感）：
標題：Inter（半粗體）
正文：Inter（常規）— 同一字族的字重變化

組合 D（優雅感）：
標題：Cormorant Garamond（粗體）
正文：Lato（常規）

原則二：限制字型數量

單一頁面最多使用 2-3 種字型
優先透過同一字族的不同字重（Light、Regular、Medium、Bold）來建立變化
避免超過三種字型家族，否則視覺會顯得混亂

原則三：建立字型比例系統

使用數學比例（如黃金比例 1.618、完美四度 1.333、大六度 1.618）來定義不同層級字型的字體大小關係
這確保了所有字型尺寸之間存在和諧的比例關係

--- 支柱三：行距與字距（Line Height & Letter Spacing）---

行距（Line Height）最佳實踐：

正文字號 16px：行距建議 24px（1.5 倍）
正文字號 14px：行距建議 20px（約 1.43 倍）
標題行距建議 1.2 至 1.3 倍，因為大字體本身需要更多垂直空間
多行文本的行距不宜過緊，會降低可讀性；也不宜過鬆，會破壞行與行之間的視覺連結

字距（Letter Spacing）最佳實踐：

大標題（48px 以上）：可略微增加字距（0.02em - 0.05em）以提升優雅感
全大寫文字：必須增加字距（0.1em 左右），否則難以辨識
小字體（12px 以下）：略微減少字距（-0.02em）以提高緊湊度
一般正文：保持默認字距，不建議調整

字重（Font Weight）使用指南：
100-300（Thin-Light）：裝飾性用途，不適合正文
400（Regular）：正文標準字重
500（Medium）：強調文本、標籤
600-700（Semi-Bold/Bold）：標題、關鍵數據
800-900（Extra-Bold/Black）：僅用於極大標題

--- 支柱四：文本對齊與長度（Alignment & Line Length）---

對齊方式選擇：

左對齊（Left Align）：最適合拉丁語系和中文的正文閱讀，因為每行起始位置一致，眼睛容易定位
两端對齊（Justify）：可用於雜誌風格排版，但需要仔細調整字距以避免詞間距不均
置中对齊（Center Align）：僅適用於短標題或少量文本，不適合正文
右對齊（Right Align）：僅用於特殊情境（如數字表格、日期）

最佳行長：

英文：每行 45-75 個字符（含空格）
中文：每行 25-40 個字元
過長的行會導致換行時眼睛難以定位下一行的起點
過短的行會造成頻繁換行，破壞閱讀節奏

3.2 響應式排版策略

響應式排版不是簡單地縮放字體大小，而是根據螢幕尺寸和使用情境調整整個
排版系統。

策略一：流動排版（Fluid Typography）

使用 CSS 的 clamp() 函數實現線性縮放：

font-size: clamp(1rem, 0.875rem + 0.625vw, 1.25rem);

這表示：

最小字體：1rem（16px）
最大字體：1.25rem（20px）
中間值根據視口寬度線性計算

策略二：斷點字型調整

在不同斷點處調整字型比例：

/* 手機 (< 768px) */
h1: 1.75rem, h2: 1.5rem, h3: 1.25rem, body: 1rem

/* 平板 (768px - 1024px) */
h1: 2.25rem, h2: 1.75rem, h3: 1.5rem, body: 1.0625rem

/* 桌面 (> 1024px) */
h1: 3rem, h2: 2.25rem, h3: 1.75rem, body: 1.125rem

策略三：行長控制

隨著螢幕變寬，需要增加容器的最大寬度以保持最佳行長：

.prose {
max-width: 65ch; /* 65 個字符寬度 */
}

策略四：字重與行距的動態調整

在大螢幕上，可以稍微減輕字重（因為大字更易讀），同時減少行距：

@media (min-width: 1024px) {
body {
font-weight: 400;
line-height: 1.5;
}
h1 {
line-height: 1.2;
}
}

策略五：可訪問性優先

始終允許用戶在瀏覽器中放大字體（不使用固定像素限制）
尊重用戶的系統字型偏好（prefers-reduced-motion、forced-colors）
確保文字縮放至 200% 後仍可正常閱讀
考慮色盲用戶，不單獨依靠色彩傳達資訊

================================================================================

四、色彩理論與配色方案

4.1 色彩的三屬性

理解色彩的第一步是掌握其三個基本屬性：

色相（Hue）：色彩的種類，如紅、黃、藍等。色相環上任意角度代表不同色相。

飽和度（Saturation）：色彩的純度和強度。高飽和度顯得鮮豔活潑，低飽和度
顯得柔和沉穩。

明度（Value/Lightness）：色彩的明亮程度。高明度接近白色，低明度接近黑色。

4.2 色彩心理學應用

不同色彩會引發不同的心理反應和情感聯想：

--- 紅色（Red）---
心理影響：緊急、熱情、能量、危險、食欲
適用場景：促銷標籤、錯誤提示、行動呼籲按鈕、食品相關產品
注意事項：過度使用會引起焦慮感，建議作為強調色而非主色

--- 藍色（Blue）---
心理影響：信任、專業、穩定、冷靜、科技感
適用場景：金融服務、科技產品、醫療健康、社交媒體
注意事項：最廣泛偏好的顏色，但也最容易顯得平淡，需搭配對比色增加活力

--- 綠色（Green）---
心理影響：自然、成長、健康、成功、環保
適用場景：生態相關產品、成功狀態指示、財務增長、有機食品
注意事項：在西方文化中代表「通行」和「成功」，在亞洲文化中也有財富寓意

--- 黃色（Yellow）---
心理影響：樂觀、溫暖、注意、警示、創造力
適用場景：警告標籤、創意品牌、兒童產品、高光標記
注意事項：低飽和度黃色在淺色背景上可讀性差，慎用

--- 紫色（Purple）---
心理影響：奢華、創意、神秘、靈性、女性化
適用場景：美容產品、創意工具、高端品牌、冥想應用
注意事項：深紫色傳達高級感，淺紫色（薰衣草色）較為溫和

--- 橙色（Orange）---
心理影響：活力、友好、親切、冒險、年輕
適用場景：行動呼籲按鈕、運動品牌、餐飲業、社交應用
注意事項：比紅色溫和但同樣引人注目，是很好的 CTA 選擇

--- 黑色（Black）---
心理影響：權威、優雅、力量、現代感、正式
適用場景：高端品牌、時尚、科技產品、文字主體
注意事項：在數位介面中，純黑 (#000000) 過於強烈，建議使用深灰 (#1A1A1A)

--- 白色（White）---
心理影響：乾淨、簡約、開放、清晰、現代
適用場景：背景、留白、最小化設計
注意事項：白色本身不是顏色，而是光的呈現；在深色主題中對應「黑色」

4.3 配色方案類型

方案一：單色系配色（Monochromatic）

基於單一色相，透過改變飽和度和明度產生變化
優點：極度和諧、不易出錯、專業感強
缺點：可能顯得單調，需要善用對比度區分元素
適用：數據儀表板、專業工具、企業網站

方案二：類似色配色（Analogous）

使用色相環上相鄰的 2-4 種顏色
優點：自然和諧、視覺舒適
缺點：對比度有限，可能需要額外的強調色
適用：生活方式品牌、旅遊平台、藝術相關產品

方案三：互補色配色（Complementary）

使用色相環上相對的兩種顏色
優點：強烈對比、視覺衝擊力大
缺點：搭配不當會顯得刺眼，建議一方作為主色、另一方作為點綴
適用：行動呼籲按鈕、促銷活動、創意品牌

方案四：分裂互補色配色（Split-Complementary）

使用一種主色 + 其互補色兩側的顏色
優點：保留對比度的同時更加柔和
適用：大多數數位產品，是比較安全的選擇

方案五：三元色配色（Triadic）

使用色相環上等距的三種顏色
優點：豐富多彩、充滿活力
缺點：需要精確控制各種顏色的飽和度和比例
適用：兒童產品、遊戲、創意工具

4.4 數位產品的色彩系統架構

一個完整的數位色彩系統應包含以下層級：

主色（Primary Color）
- 品牌的核心色彩，用於主要互動元素
- 通常有淺、中、深三個變體
- 示例：#2563EB（主色）、#DBEAFE（淺色）、#1D4ED8（深色）
次要色（Secondary Color）
- 與主色搭配，用於次要元素和視覺變化
- 示例：#7C3AED（紫色系）
強調色（Accent Color）
- 用於行動呼籲、通知、特殊狀態
- 通常具有高對比度和吸引力
- 示例：#F59E0B（琥珀色）、#10B981（翠綠色）
中性色（Neutral Colors）
- 用於背景、文字、邊框等非功能性元素
- 通常包含一套灰階色板
- 示例：#FFFFFF、#F9FAFB、#F3F4F6、#E5E7EB、#9CA3AF、#6B7280、#374151、#1F2937、#111827、#000000
語義色（Semantic Colors）
- 用於傳達特定狀態和意義
- 成功：#10B981（綠色）
- 警告：#F59E0B（琥珀色）
- 錯誤：#EF4444（紅色）
- 資訊：#3B82F6（藍色）

4.5 色彩可訪問性（Accessibility）

確保色彩組合滿足可訪問性標準至關重要：

WCAG 2.1 對比度要求：

常規文字（小於 18px）：至少 4.5:1 的對比度（AA 級）
大文字（大於等於 18px 或 14px 加粗）：至少 3:1 的對比度（AA 級）
AAA 級別要求更高：常規文字 7:1，大文字 4.5:1

測試工具推薦：

WebAIM Contrast Checker
Stark（Figma/Sketch 外掛）
axe DevTools（瀏覽器擴充功能）

色彩可訪問性最佳實踐：

不單獨依靠色彩傳達資訊（如錯誤狀態應同時有圖標和文字說明）
確保文字與背景的對比度符合標準
測試色盲模擬效果（紅色盲、綠色盲、藍色盲）
支援深色模式時，重新校準所有色彩組合

================================================================================

五、空間運用與留白

5.1 留白的價值

留白（Whitespace / Negative Space）不是「空白的浪費」，而是設計中有價值的
積極元素。它的作用包括：

提升可讀性：適當的行距、字距和段落間距讓文字更容易閱讀
建立層次：重要的元素周圍有更多留白，視覺上更突出
增強美感：留白創造了呼吸感和高級感
引導注意力：留白將用戶的視線引向關鍵內容
分隔內容：用間距代替分割線，視覺上更乾淨

5.2 間距系統（Spacing System）

建立一致的間距系統是設計系統的基石。

標準間距比例（以 4px 為基礎單位）：

4px (0.25rem) — 微間距：圖標與文字之間、緊密關聯的元素
8px (0.5rem) — 小間距：表單字段內邊距、按鈕內部空間
12px (0.75rem) — 中小間距：卡片內部元素間距
16px (1rem) — 標準間距：段落之間、列表項目之間
24px (1.5rem) — 中等間距：區塊之間、組件之間
32px (2rem) — 大間距：頁面區塊之間
48px (3rem) — 超大間距：主要版面區塊之間
64px (4rem) — 極大間距：頁面段落之間
96px (6rem) — 特大間距：Hero 區域、重大分隔

間距應用規則：

內部間距（Padding）應小於外部間距（Margin）
相鄰元素的間距不應超過它們各自容器間距的總和
遵循「遞增法則」：從一個元素到下一個元素的距離應該逐漸增加

5.3 網格系統（Grid Systems）

網格系統是組織空間的框架，確保版面的一致性和秩序感。

常用網格配置：

桌面端（12 欄網格）：

視口寬度：1440px
欄寬：60px
間距（Gutter）：20px
邊距（Margin）：80px（左右各）
可用內容區域：1280px

平板端（8 欄網格）：

視口寬度：768px
欄寬：48px
間距：16px
邊距：24px

手機端（4 欄網格）：

視口寬度：375px
欄寬：64px
間距：16px
邊距：16px

網格系統設計原則：

內容應盡量對齊網格線，建立視覺秩序
跨欄組合應靈活：單欄、雙欄、三欄、全寬等
避免內容恰好居中在欄與欄之間，這會造成視覺不確定感
網格應在響應式中動態調整欄數，而非固定不變

5.4 視覺密度（Visual Density）

不同頁面區域需要不同的視覺密度：

高密度區域：

數據儀表板：需要展示大量資訊，間距可較小
管理後台：操作頻繁，節省空間提高效率
表格和列表：行間距適中，確保可掃描性

中密度區域：

部落格文章：正文行距充足，段落間距明確
產品目錄：卡片間距均衡，留白適中

低密度區域：

登陸頁 Hero 區域：大量留白，聚焦單一訊息
品牌首頁：營造高級感和沉浸感
表單填寫：減少干擾，提升專注度

5.5 間距的響應式調整

間距不應在所有螢幕尺寸上保持固定：

桌面端：
section padding: 96px 0
card gap: 32px
container margin: 80px

平板端：
section padding: 64px 0
card gap: 24px
container margin: 48px

手機端：
section padding: 48px 0
card gap: 16px
container margin: 16px

CSS 實作範例：

:root {
--space-xs: 0.25rem; /* 4px /
--space-sm: 0.5rem; / 8px /
--space-md: 1rem; / 16px /
--space-lg: 1.5rem; / 24px /
--space-xl: 2rem; / 32px /
--space-2xl: 3rem; / 48px /
--space-3xl: 4rem; / 64px */
}

@media (max-width: 768px) {
:root {
--space-xl: 1.5rem;
--space-2xl: 2rem;
--space-3xl: 3rem;
}
}

================================================================================

六、視覺重量與對齊

6.1 視覺重量（Visual Weight）的概念

視覺重量是指一個元素在畫面中「看起來有多重」，即它吸引注意力的能力。
視覺重量重的元素會先被看到，輕的元素則退居次位。

影響視覺重量的因素：

大小：越大越重
色彩：越飽和、越暗越重
對比度：與周圍對比越強越重
複雜度：越複雜越重（細節多的圖案比簡單的形狀更有重量）
密度：元素越密集越重
位置：靠近中心的元素比邊緣的更重
熟悉度：我們認識的元素更容易被注意到
色彩心理：暖色比冷色看起來更重

6.2 視覺平衡（Visual Balance）

平衡是視覺設計的基礎原則之一，分為兩種類型：

對稱平衡（Symmetrical Balance）：

畫面兩側的元素在視覺重量上相等
創造穩定、正式、權威的感覺
適用於企業網站、政府機構、法律服務
風險：可能顯得乏味或缺乏動感

非對稱平衡（Asymmetrical Balance）：

不同大小的元素透過視覺權重的調整達到平衡
例如：左側一個大圖像的重量 = 右側多個小元素的總和
創造動態、有趣、現代的感覺
適用於創意作品集、生活方式品牌、創新產品
挑戰：需要更高的設計敏感度

平衡的實務技巧：

使用網格系統作為平衡的參考框架
大元素配小間距，小元素配大間距
色彩豐富的區域需要更多留白來平衡
文字密集的區域可以用圖像或色塊來平衡

6.3 對齊原則（Alignment）

對齊是建立視覺秩序和專業感的關鍵。

四種基本對齊方式：

左對齊（Left Alignment）：

最常見、最易讀的對齊方式
所有元素的左邊緣對齊在同一垂直線上
建立清晰的閱讀起點
適用於大多數文字內容和列表

右對齊（Right Alignment）：

適合數字、日期、價格等需要對齊的元素
用於創造視覺張力和不平衡的美感
文字內容不建議右對齊（除非是阿拉伯文等從右向左書寫的語言）

中心對齊（Center Alignment）：

創造正式、平衡的感覺
適合短標題、引言、封面頁
不適合作為正文的主要對齊方式
長文本中心對齊會嚴重降低可讀性

混合對齊（Mixed Alignment）：

不同區塊使用不同的對齊方式
例如：標題左對齊，引用文字中心對齊
需要謹慎使用，確保整體仍然有統一的視覺秩序

對齊的最佳實踐：

每個元素都應該與頁面上的某個其他元素對齊
避免隨意放置元素，即使看起來「差不多」
使用網格線作為對齊的參考基準
對齊可以隱含（通過網格）或明確（通過邊框、分割線）
當無法完美對齊時，寧可不對齊也不要勉強

6.4 視覺流（Visual Flow）

視覺流是指用戶視線在頁面上移動的路徑。設計師可以透過以下方式引導視覺流：

引導技巧：

指向性元素：箭頭、手指、目光方向
線條和邊界：水平線引導橫向移動，垂直線引導縱向移動
色彩漸變：從深色到淺色的過渡引導視線
大小漸變：由大到小的元素排列引導閱讀順序
留白引導：在兩個元素之間留白，暗示它們屬於不同群組
圖標和圖形：視覺上突出的圖形元素吸引注意力

視覺流的設計策略：

明確設計用戶的視線路徑
在關鍵節點放置視覺錨點（如標題、CTA 按鈕）
確保視覺流與內容的邏輯順序一致
避免多重競爭的視覺焦點

================================================================================

七、設計系統視覺規範範例

7.1 設計系統概述

設計系統（Design System）是一套共享的語言、工具和規範，確保產品體驗的
一致性和可擴展性。視覺規範是設計系統的核心組成部分，涵蓋色彩、排版、
間距、圖標、影陰、圓角等所有視覺資產。

7.2 完整視覺規範範例

以下是一個完整的設計系統視覺規範範例：

--- 7.2.1 色彩規範 ---

【品牌主色】
Primary-50: #EFF6FF
Primary-100: #DBEAFE
Primary-200: #BFDBFE
Primary-300: #93C5FD
Primary-400: #60A5FA
Primary-500: #3B82F6 <-- 標準主色
Primary-600: #2563EB
Primary-700: #1D4ED8
Primary-800: #1E40AF
Primary-900: #1E3A8A

【品牌次要色】
Secondary-500: #8B5CF6
Secondary-600: #7C3AED

【強調色】
Accent-500: #F59E0B （琥珀色，用於 CTA）
Accent-600: #D97706

【語義色】
Success-500: #10B981
Warning-500: #F59E0B
Error-500: #EF4444
Info-500: #3B82F6

【中性色】
Gray-50: #F9FAFB
Gray-100: #F3F4F6
Gray-200: #E5E7EB
Gray-300: #D1D5DB
Gray-400: #9CA3AF
Gray-500: #6B7280
Gray-600: #4B5563
Gray-700: #374151
Gray-800: #1F2937
Gray-900: #111827

【使用規則】

文字顏色：Primary-700 用於標題，Gray-700 用於正文，Gray-500 用於輔助文字
背景顏色：Gray-50 用於頁面背景，White 用於卡片和模態框
邊框顏色：Gray-200 用於常規邊框，Gray-300 用於禁用狀態
互動狀態：Primary-600 用於懸停，Primary-700 用於按下

--- 7.2.2 排版規範 ---

【字族設定】
標題字族：'Inter', sans-serif
正文字族：'Inter', sans-serif
代碼字族：'JetBrains Mono', monospace

【字型比例尺】（基於 1.25 比例）
XS: 0.75rem (12px) — 微小標籤、腳註
SM: 0.875rem (14px) — 輔助文字、表單標籤
Base: 1rem (16px) — 正文標準
LG: 1.125rem (18px) — 正文加大、摘要
XL: 1.25rem (20px) — 小標題、引用文字
2XL: 1.5rem (24px) — 副標題
3XL: 1.875rem (30px) — 大標題
4XL: 2.25rem (36px) — 頁面主標題
5XL: 3rem (48px) — Hero 區域標題

【字重設定】
Light: 300 — 僅用於裝飾性標題
Regular: 400 — 正文標準
Medium: 500 — 強調文本、導航項目
SemiBold: 600 — 副標題、卡片標題
Bold: 700 — 主標題、關鍵數據
ExtraBold: 800 — 僅用於極大標題

【行高設定】
Tight: 1.25 — 大標題（3XL 及以上）
Normal: 1.5 — 正文
Relaxed: 1.75 — 長篇文章、博客
Loose: 2.0 — 引用文字、引言

【樣式類別定義】
.heading-1: font-size: 4XL; font-weight: Bold; line-height: Tight
.heading-2: font-size: 3XL; font-weight: SemiBold; line-height: Tight
.heading-3: font-size: 2XL; font-weight: SemiBold; line-height: Normal
.heading-4: font-size: XL; font-weight: Medium; line-height: Normal
.body-large: font-size: LG; font-weight: Regular; line-height: Normal
.body: font-size: Base; font-weight: Regular; line-height: Normal

推荐订阅源

DEV Community

目錄

一、前言

二、視覺層次（Visual Hierarchy）原則

三、排版設計（Typography）最佳實踐

四、色彩理論與配色方案

五、空間運用與留白

六、視覺重量與對齊

七、設計系統視覺規範範例

推荐订阅源

DEV Community

目 錄

一、前 言

二、視覺層次（Visual Hierarchy）原則

三、排版設計（Typography）最佳實踐

四、色彩理論與配色方案

五、空間運用與留白

六、視覺重量與對齊

七、設計系統視覺規範範例

目錄

一、前言