B端设计规范指南（二）：字体

时间：2023-10-01 04:00:02 | 来源：网站运营

时间：2023-10-01 04:00:02 来源：网站运营

B端设计规范指南（二）：字体：B端和C端的设计有很大不同。

本质上的不同在于：C端的设计是有具体的规范和适应性的，换句话说，其规范有一定的普适性；但是B端设计是“定制”的，意思就是其规范具有独特性和单一性，其规范都是针对自己的产品。

笔者会出一个系列和大家交流B端设计的规范，那么这一篇所要分享的是：字体。

B端（Business）设计包含了非常多种面向企业、商业的客户端类型，包括电脑、手机、平板、大屏等等，针对不同客户端和系统，基础规范都有一定的差异。规范分为了以下几种：布局规范、色彩规范、字体规范、图标规范、控件规范、表单规范、表格规范、动效规范。

文字的基本属性

1. 字体选择 （Font）

字体就是文字的不同风格。在UI的字体应用中，源文件字体正常显示的条件，是我们开启源文件的设备加载过对应的字体文件，图片格式除外。所以设计师也要多多考虑不兼容的的情况。

同理，我们想要设计一套 B 端界面，使用的字体不仅仅是要你自己电脑安装过，还需要用户的电脑也装过。所以，B 端的设计中，字体必须有明确的规范。

比如说：中文字体通常是微软雅黑、苹方、宋体、思源黑体；英文字体通常是：Arial、Helvetical、Sans-serif。最通用的还是微软雅黑和思源黑体（英文可以一并换），部分数字可以运用其他英文字体。这些字体所用到的字体不用考虑任何版权问题，可以直接网页用。

2. 字号选择

网页中，字体大小根据 px 单位来制定。

网页设计的中文字体最小字号一般控制不小于 12px（有时候的ppt汇报里面可以用更小的字体，能够看起来更精美，10px左右）。而纯英文或数字文本最小字号则在 9px 左右。

很多设计师和学生都是做传统平面设计的，传统平面设计也包括海报和画册，这两者在版式和设计思想上有着很大的相似之处，可是屏幕也就是多媒体设备使用时有要考虑具体的字号，这个字号和画册的字号有着很本质的不同。

o 注释英文、数字：9-11px

o 注释、小段文本：12-13px

o 正文、小标题：14-16px

o 大标题和大数字：16-20px




3. 字重的选择

字重是字体笔画的粗细。一套完整成熟的字体会包含多个级别的字重（如苹方）。

4. 字色的认识

在网页设计中，特别是B端，要避免使用渐变色。

网页色彩（RGB；用 16 进制代码表达色彩）打印色彩(CMYK)

5. 文本样式

除了这些选项外，最后再说一个，就是文本的样式内容。在网页设计中，除了以上的文字属性设置外，CSS 还可以为文本添加下面的效果：

文本的排版属性

文本的页面的布局和浏览的效果，是建立在上面几点的基础上的，也是最后呈现效果的决定性一环。

1. 文本区域

文字属于网页中的元素，这个元素是在网页中出现，都包含着矩形（文本区域）。

文本区域分为水平适应、定宽模式、固定尺寸三种。简单说就是长不变、宽不变、固定比例变化。

我们首先是要判断文本的类型，在选择合适的进行设计。




2. 对齐模式

补充：如果一个文本区域大于文字的高度，那么文字就会水平方向居中。

在网页内容的范畴里，文本的对齐是很少使用两端对齐的，也很少采用右对齐。一般采用左对齐、自然对齐、自动折行来展示。

注意：具体还是要看文本的属性和所处的页面环境状态。




3. 行高 Line-height

行高是文本区域内一行文字实际高度的数值，和字号不是同一个属性。

行高是指文本行基线间的垂直距离。

要想理解这句话首先得了解几个基本知识：

主要目的是为了让多行文本的阅读体验能满足我们的需要。根据视觉的需求去进行数值的定义。大多数情况下，行高控制在字号的 1.2-2 倍之间，行高是要经过一系列测试的。B端的规范一旦制定了，在做设计的时候就要留意去遵守。

4. 段间距

最后，在文字布局中软件有提供给我们一个属性，段间距，即段落之间的区域，通过增加留白来提升阅读体验。需要注意的事：尽量避免在 B 端设计中多段文本使用一个文本框，将每段独立成一个文本框的设计，能最大化开发的效率。因为在更新迭代的过程之中，文本的内容和字数会发生变化，这样使开发端还需要花时间进行修改。如果一开始使用的是分块文本框就可以避免很多不必要的情况出现。