網頁有 Material Design、iOS 有 Human Interface Guidelines，但 TUI？每個工具都在自己發明輪子。
先講結論
TUI（Terminal User Interface）正在經歷文藝復興。lazygit、btop、k9s、Claude Code——越來越多開發者工具選擇終端介面。但目前沒有統一的設計規範，導致每個工具的操作方式都不同。這篇嘗試整理一套一致性框架，不是強制規格書，而是「如果大家都這樣做，使用者會更開心」的建議。
系列文章：本篇：原則、色彩與佈局 → 元件、框架與實戰分析
為什麼 TUI 正在流行
lazygit 取代了 GitKraken、k9s 取代了 Kubernetes Dashboard、btop 取代了系統監控 GUI。然後 Claude Code、GitHub Copilot CLI 等 AI 工具也選了 TUI——這不只是復古潮流，是有實質優勢的選擇。
核心優勢很直接：SSH 可達（任何有終端的地方都能用）、啟動毫秒級（Electron 動輒吃幾百 MB）、鍵盤效率碾壓滑鼠、天然適合自動化和管道串接。加上 Bubble Tea、Ink、Rich 這些現代框架，打造精美 TUI 變得前所未有地簡單。
五大設計原則
原則一：鍵盤優先
每一個操作都必須能透過鍵盤完成。 滑鼠支援是加分項，不是必要條件。這跟網頁的 Mobile-First 類似——先確保核心互動在最受限的情境下可用。
原則二：漸進式揭露
終端空間有限，不能像網頁無限捲動。先顯示關鍵摘要，按需展開詳情。lazygit 是典範：左側面板顯示檔案列表，選取後右側顯示 diff，按 Enter 進入逐行檢視。
原則三：情境感知
使用者在任何時刻都要能回答：我在哪裡？我能做什麼？剛才發生了什麼？用高亮標示焦點、底部狀態列顯示快捷鍵、操作後顯示回饋訊息。
原則四：優雅降級
你精心調教的 True Color 配色，在某些終端可能只有 16 色。設計時以 80 欄寬、ANSI 16 色為基線，寬螢幕和 True Color 是加分項。
原則五：一致的回饋
沒有回饋是最糟的體驗——使用者按了一個鍵，什麼都沒發生。是成功了？失敗了？還是沒偵測到？
成功：✓ Done （綠色）
失敗：✗ Error （紅色，停留直到按鍵關閉）
進行中：⠋ Loading...（旋轉動畫）
警告：⚠ Warning （黃色）
色彩系統
ANSI 16 色的語意映射
不要用「紅色」思考，要用「語意」思考：
| 語意 | 色彩 | 符號 | 場景 |
|---|---|---|---|
| error | Red | ✗ | 錯誤、失敗 |
| success | Green | ✓ | 成功、完成 |
| warning | Yellow | ⚠ | 警告、注意 |
| info | Blue | ℹ | 提示、說明 |
| destructive | Red + Bold | ✗✗ | 刪除、不可逆 |
| secondary | Dim/Gray | · | 次要、已停用 |
無障礙：不要只靠顏色
約 8% 的男性有色覺障礙。永遠不要讓顏色成為唯一的資訊傳遞方式：
不好：紅色文字 = 失敗 | 綠色文字 = 成功
好的：✗ 紅色文字 = 失敗 | ✓ 綠色文字 = 成功
同時使用顏色 + 符號（或文字標籤），確保單色環境也能讀。
深色/淺色終端
是的，有人用淺色背景。避免硬編碼「白色文字 + 黑色背景」，使用終端的預設前景/背景色。兩種主題都要測試。
佈局模式
全螢幕應用佈局
┌─────────────────────────────────────────────┐
│ 標題列 [模式/狀態] │
├──────────────┬──────────────────────────────┤
│ │ │
│ 側邊欄 │ 主要內容區 │
│ (20-30 欄) │ (剩餘空間) │
│ │ │
├──────────────┴──────────────────────────────┤
│ ↑↓ 導航 | Enter 選取 | q 退出 | ? 說明 │
└─────────────────────────────────────────────┘
狀態列永遠在最下方，列出目前可用的快捷鍵。這是 TUI 裡最重要的設計決策之一——使用者不需要背快捷鍵，看底部就知道能做什麼。
響應式設計
寬度 >= 120：雙欄（側邊欄 + 主內容）
寬度 80-119：全螢幕列表，Enter 進入詳情
寬度 < 80： 簡化顯示，截斷長文字
模態對話框
┌─── 確認刪除 ──────────┐
│ │
│ 確定要刪除 main.js？ │
│ [Yes] [No] │
└───────────────────────┘
預設焦點放在安全選項上（通常是 No/Cancel）。危險操作？要求使用者輸入確認文字：
⚠ 此操作將刪除所有資料且無法復原。
請輸入 "delete-all" 以確認：> █
互動模式
導航鍵位
同時支援 Vim 和方向鍵是最佳實踐——不需要強制 Vim，但終端使用者群跟 Vim 使用者群高度重疊。
| 操作 | Vim | 方向鍵 |
|---|---|---|
| 上/下移 | j/k | ↑/↓ |
| 左/右 | h/l | ←/→ |
| 頂部/底部 | g/G | Home/End |
| 上/下一頁 | Ctrl+u/d | PgUp/PgDn |
| 切換面板 | Tab | Tab |
系統操作
| 按鍵 | 操作 |
|---|---|
? | 顯示快捷鍵說明 |
q | 退出（有未儲存變更先確認） |
Ctrl+C | 強制退出（永遠要能用） |
/ | 開始搜尋 |
Space | 切換選取 |
Enter | 確認 |
Esc | 取消/返回 |
狀態列要跟著情境變
在列表頁：↑↓ 導航 | Enter 檢視 | d 刪除 | / 搜尋
在編輯模式：Esc 取消 | Ctrl+S 儲存 | Tab 下一個欄位
在確認對話框：y 確認 | n 取消
Web 有完整的設計系統，TUI 才剛起步。但隨著 AI 工具越來越多選擇終端介面，TUI 設計的重要性只會持續增長。
延伸閱讀
- TUI 設計規範（二）：元件、框架與實戰分析
- Charm.sh — Go TUI 工具生態
- no-color.org — NO_COLOR 環境變數標準
- clig.dev — CLI Guidelines