[翻译]我们如何将 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'之间的高度差异较小,这使得文本在小尺寸中看起来更大。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

每个程序员必看:如何在40岁后继续做软件开发?

这是一个 42 岁的开发者所写经验分享文章.并且列出一些他 18 年多身为软件开发者的经验谈.许多部分看完后都会希望自己当时就能够了解,所以很推荐不论是新手或是...

7410
来自专栏新智元

Guido 转身离去,Python 何去何从?

【新智元导读】Python之父Guido van Rossum因最近的“PEP 572”事件宣布放弃他在Python社区“仁慈大君”的称号,且没有任命继任者,并...

9540
来自专栏理论坞

如何制作《钢铁侠》中的炫酷界面(FUI)

你是否想过许多科幻电影中,看到的所有炫酷的的显示画面如何制作的?如《钢铁侠》,《火星救援》,《奇异博士》,《银河护卫队》等等这些,其实都是在C4D的的制作与实现...

19730
来自专栏张善友的专栏

十年学会程序设计

这里分享一篇 Peter Norvig的 《十年学会程序设计》 (Peter Norvig  系Google研究院主任、美国计算机协会(ACM)资深会员(Fel...

24650
来自专栏刘望舒

web前端 到底怎么学?

那么在讲 web前端怎么学 这个大命题之前呢,依据我本人的尿性,还是得先把你拉入坑,让你在坑里好好学 O(∩_∩)O 由于第一篇文章,有说到:

18820
来自专栏牛客网

打破0offer-迟来的春招实习总结(百度offer)

32200
来自专栏VRPinea

所想即所得,StoryUP脑电波VR项目拯救懒癌晚期的你

28870
来自专栏无原型不设计

3个细节,轻松区分效果图和原型图

产品设计是一个相对宽泛的概念,其中包含的内容不胜枚举。尤其对于新人小白来说,产品设计的分工分类着实令他们头痛。有些设计人员很多时候连自己画的到底是什么都不知道...

28950
来自专栏tkokof 的技术,小趣及杂念

游戏人生之《雷顿教授与不可思议的小镇》

  工作算来已有不少时间,平日之工作也大抵围绕着自己喜爱的游戏,虽说常常加班加点,但也可谓乐在其中,也许正应了那句老话:痛,并快乐着 :)

12120
来自专栏BestSDK

C++是程序界的“屠龙刀”,但是握刀的人经常用成“杀猪刀”

C++的初衷 1)早期C++许多的工作是对于C的强化和净化,并把完全兼容C作为强制性要求。C89、C99中许多的改进正是从C++中所引进。可见,Stroustr...

29940

扫码关注云+社区

领取腾讯云代金券