做网页设计，最烦的不是配色，而是尺寸标注。很多新人以为画完图就完事，结果开发骂娘，还原度惨不忍睹。这篇内容直接告诉你，怎么标注才不扯皮，怎么切图才高效。

先说个真事。上个月有个朋友接了个外包，设计稿做得挺漂亮。结果前端一看，懵了。按钮间距没写，字号没标，图片尺寸全靠猜。最后改了三版，客户还不满意。这就是典型的标注缺失。

咱们做设计的，不能只当美工。你得懂一点开发逻辑。标注不是装饰，是沟通的语言。

很多人喜欢用插件一键生成标注。省事是真省事，但坑也是真多。比如那个自动间距，有时候会把负间距标成零。或者把圆角半径标错。开发照着做，出来的效果肯定歪。

我建议你，核心元素必须手动标注。特别是按钮、输入框、卡片这些组件。

比如一个登录按钮。宽度多少，高度多少，圆角半径是4px还是8px。这些细节，插件经常偷懒。你得在图里用线标清楚。

还有字体。别只写个“微软雅黑”。要写具体大小，行高，字重。比如16px，行高24px，Regular。这样开发才知道怎么调CSS。

再说说图片。很多设计师把大图直接丢进去。开发要切图，还得压缩。你最好提前标注好图片的显示比例。比如16:9，或者1:1。告诉开发，这张图在不同屏幕下怎么缩放。

这里有个数据对比。手动标注虽然慢，但返工率能降低70%。自动标注虽然快，但后期修改成本极高。你想想，改一个标注，可能涉及整个页面的重构。

别嫌麻烦。你现在的每一分钟标注，都是给未来省下的扯皮时间。

再聊聊响应式。现在做网页，不响应式基本没法交差。但响应式的标注更复杂。

比如一个卡片组件。在PC端是4列，平板是2列，手机是1列。你怎么标？

别只标一个尺寸。要标断点。比如768px以下是单列，1024px以上是多列。每个断点下的间距、字号都要标出来。

我见过一个案例，设计师只标了PC端的尺寸。开发直接照搬，结果手机端挤成一团。客户投诉，设计师背锅。

所以，断点标注很重要。

还有颜色。别只给个HEX码。要说明是主色、辅色，还是警示色。比如#FF0000是错误提示，不是普通文字。

字体颜色也一样。正文用#333，标题用#000。别搞混了。

最后，交付格式。别只发PSD。要发Sketch或Figma链接。加上标注插件生成的PDF。

这样开发看着清楚，你也省心。

记住，标注的核心是“无歧义”。任何让开发猜的地方，都是隐患。

我见过最离谱的，是设计师在图里写个“大概”、“差不多”。这种词，开发看了想打人。

你要做的，是精确。精确到像素。

当然，也不用纠结到小数点后两位。整数就够了。10px就是10px，别写10.5px，除非你真有特殊需求。

还有，图层命名要规范。别叫“矩形1”、“矩形2”。叫“按钮-主”、“输入框-默认”。这样开发找起来快。

总结一下。网页设计尺寸标注，不是形式主义。它是项目顺利推进的保障。

手动标注核心元素，手动标注字体和间距，手动标注断点和响应式逻辑。

别依赖自动化工具。它们懂你的设计，但不懂你的业务逻辑。

多花十分钟标注，能少开十次会。

这钱花得值。

希望这篇分享，能帮你少踩点坑。毕竟，咱们都是靠手艺吃饭的，专业点，路才能走宽点。

本文关键词：网页设计尺寸标注