按鈕被按下、項目被選取和鍵盤停在某處，是三種不同的狀態。若都用同一圈亮框表示，使用者就得靠猜測區分。
我希望回饋能交代發生了什麼，也能接住尚未完成時的下一次操作。以下先分清操作範圍和狀態，再處理動態的銜接與前後辨認。
本文由原篇重編並擴充。試樣數值代表當時條件，並非所有介面的固定規格；系列脈絡與工具入口見 總論。
操作與狀態
按下時，內容不跟著跳
持續的選取與短暫的按壓狀態（pressed state）有不同工作。選取指出目前位置，按壓回應當下的動作。圖中按下時把外側深度換成淡內影，白色略降到 #F5F5F5；ring、圖示、文字和整個元件的尺寸都不變。
小圖示保留容易操作的範圍
可見圖示的大小，和點按範圍（hit area）可以分開安排。圖中的關閉符號維持 16 × 16 px，按鈕範圍則是 44 × 44 px，讓手指與游標都有足夠的落點。輔助框只在圖解裡顯示。
44 px 是這個試樣的選擇。放進密集工具列時，還要一起檢查相鄰操作的距離與點按範圍，避免互相重疊。圖示可以小，周圍仍要有合理的操作空間。
焦點要能從安靜的表面裡站出來
鍵盤焦點（keyboard focus）指出現在操作哪個元件，分量要足以辨認。這組按鈕維持同樣的 ring、填色與尺寸，右側另加 2 px 輪廓，與按鈕相隔 3 px。表面的細邊繼續交代形狀，焦點則清楚標出位置。
我喜歡低調的表面，也希望操作位置一眼可見。焦點輪廓需要連同周圍的底色檢查，並留意面板裁切與相鄰控制器；選取、按壓和焦點各有工作，可以同時成立。
同一種視覺線索，維持同一含義
選取指出持續的選擇，焦點指出鍵盤目前的位置，錯誤則指出需要修正的內容。它們可能同時成立。圖中用填色加勾號表示選取、外側輪廓表示焦點、明確文字表示錯誤；選取項目獲得焦點時，兩種線索都保留。
我會把這套對應延續到整個介面，也會檢查拿掉色彩後是否仍可辨認。重要資訊不應只靠紅綠差別，這也是 W3C 色彩使用原則的要求。不可用狀態要說明原因，不能只降低透明度，讓使用者猜測它是否能操作。
接續每次動作
狀態切換時，讓圖示輕柔銜接
從儲存變成已儲存，圖示與文字一起交代結果。這個交叉淡化（cross-fade）只改變兩個圖示的透明度，兩者放在同一格裡，按鈕寬度與文字位置都保持固定。左側直接替換，右側用 150 ms 的 ease-out 銜接；按下任一示範按鈕，兩邊會切到同一狀態。
我偏好把這種小動態留給偶爾發生的狀態轉換。頻繁切換的分頁、逐列出現的操作，需要更直接的反應；文字或圖示本身也要能清楚表示目前狀態。按壓回饋沿用前面的表面明暗與陰影，內容留在原位。
動作還沒走完，也能接住下一次操作
面板還沒展開，手上就可能已經按下收合。可中斷的過渡（interruptible transition）能從當下的位置轉向新狀態，連續操作時就比較連貫。下面兩邊的距離、200 ms 時長和緩動相同；左側每次從指定起點重新播放，右側由當下的位置接往新的終點。
可以在過程中快速切換，觀察面板有沒有突然換位。這組用 CSS transition 跟隨狀態；時間軸動畫也能透過額外的播放控制處理中斷，重點在實際操作能否接續。示範停用動態時仍保留狀態文字與靜態前後對照。
讓進退場符合使用時機
首次呈現可以按標題、說明與操作分組，讓閱讀順序稍微展開。退出時則降低位移與時間的分量，把注意力交給接下來的內容。我會把這種節奏留給適合停下來看的時刻，日常開關與重複操作保持直接。
減少動態偏好開啟時，位移會收起，狀態依然清楚。這兩組互動都由操作觸發，首次載入就停在初始狀態，閱讀時可以自行決定何時比較。
狀態改變，辨認的線索留下來
檔案由等待變成上傳中，再變成完成時，我會保留檔名、位置與列的骨架，只改狀態區。圖中的同一個檔案在三個階段維持身份，讀者可以直接比較哪裡改變。這比每次換成另一張不同布局的成功卡片更容易追蹤。
穩定不代表內容永遠不能移動。排序本來就會改變位置，刪除本來就會移除項目；這些操作需要清楚交代原因與結果。若只是背景更新，則盡量不要順帶移走焦點或重排使用者正在看的項目。
回饋的完成點，是使用者能辨認目前狀態，並安心接著操作。從按壓到非同步更新，都要保留身份、焦點與中斷的線索；動態只是其中一種表達方式。