内部教程！超详细的支付宝设计规范之线下字体篇

前期回顾支付宝设计规范:

“内部教程！超详细的支付宝设计规范图形图案”和“内部教程！超详细的支付宝设计规范颜色匹配”和“内部教程！超详细的支付宝设计规范在线字体”

线下场景中的材料和机具尺寸以人体工程学为基础。在不同的位置、距离和角度下，材料类型 、布局结构、文字层次、字号、字间距等，都会影响用户的信息传递。

一、原则

1. 动态与静态

人们在离线环境中阅读信息内容分为静态和动态。当阅读距离不同时，观看材料的角度也会有所不同。

根据「人体工程学」及「福格行为模型」数据：当人们从动态视距进入静态视距的红点时，即人眼看到目标并获得视觉印象，平均时间为170毫秒，单词为250毫秒。

随着行驶速度的增加，视角会随着行驶速度的增加而减小。因此，在运动状态下快速阅读应避免用户产生「回视」或「眼跳」。

回顾：在阅读过程中，当人们遇到不理解的内容时，他们会迅速而无意识地回顾以前的内容。

眼跳：在阅读过程中，当眼睛的黄斑中心从一个字移到另一个字时，眼睛的0.1秒突然震颤。

在「动态与静态」原则上，我们需要区分材料和人接收信息的状态和时间，如「远距离＋高视角＋并且大多在运动状态下观看」 禁止大型横幅竖幅呈现多种信息。

2. 视角与视距

在静止状态下，人的水平视觉焦点大约介于 3°－10°之间。眼睛最好在水平线以上旋转25°，以下35°左右位置。

视锥外的图像(灰色部分)是由周围视觉搜索，通过余光感受到的区域，其范围在水平视角以上 60°、以下 70°。

以平均身高1.6米的女性用户为例。在最佳视角下，三种不同视距的材料（台卡、海报和易拉宝）传达不同的信息范围。当视距为0.5米时，与前面的材料结合使用「视野分布图」，其视觉盲点：0.35米以上的地平线。

这三种「代表物料」根据目前支付宝线下各行业的材料分类筛选，有固定类和移动类两大类，其中固定类可细分为五类:地面类、桌面类、墙面类、落地类、悬挂类。

将所有这些材料放入十字象限中 「地面」往上到 「桌面 墙面 顶面 」，目前重点关注桌面、墙面、落地三种材料，其中最具代表性的是台卡、海报、易拉宝。所以，后面「原则&规范 」把重点放在这三类案例上进行分析。

3. 顺序与节奏

从结论－功能－详细说明「倒金字塔型」结构，在线下场景可以在短时间内快速有效地向用户传达信息。信息组合，按重要性排序，信息更容易传递。

以海报级材料为例，其布局应具有三个信息级别：「最高级别的大标题-中级级别的流程图和功能图-低级别的使用说明 」 顺序有节奏地减少；各级之间的差异可能非常明显，主要取决于材料类型（布局尺寸），一个级别可能非常巨大，而另一个级别可能非常小。

4. 可辨与易读

中英文字体为等宽字体和比例字体（不同的文本宽度）。比例字体有不同的宽度，并在输入时自动调整字距。因此，在编排数字（英文）字体时：

不允许使用中文字体输入；在相同的字号下，数字将小于中文，根据「易读」原则需要调整到高度一致的视觉平衡。

5. 平衡与对比

方正兰亭系列字体家族至少提供10种不同字体重量的字体。我们使用字体家族不仅可以保持平衡，还可以通过不同字体重量之间的强度关系 ，对比强调(对比)的部分与协调(平衡)的部分共存在相同的布局中，厚度比例可以用来共存「字体家族」。

如图所示，越往上越有明亮、轻快、都会、现代的感觉，越往下越有说服力和厚重感。

设置不同的文本大小时。如果你对应该呈现多少差距感到困惑，你可以从「等比」、「等差」或「斐波那契」去思考。

这三种比较可以帮助我们思考应该呈现什么样的差距，当需要使正副标题有明确的大小差异时 ，差距最大的可以采用「等比数列」。

6. 对齐与留白

文本可以用不同的对齐方式设置：

左对齐：各行首对齐右对齐：各行末对齐中对齐：使轴线位于段落宽度的中间位置

如果中间对齐后留下的负空间处理不当，很容易形成不连续、中断的灰度值外观。因此，将文本设置为「两端对齐」能产生干净、几何的布局效果。遵循规范二「字距」或规范七的「图示法」所有这些都有助于避免。

根据上述线下字体应用「六大原则」，分别细化为七条规范：字号、字距、行距、标点等。

二、规范

1. 字号

根据「原则一」人体工程学和福格行为模型中提到的数据设置如下图所示。

以几种最常用的材料为例：

大标题:字号根据字数不确定，一行标题不超过5个字获取最佳信息；禁止超过9个字。内文:手册、单页、DM 常用字级不小于7.5-9pt；海报的常用等级不小于17-23pt；易拉宝的常用字级不小于24-28pt。

2. 字距

中文：将单词宽度设置为一个 a 当时，建议字间距的最大极限不超过1／2a.数字:前后会出现一些数字。「空洞」或「拥挤」必须通过目测进行适当的调整。标点符号：如「引号」会有很大的空白，破坏整体间隙，也需要根据实际情况将视觉协调缩小到视觉协调。

3. 行距

内文的最佳行距约为字体大小的1.5-2倍。若材料布局紧张，信息量特别大(如活动规则、说明等)，可适当缩小至字体大小的1.2-1.5倍。

4. 禁止文字符号

行头禁则中包含的主要文字和符号:句号、逗号、顿号、连字符、分号、冒号、感叹号、问号、(各种)反括号。分离禁则中包含的主要文字和符号:(各种)正括号。行末禁则中包含的主要文字和符号:破折号和省略号的两倍。

5. 跃动比

从字体家族中选择字体重大、适合阅读的方正兰亭大黑与期刊黑、细黑、黑进行比较，其跳动比分别为：

黑 vs 大黑：1.83刊黑 vs 大黑：2.95细黑 vs 大黑：2.04

同一字号下的正副标题，最佳跳动率为1：方正兰亭细黑&方正兰亭大黑；不同字号(副标题字号小于正标题)时，也可选择方正兰亭准黑(黑)&方正兰亭大黑。

6. 两端对齐

在遵循字体大小、字间距的基础上，根据标题宽度进行校正。

根据材料类型，海报、易拉宝上大标题(一行)中文字数最好在5字以内；禁止超过9字。

当标题在两端对齐校正时，如果已经达到「字距」最大限度(规范2)也可以添加「图示化」手法(规范7)。

7. 图示化

三种最常用的方法：

方法1：将必须传达的文本框起来。方法2：数字用英文字体放大；将其整合成单个个体进行配置。方法3：添加图形符号

呼应 「原则六」中「居中对齐」除负空间处理外，后负空间处理「字距调整， 增加图形装饰」等待方法调整到「两端对齐」。

「这些技能帮助你做出优秀的字体」

“设计神器Fontlab！让残疾人党也可以自己DIY字体”“想做好字体设计，首先掌握这三个字体结构规则”“推理，这些是最基本的字体设计知识”“学习这些简单的技巧，字体设计也可以可爱！”“想做一个中国风格的字体设计吗？我总结了四条规则！”

================推荐明星栏目================

优秀教程网: UiiiUiii.com 它是一个优质的中文教程网站，共享了大量的PS、AE、AI、C4D和其他中文教程也为零基础设计爱好者准备了亲密的知识树专栏。打开免费自学的新篇章，根据我们的专栏一步一步地学习，你可以快速开始并产生酷的视觉效果。

设计导航：中国最受欢迎的设计网站导航，设计师必须： http://hao.uisdc.com