按钮被按下、项目被选中和键盘停在某处，是三种不同的状态。如果都用同一圈亮框表示，用户就得靠猜测区分。
我希望反馈能说明发生了什么，也能在上一个动作尚未完成时承接下一次操作。以下先区分操作范围和状态，再处理过渡与前后辨认。
本文由原篇重编并扩充。样例数值代表当时条件，并非所有界面的固定规格；系列背景与工具入口见 总论。
操作与状态
按下时，内容不跟着跳
持续的选中状态与短暂的按压状态（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 跟随状态；时间轴动画也能通过额外的播放控制处理中断，重点在实际操作能否接续。示范停用动态时仍保留状态文字与静态前后对照。
让进退场符合使用时机
首次呈现可以按标题、说明与操作分组，让阅读顺序稍微展开。退出时则降低位移与时间的分量，把注意力交给接下来的内容。我会把这种节奏留给适合停下来看的时刻，日常开关与重复操作保持直接。
减少动态偏好开启时，位移会收起，状态依然清楚。这两组互动都由操作触发，首次加载就停在初始状态，阅读时可以自行决定何时比较。
状态改变，辨认的线索留下来
文件从等待变成上传中，再变成完成时，我会保留文件名、位置和行的结构，只改变状态区域。同一个文件在三个阶段维持身份，读者可以直接比较变化，无须在另一张不同布局的成功卡片里重新寻找。
稳定不代表内容永远不能移动。排序会改变位置，删除会移除项目，这些操作应清楚说明原因和结果。仅仅是后台更新时，则尽量不要移动焦点或重排用户正在阅读的项目。
反馈的完成点，是用户能辨认当前状态，并安心接着操作。从按压到异步更新，都要保留身份、焦点与中断的线索；动态只是其中一种表达方式。