讓介面感覺更優質 是做什麼的？
使用此技能來處理那些累積起來能讓介面更精緻的細微設計工程細節。
來源：從社群 PR #1659（由 linus707 提交）中搶救而來。
使用時機
- 使用者表示 UI 感覺怪怪的、平淡、千篇一律、擁擠、跳動或未完成。
- 你正在建構控制項、卡片、列表、儀表板、導覽、表單或工具列。
- 某個元件需要 hover、active、focus、進入、離開、載入或空狀態。
- 前端審查需要具體的修改前/後建議。
核心原則
同心半徑
對於相鄰的嵌套圓角表面：
外層半徑 = 內層半徑 + 間距
如果間距很大，則將圖層視為獨立表面，而不是強行套用公式。重點是視覺上的一致性，而不是盲目遵循公式。
光學對齊
幾何置中不一定是視覺置中。圖示按鈕、播放三角形、箭頭、星星和非對稱圖示通常需要微小的偏移。如果可能，修正 SVG；否則，使用像素級別的 margin 或 padding 進行調整。
陰影與邊框
使用邊框來分隔和聚焦環。當卡片、按鈕、下拉選單或彈出視窗需要深度感時，使用分層陰影。陰影應該是透明的且足夠柔和，以便在各種背景上都能適用。
文字換行
- 在標題和短標題上使用
text-wrap: balance。 - 在中短長度的正文、說明文字、描述和列表項上使用
text-wrap: pretty。 - 在長篇文章、程式碼和預格式化內容上避免使用上述兩者。
- 在計數器、計時器、價格、表格和其他會更新的數字上使用
font-variant-numeric: tabular-nums。
字體平滑
在 macOS 上，當專案尚未設定時，在根佈局中套用抗鋸齒字體平滑：
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
圖像輪廓
圖像通常需要一個微妙的內嵌輪廓，以防止它們的邊緣與背景模糊在一起。
img {
outline: 1px solid rgba(0, 0, 0, 0.1);
outline-offset: -1px;
}
@media (prefers-color-scheme: dark) {
img {
outline-color: rgba(255, 255, 255, 0.1);
}
}
使用中性黑色或白色的透明度輪廓。不要為圖像輪廓加上品牌色調。
動態效果
對互動狀態變化使用 CSS 過渡，因為它們能在使用者中途改變意圖時重新定位目標。保留關鍵影格用於分階段的單次進入或載入序列。
良好的動態效果預設值：
- 進入：結合透明度、微小的
translateY，以及可選的模糊效果。 - 離開：比進入更短且更安靜，通常為 150ms。
- 按下：對觸覺按鈕使用
scale(0.96)，並提供一種在移動造成干擾時禁用它。 - 圖示切換：使用透明度、縮放和模糊進行交叉淡入淡出，而不是即時切換可見性。
過渡範圍
絕對不要使用 transition: all。指定已更改的屬性：
.button {
transition-property: transform, background-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
僅對 compositor-friendly 的屬性（例如 transform、opacity 和 filter）在首幀卡頓時使用 will-change。絕對不要使用 will-change: all。
點擊區域
互動式控制項應至少有 40x40px 的點擊區域，理想情況下在佈局允許時為 44x44px。當可見圖示較小時，使用偽元素進行擴展，但不要讓擴展的點擊區域重疊。
審查輸出
在審查 UI 潤色時，以修改前/後對比表格的形式報告具體的更改：
| 原則 | 修改前 | 修改後 |
|---|---|---|
| 同心半徑 | 父層與子層的半徑相同 | 父層半徑考慮了間距 |
| 表格數字 | 計數器在數字變化時移動 | 計數器使用 tabular-nums |
| 過渡範圍 | transition: all | 明確的過渡屬性 |
當程式碼片段不明顯時，請包含檔案路徑和屬性。省略你已檢查但未更改的原則。
檢查清單
- 嵌套的圓角元素在視覺上一致。
- 圖示在視覺上置中。
- 按鈕、卡片和彈出視窗基於正確的原因使用邊框或陰影。
- 標題和短文字避免尷尬的換行。
- 動態數字使用表格數字。
- 圖像在需要時有中性輪廓。
- 進入和離開動畫已分割、柔和且可在適當時中斷。
- 按鈕具有觸覺上的 active 狀態，且沒有誇張的動態效果。
- 沒有
transition: all和will-change: all。 - 小型控制項仍有可用的點擊區域。