UI 排版指南
學習 UI 排版設計原則、字體選擇、可讀性、響應式設計
UI 排版基礎
為什麼 UI 排版很重要
UI 設計中的排版直接影響使用者體驗、可讀性，以及整體應用程式的感知。良好的排版引導使用者瀏覽您的介面並增強可用性。
可讀性優先
UI 字體必須優先考慮可讀性，而不是風格。使用者需要快速掃描並理解資訊，而不會感到疲勞。
- 清晰的字符區分
- 適當的行間距
- 良好的對比度
- 合適的字體大小
一致性
在您的介面中維持一致的排版，以創造連貫的使用者體驗。
- 一致的字體家族
- 統一的尺寸比例
- 標準化的間距
- 可預測的層級
字體選擇
無襯線字體
無襯線字體通常優先於 UI 設計，因為它們的外觀乾淨且在螢幕上具有出色的可讀性。
熱門 UI 字體：
- Inter
- Roboto
- Open Sans
- SF Pro Display
特點：
- 乾淨且現代
- 出色的螢幕可讀性
- 在小型尺寸上表現良好
- 廣泛的語言支援
字體粗細
使用不同的字體粗細來創建層級並強調重要資訊。
輕量 (300)
次要文字，標題
常規 (400)
正文，主要內容
粗體 (700)
標題，強調
排版比例
響應式排版比例
桌面比例
- H1: 48px / 56px 行高
- H2: 36px / 44px 行高
- H3: 24px / 32px 行高
- 正文: 16px / 24px 行高
- 小字: 14px / 20px 行高
移動比例
- H1: 32px / 40px 行高
- H2: 28px / 36px 行高
- H3: 20px / 28px 行高
- 正文: 16px / 24px 行高
- 小字: 14px / 20px 行高
可讀性優化
行長
最佳行長可讀性為 45-75 個字符。這可以防止眼睛疲勞並提高閱讀速度。
指南：
- 桌面：50-75 個字符
- 平板：40-60 個字符
- 移動：30-50 個字符
行間距
適當的行間距（行高）可以提高可讀性並減少眼睛疲勞。
建議比例：
- 標題：1.1-1.3
- 正文文字：1.4-1.6
- 小字：1.5-1.7
響應式排版
CSS 實現
使用 CSS 媒體查詢和相對單位進行響應式排版：
/* 基礎樣式 */
body {
font-size: 16px;
line-height: 1.5;
}
/* 響應式排版 */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
@media (min-width: 1024px) {
body {
font-size: 20px;
}
}
視口單位
使用視口單位 (vw) 進行真正響應式的排版，隨著螢幕尺寸而縮放。
流體排版
使用 CSS clamp() 實現流體排版，在最小和最大尺寸之間平滑縮放。
無障礙考量
色彩對比
確保文字和背景顏色的對比度充足（WCAG AA 標準：正常文字 4.5:1）。
字體大小
提供選項讓使用者可以調整字體大小。移動設備上的正文文字最小 16px。
螢幕閱讀器
使用語義化 HTML 和適當的標題層級確保螢幕閱讀器相容性。
UI 排版最佳實踐
關鍵原則
- 從清晰的排版層級開始
- 使用一致的間距和對齊
- 在不同設備上測試可讀性
- 考慮網頁字體的載入性能
- 提供回退字體以提高相容性
- 使用適當的字體粗細進行強調
- 確保移動設備的觸控目標充足
- 與真實使用者測試並收集反饋