# UI设计需求确认书怎么写？页面、功能、交付与修改范围模板

原网页：https://www.jvds.cn/share/ui-design/ui-design-requirements-confirmation-template
语言：zh-CN
发布：2026-09-26
作者：界达设计公司

做 UI 设计项目，甲乙双方最容易在中期闹不愉快的一句话就是：**“当初咱们不是说好一共就 30 个页面吗？怎么现在画了 50 张图还没画完？”**

其实复盘下来，往往双方都没有故意耍赖，而是因为立项时只写了一句“某管理后台 UI 设计，约 30 个页面”，却从来没有共同定义过**到底什么叫“一个页面”**。在客户眼里，“用户管理”就算 1 个页面；但真正动手设计时，里面包含了用户列表页、新建用户弹窗、批量导入报错弹窗、角色权限分配抽屉、空数据状态，而且客户还默认“你画完电脑端，肯定得顺手帮我把手机端和平板端也画出来吧？”——原本预算里的 1 个页面，瞬间膨胀成了 12 张画板。

为了把丑话说在前面、让合作过程干脆顺畅，我们在启动每一个 [UI/UX产品设计](https://www.jvds.cn/service/uiux) 项目前，都会和客户一起签一份不到两页纸的 **《UI 设计范围与交付确认单》**，把下面这四件事钉死：

![第三部分](https://www.jvds.cn/upload/2026/0824/1787562642298-711137.webp)

## 1. 算清楚“主页面（Screen）”与“派生状态（State / Modal）”的计价口径

不要用笼统的“页面数”来估算工作量，而要把页面拆成三个颗粒度写入清单：

- **一级主版式页面（Core Screens）**：指布局结构、信息模块完全独立的页面（如数据概览仪表盘、商品详情页、复杂工作流画布）。
- **二级衍生状态与弹层（Modals / Drawers / States）**：依附于主页面的新建编辑弹窗、侧边筛选抽屉、空状态（Empty State）、加载骨架屏与报错提示。确认单中应明确约定：*“每个核心主页面默认包含 2～3 个常规交互状态/弹窗设计；若某一模块涉及超长多步向导弹窗（如 6 步复杂配置器），则单独按主页面折算工作量。”*
- **可复用模板页**：结构相同、仅替换文案与配图的同类型页面（如 5 个子行业的介绍页共用同一套骨架），按 1 个主设计版式 + 4 个版式延展核算，帮客户省下不必要的重复设计费。

![第五部分](https://www.jvds.cn/upload/2026/0824/1787562642298-693318.webp)

## 2. 明确终端设备与基准画布尺寸（Target Viewports）

在动笔前写清本次交付覆盖哪些终端：

- 仅交付 **PC 桌面端**（基准尺寸 `1440×900px` 或 `1920×1080px`）？
- 还是需同步交付 **移动端独立设计稿**（基准尺寸 `375×812px`）？
- 是否包含 **深色模式（Dark Mode）与浅色模式（Light Mode）双主题换肤**？如果包含双主题，必须提前通过 Figma Variables（颜色变量）架构设计，工作量按约定的系数单独计入。

![第八部分](https://www.jvds.cn/upload/2026/0824/1787562642298-751268.webp)

## 3. 锁定分步确认节点：“先锁首页风格，再铺内页”

确认书中必须写明一条不可逾越的流程规则：**先输出 1～2 个最具代表性的核心页面（通常是首页或核心工作台）进行视觉风格定调**。在此阶段，客户可以充分提出对配色、圆角、字号密度、明暗氛围的修改意见；一旦书面确认“风格定稿”并开始批量铺设后续 30 个内页时，就不再接受“推翻整体底色或全局布局结构”的方向性颠覆。

## 4. 写清最终移交的资产清单

尾款结清时，不能只给几张静态 JPG 预览图。确认单底部直接勾选移交物：`[✓] 图层命名规范的 Figma (.fig) 源文件`、`[✓] 全局色彩/字体/阴影样式表与基础组件库（Buttons, Inputs, Tables, Tags）`、`[✓] 供前端工程师直接查看间距与切图的标注链接`。把这四块写在一张表里，甲乙双方从第一天起就能把精力全放在打磨好产品上。