别瞎猜了！设计师必须掌握的设计页面尺寸图标准，小白必看

本文关键词：设计页面尺寸图

做设计的兄弟，是不是经常被前端同事追着问：“这图到底多宽？高度留多少？” 真的烦死人。很多刚入行的小白，甚至一些老油条，连最基础的设计页面尺寸图都搞不清楚，导致后期改稿改到怀疑人生。今天咱不整那些虚头巴脑的理论，直接上干货，告诉你怎么定尺寸才能少加班，少挨骂。

先说最让人头大的PC端。以前大家习惯做1024宽，现在谁还用那么窄的显示器？主流肯定是1920，但安全区域一定要卡在1200或者1440以内。为啥？因为不是所有用户都开全屏。如果你把关键按钮放在1500像素以外，左边留白一大片，右边内容挤在一起，用户体验极差。记住，设计页面尺寸图的核心不是填满屏幕，而是保证核心信息在1200px宽度内完整展示。这点做不好，前端切图的时候绝对会找你麻烦，因为他得做自适应，你给他留的坑太大，他填不平。

再说说移动端，这才是重灾区。现在手机屏幕五花八门，iPhone SE小得可怜，Pro Max又大到离谱。很多设计师直接拿1080x1920去画，结果在真机上测试发现字体小得像蚂蚁，或者按钮根本点不到。听我一句劝，基准宽度就定375px或者390px，别贪大。高度不用死磕，因为内容是可滚动的。但是！首屏高度一定要控制在667px左右，也就是iPhone 6/7/8的标准高度。这样能保证用户打开网页，不用滑动就能看到核心转化区域。你要是把首屏做得像长卷画一样，用户早就关掉了。

还有那个该死的响应式设计。很多公司要求一套图适配所有端，这简直是反人类。正确的做法是：PC端做一套，平板端做一套，手机端做一套。别想着用一套设计页面尺寸图走天下，那是不可能的。平板端一般在768px到1024px之间，这个区间最尴尬，内容既不能像PC那样横排，也不能像手机那样单列。这时候你需要做断点处理，比如768px以下隐藏侧边栏，768px以上显示。这种细节，只有你真正画过设计页面尺寸图才能体会到其中的痛苦和快乐。

再说个容易被忽视的点：安全边距。不管屏幕多大，左右两边至少留80px到120px的边距。别把内容贴到屏幕边缘，那样看起来很廉价，而且容易误触。我在之前一个电商项目里，就是因为没留够边距，导致移动端点击率下降了15%。这数据可是实打实的教训。

最后，给个结论。别再去纠结那些过时的800px宽度了。PC端基准1200-1440，移动端基准375-390，平板端768-1024。这是目前最稳妥的方案。至于高度，PC端首屏1080以内，移动端首屏667以内。把这些数字刻在脑子里，下次再有人问你尺寸，你直接甩出这张设计页面尺寸图的标准，保证对方对你刮目相看。

当然，规则是死的，人是活的。如果遇到特殊项目，比如全屏视频背景，那另当别论。但绝大多数常规页面，遵守这个标准，能让你少加很多班。别再为了追求所谓的“大气”而把页面做得宽无边际，用户根本看不完。实用，才是硬道理。

希望这篇能帮到正在熬夜改稿的你。如果觉得有用，记得收藏，下次被问尺寸的时候，直接翻出来怼回去（开玩笑的，要礼貌哈）。设计这条路，坑多，但踩过去就是经验。加油吧，打工人！