介面打磨
當使用者希望現有介面感覺更完整,或在實現一個注重微小視覺細節的元件時,請使用此技能。在不改變產品視覺識別、資訊架構或互動模型的前提下,提升清晰度、一致性與使用者回饋,除非另有要求。
建立區域視覺語言
在編輯之前,先識別框架、樣式方法、元件庫、設計代碼以及附近元件的慣例。遵循現有系統,並重複使用共享的元件與數值。寧可從共享來源修復一個問題,也不要在多處打補丁。請勿為了打磨細節而新增依賴項或樣式系統。
視覺一致性是證據,但個人品味並非缺陷。當專案中有明確的設計慣例(如平面表面或節制的動畫)且被一致應用時,請予以保留。
選擇正確的模式
實作。 僅進行能解決觀察到的問題或完成明確要求的處理的變更。保持行為的可訪問性,並使實作方式符合專案習慣。
審查。 除非也要求實作,否則保持唯讀。說明檢查範圍,評估相關狀態,並僅報告由渲染介面或原始碼證據支持的發現。請勿將未觀察到的視覺行為當作事實陳述。
對於任一種模式,請閱讀 references/polish-checklist.md 以了解決策指南、狀態覆蓋範圍和報告格式。對於實作,僅針對專案實際使用的技術堆疊(CSS、Tailwind、React Motion、GSAP 或 Three.js)閱讀 references/implementation-recipes.md。處理顏色、焦點、動畫、控制或目標大小的問題時,請閱讀 references/wcag-accessibility.md;當前景色與背景色可解析為十六進制值時,請執行 scripts/check_contrast.py。
應用高價值的改進
- 文字: 根據內容長度和視口選擇文字換行方式;當動態數值的寬度變化干擾附近內容時,將其穩定下來。
- 表面: 將巢狀圓角、深度、圖片邊緣和圖示位置視為視覺關係。當它們在渲染上下文中看起來不對勁時,予以修正。
- 回饋: 讓靜止、懸停、焦點、按下、選中、載入和禁用狀態易於區分。不要讓動畫成為事物改變的唯一跡象。
- 動畫: 對使用者驅動的狀態變更使用可逆轉場。將分階段動畫保留給不常見的時刻,用於說明層級或方向。尊重
prefers-reduced-motion。 - 輸入情境: 不要讓觸控裝置繼承粘性懸停處理。在打磨控制項時,保持可見的焦點行為、鍵盤操作和實用的目標尺寸。
避免對使用者沒有實際益處的純裝飾性變更。不要使用廣泛的轉場、永久性的效能提示,或讓例行操作變慢或更難理解的動畫。