当你在 Figma 里拉完一个按钮，发给开发后对方反问你“这个按钮按下时、禁用时、加载中分别是什么状态”并附上一张设计规范截图时，你就会意识到：UI 设计远不止画界面，而是要对“一个元素在不同时刻、不同设备、不同用户面前”的所有可能性负责。根据 2024 年 Adobe 的一项调研，87% 的设计师认为“组件状态覆盖不全”是导致返工的核心原因。

一、交互状态覆盖：从“静态图”到“行为矩阵”

很多新手在交付设计稿时，只提供了“默认态”和“悬浮态”两套效果。真实的场景是：一个输入框需要准备无内容占位符态、聚焦时边框高亮态、输入错误时红色警告态、不可编辑禁用态（灰色且不可点击），以及已输入内容后的清除按钮出现态。举个例子：如果你只画了一个漂亮的通知卡片，但没有定义用户右滑删除时的反馈动画，开发大概率会直接忽略这个交互，导致功能缺失。建议在 Figma 里用“组件变体”功能，把每个控件的所有状态以网格形式排列并命名，这样开发在 inspect 时一眼就能找到对应状态。

二、跨设备适配逻辑：不要做“画布上的独裁者”

另一个高频翻车点在于：设计师习惯在 1440px 宽度的画布上把所有元素排得完美，但当真实用户用 320px 宽的手机或 1920px 的宽屏显示器打开时，布局直接崩掉。你需要明确三点：第一，固定尺寸和弹性尺寸的边界在哪里——比如导航栏的菜单项，是采用“溢出时折叠成汉堡菜单”还是“缩小字号”？第二，栅格系统的断点具体在哪些像素值（例如 768px 以下走手机布局，1200px 以上走桌面布局）。第三，图片和文字的最小可读尺寸——根据 W3C 标准，正文最小字号不应低于 16px，否则在移动端用户需要手动缩放才能阅读。以卡片组件为例：在桌面端可以是三列平铺，但到 480px 设备时必须变为单列堆叠，并且图片宽度从固定 300px 切换为 100% 容器宽度。

三、无障碍设计前置：不止是“颜色符合对比度”

很多设计师以为无障碍只是把颜色对比度做到 4.5:1 就够了。实际上，一个按钮的点击区域至少要有 44x44pt（Apple HIG 标准），否则手指粗的用户或者老年人会频繁误触。更常见的场景是：你在深色背景上用浅灰色写辅助说明文字，虽然视觉上很柔和，但色弱用户（约占男性人口的 8%）可能完全看不清。务必在设计中加入“焦点指示器”——用 Tab 键遍历界面时，当前聚焦的元素必须有明显的轮廓或背景变化，这对使用屏幕阅读器的用户至关重要。可以打开 Chrome 开发者工具的 Accessibility 面板，直接模拟色盲或弱视模式看你的设计是否还能传递有效信息。

• 误区一：把所有页面当作独立艺术品，忽略了组件复用。正确做法：每画一个元素前先检查设计系统里有没有现成的原子组件，没有则先创建它并同步到团队库，避免同一个卡片在不同页面出现 3 种圆角。
• 误区二：只输出静态稿，不写交互说明。正确做法：在 Figma 的 Prototype 面板里串联好页面跳转、加载动画、手势触发等逻辑，并用注释说明特殊状态（如无网络时显示什么）。
• 误区三：以为“设计好看就行”，忽视了开发实现成本。正确做法：在交付前主动与前端工程师核对“这个过渡动画是用 CSS 实现还是 Lottie 动画？加载图片是用 WebP 还是 PNG？”——如果开发说某个效果需要写 200 行 JS，建议换用更成熟的现成组件库。