介面打磨
讓介面更容易閱讀、瞄準與導覽。從既有的產品開始：它的字體、圖示、顏色、密度、元件與框架。改善這些選擇之間的關係。只有在觀察到問題或用戶需求能證明其必要性時，才改變視覺慣例。
找出使用中的摩擦點
在實際畫面上追蹤一個代表性的任務。開啟選單、選取一行、縮小面板、套用篩選，然後返回內容。閱讀可見問題背後的元件與代號定義。螢幕截圖揭露了層級與間距；互動則揭露了裁剪的焦點、無法觸及的控制項，以及會彈跳的動態效果。
優先處理會妨礙閱讀或操作的失敗，而非美觀不一致的問題。將每個提議的變更與具體的症狀連結：消失的中繼資料、被推出視野的後續操作、會抖動的數字，或是縮放時跳動而透明度淡出的選單。對於廣泛的需求，選擇一個連貫的面向來執行並實作。對於僅需審查的需求，提供包含位置與證據的發現。
在編輯之前，檢查儲存庫的指示、支援的工具鏈與現有的檢查機制。閱讀當前的串聯樣式表與任何重疊的變更。一個在一個分支上看起來相同的代號替換，可能在另一個分支更新該代號後改變幾何形狀。
賦予文字與圖示明確的角色
建立一個小型的文字角色集。讓列標題主導，中繼資料說明，操作保持可辨識。一個密集的桌面介面可能使用 14px/600 的標題、12px/400 的中繼資料，以及 16px 的區段標籤。將這些視為起點；對於閱讀量大或優先觸控的應用程式，可能需要更大的文字。如果能表達所需的字重，則保留既有的字型。
在加入更多方框或顏色之前，先使用間距與字重來區分角色。將相關的中繼資料放在其標題下方，並保留有意識的間距。對於正在更新的計數，使用表格數字，並為最大預期值保留足夠的寬度。平衡較短的標題，或在支援的情況下使用更好的段落換行，但不要依賴換行規則來修復過小的面板。
在每個支援的主題中，根據其實際背景測量次要文字。一般文字至少需要 4.5:1 的對比度。透明度會與表面顏色疊加，因此僅憑一個看似合理的代號值幾乎無法證明什麼。保留產品的調色盤與語意顏色角色；不要求特定的字型、強調色調、圖示庫或僅中性色主題。
保持圖示大小與光學重量在角色內的一致性。在改變筆畫粗細之前，檢查現有的圖示集合，因為圖示庫使用不同的幾何結構。一個小圖形可以放在一個較大的按鈕中。為僅圖示的控制項提供可存取名稱，並對輔助技術隱藏重複的裝飾性元素。
讓幾何形狀支援操作
一貫地使用現有的圓角比例。如果比例本身需要調整，則將尺寸對應到角色，例如小型標籤、控制項與浮動面板，而不是用一個半徑取代所有角落。對於嵌套形狀，內部圓角應從外部圓角減去實際內縮量（包括邊框與內距）得出。必要時將其限制為零。
互動目標的大小應與可見的圖示或文字分開設定。緊湊型控制項的目標至少應為 24 x 24 CSS 像素，在空間允許的觸控目標上則應更寬裕。WCAG 有間距與其他例外情況；在依賴它們之前，請明確驗證這些情況。偏好使用按鈕內距或包裝標籤。不可見的點擊區域延伸需要檢查裁剪、重疊以及意外啟動相鄰控制項的風險。
在邊框與陰影有助於分組、指示狀態或層級時使用它們。另一個陰影平面很少是解決弱層級問題的首選方案。在裁剪的清單內部保留可見焦點，並在適當情況下使用內縮處理。保持基本操作在沒有滑鼠懸停的情況下也能發現，包括在觸控裝置上。
回應元件所擁有的空間
在側邊欄或檢查器開啟後，一個寬視窗可能只包含一個狹窄的工作區域。根據可用的面板寬度設定可重複使用的標頭、行與編輯器的大小。將容器查詢放在相關的祖先元素上，並讓其後代元素適應；尺寸查詢無法調整自身查詢容器的大小。在引入容器後，檢查覆蓋層的定位與堆疊順序。
決定哪些元素應優先讓步。讓標籤透過 min-width: 0 縮小，為後續操作保留穩定的軌道，然後在壓縮主要任務之前，先降級次要的裝飾元素。隱藏的標籤仍需具備可存取的名稱。移除一個裝飾性的展開箭頭不同於移除啟動一行的唯一方式。
測試長標題、大數字、真實的中繼資料、空列表以及篩選後無結果的情況。解釋視圖為何為空，並提供適當的恢復方式，例如清除篩選或建立項目。在背景刷新時，如果現有內容仍然有效，則應保留。不要僅僅因為一個請求開始，就用骨架螢幕取代已載入的行。
在修改面板響應式設計、嵌套控制項或覆蓋層時，請閱讀實作陷阱。
讓動態效果與狀態變化匹配
使用已有的動畫系統與緩動代號。在聲稱某個類別或代號替換會改變動態效果之前，先檢查計算後的樣式。明確地對實際變化的屬性進行過渡：單獨的 CSS scale 和 translate 不同於 transform。
對於例行控制項，偏好小幅度移動與快速穩定。進入動畫約 150–250 毫秒以及較短的退出動畫可能有用，但頻率與目的決定了時間。避免從無到有縮放行、工作清單中緩慢的交錯進場，以及每個串流更新上都觸發動畫。只在有助於使用者跟隨變化時才製作動畫。
將滑鼠懸停移動限制在具有懸停能力的精確指針條件之後。基本控制項應始終對鍵盤與觸控使用者可用。關閉動畫必須從可見狀態反向進行，而正在退出的元素必須停止接受輸入。當對話框或選單原始程式已經管理了存在與焦點時，請使用其支援的退出生命週期。不要添加第二個卸載計時器或競爭的焦點處理器。邏輯上的關閉與焦點恢復應遵循原始程式的行為，無需等待裝飾性的退出動畫。
減少動態效果模式應在不進行空間移動的情況下達到相同的可用最終狀態。當過渡被移除時，檢查完成邏輯。對於複雜的彈簧、編舞或動畫架構，請使用專門的動態效果技能；此次打磨不需要安裝另一個技能套件。
驗證人們實際會使用的結果
檢查所有變更後的綜合結果，使用相同的資料進行前後對比。包括一個寬螢幕搭配窄面板、手機尺寸的視窗、支援的主題、鍵盤導覽以及觸控風格的存取方式。對於動態效果編輯，檢查過渡中途反向以及減少動態效果模式。靜止的螢幕截圖無法確定退出動畫是否正確。
使用儲存庫支援的執行環境執行適用的測試、lint、型別檢查與建置。在歸咎於修補程式之前，先調查失敗原因。當需要基準線比較時，使用相同的執行環境與配置重現它。偏好對變更路徑進行行為檢查；僅憑 CSS 字串斷言無法確定對比度、幾何形狀、焦點可見性或動畫連續性。
報告變更的內容與原因、實際執行的檢查，以及任何仍存在的疑問。將觀察到的改進與無可見效果的代號清理區分開來。在整合後保持描述與證據的更新。如需參考上游靈感，請檢查當前原始碼，將原則改編至此產品，並註明公開來源。如果無法存取來源，請如實說明，而非虛構引用或背書。