make-interfaces-feel-better

Make Interfaces Feel Better

使用此 Skill 來處理微小的設計工程細節，積少成多，打造出更精緻流暢的介面。

來源：取材自 linus707 提出的社群 PR #1659。

適用時機

• 使用者反映 UI 看起來怪怪的、太扁平、太通用、擁擠、跳動或像沒做完。
• 你正在建立控制項、卡片、列表、儀表板、導覽列、表單或工具列。
• 元件需要 Hover、Active、Focus、進場、退場、載入中（Loading）或空白（Empty）等狀態。
• 前端審查需要提供具體的修改前後（Before/After）對比建議。

核心原則

同心圓角（Concentric Radius）

當多個圓角元件形成巢狀結構時：

outer radius = inner radius + padding

若內外邊距（Padding）較大，建議直接將不同層級視為獨立表面，不必死板硬套公式。重點在於視覺上的和諧協調，而非迷信公式。

視覺對齊（Optical Alignment）

幾何上的居中並不等於視覺上的居中。圖示按鈕、播放按鈕的三角形、箭頭、星星以及非對稱圖示，通常都需要微幅偏移。能修正 SVG 時優先修正；否則請透過像素級別的 Margin 或 Padding 來微調。

陰影與邊框（Shadows And Borders）

使用邊框來做區隔與 Focus 外框（Focus rings）。當卡片、按鈕、下拉選單或 Popover 需要層次感時，請使用多層疊加的陰影。陰影應保持半透明且足夠細緻，以適應各種背景色。

文字換行（Text Wrapping）

• 標題與短標題使用 text-wrap: balance。
• 中短篇內文、圖說、描述與列表項目使用 text-wrap: pretty。
• 長篇散文、程式碼與預先排版的內容（Preformatted）請避免使用上述兩者。
• 計數器、計時器、價格、表格及其他會動態更新的數字，請使用 font-variant-numeric: tabular-nums（等寬數字）。

字型平滑化（Font Smoothing）

在 macOS 上，若專案全域尚未設定，請在根布局套用反鋸齒字型平滑效果：

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

圖片外框（Image Outlines）

圖片通常需要一層細微的內嵌外框（Inset outline），避免圖片邊緣融進背景表面。

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);
  }
}

請使用中性半透明的黑白外框，切勿用品牌色彩為圖片外框著色。

動態效果（Motion）

互動狀態的切換請使用 CSS transition，因為當使用者在動畫進行中改變意圖時，transition 可以平滑重定向目標。Keyframes 則留給多階段的一次性進場動畫或載入序列。

良好動態效果的預設值建議：

• 進場：結合透明度（Opacity）、微幅 translateY，可視需要加入模糊（Blur）。
• 退場：比進場更快、更輕巧，通常建議為 150ms。
• 按下：按鈕可加上 scale(0.96) 增加實體觸感，若位移造成視覺干擾則需提供可停用機制。
• 圖示切換：採用透明度、縮放與模糊的淡入淡出（Cross-fade），避免直接瞬間切換顯示狀態。

Transition 作用範圍（Transition Scope）

絕不要使用 transition: all，請明確指定要改變的屬性：

.button {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

僅在合成器友善屬性（如 transform、opacity、filter）出現首影格卡頓（Stutter）時才使用 will-change。切勿使用 will-change: all。

點按範圍（Hit Areas）

可互動控制項的點按範圍至少需為 40x40px，在版面許可下最好達到 44x44px。若視覺圖示較小，可使用偽元素（Pseudo-element）擴大範圍，但請避免擴大後的點按範圍互相重疊。

審查輸出格式

在進行 UI 精緻度審查時，請用以下前後對比（Before/After）表格呈現具體變更：

原則	修改前	修改後
同心圓角	父元素與子元素使用相同圓角	父元素圓角已考量 Padding 計算
等寬數字	數字改變時計數器會產生位移	計數器已套用 tabular-nums
Transition 作用範圍	transition: all	明確指定 Transition 屬性

若無法直接從程式碼片段看出端倪，請附上檔案路徑與屬性名稱。已檢查但未作修改的原則可直接忽略。

檢查清單

• 巢狀圓角元件在視覺上協調一致。
• 圖示在視覺上完美居中。
• 按鈕、卡片與 Popover 合理使用邊框或陰影。
• 標題與短文字避免不自然的不當換行。
• 動態數字套用了等寬數字（Tabular numerals）。
• 圖片在必要處加上了中性色調的外框。
• 進場與退場動畫獨立分開，細緻且在適當情況下可被中途打斷。
• 按鈕具備觸感良好的 Active 按下狀態，且無誇張的位移。
• 完全未出現 transition: all 與 will-change: all。
• 微型控制項仍保有易於點按的足夠範圍。