讓介面質感提升 是做什麼的？
使用此技能來處理那些累積起來能讓介面更精緻的設計工程細節。
來源：從過時的社群 PR #1659（由 linus707 提交）中搶救回來。
使用時機
- 使用者說 UI 感覺不對勁、過於扁平、單調、擁擠、跳動或未完成。
- 你正在建構控制項、卡片、列表、儀表板、導航、表單或工具列。
- 元件需要 hover、active、focus、enter、exit、loading 或 empty 狀態。
- 前端審查需要具體的修改前/後建議。
核心原則
同心圓半徑
對於相鄰的嵌套圓角表面：
外層半徑 = 內層半徑 + 內距
如果內距很大，則將各層視為獨立表面，而不強求數學公式。重點在於視覺一致性，而非僵化套用公式。
光學對齊
幾何置中不總是視覺置中。圖示按鈕、播放三角形、箭頭、星號及不對稱圖示通常需要微調偏移。盡可能修正 SVG；否則透過像素級的 margin 或 padding 調整。
陰影與邊框
使用邊框來區隔元素和顯示焦點環。當卡片、按鈕、下拉選單或彈出視窗需要深度感時，使用層疊陰影。陰影應為透明且夠柔和，以便在各種背景上都適用。
文字換行
- 在標題和短標題上使用
text-wrap: balance。 - 在短到中長度的內文、標題、描述和列表項目上使用
text-wrap: pretty。 - 避免在長篇散文、程式碼和預格式化內容上使用這兩種屬性。
- 對於計數器、計時器、價格、表格以及其他會更新的數字，使用
font-variant-numeric: tabular-nums。
字體平滑
在 macOS 上，如果專案尚未設定，則在 root 佈局中套用抗鋸齒字體平滑：
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);
}
}
使用中性黑色或白色的 Alpha 外框。不要使用品牌色調來為圖片外框著色。
動態效果
對互動狀態變化使用 CSS transition，因為當使用者在動畫中途改變意圖時，它們可以重新鎖定目標。保留 keyframes 用於分階段的單次進場或載入序列。
良好的動態效果預設值：
- 進場：結合透明度、小幅度的
translateY，以及選擇性的模糊效果。 - 離場：比進場更短、更柔和，通常為 150ms。
- 按壓：按鈕使用
scale(0.96)產生觸覺回饋，並提供在移動造成干擾時停用的方式。 - 圖示切換：使用透明度、縮放和模糊進行交叉淡入淡出，而不是瞬間切換顯示。
Transition 範圍
永遠不要使用 transition: all。應指定有變化的屬性：
.button {
transition-property: transform, background-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
will-change 僅用於需要避免第一幀卡頓的情況，且僅適用於 transform、opacity 和 filter 這類合成器友善的屬性。絕對不要使用 will-change: all。
點擊區域
互動控制項應至少具有 40x40px 的點擊區域，理想情況下，如果版面允許，應為 44x44px。當可見圖示較小時，可使用偽元素來擴展點擊區域，但不要讓擴展後的點擊區域彼此重疊。
審查輸出
審查 UI 打磨時，應以修改前/後的對照表報告具體變更：
| 原則 | 修改前 | 修改後 |
|---|---|---|
| 同心圓半徑 | 父層與子層半徑相同 | 父層半徑考慮了內距 |
| 等寬數字 | 計數器隨數字變化而移位 | 計數器使用 tabular-nums |
| Transition 範圍 | transition: all | 明確的 Transition 屬性 |
當檔案路徑和屬性在程式碼片段中不明顯時，應一併包含。省略你已檢查但未修改的原則。
檢查清單
- 嵌套圓角元素在視覺上一致。
- 圖示已視覺置中。
- 按鈕、卡片和彈出視窗正確使用了邊框或陰影。
- 標題和短文避免了尷尬的換行。
- 動態數字使用了等寬數字。
- 圖片在需要的地方有中性外框。
- 進場和離場動畫已分開、柔和且在適當情況下可中斷。
- 按鈕有觸覺般的 active 狀態，且沒有誇張的動畫。
-
transition: all和will-change: all不存在。 - 小型控制項仍有可用的點擊區域。