冷靜且密集的設計
一種品味,而非外皮。Linear 與 Things 3 是判斷的參考——如何在不產生雜訊的情況下呈現大量資訊,以及如何在不明確的情況下保持冷靜。借用它們的深色主題、紫色強調色或藍/綠品牌色,並不代表借用了這種品味。
有兩堂課承載了大部分的價值:
- Linear — 有密度但無雜訊。 以克制的層級呈現密集的工作。
- Things — 冷靜但不軟弱。 透過隱藏細節直到它值得出現,來保持主介面的冷靜,而不是透過清空畫面。
原則
每個原則都是一條規則,加上它所強制的取捨。在建立或檢討介面時應用它們。
- 不要爭奪你尚未掙得的注意力。 外框、分隔線、元資料、非活動標籤頁、重複的圖示應退居次要;主要內容與單一主要操作應在不喧嘩的情況下優先被讀取。
- 結構是感受的,而非看見的。 透過光學對齊、一致的間距節奏、0.5–1px 分隔線、透明度階層、分組背景與字體來獲得層級——而不是依賴粗邊框、大陰影、裝飾性漸層、飽和面板或圖示容器。
- 密集但不雜亂。 可預測對齊的緊湊行,以及漸進式揭露細節。不應是:微小難以閱讀的文字、每一行都暴露所有控制項、或充氣般的內距偽裝成「高級」。
- 能釐清的冷靜,而非隱藏的冷靜。 冷靜來自清晰的層級與一個明顯的下一個行動——而不是來自蒼白的空白空間、假裝安靜的低對比文字、或當作裝飾使用的空狀態。
- 節制的語意色彩。 強調色用於標示選取、焦點、重要狀態以及正向/完成狀態——永遠不是裝飾。尊重系統強調色;不要用品牌色重新塗滿一切。「完成綠」是語意提示,而非應用程式的主色。
字體與動態
- 字體: 使用系統字型,除非有強烈理由使用其他字體;層級來自大小、粗細、透明度與位置。方向:畫面標題(清晰,不過大)→ 行標題(中等粗細)→ 元資料(較小,較低透明度)→ 狀態(緊湊,有語意,不濫用徽章)→ 主體文字(簡短,可讀)。
- 動態: 用來解釋連續性或狀態變化(例如作曲器出現、選取移動、內嵌狀態更新)。絕不裝飾。始終尊重減少動畫設定。
兩個決策測試
- 戲劇測試: 如果某種處理方式增加了視覺戲劇性,但並未改善導航、速度、信心或任務完成度——請移除它。
- 冷靜測試: 如果「冷靜」讓層級、密度或下一個行動變得更難閱讀——那它就不是冷靜,而是模糊。請緊縮它。
自我檢查
針對一個介面檢查這些項目。回答「否」代表一個發現,而非偏好:
- 主要任務是否在一瞥之下就顯而易見,無需眼睛搜尋?
- 次要外框是否退居次要,還是與主要內容競爭?
- 行/項目是否在可預測的網格與基線上對齊?
- 畫面是否因為資訊豐富而密集——還是因為內距膨脹而顯得稀疏?
- 色彩是否傳達了狀態,還是僅僅是品牌裝飾?
- 你是否可以刪除一個分隔線、陰影、漸層或圖示容器,而完全不受影響?
深入探討
references/in-practice.md — 具體(示範性)數值、擴充的偏好/避免清單,以及如何在審查過程中應用此品味。
非此技能的職責範圍
這是與平台無關的品味。平台慣例、控制項與架構位於別處:
- Apple(iOS/iPadOS/macOS)UI + HIG + SwiftUI/AppKit + 視覺 QA →
apple-app-design-guidelines。 - 跨平台原生感桌面架構(shell + WebView + IPC) →
native-feel-desktop。
當品味與平台衝突時,請以平台為優先——遵循那些技能的指引。