做网页设计这行，最怕客户一句“看着大气点”，然后你就得对着满屏的像素发呆。今天咱就聊聊页面设计尺寸规范，别整那些虚头巴脑的理论，直接上干货，教你怎么不被前端同事骂，也不被甲方气死。

记得刚入行那会儿，我觉得屏幕多大我就画多大，反正现在都4K了嘛。结果呢？前端小哥盯着我的PSD文件，眼神像看傻子一样。他说：“哥，你这块区域在iPhone 13上显示不全啊，右边直接切掉了。”我当时还不服气，觉得是他手机不行。直到后来我拿自己手机一照，好家伙，确实被截了一半。那一刻我才明白，页面设计尺寸规范不是摆设，是保命符。

咱们先说桌面端。以前流行1024或者1366宽，现在主流早就变了。大部分用户用的是1920或者更宽的屏，但核心内容区千万别铺满。你想想，如果文字从屏幕左边一直拉到右边，那阅读体验简直灾难，眼睛都得累瞎。通常咱们把内容限制在1200px左右，两边留白，这样显得高级，也符合人体工学。有些新手设计师喜欢搞个1440px的画板，结果导出时候发现，在1366的屏上得横向滚动，这体验太糟糕了。所以，页面设计尺寸规范里，安全区域设在1200px以内是最稳妥的，既能照顾大屏，又不让小屏难受。

再说说移动端，这才是重灾区。以前做H5，总觉得750px（2倍图）就够了。现在呢？各种奇葩分辨率，华为、小米、苹果，还有那些折叠屏，尺寸多得让人头大。如果你还死守着750px，遇到全面屏或者刘海屏，你的按钮可能就被挡住了。现在主流做法是，设计稿用375px或者390px宽，然后标注清楚字体大小用rem或者vw单位，别用px写死。前端那边才敢接。我有个朋友，上次就因为这个跟前端吵了一架，他说你那个按钮在三星S22上显示位置不对，我一看，好嘛，他用了固定像素定位，没做响应式。这种低级错误，真的会被人笑话死。

还有图片尺寸，也是个坑。很多设计师为了省事，直接丢一张3000px宽的大图进去，觉得这样清晰。结果页面加载速度慢得像蜗牛，用户等三秒就跑了。现在的页面设计尺寸规范强调，图片要压缩，要懒加载。比如首屏图片，宽度控制在1920px以内，大小压缩到200KB以内，其他的图片根据容器大小来定。别嫌麻烦，用户流失率可是实打实的钱啊。

说到这儿，可能有人会说，响应式设计不是自动适配吗？对，但那是前端的事。如果基础尺寸没定好，前端就算有三头六臂也救不回来。比如导航栏的高度，桌面端60px，移动端44px，这个差异必须在设计阶段就明确。还有字体大小，正文16px是底线，小于14px的字体在移动端基本没法看，除非你是做那种极简艺术风格，否则别这么干。

我最近接的一个单子，甲方非要全屏背景图，我说这样加载慢，他说不管。结果上线后，转化率跌了一半，因为加载时间超过了5秒。这时候再提页面设计尺寸规范，已经晚了。所以，前期沟通很重要，要把这些规范摆到台面上，用数据说话。比如加载速度与转化率的关系，有数据显示，页面加载每慢1秒，转化率下降7%。这可不是我瞎编的，是行业共识。

最后想说，设计不是艺术创作，是解决问题。尺寸规范就是那个解决问题的工具。别嫌它束缚，它其实是你的护城河。当你熟练掌握了页面设计尺寸规范，你会发现，跟前端沟通顺畅了，甲方也满意了，自己下班也早了。这才是咱们打工人的终极梦想，对吧？

当然，规矩是死的，人是活的。遇到特殊情况，比如特殊的品牌调性，可以适当打破规范，但前提是你要知道你在打破什么，以及后果是什么。别盲目跟风，也别固步自封。多看看竞品，多测测数据，这才是正道。

好了，今天就聊到这。希望这篇能帮你在尺寸问题上少踩点坑。要是还有不懂的，评论区见，虽然我不一定回，但说不定能碰到同行交流下。