本文译自 Jon Gold 的 Taking The Robots To Design School,略有删减。

大概在一年前,我开始尝试把「字体设计」和「人工智能」这两个东西结合起来。
现在是 2016 年了,我打算把脑子里的东西搬到网上来。部分原因是它实在是有趣,其次是我想作为日志,便于以后翻看。但最重要的是,我想更多人能读到这些东西。

背景

自打我做设计师以来,我就被设计系统中数学的纯洁性所吸引。我一直很欣赏瑞士的设计。我一生中最爱的设计师或许就是 Karl Gerstner,他著有作品 programmatic design。2011 年我在 Prismatic 做系统化的网页布局算法。然后 2014 年受到了 Flipboard’s 布局算法 的启发,我开始把注意力转移到抽象化上,开始做一些 元-元-元-设计系统和工具,让人类设计师思维更开阔。

就这么到了 2015 春,我开始在 The Grid 工作——一个利用人工智能来建站的工具。介绍一下,这个工具某些地方跟 Squarespace 或者 Wix 挺像的,都可以让非设计师快速搭建起一个好看的网站。但不同的地方在于,它没有主题或者模板,而是根据内容,用精准的设计算法去设计网站,再呈现给用户。酷。这个是探索设计系统的好地方,我受命去把这个版式设计系统变得更好。

那是个开放性的理念,它让我变得对自己生涯有了更多的思考和有趣的探索。据我所知,我之前所做的版式设计系统的工作仍然在保密协议之内,但它实质上是针对人类的。对此我定义了自己的理念,我希望这个系统是可以认识、选择和根据人类设计专家的细微区别去应用排版。

定义

有时当我说「AI 文字设计」时候,别人以为我在设计新的自生成字体。那确实是很有意思的领域,但那个臆断是因为用词不当。澄清一下,在开始之前和你对这篇文章失望之前:

版式设计(Typography):字体的使用
字体设计(Type design):新字体的创造

谢谢 Stephen Coles 对此简洁的定义。如果你对用神经网络设计字体感兴趣的话,不妨看下 Erik Bern 大神的 Deep Fonts 项目,大概对 50000 个字体进行视觉分析。所以说,「AI 文字设计」——让计算机做字体设计。


设计一个能生成复杂专业的中心法则的人工智能系统,确实是有点挑战。这需要我在工作中,从一些基本法则里学习人工智能和相关的所有学科(我并没有计算机科学的背景,我是项目中唯一一个设计工程师)。记得那个时候,我每晚都会远离屏幕去 Pacific Heights 附近散步,看着日落,仔细琢磨那个项目的艰巨性。有一次走着走着,Alan Turing(译者注:艾伦·图灵,计算机之父)的一句话跳进了我的脑子里。

与其说试着去写程序去模拟成年人的心智,为什么不试着去写个可以模拟小孩的呢?如果它受到适当的教育,它应该会获得一个成年人的大脑。
— Alan Turing, Computing Machinery and Intelligence, 1950

与其说把设计当成一个整体去看,如果我把设计看成一个个基于人类设计师教育的模型呢?
我相信在这 65 年期间,那个方法论被 AI 纯粹者给推翻了。但作为混沌的开端,它看起来还是合理的。

Part 1: 学会去看

对于设计这个东西,你不用非要做设计师才能够触碰到它。在西方社会里,我们有数百年共通的视觉文化——我们先天就知道事物是怎么传达的,即便我们还不能去标记它。

通过文字(和 Taylor Swift)来传达完全不同的情感

平面设计的目的是去唤醒目标群体的情感——可以是设计师,但更多的是「普通群众」。就是那些喜欢聊颜色、图形的黑魔法和对字距泛泛而谈的外行人。但这不妨碍设计把信息传达给他们。如果一个普通人不能从设计中得到一些信号暗示的话,设计师就没有存在的必要了。非设计师不知不觉中,就能感受到设计带来的触动。

它们分别传达不同的含义——如果没有,就没设计师这个专业

但另一个角度来说,计算机,它们丝毫不懂得设计,一点点都不。对于计算机来说,字体就是一些 .otf 文件和还有字符串形式的字体名称。对于计算机来说,颜色就是一些十六进制、RGB 和 HSL 值。默认来说,计算机甚至不是一个非设计师人类的对手。

我们用的这些工具它们根本不知道自己长什么样子

对于计算机来说,它们只知道一些很卑微的字符串——最卑微的数据结构。但人类却有着非常强大的传达情感的方式。只是人类不能仅仅靠字体名称来做设计而已。因为我们可以看到它们和了解它们,所以计算机为什么不行呢?把我们的算法带到设计学校前,首先需要纠正这点。

设计学校提供了一个从情感到理性的映射——我们学到为什么事物在我们脑子里生成情绪反应,还有怎么利用那些思想去在别的事物上重现情感。为此我们学到了一些术语;学习了怎么辩别 歌德体 (Grotesque)人文字体 (Humanist)迪东体 (Didone)过渡字体 (Transitional)德文尖角体 (Fraktur) 还有 圆体 (Rotunda)。我们学会了怎么用一些元属性辩别一个字体:x字高笔画粗细对比宽度超过x高度部分 (ascenders)字怀 (counters),而不仅仅是字体名称。

抽象化的目的不是要得更含糊,而是利用它去创建一个能绝对描述准确的语义层。

这些新的、精确的术语让我们在工作中有规律可依。我们可以用像 x字高笔画粗细对比 这些来标记字体。我们用这些特点来辩别字体,而不是简单的说,「哦我看它长得像这种字体」。

字形的每一个部分,都有一个能准确描述的术语——插图来自 Ellen Lupton 的《Thinking With Type》

我们要做的事情就是,让计算机用同样的概念去标记和选择字体。

乍一看,我们可以用手动去标记字体。但这带来两个问题:

  • 这很耗时,我出了名懒
  • 这样既不够聪明,也不能规模化

上面第一点足以说服我永远不去碰需要人工干预的事儿了。那怎么才能用算法去区分字体呢?

栅格化尝试

我第一个反应就是观察下这些字体。有时可能会涉及一些计算机视觉和分类学。我想自己是否足够聪明去以截取部分的方式构建一些字符,然后弄明白它们长什么样儿。但我发现自己掉到一个全是像素的无底洞,一直在绘制字体和测量「模糊抗锯齿彩色印片法」输出的结果。

最开始有这个想法可以理解,但它效率并不是最高的。为了可以更快和重复地做上面这些操作,我用了 PhantomJS 和 HTML5 canvas 来做。但在 canvas 里画网页字体真的很蛋疼,而在 PhantomJS 里做些视觉复杂的事情也很麻烦。我花了 9 个月时间去尝试,期间经历过很多挫折;但我提起这件事的原因,是因为它让我发现……

矢量图形!

面对柏林残暴的高温天气和无数次对 PhantomJS 和位图的吐槽之后,我决定重新来过。之前我之所以对一个个像素点分析,是因为我把问题归结到「视觉」上,而计算机视觉就是以像素为主。但其实应该还有其他办法!

因为字体是矢量的,这让一切计算都变得非常简单。它就是几何学而已。所以我开始写一个小小的库去解析字体文件,把它们转化成 SVG,但我很快又发现了一个更好的东西。opentype.js 是一个 OpenType 和 TrueType 文件的解析器,它让你在 Node.js 和浏览器环境中可以访问到矢量的字形,还包括所有的内嵌 opentype 数据。很好很强大!

有了这种靠谱的方式后,我开始写一些算法去标记那些功能了。看看这些例子:

x字高

「x字高」指的是小写字母 x 的高度,这很明显。为了让所有字体都能得到一个可规范化的数值(字体可能被绘制成不同的大小),我们用大写字母 A 作为对比,记录比例值。这个数值大概在 ~0.45 - 0.8 之间,听上去蛮合理的。

1
2
(defn x-height [font]
(/ (char-height font :x) (char-height font :A)))

笔画粗细对比

有些字符真的很能展示出字体的笔画粗细对比。特别是重叠 OoA 字符让我很清晰了解到字体是怎么分化的。这个对比可以用以下算法来表示:

1
2
(defn contrast [font]
(/ (char-area font :O) (char-bounding-box font :O)))

字体宽度

找一些最容易感受到字体宽度变化的字符,MN 相对于其它而言,就是个很好的选择。但我们不能只是量它们的宽度(因为字体可以是不同尺寸),所以我就取了它们高宽比例的平均数。哈哈。

1
2
3
(defn width-ratio [font]
(mean [(/ (char-width font :M) (char-height font :M))
(/ (char-width font :N) (char-height font :N))]))

然后发现一个有意思的事儿。我当时在给我的设计项目中找一些相似的字体。有想到 Gotham, Proxima NovaAvenirTiempos HeadlineLeitura DisplaySan Francisco, Aktiv GroteskHelvetica; Aperçu, PatronMaison Neue 这些组合。

按照经验来说,搭配字体时都会找一些有笔画粗细差异的字体。像 GothamProxima Nova 搭配比较少见,但如果 Gotham 搭配一个衬线字体就会有意思得多。

这是三种人类设计师觉得相似的字体。但计算机怎么看呢?

可是有些时候你想要找特定属性相近的字体。比如说,你可能会想要搭配一些x字高差不多的、笔画粗细接近的字体。

所以我弄了一个「相似度评分」,用来展示任意字体属性组合的欧氏距离。默认它表示每个字体属性之前的距离,但它也可以用来表示字体的一些差异,像 x字高笔画粗细对比

1
2
3
4
5
6
(defn similarity [x y & attrs]
(if (empty? attrs)
(recur x y [:x-height :contrast :width])
(euclidean-distance (map x attrs) (map y attrs))))

(similarity helvetica aktiv-grotesk [:x-height :contrast]) ;; etc

在写了这么多算法之后,我在一些测试数据上跑了一下,把数据比例缩小到 0 和 1 之间,将结果绘制成了表格。

把 8 个字体按照与「Proxima Nova」的相似度排序

这个结果很理想!根据相似度排序之后,发现 Proxima NovaGotham 确实是最像的,而和 Didot 差异最大。这符合我的预期,但能用代码表示出来这很棒。

但当然了,只有 9 个字体不足以让人兴奋,所以我很残暴地把 Google Fonts 上的所有字体上都跑了一遍。

对比超过 800 个字体

这些结果再次说明了我的代码是对的。看字体的预览效果和它们的得分,我们可知这些数值是匹配的——赞!

<table> 并不是一个字体系统,所以我继续研究我的设计学校初级理论:规则。

Part 2: 基于规则的系统

设计是一连串的规则,不管你意识到这点没有。有一些很简单明了的规则:一行文字应该在 66 个字宽左右,文字颜色应该有一定对比度便于阅读。文章段落不该出现寡行或者川流(译者注:rivers, 即纵向裂缝);字体缩放比例的不同削弱了字体间的反差。这些都是显而易见的规则,我们可以很容易在书上找到。

但也有一些隐含的规则。这些隐含的规则是我们设计师经验的总结。我们接手的每个项目、每件事都可能做得更好或者更差;但每个奇淫技巧我们都记得。虽然没有万能的解决方案,但我们仍可以挽起袖子去不断探索。

即使是那些嘲笑现代主义设计的人,他们所在的职业也会有一些人不合常规。David Carson 有着他自己的一套,Neville Brody 也是。他们也许不是十分正统,也不会被写进书里,但我们每个人自己身上都有一套专属的规则。框架被用来处理设计,它有着一系列可以把设计需求变成可交付物的方法。这或许不是表面可见的东西,但我们可以去发掘一下。

在基于规则的系统前提之下,我提供了一些面向设计师的接口,可以用来创建规则。我受到了像 core.logicminiKanren 这些逻辑编程程序库的影响后,就开始想让一个系统变得声明式(Declarative)组合式(Compositional)

如果听上去很抽象,那么给你看看这些我们都用的基于条件的程序:

这是两个常见的组合式、基于条件的查找器。酷。

所以这很酷——我们可以指定一些元规则像「给我找到有这几种属性的字体」,而不是说「给我找到这个字体、那个字体」,以更高的层面去理解字体。「根据这种新闻标题字体,给我根据这些属性搭配文章正文」、「如果像这种字体展现在页面上,就不要搭配像那种字体」。我想实际实现的规则不会有理论上那么有趣(因为规则可以被调整);但大意就是以更高的层面去探讨字体,而不是只看字体的名字。

*那个字体*

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
(defn small-x-height?
[font]
(<= (font :x-height)
0.75))

(defn too-similar?
[a b min & attrs]
(>= min
(similarity a b attrs)))

(defn legible-serif
[font]
(and (= :serif (font :formality))
(not (small-x-height font))))

(defn pair
"given a display font, find a legible
serif for the body that isn't too similar"
[library display]
(->> library
(filter legible-serif)
(filter
(fn [body]
(not (too-similar display body 0.35))))))

上面这些东西的目的就是暴露一个接口给设计师,去创建和调整被添加到系统的规则。但很快我意识到自己把这个模型很重要的一部分给忘了…

Part 3: 宏观观察

创建这些规则变得越来越手动化,所以我想自己对这个行业的理解,寻找一个解决方案,理论和实践相结合。这就是我的模型的第三部分:宏观观察。

作为一个学生,你会有一些行业领袖作为你的偶像,史书上的或者当代的。逐渐增长的设计知识让你能够把他们的创作和自己的关联起来;从你的事业轨迹中探寻到他们的作品。

在我学生时期,Experimental JetsetSpinNon-Format 这些是我一些最爱的工作室。在伦敦学校无数个下着毛毛细雨的冬天夜里,我凝视它们的作品,试着去了解他们怎么修炼自己的个人美学。认出他们所用的字体,然后研究为什么这些字体就可以。看他们所用的颜色,然后去搞清楚它们是从哪个调色板中得到的。我从来没有想过在真实项目中复制他们的作品,但像那种形式的观察在学习过程中肯定是有意义的。

两个我最爱的网站(译者注:分别是 Font In UseTypewolf

我把这种「在现实中观察设计师们用什么、做什么」的形式给模型化了。有一些我很喜欢的网站,它们收集了其它一些排版能给人灵感的网站,根据字体分类,构建出一个庞大的关系型数据库。这可以是一个体力活,但如果让爬虫把这些数据全部自动化抓给我就更好了。无论如何,几行代码加上大量的 HTTP 请求,最终我就可以拿到真实世界字体使用情况的庞大数据集。

把它们可视化最自然的方式就是用节点图吧,通过线连接相互被使用的字体。虽然这样看上去很晕,但是数据看上去很丰富,很吸引人。

但这个图表有一个和字体簿(译者注:FontBook,MacOS 的字体管理器)一样的问题。虽然这些关系很有趣,但它们仍然通过字体名称进行关联。如果你读过之前的章节,疑惑机器学习会进入到哪一个人类衍生出来的相对狭隘的系统的话,那么这就是了。通过创建一个能分析任意字体和基于几何特性绘制出图表的系统,我们就可以把关系从字体名称转移到字体富属性上了。

我们可以通过查询来找出一些匹配的字体,但也可以遍历图表去找到许多相似的有意思的相关字体。我们可以看到一些字体组变得越来越流行,但可以看出是因为它们有着一些特定的字体属性。这个图表告诉了我们哪些字体是流行的,但我们的几何系统告诉了我们为什么流行。

通过看一些设计博客,你很容易了解到 Aperçu, Maison Neue, GT WalsheimLL Circular 这些字体很流行。但对我而言,通过一个系统去找出字体搭配就更有意思了。这个系统可以知道为什么一些字体会流行起来,通过他对排版的知识也可以去预估未来设计的趋势。它或许可以提出一些人类想不到的,但看上去貌似合理的字体组合。

Part 4: 微观观察

如果把这个行业当成一个整体,以一个高的层面去构建我们对潮流趋势的理解,那么去深入了解其它设计师也是很重要的。了解他们怎么做的,观察他们做出选择的过程。他们尝试过的方法,他们放弃的、保留着的东西。不断询问,留心他们解决问题的技巧。

在我们学生阶段、实习阶段、甚至是刚当设计师那会儿,就学会了怎么去做上面这些事情。最开始我们经常和一些年长的设计师打交道。我们从一些同行和大师中,学到了很多东西。

英国瑞文斯博学院。设计师在忙活。

作为人类,我们会以个体、小组和更大的社区形式,去为其他设计师创造一些模范。比如这些在工作室氛围中形成的文化基因,和一些设计师群体聚在一起,对外分享的一些思想火花。所有伦敦的设计学校,基本上就是「瑞文斯博风格」的学校和金斯顿大学、切尔西大学、伦敦传媒学院和中央圣马丁艺术与设计学院这些学校的较量。但也有「伦敦风」、英伦风和欧洲风这些不同风格群体。像更远的,「耶鲁风」一下子被认出来了。学校之外也有一些有着同样想法,但不同物理空间的派系——在 Dribbble 和 Behance 上设计师和插画家之间明显的潮流趋势,或者其他我们互相欣赏对方作品的地方。

了解其他设计师所掌握的东西,最好的方式就是坐下来和他们闲聊,或者窥看他们的画板和他们制作的方式。关于这个最酷的地方就是,这也是可以通过算法学习到的。把「站在其他设计师肩膀上」这个动作给数字化。

我有一些工具可以去探索这个想法:去合法观察其他设计师如何做设计。最酷的地方在于,我们的算法越聪明,我们就越能从匿名数据中抽取出所需要的含上下文的东西。这就需要去丰富和改变训练数据,让我们在设计师中找到潮流趋势。在大型的生产企业和工作室,会用一些内部设计工具,或许我们能构建出这些使用者的特征模型。更多关于设计工具融合化的事儿,以后再说。

后记

我今年初(2016)离开了 The Grid 团队。这几个月由于公司需求太忙,这个版式设计项目一直没继续,我一直没能把它应用到生产环境上,现在想想还是很悲伤。#创业生活

当然事后很容易知道什么事情可以做得更好,这也督促着我的工作向前推进。The Grid 目的是想打造一个设计系统,把所有详细信息都抽象出来给终端用户。但在我把所有智慧装进这个版式设计系统之后,我被告知只能用一个 <input type="range" /> 滑动条将其展示出来。

问这个系统怎么用的设计师朋友肯定会对此很失望。除去我在那里为设计行业未来人工智能所做的贡献之外,我更想让这些智能算法去更好帮助设计师,而不是说取代他们。

一个研究团体预计 1980 年前,人工智能的发展会让机器的独立思考或者解决军事问题成为可能。那就是说,大概还有 5 年时间去发展人机共生关系和 15 年的时间去使用它。这个 15 也可以是 10 年或者 500 年,但那应该人类历史上最激动人心和智慧最闪耀的时刻。
— J. C. R. Licklider, Man-Computer Symbiosis, 1960

在翘首完未来之后,再看现在所用的设计工具,无疑是让人失望的。我们的软件缺乏了上下文理解和行业意识。这些工具操作的是文本、矢量和布尔值;不是设计。但工具是最容易发生改变的东西,所以我在创造一些设计工具,它整合了跟设计流程相关的聪明算法,可以让设计师通过学习他们在做什么,我们在做什么,从而变得更好。增强他们而不是替代他们。

对于一些特定的设计子集,想法趋同很重要

设计师最不愿意去选择用什么工具了。对于算法设计来说,优化组合是一个有趣的机会。个人来说我并没有想把互联网变得更同质化,但设计确实是有一些共通的法则。这不需要变得很趋同,有很多方式可以去公开和使用这些数据。我们的工具应该让彼此更接近,或者远离趋势。当然我们现在去提议一个更受欢迎的字体,但我们找到那些主流分支相似的但未被发现的宝藏。我们可以提议、暗示和修正;这些都建立在扎实的设计原则和我们作为设计师的经验总结之上。这些都是触手可及的。

设计就是一系列的规则,而我们从这些规则中学习。

对于设计者来说,Licklider(译者注:利克里德,人工智能的先驱,上文观点被引用的人)已经离开有些年头了。虽说 Macintosh 机器让我们工作得更快,但我们对于语义层面的交互来停留在 1984 年。几十年之后,我们就会开始觉得像是开拓一个新的时代。那将是我们行业历史上最激动人心和智慧闪耀的时代,真正人机共生的尖端时刻。

感谢您的阅读,本文由 凹凸实验室 版权所有。如若转载,请注明出处:凹凸实验室(https://aotu.io/notes/2016/08/05/robot-design-school/