网页设计阶段看起来很顺利，进入开发后却不断追问：“这个卡片手机端怎么排”“文字太长怎么办”“Hover没有设计”“动画要做到什么程度”。这些问题不是开发不懂设计，而是交付只包含理想截图，没有包含规则。
成熟交付的目标，是让前端在多数情况下能按规则独立实现，真正需要讨论的只剩业务取舍，而不是反复猜像素。
01 先交页面矩阵和模板关系
列出所有独立页面、CMS模板、系统页面和特殊状态，标记哪些共用结构。新闻详情、案例详情、产品详情看起来都叫“详情”，内容字段和交互可能完全不同。
页面矩阵还要对应需求和验收范围，避免开发后期才发现404、搜索结果、提交成功或隐私页面没有设计。
02 响应式交付的是规则，不是三张截图
桌面、平板和手机稿可以展示关键变化，但更重要的是说明栅格、最大宽度、间距、内容顺序、图片裁切、隐藏与折叠规则。
开发要处理连续宽度，不能只在三个画板尺寸上看起来正确。对于复杂模块，给出最小和最大边界，以及文字和数据溢出处理。
设计交付物清单
| 交付项 | 需要说明什么 | 验收方式 |
|---|---|---|
| 页面矩阵 | 页面、模板、状态和路由关系 | 与需求清单逐项核对 |
| 组件与令牌 | 颜色、字体、间距、按钮、表单、卡片 | 检查实例是否使用统一组件 |
| 响应式规则 | 断点、重排、裁切、隐藏和触屏行为 | 真实设备与中间宽度测试 |
| 交互状态 | 默认、悬停、焦点、加载、错误、空状态 | 按任务走查，不只看静态页 |
| 动效说明 | 触发、时长、缓动、降级与减少动态 | 原型与实现对照 |
| 素材与授权 | 图片、图标、字体、视频和使用范围 | 确认可商用及文件完整 |
03 组件命名要与代码语言对齐
设计中的按钮、卡片、标签和表单应使用统一组件与变体，不要每个页面复制一份。属性名称尽量和前端约定一致，便于映射。
特殊业务模块可以保留独立组件，但要说明哪些部分可配置、哪些是固定结构。
04 状态和异常必须提前设计
用户看到的不只有理想数据。加载失败、无结果、图片缺失、标题过长、表单错误、权限不足和网络中断都需要规则。
如果设计没有提供，开发会临时补齐，最终最容易出现品牌和体验不一致的地方正是这些边缘状态。
05 动效用参数和目的描述
“做得高级一点”“像参考网站一样”无法开发。应说明触发方式、开始与结束状态、持续时间、缓动、滚动关系和移动端降级。
动效还要考虑性能与无障碍。关键内容不能只有动画完成后才可见，也要尊重减少动态偏好。
06 交付后安排开发走查，不靠截图验收
前端完成关键模板后，设计师应在真实浏览器和设备中走查，记录严重程度、复现条件和建议。不要在聊天里零散发几十张截图。
先修结构、响应式、字体和交互，再处理轻微像素差异。所有问题同权会拖慢上线。
07 最终交付要让下一支团队接得住
整理最终Figma文件、组件、素材、字体说明、动效原型和修改记录，清理废弃页面和重复组件。
项目结束时再做一次设计与线上版本对照，确保交付文件代表最终状态，而不是留下一份早期稿。
常见问题
Figma Dev Mode可以替代交付说明吗？
不能完全替代。它能提供尺寸和代码信息，但页面关系、业务规则、异常状态和动效目的仍需明确说明。
每个页面都要画移动端吗？
关键模板和特殊模块需要。重复页面可以通过代表稿和清楚规则覆盖，但不能只交桌面版让开发自行缩放。
切图应该由设计还是开发导出？
可以约定。设计应保证图层、命名、格式和授权清楚，开发可按实际分辨率和性能需求导出。
开发走查包含在设计服务里吗？
应在合同和报价中明确次数与范围。没有走查，设计质量很难在真实页面上闭环。
设计稿和线上必须100%一样吗？
应保持核心视觉、结构和交互一致，同时允许因浏览器、内容和技术限制做合理适配。关键是变更有沟通和记录。
链接复制成功
