界面打磨 是做什么的？
让界面更易读、更易点击、更易浏览。从现有产品出发：它的字体、图标、颜色、密度、组件和框架。改善这些选择之间的关系。仅在观察到问题或用户需求明确时，才改变某个视觉惯例。
发现使用中的摩擦点
在真实屏幕上追踪一个代表性任务。打开一个菜单，选择一行，缩小一个面板，应用一个筛选条件，然后返回内容。阅读可见问题背后的组件和 token 定义。截图能揭示层级和间距；交互则能揭示裁剪的焦点、无法触及的控件以及生硬的动效。
优先解决那些阻碍阅读或操作的问题，然后才是视觉不一致的问题。将每个提议的更改与具体症状联系起来：消失的元数据、被推出视图的后续操作、抖动的数字、或者缩放时跳跃而透明度渐变的菜单。对于宽泛的需求，选择一个连贯的打磨点并实施。对于仅需审核的需求，提供包含位置和证据的发现。
在编辑之前，检查仓库的说明、支持的工具链和现有的检查项。阅读当前的级联样式和任何重叠的更改。在一个分支上看起来完全相同的 token 替换，在另一个分支更新该 token 后可能会改变几何布局。
赋予文本和图标明确的职责
建立少量文本角色。让行标题主导，元数据解释，操作可识别。一个密集的桌面界面可能使用 14px/600 的标题、12px/400 的元数据和 16px 的章节标签。将这些视为起点；阅读量大或触控优先的应用可能需要更大的文本。如果现有字体能表达所需的字重，则保留它。
在添加更多的框或颜色之前，先使用间距和字重来区分角色。将相关元数据保持在其标题下方，间隔适当。对于更新中的计数，使用表格数字，并为最大值预留足够的宽度。平衡短标题，或在支持的情况下使用更好的段落换行，而不是依赖换行规则来弥补面板尺寸过小的问题。
在每种支持的主题中，根据实际背景测量次要文本。普通文本需要至少 4.5:1 的对比度。不透明度与表面颜色叠加，所以一个看似合理的 token 值本身说明不了什么问题。保留产品的调色板和语义颜色角色；不要求特定的字体、强调色、图标库或仅中性色的主题。
在同一个角色内保持图标大小和光学重量一致。在更改描边宽度之前检查现有图标集，因为不同的图标库使用不同的几何结构。小图标可以放在较大的按钮中。为纯图标控件提供可访问的名称，并从辅助技术中隐藏重复的装饰性图标。
让几何形状支持操作
一致地使用现有的圆角比例。如果比例本身需要改进，则将大小映射到角色，例如小芯片、控件和浮动面板，而不是用单个圆角替换所有角落。对于嵌套形状，内部圆角应等于外部圆角减去实际的内边距，包括边框和内边距。如有必要，将其钳位为零。
将交互目标的大小与可见的图标或文本分开设置。在紧凑的控件上，目标至少为 24x24 CSS 像素；在空间允许的情况下，使用更大的触摸目标。WCAG 有间距和其他例外情况；在依赖它们之前，请明确验证。优先使用按钮内边距或环绕标签。不可见的点击区域扩展需要检查裁剪、重叠以及意外触发相邻控件的情况。
在需要时，使用边框和阴影进行分组、表示状态或提升层级。另一个阴影平面很少是解决层级弱的首要方案。在裁剪的列表内保留可见的焦点，在适当的情况下使用内嵌样式。确保基本操作无需悬停即可发现，包括在触摸设备上。
根据组件所在空间做出响应
在侧边栏或检查器打开后，一个宽窗口可能只包含一个窄的工作区域。根据可用的面板宽度调整可复用 header、行和编辑器的大小。将容器查询放在相关的祖先元素上，并调整其后代；尺寸查询不能调整其自身的查询容器的大小。在引入包含块后，检查覆盖层的定位和堆叠。
决定什么先让步。让标签通过 min-width: 0 缩小，为后续操作保留一个稳定的轨道，然后在压缩主要任务之前，降级次要的 chrome。隐藏的标签仍然需要一个可访问的名称。移除装饰性的展开指示器与移除激活行的唯一方式是不同的。
测试长标题、大数值、真实元数据、空列表和筛选后无结果的情况。解释视图为何为空，并提供适当的恢复方式，例如清除筛选条件或创建项目。在后台刷新期间，如果现有内容仍然有效，则保留它。不要仅仅因为一个请求开始，就用骨架屏替换已加载的行。
在更改面板响应式、嵌套控件或覆盖层时，请阅读实施陷阱。
让动效匹配状态变更
使用已经存在的动画系统和缓动 token。在声称类名或 token 替换会改变动效之前，检查计算后的样式。明确地过渡实际改变的属性：单独的 CSS scale 和 translate 与 transform 是不同的。
对于常规控件，偏好小范围移动和快速稳定。进入动画约 150–250ms，退出动画更短可能有用，但频率和目的决定时机。避免将行从无到有地缩放、在正在工作的列表中缓慢交错出现，以及在每个流式更新上执行动画。只动画那些有助于用户跟随变化的内容。
保持悬停移动仅在支持悬停的精确指针条件下生效。基本控件仍对键盘和触摸用户可用。关闭必须从可见状态开始反转，退出中的元素必须停止接受输入。当对话框或菜单原语已经管理了呈现和焦点时，使用其支持的退出生命周期。不要添加第二个卸载计时器或竞争焦点处理器。逻辑上的关闭和焦点恢复应遵循原语的行为，无需等待装饰性的退出动效。
减少动效后，应能达到相同的可用最终状态，无需空间移动。移除过渡时，检查完成逻辑。对于复杂的弹簧动画、编排或动画架构，请使用专门的动效技能；本次打磨不需要安装额外的技能包。
验证用户将使用的结果
检查所有更改后的最终结果，使用相同的数据进行前后对比。包括带有窄面板的宽屏幕、手机尺寸的视口、支持的主题、键盘遍历和触摸模式访问。对于动效编辑，检查中途反转和减少动效模式。静止的截图无法证明退出动画是否正确。
使用其支持的运行时运行仓库的适用测试、lint、类型检查和构建。在归咎于补丁之前，先调查失败原因。当需要进行基线比较时，使用相同的运行时和配置复现。优先对更改的路径进行行为检查；单独的 CSS 字符串断言无法确定对比度、几何形状、焦点可见性或动画连续性。
报告更改了什么、为什么更改、实际执行的检查以及任何剩余的不确定性。将可观察到的改进与没有可见效果的 token 清理分开。在集成后保持描述和证据的时效性。对于上游灵感，检查当前源码，将原则适配到本产品，并注明公开来源。如果某个来源无法访问，请说明，而不是编造引用或背书。