UI设计稿自己看不错，客户却说差点意思，问题通常出在哪？

UI设计看起来“廉价”，多数情况下不是因为配色不够鲜艳，而是信息层级塌陷、间距节奏混乱、交互状态缺失这三件事同时发生。按2026年项目交付习惯，界面验收时先自查这套五项清单，通常能覆盖大部分“说不清哪里差”的返工原因。

为什么界面会显得廉价？关键不在配色

很多设计者遇到“显得廉价”时第一反应是换配色，但实际项目中，廉价感常来自结构性问题：信息没有主次、元素间距随意、状态图缺失。用颜色补救只能短暂掩藏，用户交互时依旧会暴露。

从设计产出角度看，界面是一个信息容器。容器如果连“哪句话最重要”都没说清楚，即便色板再高级，也会被当成半成品。

• 信息层级：一个页面往往有3~4个层级，只有标题、正文、辅助信息层次分明，眼睛才有落点。
• 间距节奏：常见做法是以8px或4px为基数递增，比如8、16、24、32、48，而不是随手拖。
• 状态完备：按钮要有普通、悬停、按下、禁用，表单要有默认、聚焦、错误、成功，缺失时界面就像没穿完衣服。

五步核验法：从层级到一致性自查

这个框架是把UI验收拆成五个可操作的维度，每个维度都有明确的检查动作。按企业项目交付习惯，设计稿在交给开发前，逐项过一遍，能省掉后续改稿沟通。

1. 层级：用“眯眼测试”——眯起眼，看第一眼落点是不是核心行动；再看标题、正文字号是否差距明显。
2. 节奏：检查间距是否落在基数格上；同一组间距是否在同类模块间重复使用。
3. 状态：清点关键组件是否覆盖普通/悬停/禁用等状态；表单是否有错误提示态。
4. 细节：检查1px分割线、圆角半径是否统一，图标线条粗细是否一致，文字是否溢出不截断。
5. 一致性：把页面缩小到25%看整体，是否所有弹窗、导航、卡片都来自同一套规则。

这套五步法所以有效，是把“高级感”这种主观词拆成可核对的客观项。比如“层级”看的是字号对比度，“节奏”看的是间距数列，“状态”看的是组件穷举。任意一项失分，整体质感都会向下拉。

常见坑：反例与判断标准

根据项目里甲方常卡住的地方，有几个反例值得单独拿出来说。

• 间距全靠感觉：同类元素间距一次12、一次16、一次20，视觉上就会像散装。合格标准是同一模块内间距最多使用两个连续基数。
• 阴影比内容抢眼：卡片阴影太重，会让页面变脏。2026年常见做法是阴影不超过两层，颜色用灰色或同色系低透明度。
• 图标系统混搭：线性图标与面性图标混用，或线条粗细不一致，立刻拉低专业度。建议一套界面只用一种图标风格。
• 文字无截断规则：中文长标题没设省略号或换行，会把布局撑乱。需要提前定义标题、摘要的行数上限。

判断“合格”的标准很简单：把设计稿从彩色换成灰度，如果信息层级依然清楚，说明基础过关；如果混成一团，就要回头补层级。

两种自查方式：凭经验扫 vs 按清单核

项目里常见两种自查习惯，结果差异很大。

• 凭经验扫：速度快，适合资深设计师判断整体气氛；缺点是没有边界，容易漏掉异常态，且每个人判断标准不一。
• 按清单核：效率看似低，但可复制；把层级、节奏、状态、细节、一致性逐项打钩，特别适合团队协作与新人上手。按经验区间，一份中等复杂度页面的清单核对耗时约15~30分钟，而返修一次平均要1~2小时。

这不是说清单永远更好。在探索方案阶段，凭经验扫能更快发散；而进入交付阶段，应按清单核一遍，避免带病进入开发。

适用场景与边界

这套五步核验法，适合用来检查已完成的静态界面设计，包括网页、2C应用后台、移动端界面。它不适合用来验证交互流程是否顺畅、动效是否自然，也不适合判断色彩审美层面的“高级感”是否属于品牌调性——那是品味问题，不是标准问题。

具体来说：

• 适合：改版前统一风格、新页面走查、交付给开发前的自查、团队评审。
• 不适合：用户研究中的原型草稿，因为原型需要保留粗糙感以鼓励反馈；动效demo需要看运动曲线，静态核验不适用。

如果你正在做的是高保真动效稿，或像地铁大屏这样特殊显示环境，应单独建立针对运动与阅读距离的检查项，而不是套用通用静态规则。

交付现场：一次返工复盘

以一次企业后台改版为例（脱敏处理），预算紧、周期只有两周，甲方提供的图标来自两套素材，风格明显不统一。我们用五步核验法先梳理界面，发现间距数列混乱、按钮没有禁用态；于是先统一间距基数，并把缺失状态补全，对无法替换的图标用同色系处理。

结果，状态补全避免开发阶段的大面积返工；但两处图标差异仍在终审时被要求修改，额外花了大半天重新绘制。这个代价说明：在交付时“大致统一”往往过不了验收，必须提前确认客户对统一性的最低接受标准。

常见问题

界面“不够精致”，先查哪里？

先看间距节奏，再查状态。间距乱是视觉脏的主因，状态缺是使用后才会暴露的硬伤，两者比配色更容易被忽略。

配色不行是不是也会显廉价？

会，但多数情况是层级和间距先失分。建议先用灰度检查层级，再调色相饱和度；只是调色容易把问题盖住，等交互时又翻出来。

五步核验法适合所有界面吗？

适合静态界面检查；3D、动效或音屏场景不适用，需要额外增加运动曲线、对比度、注视点等专项标准。

UI设计稿要检查细节到什么程度算合格？

合格线是：任意元素拖到100%时无模糊、无溢出、无错位；断点在常用分辨率下不破版；状态覆盖关键路径的可用态。

行动指引：如果你正面临“看起来不够精致”的评价，先不要调色，按五步核验法过一遍设计稿；其中状态缺失容易被忽视，也常成为开发返工的集中点。若你已进入开发阶段，建议把清单转成验收表，由产品、设计、开发三方共同确认边界条件。若你的项目涉及动效、3D或非标屏，请另行补充专项标准。