“泰山”助力海量素材秒设之道 – 文字篇之一:解构

泰山是腾讯FXD的智能化设计项目,能够秒速生成海量Banner素材,可为精准推荐能力的服务提供素材支撑。

– Part1. WHY ?-

泰山项目历经一年的研发和运营,在2018年年底我们为鹅漫业务输出了1万多个banner。

1

进入2019年,大量泛娱乐垂类业务与泰山系统对接,系统面临诸多挑战。比如说波洞业务的banner对文字排版的要求特别复杂,先来感受一下这些banner图的文案:

2

了解过类似项目的同学可能会说,这有什么难的,套模板换文字解决不是很简单的事情么?!

为什么不用模板解决?

纵观业界,确实都所谓的智能设计在文字排版这个维度上多半都是拿模板来解决的,比如友商的系统效果是这样的。

3

那为什么我们要在这个维度上死磕而不去走捷径?看看下面这个例子便不证自明了。

4

假如按模板输出,即便是同样的5个字,把文案从“陌上花又开”改成“晴翠接荒城”,间距就没法看了。

在电商领域Banner的设计,文字的表现可以不那么讲究设计感,信息传达的效率占的比重更大,例如清晰有效地给用户传达很优惠的打折信息,但在泛娱乐领域,内容更为抽象,文字设计对内容的表达起到了至关重要的作用。

– Part2. WHAT –

我们第一步做的事情是厘清面临什么样的问题。

首要需要讨论清楚的是,什么是“OK”的文字设计?不同的角色会有不同的预期,专业的设计师、运营产品经理、不同审美的角色会有不同的预期。

分级

从易到难、从简到繁把level分清楚,界定清楚什么事情是机器能做的,什么是机器不能做的,所以我们做了四个等级的划分,从低到高分别是,勉强可用、视觉舒适、气质吻合、意境神韵。

5

Level1 – 勉强可用

勉强可用的言外之意是“信息可读”,感受一下这一张,如果依托模板,改成最常规的宋体字体,也是可读的。

6

同样是开张营业,换一个主体,再加个二维码,就是街上随处可见的小广告了~

7

Level2 – 视觉舒适

加入一些简单设计原理,比如大小对比,字形的对比,间距的微调,稍作调整就会舒服很多。

8

目前友商也就实现在这个level的最初级而已。

Level3 – 气质吻合

关于气质与调性,让我们看一个最简单的例子

9

前面三个字体显然无法让人联想到伤感的文艺气质

再做个最简单的对比,针对古风这个场景再对比一下泰山与友商的系统:

10

Level4 – 意境神韵

设计师针对此情此境,结合创意,通过图形化的处理和变化,对信息的完美表达,我认为应该是最难的。

关于理解+思辨+创意相关的部分是机器无论如何也无法替代的。

11

—示例素材来源于网络

因势取裁,其法不定。不定为法,翻合书法。 —— 赵宦光

– Part3. HOW – 

综上四个Level,泰山团队做了大量的分析、探索、解构,将文字在banner设计中影响效果的因素解构成了以下这几个维度:

文字本身:字体、字重、字号、中宫、字怀

间距相关:字间距、行间距

效果相关:文字配色、文字质感、字形变化

并提炼出“可量化或相对可量化”的部分,将设计转换成计算机能读懂的语言,教会机器来设计这些复杂的文字表现。

字体

传统来说,汉字有七体

12

西文有衬线体和无衬线体之分,中文亦有黑体(教育部的标准字体把黑体称为“方体”)与白体对应的分类,而大家的认知里对衬线体更为熟,为了统一说法,下文将统一用“衬线体”指代中文的“白体字”。

字体这个维度对“气质吻合”影响尤为重大,需要对表达的内容有精准的理解和把握,虽然现阶段NLP(自然语言处理技术)是可以一定程度上理解文本表达的“情绪”是偏正面还是负面,但是无法理解文案要表达的“意境”,所以这个维度我们以人工标注风格标签的方式来关联。

小结:字体不可量化,只可做归类处理以及人工标签关联。

字重

我们常用字重来表示文字的粗细,这个维度与整体要表达的调性、气质也是有极强的关联性,比如文艺范儿常用比较纤细的文字,而热血、强烈对抗的风格则会选用相对粗的字体,例如

13

—示例素材来源于QQ音乐

字重体现在程序里常有 light、regular、bold的区分,但前提是该字体有准备过这些字重的不同字体输出,而中文的衬线体在单一字体上是不可能做多字重的,所以需要通过一定的技术手段来量化同类字形的字重,在同一类型的字中,例如下图

14

通过同字号的像素点比重,经过归一化处理之后我们得以将汉字的衬线体的字重量化。

小结:字重是可量化的。

字号  

即文字大小,这个量化比较直观,只是最终字号的大小取决于文字排版区域在整体里所占比重,依赖整体多尺寸规划器的处理,此处暂不做展开,例如下图的红色区域。

15

小结:字号可量化,依赖整体比例的计算。

中宫

再深入到字的内部,在汉字美学考量维度中自古书法有中宫松紧之说,我们在这个维度也做了一番探索。

什么是中宫?

16

中宫的概念来源于研习书法用的九宫格,中宫即图中正中央的一格。

传统书法讲究中宫收紧,意为笔画重心有序往中心靠拢。通过一番史料的探索,发现中宫收紧是相对的,并非是越紧越好,并与个人书写偏好有很大的关系,例如欧阳询与颜真卿相比,颜真卿的字中宫就要松一些,但你也无法评判谁的更好。

如下图所示,这三个字中宫松紧不一,很难用计算机去量化哪个更松或更紧,也比较难去界定哪个更适合用在特定的场景中。

17

小结:中宫不好量化,且有过强的主观性。

字怀(ふところ)

对应西文的字谷,日本对汉字的处理有“字怀”的概念,如下图所示。

18

—图示源于知乎

我的理解是,在黑体字中,同字形,同字重的“左右留白区域”比较大,则字怀窄,字怀宽则文字视觉上更饱满或更“胖”一些。
在一些辅助文案选用黑体字时,这个维度是有差异的,由此出发我们做了一番细微的对比。

Tips:此处请启动像素眼辨别细微差别

对比一:字重不同的情况

华文黑体(字怀窄)

19

苹方(字怀宽)
20 21

以上两个对比,虽然苹方字怀宽,华文黑体的字怀窄,由于苹方的字重太轻,字体粗细带来的视觉影响远大于字怀的细微差别,导致两个效果在这个维度变得没有可比性。

对比二:字重相当的情况

华文黑体(字怀窄)

22

兰亭黑(字怀宽)
23 24

上面这个对比中,在字重相等的情况下,我主观的认为主文案已经比较灵动飘逸,副文案则可用相对稳重的感觉形成对比,那这张banner的副文案中,字怀宽的兰亭黑要优于字怀窄的华文黑体。但是经过一番专业视觉设计师的调研之后,有不少相反的结论:认为副文案应该灵动一点与主文案形成呼应,所以导致这个维度的主观性也非常难判定。

小结:字重在整体视觉感受上的影响远大于字怀,所以权重上字重占比应该更大,字怀则在字重相同的情况去参照主文案的风格,沉淀大量人工训练的数据后再让机器去做判定。

字间距

字间距是我们技术上攻克的重点和难点,如开篇的示例,也是解决中文衬线体、大小字不一的文字排版的关键。

例如让机器学会下图的竖向排版(注:撇开文字穿插的艺术性变形表达)

25

实现原理大致为以下四个步骤

step1 – 中心动线提取来做指引,获得粗胚,简化文字方向随机性。

26

step2 – 文字图形化->边缘拟合

27

step3 – 碰撞检测获得最小无叠加组合

28

step4 – 距离优化

29

大字难于结密而无间,小字难于宽绰而有余 — 苏轼

依照这句古训的原则最终优化出一个相对合理的间距。

本维度技术涉及较多,后续系列文章将专门分享介绍技术细节。

小结:字间距必须量化,并做图形化处理。

行间距 

合理的行间距带来视觉的节奏感,设计排版中也常用网格系统(Grid Systems)做参照,我们依托多尺寸的规划器规划出文字排版区域之后,量化成网格系统,按比例做优化适配,比如下面这个例子

30 31

关于间距以及排版节奏的设计专业文章甚多,此文不做展开。

小结:行间距借助网格系统做量化处理。

文字配色 & 文字质感

文字配色与质感跟背景与主体的搭配密切相关。

我们已经有两篇关于教机器学习配色的文章,不在此做展开,关于质感也如字间距一样在后续系列文章会有专门做技术细节分享。

目前大部分竞品只能做到单文字异色,泰山已经通过偏旁部首拆解技术实现偏旁部首的异色

如下图的“巅峰对决”提取了“山”、“冫”两个偏旁部首做换色处理

32

小结:这个维度可以挖得比较深,目前在制作针对不同行业不同风格做配色库的推荐升级。

字形变化

在泛娱乐领域非常多的场景都要求文字做变形处理,一来保证画面的冲击力和活力,二来运营层面多半也为了规避无版权文字使用的问题。

33

—示例素材来源波洞CP人工输出

上面这两张是人手工画的文字变化,这些复杂的变化看似机器是无法替代的,其实不然,如果累计有足够多的表现手法库的提炼,这个维度的变形是可行的。

目前我们在一些比较简单的字形变化手法上已经取得成功,来看一个简单的例子,以下图的“家庭优选健康保障”为例

34

—示例素材来源CP人工输出

其中的“选”字变形经历了以下几个步骤

35

小结:可量化,字形变化对画面感染力的影响尤为重要。

总结

终上所述,可以得到下图的划分:

36

依照这个规划,经历数月的技术攻坚,泰山系统已经把行间距、字间距、字号、字色、字重、质感、字形变化等维度逐一攻克。 目前系统已经可以做到汉字衬线体穿插排版、匹配吻合气质调性的字体、文字偏旁异色、特效文字的处理、简单字形变化等。 37

38

39

关于技术细节后续会有系列文章深入分享介绍,敬请关注后续动态。

发表评论