设计走查与交付
入门预计上手 2-4 周星团 界面
岗位需求
0 核心 · 1 加分
在职岗位将其列为技能要求
核心岗位薪资带
—
核心要求岗位的月薪区间
需求趋势
上升 0稳定 0收缩 0
核心要求岗位的趋势分布
面试题库
高频真题 · 参考答案随题展开1. 设计交付物应该包含哪些内容才够开发使用?
完整交付物分六类。一是全状态设计稿,每个页面覆盖默认、加载、空态、错误、极限内容(超长文本、无网络)等状态,状态缺失是返工最大来源。二是标注规格,间距、尺寸、圆角、字号行高、颜色,现在多靠 Figma 开发者模式或蓝湖自动标注,但自定义规则仍需文档说明。三是切图资产,图标 SVG 矢量,位图按一倍二倍三倍与目标平台格式导出,命名遵循约定。四是交互说明文档,页面流转图、组件行为、动效参数(时长、缓动、触发)、边界逻辑,写在稿子旁边比单独文档更不易失联。五是设计 Token 表,颜色字体间距的变量名与值,供前端直接建样式变量。六是变更记录,版本号与修改点,方便开发增量排查。交付前自查清单走一遍,比交付后补救高效得多,清单本身就是团队资产。
2. 什么是设计走查,走查清单应包含哪些项?
设计走查是开发提测后,设计师在真实运行环境对照设计稿逐项验收的环节,是上线的最后一道视觉与体验关口。清单通常包含:布局还原(间距、对齐、尺寸误差在一像素级)、字体(字族、字号、行高、字重是否正确渲染)、颜色(色值、透明度、深浅模式)、组件状态(悬停、点击、加载、禁用、错误是否齐全)、交互逻辑(跳转、返回、手势、键盘行为)、动效(时长、缓动、触发是否按标注)、边界与极限(长文本截断、空列表、低网、弱网降级)、多端适配(主流机型与分辨率、刘海安全区)、无障碍(对比度、可聚焦)。发现问题分级记录:阻断、严重、一般、建议,配截图与复现步骤,跟踪到修复关闭。走查发现的问题应回流到设计规范,同类问题只在第一次付出成本。机制化的走查是设计质量控制的核心动作。
3. 设计与开发对还原度有分歧时如何处理?
分歧处理要区分三类情况用不同策略。第一类是信息不对称,开发没拿到完整规格或误解了标注,解法是补齐交付物当面过一遍,大部分还原争议其实是沟通成本问题,把交互说明和状态稿补全就消失。第二类是实现约束,某些视觉效果在目标平台成本极高或有性能问题,例如特定模糊、复杂投影、非标准动效曲线,此时设计师先问清约束的具体原因,评估降级方案的视觉可接受度,用近似方案达成体验目标,必要时接受取舍并记录原因,关键是基于用户影响的优先级判断而不是审美洁癖。第三类是规范之争,双方对标准理解不同,解法是回到平台规范与设计系统文档,以文档为准,文档没覆盖的当场定标准并补进文档。流程上建议建立验收标准前置约定,什么算还原合格在开发前对齐。处理姿态上对事不对人,用截图与数据说话。这种题考的是协作成熟度。
4. 设计稿中的动效该如何标注开发才能还原?
动效标注要把感觉翻译成参数。必备要素有六项:一是触发条件,什么事件引发动效,点击、滚动到某位置、状态切换还是页面进入;二是作用对象与属性,哪个元素从什么值变到什么值,如卡片从透明度零与位移二十像素到透明度一与原位;三是时长,毫秒级明确写出,微交互通常一百到三百毫秒,转场三百到五百毫秒;四是缓动曲线,用标准曲线名如 ease-out 或 cubic-bezier 数值表达,加速度感受是动效气质的核心,必须精确;五是时序关系,多元素动画的先后与并行,用时间轴示意,错峰延迟逐个列出;六是循环与终止,动画结束停在什么状态、是否可中断、快速连点如何处理。表达工具上可用 Principle 或 ProtoPie 录屏加参数表,复杂动效交付 JSON 格式的 Lottie 文件直接还原。标注最大的坑是只给录屏不给参数,开发只能目测模仿。
5. 蓝湖、Zeplin 与 Figma 开发者模式各有什么特点?
三者都是设计到开发的转译工具,定位不同。Figma 开发者模式的优势是设计即标注,开发在原文件直接查看间距尺寸色值与代码片段,信息与设计稿永远同步,配合 Dev Mode 的对比版本差异功能改稿追踪方便,前提是团队设计资产都在 Figma 内。Zeplin 是老牌专业交付工具,平台无关,支持从 Figma Sketch 等导入生成标注,样式指南自动聚合,适合设计工具多元或外包协作的团队,但存在导入同步的时间差。蓝湖是国内主流选择,贴合本土流程,标注切图、走查批注、设计图管理一体化,中文界面与国内 IM 打通,对甲方与混合团队友好;不足是依赖手动上传,版本管理需纪律。选型逻辑:全 Figma 团队直接用开发者模式最顺;需要跨工具汇总或严格样式指南选 Zeplin;国内协作环境与习惯选蓝湖。工具只是载体,交付规范与状态完整性才是还原质量的决定因素。
官方文档
2 条官方对开发者模式、标注与导出的说明,交付链路的权威操作手册
官方最佳实践合集,含设计开发协作流程的指导文章
推荐教程
2 条老牌设计交付工具的官网指南,标注样式与规范导出的参考实现
- 蓝湖 Lanhuapp免费+付费
国内主流的设计交付协作平台,标注切图与走查流程符合本土团队习惯
推荐课程
1 条- 虎课网协作工具课程免费+付费
中文视频课程覆盖 Figma 到蓝湖的交付工作流,适合快速上手全流程
上手实践
1 条按设计稿做前端实现再对照验收,反向理解交付规格,适合查漏补缺
难度档决定星等与难度分权重(入门 1 / 进阶 2 / 精通 3);学习资源由编辑部遴选并持续维护, 经验心得欢迎在上方「知识分享」区署名分享。

