网页设计草图到底该画多大？这些尺寸雷区千万别踩！

哎，你是不是也纠结过该用A4纸还是直接上电脑画草图？上周我徒弟小王就闹了个笑话——把移动端页面草图画在A3纸上，结果开发小哥盯着密密麻麻的标注直喊眼瞎。这事儿整得，就跟拿导弹打蚊子似的，劲儿使错地儿了。

草图尺寸搞不对 全盘皆输

去年某大厂翻车案例还记得吧？设计师用1920px宽度画的PC端草图，结果客户显示器是2K屏，页面元素全散架了。​​记住三个黄金尺寸​​：

• ​​移动端​​：375x667px（别看现在都是全面屏，这是行业基准线）
• ​​平板端​​：768x1024px（iPad竖屏尺寸）
• ​​PC端​​：1440px宽度打底（别问为啥不是1920，95%用户浏览器没全屏）

（说个冷知识：草图实际尺寸要比设备小30%，不然标注起来要命）

手绘vs电子稿 怎么选不纠结

上周去设计展溜达，发现个有趣现象——资深大佬爱在餐巾纸上画框架，新人反而端着数位板较劲。这事儿吧，就跟吃饭用筷子还是叉子似的，顺手最重要。

​​实测对比表​​：

（突然想到：手绘草图有个隐藏buff——客户不好意思让你大改！）

响应式设计的草图玄机

我表弟开的火锅店官网就栽在这事儿上。设计师按手机尺寸画的草图，到电脑端直接撑成马赛克。后来重做时学乖了，​​搞了三件套​​：

1. 移动端画核心功能流
2. 平板端突出商品陈列
3. PC端玩转视觉冲击

现在他们官网转化率提升了27%，秘诀就是在不同尺寸草图上做减法。就跟火锅蘸料似的，小碗装精髓，大碗反而串味。

标注间距的魔鬼细节

去年帮政府做门户网站，被甲方爸爸虐惨了。明明草图上标着"间距30px"，落地变成50px。后来才悟出来：​​手绘草图要用网格纸，电子稿必开参考线​​。

​​避坑指南​​：

• 文字间距＝字号1.2倍（比如14px字留16.8px）
• 图标周围留白≥图标尺寸1/3
• 模块间隔要是基础间距的整数倍（比如都用8px的倍数）

（插句实话：这些规范就像炒菜放盐，少了没味，多了齁死）

动态元素怎么画不翻车

前两天看到个神操作——设计师在草图上画了个会转的加载图标，结果程序员当场崩溃。这事儿给我提了个醒：​​动态效果得用分层草图​​，就跟做动画分镜似的。

推荐个土法子：

1. 主画面画静态布局
2. 便签纸画初始状态
3. 透明硫酸纸画过渡效果
4. 最后用红色马克笔标触发条件

小编观点：草图尺寸这事儿吧，就跟穿鞋似的，合不合脚自己知道。别被那些高大上的理论唬住，记住三句话——移动端别超400px宽，PC端守住1440底线，手绘草图记得带刻度尺。实在拿不准时，把草图打印出来贴在墙上，退后三米看还清楚不，这招比啥软件检测都管用！