设计师必备！B端网页设计参数大全

一、全文速览图

前面分享了 C 端移动端的 UI 设计的相关参数，在今天我们就要分享 B 端 PC 网页端为主的参数了，同样我们也会分为两篇，包括基础元素参数与常用组件参数定义。

二、网页端的画布定义

PC 网页端设计面对的第一个问题也是画布大小的设置，但因为没有官方规范做参考，所以设置的逻辑会比移动端更复杂。我们可以把尺寸的定义简化成下面三种规格。

最小画布：1280*800

应用逻辑：适配普通14寸或以下尺寸笔记本的屏幕，确保在这些屏幕下能够完整的展示布局内容。

最佳画布：1440*900

应用逻辑：最合适的尺寸，只要布局和排版不太复杂，那么向下自适应到1280的难度很小，且能更好保证主流中小屏幕的显示效果。

最大画布：1920*1080

应用逻辑：难以向小屏适配，只有确定使用场景都是大屏且全屏观看时，才适合使用该尺寸。

网页端画布创建的核心考虑要点是 —— 最低适配大小，无论是设计还是开发过程，小画布往大适配容易，大画布往小适配就有一堆问题，所以轻易不会使用1920宽画布。

三、栅格与间距的参数定义

在网页设计中栅格是响应式设计的重要组成部分，用于辅助我们进行网页的设计排版与适配，而常见的栅格参数包含下面图例中的选项。

页面边距 Margin：12-40px

应用逻辑：页面左右预留的留白空间，用于形成栅格的主要应用范围。

栅格数量 Count：12-24

应用逻辑：24是最主流的栅格数量，它能被2、3、4、6、8整除便于排版，12次之，如果设计师充分掌握响应式的使用逻辑也可以使用16、20等其它栅格数量。

栅格间距 Gutter：8-20px

应用逻辑：栅格左右之间的间距，也是进行排版时板块左右的间距，要小于页面边距，且最大不应该超过20，否则画面会过度松散。

元素间距：2-20px

应用逻辑：栅格定义了级别较高的间距数值，而级别较低的模块内间距、元素间距，不能大于页边距，所以在 2-20 之间使用合理的偶数即可。

而很多人关注的栅格线宽 Width 是个动态数值，它的计算逻辑是：（ 画布宽 - 左右页边距 - 栅格总间距 ）/ 栅格数。只要确定了上方三个数值，系统就会自动换算出栅格的宽度，所以 Figma 默认栅格设置中是不能手动设置 Witdh 数值的。

四、文本的参数定义

接着就是网页文本参数的定义了，相对移动端设计来说会更简单一点，只要遵循下面这些参数即可。

中文字体选择：苹方、微软雅黑、思源黑体、其它黑体

应用逻辑：网页的中文字体通常直接调用系统默认的字体，无法保证用户本地也有设计使用的字体。所以设计稿应用的字体只是参数效果示意，选择主流的黑体即可。

英文/数字字体选择：Arial、Helvetial、SF Pro、Roboto

应用逻辑：英文字体同理，尽量使用常见英文黑体即可。

中英文最小字号：12 / 10

应用逻辑：在网页设计中中文最小字号是12（浏览器也有一定限制），英文和数字约10。中英文注释字号都在10-13之间。

正文字号：13-16

应用逻辑：不管中英文正文的使用都在13-16之间，再小就难以看清，再大占用的空间就过多不符合B端的应用场景。

标题字号：13-24

应用逻辑：标题包含不同等级所以尺寸跨度较大，只有极少数情况会使用超过24的特大标题。

字重设置：Light、Medium、Bold

应用逻辑：虽然不同字体会有不同的字重数量和名称，但我们只需要挑选出细体、默认、粗体的三个代表字重即可。

字间距设置：0

应用逻辑：浏览器渲染字体的方式和移动端系统不同，不需要设计师自己修改文字间距，所以可以先忽略它。

行高设置：1.2-1.8字号

应用逻辑：在一些信息密集的极端场景中，可以对单行文本使用字号1.2倍的行高（需要预留标点和英文的溢出），如果设置多行文本，最大只需要应用字号1.8倍的行高。

五、图标参数的定义

图标是 B 端设计中最重要的部分之一，虽然整体设计风格不会移动端那么花哨，但需要非常注意图标的尺寸控制与统一。

小图标：12-20px

应用逻辑：权重较低且应用于控件内的简约小图标，尺寸不会大于20。

常规图标：24-40px

应用逻辑：使用频率最高的工具图标，往往也会作为按钮使用，所以尺寸不会太小，通常不会大于 40px。

大图标：36-80px

应用逻辑：大图标通常是作为装饰图标出现，用于提高页面的视觉效果。

六、按钮尺寸的定义

B 端按钮类型有不少，包括文本、图标、图片也可以作为按钮使用，但我们这里讨论的按钮是由几何背景和上方信息组合而成操作控件。

按钮的大小主要关注高度，宽度通常由内容决定。按钮也是整个 B 端参数定义中的基石，其它控件的尺寸需要参照它的数值定义。

小按钮高度：20-28px

应用逻辑：按钮到20已经属于比较极端的情况，再小就不推荐使用。

常规按钮高度：28-36px

应用逻辑：高频常用的按钮，建议使用28-36之间的高度，是在鼠标操作中较为舒适的尺寸，再大就容易影响排版和界面的美观度。

大按钮高度：36-44px

应用逻辑：大按钮通常只应用在权重最高最需要用户关注的地方，且使用频次不会高，最大建议控制在44左右即可。

标签高度：16-32px

应用逻辑：标签和按钮的样式非常接近，有些能点击（和按钮差不多），有些只是信息展示效果。所以最小的标签可以比按钮再小一点，最大的尺寸不能超过常规按钮的尺寸。

按钮的宽度通常由内容和环境决定，要根据实际情况设置，不需要固定宽度参数。

只要优先确定了按钮高度，那么其它控件的设计就会变得非常容易。

七、输入框尺寸的定义

输入框是按钮之外第二重要的控件，它决定了其它表单控件的尺寸，也直接影响后续级别更高的组件尺寸定义。

小输入框：20-28px

应用逻辑：小输入框即权重较低的输入框，高度和小按钮保持一致即可，这样它们才能进行水平并排。

大输入框：32-44px

应用逻辑：大输入框高度通常由前面选择的某个常规按钮或大按钮的尺寸决定。

下拉菜单/日期选择等：20-44px

应用逻辑：使用输入框样式的其它控件类型，需要沿用前面使用的输入框高度尺寸，这样才能保证在一个完整的表单中有统一的高度和视觉效果。

常规项目中，输入框只需要使用2种尺寸就够了，并将这些尺寸尽可能复用到其它同类控件中去，方便又统一。

结尾

以上就是 B 端基础元素中最常用的参数总结，而这些数值之间往往都有联系，你们可以自己通过实践去思考和发现它们之间的联系，这样记忆起来会更简单高效。

下一篇我们就会分享更复杂的组件元素的参数制定逻辑，大家有想要了解的也可以发出来。

我们下篇再贱~