滴滴研究院副院长叶杰平:揭开滴滴人工智能调度系统的真面目_励志网

滴滴研究院副院长叶杰平:揭开滴滴人工智能调度系统的真面目

2018-06-21 07:10 来源:励志网

统一处理App中所有出现过的“纸”

最常用的按钮不要放在顶部,而是放在键盘上面,而其中最重要的那个按钮要放在右边,这样写完了之后不用抬手,右手大拇指轻松就能点到保存(老罗调研过,手机用户中,右手为主的用户比例虽然低于生活中右手为主的人,但还是轻松超过一半)。

正式做UI之前,首先要做每张页面的概念图,原则很简单——尽可能地偷懒,有些不重要的页面你甚至可以直接拿别人的截图来代替。我见过很多UI设计师在设计概念图时很纠结,来来回回对齐不同的图层,统一各种字号或颜色,这样的劳动除了让你多加班之外毫无意义。做概念图最紧要的就是“洒脱”二字。

除了用户自己写的文字内容需要单独来制定字号、行距、段间距之外(因为这个内容最重要,需要区别设计),其它情况尽量用2种规格来解决(见上图),那就是“大字”和“小字”。在设计规范中,我分别定义了两种字体的字号、行距、段间距。

为了解决全部的适配问题,我先解决一个小问题,我的工作从这5张“纸”开始:

字体看起来很多,但实际上字体和字号都只有一种,看起来多只是因为颜色或加粗带来的效果。

纸张下方的小字,由于切图底部已经留出了空隙,所以直接让它0间距对齐就行了。

(2/2)写作页面的概念图

下面再举几个例子。

不要有太多顾虑。当我做页面B的时候,我无需去考虑它的美术风格是否要跟刚刚做的页面A统一起来,因为说不定我在页面B上突然有了很好的设计灵感,做出了比页面A更漂亮的界面,那么反过来我重做页面A就是了。把每个页面当做一个独立的平面稿来设计,这将大大节省你找到最优设计方案的时间。

用RGB通道来确定“纸”的切图范围

我觉得这样的写作页面没有什么需要画蛇添足的地方了,再减一个元素就影响使用,再加一个元素就导致臃肿,那么现在我手上有两个页面的UI概念图都达到了我要的标准。

纸的光环境是灯泡从右上角照过来,因此它阴影的边缘自然在左边和下边。为了拿到切图,我必须确定边缘,从效果图(左上)里直接找到边缘很困难,用通道+曲线很容易就找到了(左下)。有了左下角的边缘之后,我就能完整把它切出来。为了文本对齐方便,显然我在纸张的顶部和右边也要留相同的空隙,这样纸张切图“纸”的部分就能刚好处在切图的中心(右)。

文字一定要大,行间距和段间距也要大,这样你就算只写几十个字也很有成就感,仿佛是写了一篇大作。

(1/2)“日记字”在“纸”上的不同大小

扁平化设计中,字体是很主要的视觉元素——英文App可以随随便便就嵌入一个几十k的字体,而中文App嵌入一个字体就意味着多几M的大小,而且简体字体制作成本超大(5000多个常用字),做出来也很少人有付费意识去买正版,所以精益求精的字体也很少。于是我购买了为数不多非常耐看的造字工房的“刻宋”体,除了一些非常重要的标题之外(例如用户自己起的标题),我将尽量让它只拥有一个最适合手指点击的字号,用来担任绝大多数点击类的字体。

首先,见上图,这张纸在iPhone6P的3倍图里,和在iPhone6/5/4的2倍图里,有两种不同的大小。(2倍图是共用的,我必须在最窄的屏幕(iPhone5s、5和4)中确定2倍图的大小,以免纸张太大,遮住了右边的吊灯和封面)3倍图比较大,2倍图比较小,如果字号相同,那么2倍图容纳的字数就会少很多。然而,从产品理念上来讲,我希望不同机型上的纸所容纳的文字摘要字数基本相同,因为字数太多会导致很多纸张显示不满,给人一种空虚的感觉;而字数太少就没法形成摘要,每张纸都要点进去才能知道具体写的是什么。

如图,所有机型,不论是阅读页面的字,还是纸上的正文,它们用这简简单单一套规则就可以概括了。我们确定唯一的参照标准,就是当文本框宽度为363pt的时候,字的大小、行距、段间距分别是21pt、10pt、14pt,而其它所有的情况,无论是6plus纸上的字号,还是iPhone4阅读界面的字号,都从文本框的宽度直接换算比例得到。

第二个让我感兴趣的是用户写东西的页面(上图),我当时找来了很多主流日记、记事App的写作界面截图,发现其中那些比较优秀的UI都有几个共性:

感觉到了吗?在阅读界面,同样是这个道理(如上图)。如果我只设置一种字号,那么要么是6plus用户觉得字太小,写很多内容都撑不满屏幕,没有成就感;要么就是小机型用户觉得字太大,一屏幕只能看几句话——我同样应该设计成:大屏幕字大,小屏幕字小,所以,结合上面的“纸”,你应该猜得到我打算怎么做了——

标题的字号不是一个具体的数值,而是正文字号的1.4倍。因为从设计上来讲,标题之所以看上去是标题,就是因为它比正文的字要更大或者更粗。1.4倍刚好可以体现这个关系。当我后期要调整正文字号的时候,标题就可以随之而改变大小,无需我手动去调整了。

五、UI设计/切图/适配文档:左右脑同时开工来制作拟物UI

由于是拟物设计且注重颜值,「theApp」的UI制作将会耗费成吨的开发精力,既包括我要一个人承担所有的UI设计工作,也包括要耗费大量iOS外包开发的Manday——我没有机会出错。

2、最大机型画布

标题的底部距离文本框的高度,并不需要用具体数值来表示,而是可以刚好隔开一行文本的距离,那么在文档中我就定义这个距离=正文的字号。也就是说,假设正文的字号是12pt,那么它们的间隔就是12pt。这样做的好处在于,不论我怎么调整正文字体的大小,标题与正文看上去永远刚好隔着一行。

既然扁平化越纯粹,就能越凸显拟物和扁平的反差之美,那么我能想到的最极致的方案就是全黑白设计。市面上大多数App的UI设计滥用各种颜色,到处都是不同的彩色:这里需要强调,于是用绿色,那里更需要强调,于是用红色,还有个地方是重大通知,于是就用红色加粗加大,弄到最后,就变成了电线杆上的老军医广告。最极致的扁平化设计,就是拿最少的元素,把它们组合成最合理的视觉搭配,让它们自然地形成主次之分和操作引导。如果非要用红色才能突出某个视觉重点,只能证明我的版式设计还不够智慧。

用“刻宋”体作为交互类字体,提升UI档次

拟物元素不能相互遮挡

得到它们具体规格的手段很简单,就是去复刻那些优秀App界面中的字体,把它们应用到你设计稿中的若干个主要页面中,输出成几个重要机型的效果图,分别放到这些机子中去看实际效果,反复微调几次就基本搞定了。在这个过程中,不要像很多人那样,总是填上那些排版最好看的文字内容,而是要尽可能让文字的排版丑陋。例如,一行字多出一个字跑到第二行,连续两次空行,连续敲很多个句号……你永远无法预测到用户会输入什么文字,如果你能在文字最不适合排版的情况下,也能保证排版看得过去,那么你设置的字体才是最有适应力的。

#p#分页标题#e#把每个页面的效果图基本跑通,然后尽我所能地抽象其中的设计元素,我就得到了上图这些设计规范,具体包括:导航栏的布局、常用对齐线、常用图文按钮排布方式、常用列表类页面布局等等……这就是我为什么强调一开始做概念图的时候不要先确定设计规范,而是放开灵感去做,因为它们实在太难以预测了。只有把所有页面效果图确定到七七八八,你才能看到你需要多少种字体、多少种透明度、多少种对齐线……设计规范是用优质的概念图总结出来的,而不是一开头就拍脑袋决定的。

(1)系统默认字体

所以,我就截了几张UI放进设计稿里,简单拼凑了一下,照葫芦画瓢做了个左图中的UI,顺便把键盘改成跟上半部分统一的黑白色(iOS原生输入法可以定制颜色)。

用一句话来概括所有的“日记字”

(1/2)文件夹页面的概念图(左)

做完上述工作,就要开始出正式文件了。对于前端开发而言,需要的正式文件包括:效果图、适配文档、切图。这个章节的标题提到左右脑同时开工,之前的工作用右脑就能完成,而从这里开始就得用左脑了。

为了满足这个理念,具体某个分辨率纸张上的字号,就应该跟纸张的大小挂钩。纸越大,字号就越大,纸越小,字号就越小——这样就能保证每个机型所显示的摘要字数相近。这个概念确定之后,先别急,再来看阅读界面的字体。

将所有系统字精简为“大”、“小”字

#p#分页标题#e#当时研究了很多例子,发现优秀的扁平化设计,毫无例外可以用一个观点来概括:能用一种字号解决的,不要用两种字号;能用一种颜色解决的,不要用两种颜色……所以我就带着这种思路重新整理了一下其余的概念图(这就是为什么不要那么早确定设计标准),基本形成了「theApp」在“扁平化”部分的设计规范:

这是由于我发现,之所以很多中文App用同样的设计方法来做扁平化UI却比不过欧美,很大程度上是因为字体的丑陋。

《版式设计原理》,佐佐木刚士

光标不能用默认的,要用大的,闪烁起来要有呼吸感,而且最好不要被行高限制住,要往下延伸到下一行的顶部,这样能激发人的写作欲望。

在几天的概念设计之后,我发现其中2个页面比较有意思。第一个是文件夹页面,这个页面是用户在首页(上图右)点击某个文件夹之后跳转进来的。我发现,如果让文件夹页面变成墙壁的延伸(上图左)会很有意思——用户在首页点击某个文件夹之后,其余的文件夹直接消失,整个墙壁(包括光照)直接往右边平移,挪出左边的空间,然后文件夹下面的纸张统统飞到右边,形成文件列表。在我跟智超讨论之后,这套酷炫的转场效果被暂时搁置,因为我承担不起它所耗费的Manday,不过这并不影响我把文件夹页面确定成这样的设计,因为它最符合故事的情境。

这篇文章希望向你分享的是:如果你想开发一款App,而你请不起一个完整的开发团队,那么你如何借助外包公司来做好这件事;你如何去揽下立项、原型、系统、UI、交互,这些所有的工作,几乎没有任何面对面的交流,一切想法都通过文档来跟外包沟通,最终拿到一个跟你的预期丝毫不差的精品App。

形成“纸”的统一文档

但问题是,它们一个是纯拟物,一个是纯扁平,这要如何是好?经过思考,虽然「theApp」强调的是拟物,但是我可以把“拟物层”和“操作层”做成两种对撞的风格——所有关于纸张、墙壁这些“物理环境”的设计都做成纯拟物,而所有交互的内容都做成纯扁平的,这样看起来效果最好。如果我一根筋地去把所有的交互界面都做成拟物的,反而会弱化纸张和墙壁的拟物感。所以我决定把“操作层”做成扁平的,让薄如蝉翼的“操作层”漂浮在厚重的“拟物层”之上,就会在带来沉浸感的同时,给人一种操作起来很轻便的感觉。

同时我还要另外去做各种小机型的,不必100%还原的效果图,来确保我的对齐方案在任何机型上都不会反常(例如,上文提到的,不能让封面遮住吊灯)。

依照这种设计思路,扁平和拟物的风格不需要强行统一,反而是对比越强烈效果越好,这就让我面临一个问题:怎样的扁平设计是最纯粹的?

这5张纸是「theApp」UI中所有会出现的纸,为了适配方便,我得把它们的文本位做成相同的。由于最右边两种纸的左上角有回形针,所以“标题”统一往下调整,以免压住回形针。

那么接下来就是给这张通用的“纸”来写文档。见上图:

虽然颜色看起来很缤纷,但除了不同透明度的白色之外,实际上只有黄、蓝对撞色。

扁平化设计中,一般效果图只需要做一个大小适中、主流的机型,例如很多人在设计iOSApp时只做iPhone6的效果图。然而,位图跟矢量图不同,它只能缩小不能放大,所以我的100%还原图必须用6Plus画布来做,因为很多拟物切图要直接从这里取材。

(2/2)“日记字”在阅读界面的不同大小

你认为哪个扁平设计更纯粹?

鉴于以上两个原因,我就开始去做主要页面的iPhone6Plus100%效果图。这里的“主要页面”包括两类,一类是需要从效果图中直接拿到切图资源的页面,也就是拟物设计非常强的一些页面;另一类是模板类页面,例如我们有三四个列表类页面,显然只做好其中一个就行了,其余的无需煞费苦心,只要一个大概的效果就足够了。

黑白是更纯粹的扁平化设计

左图是一个很纯粹的扁平UI设计;右图相反,是一个四不像的扁平UI设计。左图之所以够纯粹,仔细观察可以发现原因:

这些为数不多的数值就是前端层面的“设计规范”,它与UI制作的“设计规范”实际上是一式两用的。在前端上,它们形成了设计规范的“宏”,这个宏定义了UI适配中的所有变量。当我描述一个长度的时候,我并不说这个长度是15pt,而说它是1.3{小字},这里的{小字}就是一个变量,往前追溯,就能查询到我对“小字”事先约定的设计规范。

扁平化设计中,你可以只做大致的效果图,做效果图的目的只是确定UI文档该怎么写,前端看的是文档,效果图只是视觉参照。在一个优秀的扁平化UI制作流程中,几乎所有设计素材都是单独储存的,有一个完整的素材库,只需按照设计规范把这些素材一个个摆进设计稿里就行了,而在设计稿里新产生的素材也会被迅速加入素材库中。最后它们可以从素材库里一次性切图。

关于版式设计,我当时买了佐佐木刚士的《版式设计原理》,版式设计是日本的传统强项,而且日语跟中文在视觉上有很多类似之处,它们都不能完全照搬英语系的版式设计美学。纸质读物的设计元素很有限,大部分内容都是黑色的字,没有现在手机UI那么多变的视觉表现力,那么在设计元素匮乏的情况下,怎样区别不同内容的轻重程度,让读者能自然地按照你设想的顺序去阅读这些内容,这就是版式设计的智慧。从以前的纸质杂志到现在的扁平化UI,变化的是媒介,不变的是人类的视觉习惯。

(2)自带字体

以上就是「theApp」UI制作的核心思想:把几种机型几十个页面的不同元素,从设计的角度把它们归纳起来,用一层一层的变量关系来嵌套,像一棵树那样,追溯到最后,它只有为数不多的几个数值。改变这几个数值就能改变整个App。

基本确定了设计规范之后(并不是说要100%确定下来,因为在具体设计的过程中,设计规范的添加或修改是在所难免的),接下来就是做正式效果图,这个环节跟扁平化UI设计会有一些不同:

而唯一能影响这些比例关系的变量就是正文的“字号”(切图大小是固定的,所以它不会影响比例关系),所以接下来就是来定义这个“字号”了。

我没有条件去盯着开发者的电脑,告诉他:“这里再往上1pt”、“这个按钮再往右一点”、“iPhone6Plus的启动icon再调大一点”——我必须在开发之前彻底讲清楚所有的问题,把每张切图、每个排版细节、每个机型的适配方法都考虑进去——只通过一套文档,中间几乎没有任何沟通,开发者只出一个版本,就让「theApp」的UI在所有iOS机型上完美呈现。

化繁为简的“设计规范”

一套规则,适应所有机型

由于字数过多,这篇文章分为了上、下两篇来发表。你现在看到的是下篇。(上篇《探索外包开发的极限:一个精品App诞生的全过程(上)》)

#p#分页标题#e#文本框的宽、高,以及它相对于这张纸切图的位置,我都用它们与切图尺寸的比例关系来表示。这样做之所以可以成功适配,是因为不论纸张有几种规格的切图(@3x、@2x,或以后更高规格的切图),我们要明白一个特点,那就是文本框与切图的比例关系是不应该发生改变的。

所有的图形,甚至包括字体,都是圆角的,圆角的半径也基本是相同的。

但在「theApp」中,很多视觉元素是拟物的,如果我不在正式界面里做到100%还原,我就没法确定一个文件夹的封面是不是会不小心压住上面的吊灯(上图左);也没法确定文字的标题是否会跟“孔”重叠起来(上图右)。因此,我必须把涉及到拟物的页面效果图做到100%还原,以此来撰写我的适配文档。

从上面整个文档来看,几乎所有的“约束条件”(元素之间的相对空间关系)都是用“比例”来表示,这就意味着,前端工程师只要把这套条件放进去,我们就无需考虑具体的机型,大到iPad小到iPhone4都能完美呈现。同时意味着,如果我们对其中某个地方不满意,也无需去修改每个机型的数值,而是从宏观上去修改某个比例关系就行了。

责编: