UI设计稿自己看没事，一上真机就乱，到底该查哪几项？

UI设计稿自己看没事，一上真机就乱，通常不是运气差，而是画布尺寸、安全区、系统字体、色彩模式这些变量没在定稿前统一核对。按2026年项目交付习惯，优先查布局间距、字号层级、色彩对比、触控热区和标注信息这五个方向，能覆盖大部分返工原因。

为什么UI设计稿需要“上机前自检”？

设计软件里的画布是理想状态，真机有刘海屏、底部导航、状态栏和系统字体渲染差异。很多设计稿在电脑上看着整齐，一到真机上不是被截断就是颜色发灰，原因往往在设计阶段没把“异常状态”考虑进去。

在项目里常见，设计稿只画了理想空态，没有给加载态或断网态，开发只能临时自己决定，结果与视觉意图不符，回头再改稿。按2026年项目交付习惯，建立一份“上机前自检”清单，比事后修图更节省时间。

• 误区一：只盯着整体效果，忽略局部边距和控件尺寸。
• 误区二：以为开发会自己调整安全区和字体兼容，实际上他们更倾向按图实现。
• 误区三：把“写标注”当成选项而不是交付的一部分。

四步自检法：从布局到交互按层核对

为什么分四步？因为从布局到字号再到色彩和状态，覆盖了视觉结构、信息层级、可读性和可操作性四个层面。按这个顺序检查，能避免在细节堆里迷失。

1. 布局与间距：检查所有页面是否遵循统一的间距基数。常见以8px为基数（8、16、24、32），或按平台规范采用4px基数。若同一屏内间距随意混用，视觉就会显乱。
2. 字号与层级：确认标题、正文、辅助文字形成清晰阶梯。常见字号区间为14px、16px、20px、24px，配合字重区分。至少保证最小字号在目标设备上可读。
3. 色彩与对比：核对前景与背景的对比度。按常见可读性标准，正文对比度应在4.5:1以上，大字可以适当放宽。深色模式还要额外检查亮色文字是否过刺眼。
4. 状态与触控：检查按钮、链接的悬停、按压、禁用、加载状态是否齐全；触控区域建议不低于44×44pt或48×48px。如果只画常态，交互时就容易露馅。

每步注意什么？布局注意对齐到网格；字号注意层级对比而不是单纯大小；色彩注意白底和深底差异；状态注意图标与文字在禁用态的可辨识度。在预算紧、周期短的项目里，我们常常只约定关键页面的标注，结果开发反复追问未定义的空状态怎么处理，反而拖慢进度；后来养成习惯，即使时间紧张也会至少给出加载态、空状态和错误的示意图。这就是四步自检法的价值：用固定顺序逼着团队把未知问题提前暴露。

哪些细节容易在真机上翻车？

即使四步都过了一遍，仍有一些“看起来没问题”的细节，在真机上特别容易出问题。下面按2026年常见机型情况列一下，并给出常规对策。

• 底部安全区：iPhone的Home Indicator会遮挡按钮或标签文字，处理办法是额外留出安全距离并添加背景延伸。
• 系统字体差异：安卓与iOS字体不同，行高会有细微差异，按平台默认字体加固定行高可以缓解。
• 色彩色域：广色域屏与普通屏显示同一颜色，观感可能不同。常规做法是在交付时注明颜色模式，并在真机验证主要色板。
• 阴影与毛玻璃：低端机型在复杂模糊效果下会卡顿，需要降级方案，比如用半透明色块代替强毛玻璃。
• 切图命名：如果输出给开发的资源按中文或乱码命名，同样影响还原效率；按“模块_状态_尺寸”的规则命名，能减少沟通成本。

什么样的设计规范值得花时间做？

规范不是越厚越好。2026年常见的做法是，先定一套最小可用规范，再按项目复杂度和迭代频率决定要不要扩展。

• 完整设计规范：适合中后台系统、多端产品、长期迭代的项目。包含颜色、字体、间距、组件、状态模板，起步投入通常在数人天，但后续改动容易统一。
• 精简设计规范：适合小规模活动页、短生命周期产品。只定义颜色、字号、间距三个核心变量，半天内可以出完，能解决大部分协作问题。

在项目里常见，团队一开始花大量时间做几十页规范，结果页面迭代快，规范很快过时；后来改为“核心变量固定 + 细节按需补充”，反而更实用。可以先从精简规范起步，遇到重复出现的组件再补进规范，保持文档的生命力。

适用场景与边界

四步自检法和精简规范，适合需要真实设备体验、有开发协作、且需要后续迭代的界面项目。对这类项目，投入一次检查的时间和半天规范整理，能减少反复沟通。

反过来，如果你的页面是纯展示、一次性活动页、或直接用模板生成，那么不必套用这套方法。

• 适合：移动端与桌面端并存的界面，需要保持一致体验。
• 适合：多个设计师协作、新人交接的场景。
• 适合：需要与开发团队定期验收的应用界面。
• 不适合：一次性宣传推广页，模板快速搭建即可。
• 不适合：对交互要求极低的静态展示页面。
• 不适合：没有后续迭代的临时项目，不必把精力耗在规范上。

如果你的项目只有三五个页面且三个月不动，不写规范也能正常交付；如果页面超过二十屏且有持续更新，不写规范后期维护成本会明显上升。这条边界可以作为是否投入自检和规范整理的参考。

常见问题

上真机前先查哪一项？

先查布局间距，因为它决定整体稳定感和信息层级；间距一旦乱了，后面字号和色彩怎么调都别扭。

设计稿与真机色差大，问题出在哪？

多数是颜色模式没统一，或没有在真机上校准。可按P3与sRGB的常见差异先核对主色，再调亮度。

触控区域至少多大才合适？

常见经验区间是44×44pt到48×48px，具体以平台规范为准。低于这个数值，密集页面里误触率会升高。

小项目也要写设计规范吗？

如果页面少于十屏且不长期迭代，用一页纸列清颜色、字号、间距就够；反之，页面超过二十屏或需要持续迭代，就建议建完整规范。

行动指引：用四步自检法过一遍当前设计稿，优先补全空状态、加载态和按钮按压态。如果项目周期紧张，至少保证间距、字号、颜色三个变量统一。这套方法适用于常规应用界面，对于沉浸式游戏界面或数据可视化大屏，需额外考虑动态场景与特殊交互，不必硬套。