结论：UI 设计外包的质量由三件事决定
UI 设计外包的价值不在于设计稿漂不漂亮，而在于交付之后能不能被前端准确还原、被后续版本继续复用。判断一份外包交付是否合格，抓住三点就够了：有没有成套的设计规范、切图与标注能否让前端少来回沟通、走查环节有没有量化标准。这三点在签约前用一份样例文件就能验证，不必等上线才暴露问题。
设计稿好看只是入场券。真正拖慢项目的是颜色写死在画布里、间距随手拖动、组件只有默认状态、导出文件命名混乱。这类问题不会在评审会上被发现，却会在前端还原时逐个冒出来，最后变成反复返工和双方扯皮。
UI 设计外包的标准交付物清单
一套完整的 UI 交付不是几个页面文件，而是一组开发能直接使用的资产。签约前先把清单对齐，比事后补文件省事得多。
| 交付物 | 包含内容 | 验收形态 |
|---|---|---|
| 设计规范文档 | 色板、字体层级、栅格、圆角与投影 | 在线共享文件加导出 PDF |
| 页面高保真稿 | 覆盖全部页面与关键状态 | 标注版本号与更新日期 |
| 基础组件库 | 按钮、输入框、卡片、弹窗、导航 | 含默认、悬停、禁用、加载、错误五种状态 |
| 切图与图标 | 按倍率导出的位图与矢量图标 | SVG 为主，位图给 2 倍与 3 倍 |
| 标注与说明 | 间距、字号、色值、交互与动效参数 | 标注链接加一页交互动效说明 |
| 资源清单 | 文件用途、倍率、可否复用 | 一张表格，随压缩包一起给 |
| 走查报告 | 逐页还原度对比与待修项 | 截图对比加优先级分级 |
清单里最容易缺的是最后两项。不少团队交完稿就结束，前端只能凭感觉还原，走查无人负责，效果与设计稿差多少全靠运气。
设计规范怎么写：色板、字号、栅格、组件
设计规范的作用是把「好看」翻译成前端能执行的数值。没有规范，同一套界面里会出现五种相近的蓝色、四种不一样的字号，改一处就要全局找一遍。
- 色板：1 个主色加 1 到 2 个辅助色，配 5 到 9 级中性灰阶，再加成功、警告、错误、信息四个语义色。每个色值给出十六进制与变量名，前端直接引用变量。
- 字号：移动端正文 14 到 16 像素，标题 18 到 24 像素；桌面端正文 14 到 16 像素，主标题 32 到 40 像素。层级总数控制在六级以内，行高按字号的 1.5 到 1.8 倍。
- 栅格与间距：以 4 或 8 像素为基准，所有内外边距落在倍数上；桌面端用 12 栏栅格，栏间距 24 或 32 像素。
- 圆角与投影：圆角保留 2 到 3 档，投影按层级分两层参数，不要让每张卡片都有一套专属阴影。
- 组件状态：默认、悬停、按下、禁用、加载、错误、空态，缺一个前端就要自己猜。
| 规范项 | 常见缺失 | 建议做法 |
|---|---|---|
| 色板 | 出现多个近似的品牌色 | 收敛为主色加深浅两档 |
| 字号 | 每个页面各定一套 | 建立六级以内的字号阶梯 |
| 间距 | 手动拖动出现零散数值 | 统一到 4 像素的倍数 |
| 组件 | 只画了默认态 | 补齐悬停、禁用、加载、错误 |
| 图标 | 线宽与圆角不统一 | 统一到同一网格与描边宽度 |
规范不是一次写完就锁死。中期发现色板层级不够用时，应回到规范里新增变量，而不是在页面稿里临时调色，否则规范会与稿子逐渐脱节，最后没人再参考。
切图与标注：前端到底需要拿到什么
前端还原慢，多半是切图和标注不完整。把下面五件事写进交付要求，能省掉大量来回沟通。
- 尺寸与倍率：移动端按 1 倍、2 倍、3 倍导出，网页按 1 倍与 2 倍；位图优先 WebP 或 PNG，图标一律给 SVG，避免放大后模糊。
- 命名规范：模块、页面、元素、状态四段式，全小写英文加下划线，例如 banner_home_btn_default。不要用中文名与空格，避免压缩包解压后乱码。
- 该切与不该切：图标、插画、照片、复杂背景导出；纯文字、纯色块、简单描边交给样式实现，切图反而会牺牲清晰度与可维护性。
- 标注内容：间距、字号、字重、色值、圆角、投影逐项标出；交互写明触发条件与过渡时长，例如点击后 0.2 秒淡入。
- 资源清单：压缩包内附一张表格，写明文件用途、倍率、是否可复用到其他页面。
标注不清时，前端通常会自行估值，误差分散到十几个页面后，整体观感就会明显走样。
设计走查：把还原度做成可打分的验收表
走查是外包项目最容易缩水的环节。把它做成一张能打分的表格，双方的争议会少很多，修复优先级也一目了然。
| 走查项 | 检查内容 | 合格标准 |
|---|---|---|
| 布局与间距 | 元素位置、区块间距、栅格对齐 | 关键间距误差不超过 2 像素 |
| 字体与字号 | 字号、字重、行高、文字颜色 | 与规范一致，无默认字体残留 |
| 色彩 | 主色、语义色、渐变叠加 | 与色板变量一致 |
| 图片与图标 | 倍率、清晰度、裁切比例 | 高倍屏不模糊，无拉伸变形 |
| 交互状态 | 悬停、点击、加载、空态、错误 | 状态齐全，过渡自然 |
| 响应式 | 各断点下的布局变化 | 主流宽度档位无错位与溢出 |
| 可访问性 | 文字对比度、点击热区尺寸 | 正文对比度达标，热区足够大 |
走查结果按优先级分三级：影响功能与主流程的问题当轮必修；视觉明显偏差纳入下一轮；细节优化记入迭代清单。每轮走查留一份带日期的报告，既是验收凭证，也是后续迭代的基线。
UI 设计外包的六步交付流程
- 需求与场景梳理。先确认用户角色、核心任务与页面层级，输出站点地图与主流程，再进入视觉环节。
- 风格方向探索。先给 2 到 3 个方向供选择，选定后收敛细节，避免边设计边改风格。
- 规范先行。色板、字号、间距与基础组件定稿后再铺页面，后续页面会明显提速。
- 高保真加状态补齐。页面稿之外补上加载、空态、错误与权限不足等异常状态。
- 交付与前端对接。切图、标注、资源清单一次给全，前端按变量还原；涉及前后端联调的部分可对照软件开发服务页的说明推进。
- 走查与迭代。按走查表逐页核对，修复后出第二版报告，把遗留项写进下一轮排期。
这套流程同样适用于营销页与移动端应用。页面结构可以参考 H5 开发实战：高转化营销页的结构与埋点设计，双端项目的交付节点可以参考 APP 开发流程：从原型到上架的双端交付清单。
趣凡科技在深圳承接 UI 设计外包时，通常把设计规范、切图资源与走查表放进同一份交付文档封版，页面方向与服务内容见 UI/UX 设计；如果项目包含前端实现与长期改版，可以按 软件开发 与 项目合作 的方式约定节奏。设计规范与走查表都有一份共同标准，返工自然会少。
常见问题
UI 设计外包一般怎么计价？
常见三种方式：按页面数量、按人天、按项目阶段整体报价。按页面计价时要在合同里写清「页面」的定义，弹窗、状态页、多语言版本是否单独计入；按人天计价则要约定交付节奏与验收节点。无论哪种方式，都建议写明包含的改稿轮次，以及超出轮次后的计价规则。
设计稿很好，前端却还原不出来怎么办？
多数情况不是能力问题，而是信息缺失：设计稿里用了只存在于设计工具内的滤镜与字体、组件状态没画全、标注不完整。把设计规范前置、切图命名统一、走查表量化，这三个动作基本能解决大部分还原偏差。若确有效果必须依赖特殊渲染，应在开发前确认技术可行性再定稿。
UI 设计外包和招聘设计师怎么选？
如果需求是阶段性的、需要在一个版本内集中补齐界面能力，外包的启动更快、成本结构更清晰；如果产品迭代长期高频、每天都有人跟进界面调整，内部团队沟通链路更短。也有不少团队采用外包打底、内部接手的组合方式，此时务必把源文件与规范完整交接。
交付后设计源文件归谁所有？
设计源文件、切图资源与设计规范的著作权与使用权归属，必须在合同中写明，同时约定是否允许二次开发、转授权与用于作品展示。建议把「源文件完整交接」列为付款条件之一，避免后期改版时找不到原始文件，只能照着重画一遍。