作者：凯铧互联小编
相较于C端页面注重视觉颜值，B端网页设计更强调规范统一、整洁高效、适配稳定、体验克制。很多团队页面杂乱、组件不统一、适配出错，核心原因就是没有固定标准参数。本文整理一套完整、可直接落地的B端网页设计参数规范，涵盖画布尺寸、栅格间距、文字、图标、按钮、输入框等核心模块，适合所有后台系统、管理平台、企业B端项目统一复用。
一、网页画布尺寸规范（PC端核心标准）
PC网页没有系统级固定设计规范，适配逻辑比移动端更复杂。B端项目优先遵循“小屏优先、向上兼容”原则，小画布向大屏幕适配简单，大屏缩小极易出现布局错乱。行业通用三套标准画布尺寸：
1. 最小画布：1280*800
适配14寸及以下小尺寸笔记本，是B端项目的最低兼容标准。所有核心布局、功能内容必须在该尺寸下完整展示，无遮挡、无溢出，保障低配设备的基础使用体验。
2. 最佳画布：1440*900
目前B端项目最通用、最均衡的设计尺寸。布局适配性极强，向下兼容1280小屏难度极低，同时适配主流中小尺寸显示器，兼顾美观度与实用性，是绝大多数后台系统的首选画布。
3. 最大画布：1920*1080
大屏展示专用尺寸，适配24寸及以上显示器。该尺寸向下适配性差，轻易不推荐使用，仅适合纯大屏展示、数据大屏、全屏监控系统等专属场景。
核心原则：B端设计优先以1280/1440尺寸为基准，坚决不优先使用1920尺寸起步设计。
二、栅格与间距规范（响应式布局基石）
栅格系统是B端页面规整、适配统一的核心，所有排版、模块布局均依托栅格实现，核心参数如下：
1. 页面边距 Margin：12–40px
页面左右留白距离，界定核心内容展示区域，避免内容贴边，提升页面呼吸感，根据页面布局疏密灵活调整。
2. 栅格数量 Count：12 / 24（主流）
24栅格为行业最优选择，可被2、3、4、6、8整除，适配各类排版布局，灵活度最高；12栅格简洁适配常规布局。特殊项目可按需使用16、20栅格，需全程统一标准。
3. 栅格间距 Gutter：8–20px
列与列之间的间距，同时作为板块横向间距。数值必须小于页面边距，最大不超过20px，数值过大会导致页面松散杂乱。
4. 元素间距：2–20px（偶数优先）
模块内部、元素之间的次级间距，层级低于栅格间距，统一使用偶数数值，保证页面规整统一，避免视觉错乱。
补充说明：栅格宽度为动态计算值，公式：（画布宽 – 左右页边距 – 栅格总间距）÷ 栅格数量，Figma等工具自动换算，无需手动设置。
三、文本字体参数规范
B端文字以清晰、易读、规整为核心，摒弃花哨样式，统一适配浏览器渲染规则。
1. 字体选型
中文：苹方、微软雅黑、思源黑体（通用无衬线黑体，适配系统默认渲染）
英文/数字：Arial、Helvetica、SF Pro、Roboto
注：网页仅可调用系统自带字体，设计稿字体仅作效果参考，优先通用字体保证全设备统一展示。
2. 字号层级
最小注释字号：中文12px、英文/数字10px（浏览器最低渲染限制）
正文字号：13–16px，兼顾高密度信息展示与可读性
标题字号：13–24px，按标题层级梯度区分，极少使用24px以上超大标题
3. 字重与字间距
字重统一三类：细体（Light）、常规（Medium）、粗体（Bold），杜绝杂乱字重混用
字间距：默认0，浏览器网页无需手动调整，避免渲染错位
4. 行高：1.2–1.8倍字号
高密度单行文本最低1.2倍（适配标点、英文溢出），常规多行文本最高1.8倍，保证阅读舒适不拥挤。
四、图标尺寸规范
B端图标风格简约统一，无花哨装饰，严格区分尺寸层级，适配不同使用场景。
1. 小图标：12–20px
控件内置图标、辅助提示图标，权重最低，用于辅助说明，不抢主体视觉。
2. 常规图标：24–40px
页面高频使用图标、功能按钮图标，是B端核心常用尺寸，适配鼠标点击操作。
3. 大图标：36–80px
装饰性图标、模块头部图标、空状态图标，用于提升页面视觉层次，不做高频功能使用。
五、按钮尺寸规范（组件体系基准）
按钮是B端所有控件的尺寸基准，所有表单、组件尺寸均围绕按钮规范统一，核心控制高度，宽度随内容自适应。
1. 小按钮：20–28px
极简辅助按钮、表格行内按钮，20px为极小临界值，不建议继续缩小。
2. 常规按钮：28–36px
系统高频主力按钮，适配鼠标操作最优尺寸，兼顾美观与实用性，是B端首选尺寸。
3. 大按钮：36–44px
高权重核心操作按钮、提交确认按钮，用于重点引导，最大不超过44px。
4. 标签Tag：16–32px
用于状态展示、分类标注，最小尺寸小于按钮，最大不超过常规按钮尺寸，保持视觉层级统一。
六、输入框及表单控件规范
输入框是B端第二大基础组件，直接决定表单整体规整度，尺寸需与按钮高度对齐统一。
1. 小输入框：20–28px
适配小按钮高度，可与行内按钮水平并排，用于筛选、简短录入场景。
2. 大输入框：32–44px
常规表单主力输入框，高度匹配常规/大按钮，适配大面积录入场景。
3. 衍生控件：20–44px
下拉菜单、日期选择、单选多选等表单组件，统一沿用输入框尺寸体系，保证整套表单视觉统一。
落地建议：常规项目仅需两套输入框尺寸，全项目复用，杜绝尺寸混乱。
凯铧互联小编总结
B端网页设计的高级感，不在于特效与配色，而在于参数统一、组件规范、层级清晰、适配稳定。一套标准化的画布、栅格、文字、图标、按钮、表单参数，能够有效避免页面杂乱、适配报错、视觉割裂等问题，大幅提升设计效率与前端落地还原度，是所有B端设计师必备的基础规范。
凯铧网站建设成立于2016年，是一家专注于企业网站建设的专业服务公司，致力于为中小企业和创业公司 提供高质量的网站解决方案，助力企业数字化转型和品牌价值提升。
如果您有网站建设、网站改版、网站优化、手机网站建设、域名注册、主机空间等方面的需求… 请添加凯铧互联小编客服微信或拨打咨询热线： 159-1069-3561（微信同步），我们会详细为您解答。
