[翻译]我们如何将 Airbnb Cereal 字体引入UI

原文链接：https://airbnb.design/working-type/

在2018年5月15日，Airbnb 推出了一种名为Airbnb Cereal 的新字体。Airbnb Cereal 字体是与全球字体工作室 Dalton Maag 与 Airbnb 的营销和体验设计团队合作创建的。 本案例研究是发布系列的一部分，详细介绍了技术流程故事。了解更多关于我们如何设计一个区分字体，结合性质，功能和扩展在这里。

在印刷行业，决策通常在品牌传达层面上进行 - 需要考虑将外观，感觉和品牌准确表达。 但是在UI设计中呢？Airbnb 的 UI 界面正常情况有 90％ 是文本，因此更改字体会给我们的UI设计带来重大变化。

作为设计语言系统团队的设计负责人，我经常想知道当公司重塑或改变字体时幕后发生的事情。这个过程是什么，需要多长时间？他们如何找到一个好的UI字体，它如何实际改变UI？

随着最近推出的新设计的字体 Airbnb Cereal，我们的团队能够亲身体验这一过程

• 包括品牌营销和产品UI。从开发类型，UI测试和产品集成开始，这是我们在此过程中学到的。

1. 考虑范围以及合作模式

字体设计就像任何其他设计项目一样。我们的业务需求包括品牌差异化，跨越品牌和产品的能力以及UI中的文本易读性。经过多年的研究，用户测试和观察，我们了解到，特别是在小尺寸中，我们以前的字体很难阅读。

我们简要地考虑了针对屏幕优化的系统字体，但发现没有可以在我们的媒体和平台上提供独特且一致的语音的选项。所以大约18个月前，我们与Dalton Maag合作开始了这个字体项目。

他们指导我们完成每个阶段 - 发现，构思和改进 - 同时与品牌和产品领导者密切合作并收集反馈。早期很明显，功能和品牌表达的平衡是必要的，这影响了我们在整个过程中做出的决策。

2. 选择你的字体类别

排版不是凭空出来的 - 它来自于特定的语言的文化和传统。它不是平白无故被发明的，而是现有传统习俗的延续。我们今天看到的所有排版都是从活字印刷和古腾堡开始的后续的产品。

为了结合品牌和产品领导力，我们决定使用有一定指向性关键词来代表我们所期望的方向 - 人性化，友好，热情和创造性的专业性。这个练习使我们走向现代 neo-grotesk （受自身风格的影响）。

例如，一些角色的灵感来自我们的品牌符号 Bélo

• 可以在连续的笔画中手工绘制。
• 'a'和'b'都可以这样绘制，'a'碗上的环连接回Bélo。

单笔画是非常人性化的，但也与其他字符中的简单特征相平衡。

3. 连接品牌和用户界面

营销和产品UI通常使用排版来满足不同的目的。虽然营销旨在建立强大的品牌表达，但UI旨在连接到品牌，同时在复杂，经常变化的环境中运作。

使用UI排版，内容，屏幕大小和质量是动态文本大小，复制长度，格式和设备分辨率都有所不同。当社区需要根据所提供的信息阅读，理解或采取行动，同时连接回品牌时，UI必须支持复杂或关键的时刻。

简而言之，UI排版在大多数（如果不是全部）情况下应该能够很好地工作。了解您选择的字体是否具有这些品质的唯一方法是在现实世界中使用或模拟使用。

4. 工作的话

在构思阶段之后，我们开始从Dalton Maag接收字体的迭代。每个角色都需要时间来创建和修改，这意味着我们必须在开始时使用有限的集合。

要查看字体个性是否适合用户界面，我们必须使用它进行设计。使用大约20个字符使这成为一项具有挑战性的任务，因为如果我们意外地使用了我们集合之外的字符，设计程序（如Sketch）将完全切换字体。在任何地方测试相同的副本也不够现实。我们找不到有限的字符副本生成器，因此我们创建了自己的工具来生成单词。

为了类似自然句子结构，该工具必须包括名词，动词和形容词。我从英语词典开始，伴随着正则表达式和Unix中的AWK编程，创建一组仅包含我们可用字符的单词。我手动删除了不值得展示的单词，并添加了一些名称和地点，如Airbnb和Alice。

我首先开始使用像noun-verb-adjective-verb这样的简单结构。这感觉很陈旧，所以我看着海明威，卡罗尔和吐温这样的着名作家来帮我摆脱困境。通过粗略地塑造大师，句子变得更有趣。

该模型使用简单的Node.js程序设置，该程序生成标题，段落和短篇故事。然后将这些内容上传到云端，通过JSON转换为不同的内容集，并在网站上呈现。

一个基本的静态站点生成器用于托管我们团队使用的内容生成器网站。它本身也充当了测试人员。该网站可以轻松地在圆形和新字体之间切换，并能够更改颜色和大小。这也简化了共享进度的过程，并在新迭代进入时快速测试。

5. UI测试

配备自定义内容生成器使得在现实设计中测试字体变得更加容易。在UI中进行测试时，我们专注于所有尺寸的易读性，层次结构的平衡权重以及非分散纹理 - 我们认为所有品质都会产生功能性字体。

不同的字形和孔径： 如果字母具有相似的形状或外观相似 - 例如“e”，“c”和“o”，或者像伊利诺伊州这样的字眼 - 眼睛和大脑必须更加努力地处理。通过区分相似的字符和加宽孔径，例如字母'c'中的开口，我们更容易阅读。

X高度和宽度： 在拉丁语言中，大多数文本都是小写的，大多数字符都没有上升（就像'f'那样）。与大写字母或升序字符相比，通过按比例增加小写字母的高度，可以使字体更易于阅读。例如，对于'fox'，我们会看到'f'和'ox'之间的高度差异较小，这使得文本在小尺寸中看起来更大。