UI设计开发总说还原度低，是标注没标全还是切图没切对？

UI设计开发阶段经常出现的“还原度低”，绝大多数不是审美分歧，而是交付信息不完整。按2026年项目交付习惯，设计稿本身不是施工图，只有标注和切图补齐了，开发才拿得到准确尺寸、间距、色值与状态。也就是说，先明确交付口径，再谈优化视觉。

为什么开发总说“还原不了”？先分清是标注还是切图

开发一句“还原不了”，背后可能对应完全不同的原因。标注问题通常表现为：间距和开发计算的不一样、文字字号行高没给、色值只写了“深灰”；切图问题则常是：图标发虚、透明区域不对、多倍数缺图、命名是中文。判断方法很简单：先看标注能不能覆盖界面里每个可交互元素，再看切图是否在对应倍数下清晰可用。

常见坑包括：只标注了尺寸没标注状态；切图只导了1倍图；用PNG代替矢量图标；把整块设计稿切成一张大图。这些做法在2026年的各种端上都会放大问题，尤其跨平台时，开发需要的是可配置的原子素材，不是一张位图。所以，与其纠结开发是否仔细，不如把交付物做到他也能高效核对。

标注到底要标哪些？用“标注三步核对法”一次查全

为了不让标注变成海量标记，我习惯用“标注三步核对法”来控范围，三步走完，开发能查的信息基本齐了。

三步按“布局→文本与颜色→状态”的顺序，正好对应开发写代码时查信息的先后。因为标注的本质是让开发在实现前能自我核对，而不是替他设计。

1. 核对布局骨架：确认每个区块的间距、对齐方式和栅格基准。按8像素网格或4像素网格给出关键间距，不用每个间距都标，但要标出不遵循基准的例外。
2. 核对文本与颜色：为每个文本层级给出字号、行高、字重和颜色值；颜色用HEX或RGBA，不能用“深灰”这类描述。背景色、边框色、阴影色也要给值。
3. 核对状态和极限情况：输入框的默认/聚焦/禁用，按钮的悬停/按下，列表加载更多，以及文字内容最长和最短时的布局表现。这一步最容易被漏，也最影响开发还原。

注意第3步有时需要提供交互说明或参考稿，但标注中只需给出视觉结果，不必把交互流程都写进来，否则会超载。这套核对法做完后，开发应能在不看原始设计稿的前提下，仅靠标注说出每个元素的尺寸、颜色和状态，这就算合格。如果开发还要反过来问“这个间距是多少”，说明标注还没到位。

切图怎么切才不白切？尺寸、格式和命名不能乱来

切图的核心不是“导出一张图”，而是让开发在对应平台拿到可用的资源。按常见的跨平台项目经验，iOS通常需要@2x和@3x，Android按密度分组，Web则优先SVG，其次用2倍PNG。

• iOS：提供 @2x 与 @3x，图标优先 SVG（iOS 13+ 支持），位图按设计尺寸的2倍和3倍导出。
• Android：按 mdpi/hdpi/xhdpi/xxhdpi 等密度提供，但日常项目可先给 xxhdpi（即3倍）再缩放，或用 VectorDrawable。
• Web：优先 SVG，避免模糊；图片类切图用 1x 和 2x 两套，常见做法是 1x 和 2x，若追求兼容再补 3x。

常见坑包括：切图包含透明留白，导致开发对不准；图标没按实际可视区域切；命名用中文或带版本号；同一图标在不同界面大小不同却只导了一个尺寸。按2026年常见的协作习惯，命名建议用 '模块_组件_状态@2x' 的英文小写格式，比如 'nav_home_active@2x.png'。

如何判断切图质量？把切图放在设计稿上，透明度调到50%，核对边缘是否重合；再放到代码环境检查不同倍数的清晰度。做到这一步，基本不用反复返工。切图命名如果一开始配一张示例命名表，能省去开发沟通成本。实际项目中，光检查切图尺寸这一步就能筛掉一半还原问题。

交付现场的经验与边界：做到什么程度才算合格

在项目交付里，常见预算是10万以内（经验区间），开发周期两到三周（经验区间）。甲方常卡在“只要设计稿，不要标注”，结果开发按自己理解做，走查时一大半间距不对。我们后来在交付时先和开发leader对一遍标注清单，确认关键间距和状态完整后再切图，通常能把返工控制在一次以内（经验区间）；反之，尤其是页面里自定义控件超过十几处时，开发只能靠猜，改稿基本难免。

完整标注和切图并不是所有项目都必需。如果只是快速原型、用户测试脚本或一次性活动落地页，可以只做关键页面标注，省下时间放在视觉打磨上。但对于要长期迭代的产品，尤其是涉及多端（iOS/Android/Web）时，不建一套交付清单，后期的维护成本会明显上升。所以判断标准是：只要开发需要按设计稿施工，标注和切图至少覆盖主要页面和所有可交互状态。如果项目非常小，比如两三个页面，可以只标注首页和主要流程页；如果只有静态展示页面，甚至可以只用在线设计交付工具让开发自己取色，不再额外切图。

常见问题

设计稿标注得再细，开发还是按自己习惯来怎么办？

先和开发在开工前对齐交付标准，把标注清单和切图命名写成简短的约定，必要时用设计标注工具，开发可自行取色和测量，能避免大部分“不看标注”的情况。

切图导出 PNG 还是 SVG 更好？

图标和图形优先 SVG，矢量格式不模糊且体积小；带复杂渐变或照片内容的用 PNG 2倍图。2026年主流浏览器和系统都良好支持 SVG，不必再为兼容性牺牲清晰度。

开发说“用 CSS 画图标就行”，还需要切图标吗？

如果图标几何简单且团队熟悉 SVG，可以不用切图；但复杂图标或跨端项目，建议仍给一份 SVG 资源，开发引用更稳定，避免不同人写的 CSS 还原参差。

标注里要不要包含交互说明？

标注里只给视觉结果，交互逻辑用单独的说明或原型补充。把交互说明混在标注里会干扰开发查尺寸，容易遗漏关键状态。

小项目只有两三个页面，也需要完整标注吗？

不需要全套。把涉及交互的页面和组件标清楚，静态页可只给色值和整体间距，切图按实际出现的内容准备即可，重点是别漏掉按钮和输入框的状态。

拿到设计稿转开发时，先按“布局→文本颜色→状态”三步核对标注，再按平台要求导出切图并检查边缘。若项目预算有限或周期紧，优先保证可交互页面的标注，其他页面可简化。以上为经验区间，具体以项目实际约定为准。