兰亭妙微ui设计公司分享：栅格系统的基础概念网上已有大量详尽讲解，本文不再赘述。主要结合我实际工作中踩过的坑，聊聊很多 B 端设计师都会纠结的核心问题：B 端后台，究竟该选用什么尺寸做设计稿？
确定设计尺寸的前提，是先选定页面布局模式。B 端后台最常用三类布局，其余大多是这三类的变体与延伸：
从设备统计数据来看，如今低分辨率电脑占比持续走低，但这不代表我们直接选用市场占比最高的 1920 分辨率作为设计基准。
上下布局的 B 端页面，和普通网页逻辑一致，若无特殊需求，有效内容区域优先遵循 1200px。网上流传的 960px、990px、1024px、1156px 等数值，没有硬性对错，业务无特殊约束时均可使用。
日常工作里，多数 B 端设计师会选用 1440px、1920px 两个基准尺寸出稿。 上下布局更多属于 B 端的补充页面，尺寸基准建议和核心的左右布局页面保持统一，整套产品设计稿口径一致。
早些年不少大厂文章会推荐 1280px 作为基准，出发点是规避浏览器窗口缩小后出现内容挤压、遮挡问题。但随着前端技术迭代，如今 1280px 已经不再是最优选择。
小结：面向多用户的通用 B 端产品，优先以 1440px 作为设计基准；私有化定制项目，以客户实际设备为准。
市面上诸多设计插件都可以快速生成栅格，工具只是手段，核心是理解栅格参数逻辑，下面分享我在 Sketch 中搭建 1440 规格 B 端栅格的实操经验。
栅格宽度：1192px，列宽 42px，间距 8px，边距 24px，左侧菜单栏 200px。
实际制作时，偶尔会出现部分列宽 42px、部分 43px 的情况，不必过度纠结像素绝对均等。 栅格系统的核心目标不是像素严丝合缝，而是实现视觉秩序、排版统一协调。
没有绝对标准、永远正确的栅格，只有适配自身业务的栅格。
希望本文可以帮到还在纠结 B 端尺寸与栅格的设计师，欢迎一起交流探讨。
