本文关键词：网页后台常用设计尺寸

做后台设计这行当，混久了你就会发现，前台讲究的是“惊艳”，后台讲究的是“耐看”和“高效”。很多刚入行的兄弟，或者外包公司，拿到需求直接就开始画线框图，连尺寸都没对齐，最后改稿改到怀疑人生。今天咱不整那些虚头巴脑的理论，就聊聊我在项目里摸爬滚打出来的网页后台常用设计尺寸，全是干货，建议收藏慢慢看。

先说个大背景，现在后台系统早就不是那种只有1024px宽度的老古董了。随着笔记本屏幕越来越普及，1920x1080甚至更高比例的屏幕成了主流。如果你还死守着1366px或者更小的尺寸，做出来的界面在高分屏上就会显得特别“窄”，两边留白巨大，用户体验极差。所以，定稿前一定要问清楚目标用户的主流分辨率。一般来说，我们现在设计稿的基础画布，推荐设定为1440px或者1920px宽，高度不设限，因为后台是滚动页面。

具体到布局结构，这是最容易被坑的地方。我见过太多设计师，把侧边栏做得太宽，或者主内容区太窄。根据我的经验，一个标准的后台布局，左侧导航栏宽度控制在200px到240px之间比较舒服，太窄了图标文字挤在一起，太宽了浪费屏幕空间。右侧主内容区的边距，也就是padding，千万别设成固定的像素值，最好用百分比或者rem单位，这样在不同分辨率下能自适应。比如，主内容区左右各留24px或32px的内边距，看着才透气。

再聊聊具体的组件尺寸。这是网页后台常用设计尺寸里最核心的部分。输入框的高度，标准是32px或36px，按钮一般是32px或40px。别为了省那点空间把输入框做得跟行内文字一样高，那样操作起来极其难受，鼠标稍微偏一点就点错了。表格行高，我建议至少48px，如果是复杂表格，带有多行数据或者操作按钮的，行高得拉到56px甚至64px。你想想，如果一行只有32px高，里面塞个下拉菜单和两个按钮，那得挤成什么样？用户点起来费劲，你也得被产品经理骂死。

还有弹窗（Modal）的尺寸。很多新人喜欢把弹窗做得巨大，恨不得占满整个屏幕。其实，80%的后台弹窗，宽度在600px到900px之间就足够了。除非是那种数据透视或者复杂表单，否则没必要搞那么大。弹窗的背景遮罩透明度，建议设在0.5到0.7之间，太透了看不清底下的内容，太黑了又显得压抑。

说到这儿，不得不提一个避坑指南：栅格系统。千万别自己随便画几个div就完事了。后台系统通常采用12栅格或24栅格系统。如果你用12栅格，每个栅格宽度建议设为80px左右，间距16px。这样算下来，一行大概1100px的内容区，加上左右边距，刚好适配1440px的屏幕。如果你用24栅格，栅格宽度减半，适合更精细的布局。记住，栅格间距一定要统一，要么都是8px，要么都是16px，别一会儿8px一会儿12px，看着就乱。

另外，字体大小也有讲究。后台文字信息密度大，字体不能太小。正文一般用14px，标题用16px或18px，辅助文字用12px。千万别用10px以下的字体，那是给视力好的年轻人看的，不是给天天对着屏幕加班的运营和客服看的。

最后，关于响应式。虽然后台不像前台那样需要适配手机，但现在的平板、大屏显示器越来越多。所以，在设计网页后台常用设计尺寸时，一定要考虑到断点。比如，当屏幕宽度小于1200px时，侧边栏是否可以收起？当屏幕宽度小于900px时，表格是否变成卡片式布局？这些细节决定了产品的质感。

总之，后台设计不是画画，是解决效率问题。尺寸定得准，开发少加班，用户少骂娘。希望这些经验能帮你在下一个项目中少踩点坑。要是还有啥拿不准的，多看看大厂的设计规范，比如Ant Design或者Element UI，虽然不能完全照搬，但里面的尺寸逻辑是通用的。

图片1：

!后台布局尺寸示意图

ALT: 后台管理系统常见布局尺寸比例图，展示侧边栏与内容区比例

图片2：

!表单组件尺寸规范

ALT: 后台常用表单组件如输入框、按钮的标准高度尺寸