排版
基础
原文地址
翻译: @Liuyuxuan(liuyuxuan-sptf8)
审校:


有效地使用排版,可以增进 UI 元素的布局,并简化导航和吸收呈现的信息的任务。有效地使用样式和字体有助于视觉上传达标题的含义,并使玩家沉浸在标题提供的体验中。

基础

新建项目 (16).png :::info 译注:翻译参考:拉丁字母结构特征的把握Typography相关术语的翻译和解释?初学字体设计必须知道的20个术语 :::

字体的设计涉及很多内容,但是 x 字高和计数器可能是最重要的考虑因素:

  • x 字高(x-height):小写字母 x 的高度
  • 字怀(counter):以 O、P、B 等字母开头的开口区域(字怀开口)

    字怀(又称字谷、字眼)

    在较小的字体大小下,某些字体比其他字体更难阅读。选择字怀较大的字体,因为它们很容易从远处读取。
    字体会影响可读性。在下面的示例中,查看字母 b 和 e:
    排版 - 图2

    扩展字符

    设计要翻译的产品时,请考虑到大多数字体没有支持非拉丁字符的附加字符字形。因此,请确保您的字体可以支持以下内容:

  • 所有非拉丁字符,例如阿拉伯语,亚洲语,西里尔字母和希伯来语

  • 完整的字母数字范围
  • 变音符号:添加到字母(á,ــِـ,ت)的小字形
  • 字形和特殊字符

排版 - 图3
拉丁重音符可以在 OpenType 字体中使用

字族

通常,专业字体在字族中具有所有这些变化,因此请考虑购买整个字族,而不是购买单个字体。完善 UI 设计时,拥有一整套字体将很有用。
字体可能具有许多不同的粗细和变化:窄体(condensed)和扩体(extended)、粗体(bold)、黑体(black)、轻体(light)和斜体(italic)
排版 - 图4

字重和字号

小写字母具有不同的上升和下降特征,可以帮助眼睛处理单词结构。正文中,对于较小的字号,请使用标准字体和中等字重;避免使用轻体和粗体的字重。对于较大的字号,请使用较轻的字体样式,以提供更干净的外观。
排版 - 图5
左:更轻 大号文本=更轻的字重
右:更重 小号文本=更重的字重

大写字母提供了很少的视觉多样性,并且较难阅读。 :::info 译注:原英文为全大写,以展示大写字母更难阅读:
UPPER CASE LETTERS OFFER LITTLE VISUAL VARIETY AND ARE HARDER TO READ. :::

限制只在标题中使用大写字母,避免在正文中使用大写字母。
对于在 10 英尺远【译注:约3米】处看的 UI,建议使用以下最小字体大小: :::info 译注:以下 pt 转换为 px 是译者基于自己显示器的 72dpi,图片大小为 1920×1080,语雀可以 1:1 查看图片 :::

  • 法律声明 15pt:此字体用于游戏开始前在标题界面或专用界面上显示的免责声明和其他法律文本。法律声明 15pt 是在所有屏幕分辨率下都清晰可辨的最小字体。

新建项目 (9).png

  • 目录 18pt:在菜单和 HUD 中使用任何更小的字体都会使文本在6英尺外难以辨认。在 HUD 中,目录 18pt 通常用于玩家名称、收集的积分、以及标注血量。在菜单中,目录 18pt 用于按键图例,次要文本说明、以及图标和图形标签。

新建项目 (11).png

  • 正文 24pt:此字体可以舒适地用于所有游戏内消息、任务、标注、通知、以及字幕。也可以将其用于菜单中较长的详细说明。

新建项目 (12).png

  • 标题 30pt:当需要在菜单中创建信息层次结构时,使用的字体大小可以帮助对页面上的元素进行分类。当正文为正文 24pt 时,标题 30pt 适用于菜单标题。

新建项目 (13).png

  • 题头 48pt:此字体用于显示在屏幕左上角的主要类别和菜单标题。

新建项目 (14).png

  • 展示 60pt:使用此字体可以显示主要事件、位置标题、升级通知、以及升级说明。60pt 是会产生冲击的最小尺寸;但是,如果您的游戏需要更大的图形,那就更大吧!

image.png

字体变化

尝试在整个产品中使用 最多 两种字体。混合字体可能会使信息显得零散且不集中。此外,每种字体的平均成本为 $5,000- $20,000【译注:约合人民币¥32,451-¥129,806,于 2021 年 3 月】,使用多种字体会变得昂贵。
尝试使用具有多种样式和大小的单种字体。如果需要第二种字体,则将其使用限制在题头和标题中。最后,考虑创建自己的字体并为其添加版权,可以符合自己的需求并节省金钱。
大多数主要发行商都使用以下字体,支持扩展的字符和字重:
排版 - 图12

文字对齐

通常,英文文本向左对齐。这种左侧对齐,右侧参差不齐的格式提供了一致的锚定和统一的内容布局——与居中、向右对齐、对正的格式不同,这些格式不会产生相同的结果,因此不建议使用。
除了适当对齐文本之外,请使用自动换行以确保文本不会溢出每行 60-120 个字符的边际。
排版 - 图13
上行:溢出
下行:文字自动换行,每行 60-120 字符,向左对齐,右侧参差,易于阅读