.body-small: font-size: SM; font-weight: Regular; line-height: Normal
.caption: font-size: XS; font-weight: Regular; line-height: Normal
.button: font-size: SM; font-weight: Medium; line-height: Normal
.label: font-size: SM; font-weight: Medium; line-height: Normal
--- 7.2.3 間距規範 ---
【間距比例尺】（基於 4px 單位）
0: 0px
1: 4px (0.25rem)
2: 8px (0.5rem)
3: 12px (0.75rem)
4: 16px (1rem)
6: 24px (1.5rem)
8: 32px (2rem)
12: 48px (3rem)
16: 64px (4rem)
20: 80px (5rem)
24: 96px (6rem)
【響應式中斷點】
Mobile: < 640px
Tablet: >= 640px and < 1024px
Desktop: >= 1024px and < 1280px
Large: >= 1280px
【容器寬度】
Container-xs: 480px
Container-sm: 640px
Container-md: 768px
Container-lg: 1024px
Container-xl: 1280px
Container-2xl: 1536px
--- 7.2.4 圓角規範 ---
Radius-none: 0px — 極端工業風格
Radius-sm: 4px — 按鈕、輸入框
Radius-md: 8px — 卡片、下拉選單
Radius-lg: 12px — 模態框、對話框
Radius-xl: 16px — Hero 區域、大型卡片
Radius-full: 9999px — 圓形按鈕、徽章、頭像
--- 7.2.5 陰影規範 ---
Shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
Shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1)
Shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1)
Shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1)
Shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25)
Shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)
【使用規則】
- 卡片懸停狀態使用 Shadow-md -> Shadow-lg 的過渡
- 模態框和下拉選單使用 Shadow-lg
- 浮動操作按鈕（FAB）使用 Shadow-xl
- 禁用狀態不使用陰影
--- 7.2.6 動畫與過渡規範 ---
Duration-fast: 150ms
Duration-normal: 200ms
Duration-slow: 300ms
Duration-slower: 500ms
Easing-default: cubic-bezier(0.4, 0, 0.2, 1)
Easing-enter: cubic-bezier(0, 0, 0.2, 1)
Easing-exit: cubic-bezier(0.4, 0, 1, 1)
【使用規則】
- 微交互（按鈕點擊、hover）使用 Duration-fast
- 狀態切換（展開/收合）使用 Duration-normal
- 頁面轉換使用 Duration-slow
- 避免超過 500ms 的動畫，會影響感知性能
--- 7.2.7 圖標規範 ---
Size-xs: 16px
Size-sm: 20px
Size-md: 24px <-- 標準尺寸
Size-lg: 28px
Size-xl: 32px
Stroke-width: 2px <-- 標準線寬
Corner-radius: 2px <-- 標準圓角
【使用規則】
- 所有圖標應保持相同的視覺重量
- 線性圖標和填充圖標不應混用
- 圖標與文字的垂直中心應對齊
- 圖標按鈕的最小觸控區域為 44x44px
--- 7.2.8 響應式斷點範例 ---
/* Tailwind CSS 風格的斷點 /
sm: 640px / 小平板 /
md: 768px / 大平板 /
lg: 1024px / 小桌面 /
xl: 1280px / 標準桌面 /
2xl: 1536px / 大桌面 */
/* 響應式排版範例 /
h1 {
font-size: 1.75rem; / 手機 /
}
@media (min-width: 768px) {
h1 { font-size: 2.25rem; } / 平板 /
}
@media (min-width: 1024px) {
h1 { font-size: 3rem; } / 桌面 */
}
/* 響應式間距範例 /
.section {
padding: 2rem 1rem; / 手機 /
}
@media (min-width: 768px) {
.section { padding: 3rem 1.5rem; } / 平板 /
}
@media (min-width: 1024px) {
.section { padding: 4rem 2rem; } / 桌面 */
}
7.3 視覺規範的治理與維護
建立視覺規範只是第一步，持續治理同樣重要：
治理原則：
- 版本控制：使用 Git 管理設計系統的變更，記錄每次修改的原因和影響
- 設計令牌（Design Tokens）：將所有視覺值抽象為可引用的令牌，而非硬編碼
- 自動化測試：使用視覺回歸測試（如 Chromatic、Percy）檢測意外的視覺變化
- 設計審查：定期審查新增元件是否符合視覺規範
- 文檔更新：任何規範變更都需要同步更新文檔和使用範例
- 遷移策略：舊版元件的逐步淘汰應有明確的時間表和替代方案
================================================================================
八、結 論
視覺設計在數位體驗中的應用是一門融合科學與藝術的綜合學科。本報告探討的
六大核心領域——視覺層次、排版設計、色彩理論、空間運用、視覺重量與對齊、
以及設計系統規範——並非孤立存在，而是相互交織、共同作用的整體。
關鍵要點總結：
視覺層次是體驗設計的骨架。透過大小、色彩、間距、位置和一致性五種手段，
我們可以引導用戶的注意力，確保最重要的資訊最先被感知。排版設計是資訊傳遞的血脈。合理的字型配對、精確的字級比例、恰當的行距
和字距，決定了一頁內容是否易讀、舒適且具美感。響應式排版則確保這些
品質在所有設備上都能維持。色彩理論是情感溝通的橋樑。色彩不僅是視覺裝飾，更是心理暗示和行為引導
的工具。一個精心構建的色彩系統，能夠在品牌識別、狀態傳達和可訪問性
之間取得平衡。空間運用是視覺呼吸的節奏。留白不是空無一物，而是有意識的選擇。透過
一致的間距系統、合理的網格配置和靈活的視覺密度控制，設計師可以創造
出既高效又舒適的使用體驗。視覺重量與對齊是秩序建立的基礎。理解哪些元素看起來更「重」，以及如何
透過對齊和平衡來組織畫面，是設計專業性的體現。設計系統規範是可擴展性的保障。將上述所有原則抽象為可重複使用的規範
和元件，確保團隊在規模增長時仍能維持一致的視覺品質。
最終，優秀的視覺設計不是為了「好看」而存在，而是為了「好用」而服務。
每一個視覺決策都應該回答同一個問題：這個設計選擇如何幫助用戶更好地
理解內容、完成任務、獲得愉悅的體驗？
當視覺層次清晰、排版精緻、色彩和諧、空間舒暢、對整齊有序、規範一致
時，用戶體驗自然會達到最高水準。
================================================================================
參考資源
- Smashing Magazine - Visual Hierarchy in Web Design
- Nielsen Norman Group - Visual Hierarchy and Information Architecture
- Material Design Guidelines - Typography, Color, Spacing
- Apple Human Interface Guidelines - Visual Design Principles
- WCAG 2.1 - Web Content Accessibility Guidelines
- Edward Tufte - The Visual Display of Quantitative Information
- Robin Williams - The Non-Designer's Design Book
- Muller-Brockmann - Grid Systems in Graphic Design
- Italo Lupi - Grid Systems: Principles of Organising Type
- Google Material Design 3 - Theming and Token Architecture
================================================================================
Top comments (0)