UI设计怎么验收？App与网站界面的5个检查点

UI设计怎么验收？App与网站界面的5个检查点

设计稿交付那天，视觉评审全票通过。两周后上线，产品拿着手机来问：这个按钮点了没反应，是不是 bug？设计师说那是禁用态，我没画。开发补一句：这个圆角加渐变加阴影，在他那边要写三套兼容代码。

界面设计出问题，很少出在"好不好看"上，大多出在"能不能开发、能不能上线、上线之后还对不对"。验收一套 UI，看五个检查点。

一、检查点一：状态覆盖齐不齐，决定上线后有没有"假 bug"

用户看到的界面，永远不只有一种样子。只画默认态的设计稿，上线后会被当成 bug 反复提。

至少要覆盖三类状态：

• 交互态：默认、悬停、按下、禁用、聚焦。禁用态最常被漏，也最容易被当成故障。
• 过程态：加载中、上传进度、下拉刷新。没有加载态的页面，网络一慢就像卡死。
• 结果态：空状态、无网络、加载失败、操作成功、表单校验报错。

判断标准：挑一个核心页面，把它从第一次打开到出错的所有状态列出来，设计稿里没画的，就是上线后会被当成 bug 的地方。 列不全，就先别定稿。

二、检查点二：可开发性，别让开发靠猜还原

设计稿和成品之间的落差，往往卡在"实现不了"或"实现太贵"。

• 标注是否完整：元素间距、字号行高、圆角数值，有没有明确数字，还是要开发自己量。
• 切图与图标：图标有没有导出 svg 或多倍图，需要拉伸的气泡和按钮有没有标注九宫格区域。
• 效果能否落地：复杂渐变、毛玻璃、实时模糊，在目标端能不能做、低端机跑不跑得动。

判断标准：把设计稿交给开发，对方能不能在不问设计师的前提下还原出八成。 问到第三次，就是标注没做到位。

三、检查点三：多端适配，别只画一种屏幕

一套稿子只画一种屏幕尺寸，是界面项目最常见的隐患。

• 断点版式：手机、平板、桌面分别是什么布局，而不是把手机版硬拉宽。
• 安全区：刘海屏、挖孔屏、底部手势条会不会挡住关键按钮。
• 深色模式：如果支持，配色要有对应方案，不能把浅色简单反相——反相出来的对比度通常不达标。

判断标准：找一台最老的目标机型和一台最新的全面屏，各看一遍关键页面。 有一台错位，适配就没做完。

四、检查点四：组件成不成体系，决定后面好不好改

界面数量一多，不成体系的稿子就会失控：同样层级的按钮三种圆角，改一次主色要动几十个页面。

• 同类元素是否统一：同级按钮的颜色、高度、圆角是否一致。
• 能不能复用：改一个组件，是改一处还是改三十处。
• 有没有体系说明：色板、字阶、间距体系、图标库是否写清。

判断标准：让设计师改一次主色，如果答案是"得改三十个页面"，这套 UI 就只是页面，不是系统。

五、检查点五：交付文件能不能交得出去

最后一关，看这套设计有没有可维护性。

• 源文件：Figma、Sketch 或分层 PSD，图层命名清楚，而不是一堆导出的图片。
• 切图资源：@2x/@3x 多倍图、svg、九宫格是否齐全。
• 规范文档：色值（含深色模式）、字号字阶、间距规则、图标清单。
• 字体授权：设计里用的商用字体，授权是否确认过。

判断标准：换一个设计师接手这套文件，能不能接着往下改。 不能，说明交付的是图，不是工程文件。

六、雇主的3条行动清单

1. 需求里写清要覆盖哪些状态、哪些机型，别只说"做个 App 界面"。
2. 验收时让开发一起看稿，实现不了的部分当场就能发现，比上线后返工便宜得多。
3. 交付清单里点名要源文件、切图和规范文档，别只收一堆导出图。

七、创意人的3条行动清单

1. 提案时就给状态页和多端适配图，别等上线才补，补的代价远高于一次画全。
2. 标注和切图做全，这是你和"只出一张效果图"拉开差距的地方。
3. 主动写一份组件说明，后面改需求时，它能帮你省下一半沟通时间。

界面设计不是把页面画漂亮，是让它在每一台设备上、每一种状态下都站得住。五个检查点走完，设计和开发之间的返工会少一大半。

对平台来说，这套检查点的价值在于把"好不好看"的主观争论，变成"有没有做到"的客观清单：需求阶段写清状态与机型，验收阶段按表逐条打勾，交付阶段点名文件清单。标准越清楚，双方的摩擦就越少。

在华智云企，你可以在发布界面设计需求时把这五个检查点写进需求与验收标准；也可以到品牌资讯栏目看更多设计交付指南。 延伸阅读：VI设计不是Logo合集、Logo设计怎么验收。