身为设计师,你也许需要一些算法

2,841 阅读25分钟
原文链接: zhuanlan.zhihu.com

Sidebar 是我最近常去的一个小站, 每天会更新五篇关于设计的文章,读一个帮你打一个勾,在工作之余看看很是舒服。上周的推送中有一篇 How UX helped me learn English 让我想到了自己——英文阅读能力的薄弱让我对设计前沿的资讯望而生畏,常常是还未尝到甜头就半途而废了。


现在起,我打算在得到作者允许的情况下对一些设计类(特别是交互设计)的有意思的文章(来自Medium等)做个翻译,但愿以后能像读中文一样无障碍地阅读它们。

第一篇原文来自:Algorithm-Driven Design: How Artificial Intelligence Is Changing Design

这篇的作者是来自俄罗斯的设计师 Yury Vetrov。我联系了 Yury 本人,得到了翻译和转载的授权。他回复邮件说“glad to see a Chinese version of my article”,开心~

附上他的联系方式和介绍:Yury Vetrov 的 LinkedIn

_________________________________________________________________________________

在关注算法驱动的设计的几年时间里,我渐渐收集了一些设计实例。这些实现设计的方法可以帮助我们构造界面,准备设计的资源和内容,以及个性化我们的用户体验,但这方面的信息仍然比较稀少,没有形成系统的知识体系。

然而在2016年,算法驱动的技术变得更加成熟,设计者对算法、神经网络、人工智能等领域的关注也越来越多。是时候重新思考设计师的现代角色了。

经过 Prisma 和 Glitché 处理过的专辑封面


设计师会被机器人取代吗?

从一家小众的CMS(内容管理系统)The Grid 中可以看到,算法驱动设计具有引人注目的前景。模板和内容的风格选择、调整和剪裁图片——都由它来一手完成。此外,系统还使用 A/B测试来选择最合适的模式。产品还处在内部beta版本阶段,因此我们只能通过宣传和广告来进行了解。

Design News社区创建了 The Grid 的真实案例,它拥有一个混合型反馈——让人们来评断设计和代码的质量如何。这让很多人消除了对算法驱动设计的质疑和顾虑。

The Grid CMS


用算法完全代替设计师的工作听上去很有未来感,却是一个错误的观点。产品设计师需要把一个粗略的产品模型转化为拥有可靠的交互原则、完善的信息架构和视觉风格的、精细的用户界面,帮助企业达到商业目标,提升品牌效应。

设计师做了很多大与小的决定;其中的很多决定难以用清晰的流程表述。增长的需求不会100%的清晰和一致,因而需要设计师这样的角色帮助产品经理解决冲突——最终做出更好的产品。这远远不止选择一个合适的模板或用内容填充它那么简单。

然而,谈起创造性的结合,当设计师“结对工作”、用算法完成产品任务时,我们可以看到很多优秀的范例和潜在的可能。算法可以提升我们日常的网站设计和移动应用设计工作,这是件有趣的事。


与算法的创造性结合

设计师学到了用一些工具和技巧去达到完美的境界,这导致一个新词汇的诞生:产品设计师。产品设计师是一个产品团队中积极主动的成员;他们理解用户研究是如何工作的,决定交互设计和信息架构;他们可以构建一种视觉风格,用动效设计让产品活起来,他们也可以对实现的代码做简单的修改。这个角色对任何团队都是无价之宝。

但是,在这些技术中做出平衡并不简单——你没有足够多时间在产品工作的方方面面保持专注。当然,设计工具最新推出的功能可以缩短交付物完成的时间,同时增长我们的技能。但这还不够。还有过多的日常任务和职责在吞噬我们省下的时间。我们需要进一步自动化和简化工作流程。我总结了与此相关的三个关键点:

  • 构建一个UI;
  • 为其准备内容和资源;
  • 个性化用户体验。


构建一个UI

类似Medium, Readymag和Squarespace的发布工具已经简化了写作者的工作——无数高质量的模板带给作者优质的设计排版,而无需付给设计师酬劳。其实这些模板可以更加智能,这样写作的门槛会变得更低。

例如,当 The Grid 还在beta版本时,Wix,已获巨大成功的网站创建服务,已经开始包含了一些算法驱动的设计功能。他们发布了高级智能设计 Advanced Design Intelligence,看上去与 The Grid 的针对非专业人士的半自动网站创建功能相似。Wix 用很多高质的现代化网站示例来训练算法,并尝试去做与客户产业相关的设计风格建议。对非专业人士来说,选择一个合适的模板作为设计并不容易,而像 Wix 和 The Grid 的产品就提供了设计专家的服务。

(视频无法分享,翻越后可见:Wix.com Introducing Wix ADI

在 The Grid 的例子中, 没有设计师的加入,创意过程确实可能诞生出平凡的、老生常谈的设计结果(即使它提升了整体质量)。但如果我们把这个过程当作是与电脑的“结对设计”,那么就可以省去很多日常任务;比如,设计师可以在 Dribbble 或 Pinterest 上创建一个 moodboard 心情板,这样算法就可以把其中的模式迅速应用到原型中,给出一个合适的模板。设计师们成为了他们新学徒——计算机的艺术指导。

当然,我们无法用这种方式创造一个革命性的产品,但它可以给我们腾出更多的时间去做这种产品。而且,很多工作是为了达成目标,并不需要太多的创新。如果企业足够成熟,拥有一个设计系统,那么算法驱动的设计将会更加有效。

举个例子,设计师和开发人员可以定义关于内容、情景和用户数据的逻辑处理;接着,平台根据一些准则和模式来进行设计。这样,省去了手绘或编程得到一大堆页面状态的步骤,我们就可以专心为每个使用场景调整最为微小的细节。Florian Schulz 展示了如何使用填充法去创建大量部件的状态。

Florian Schultz 的填充法


我对算法驱动设计的兴趣始于2012年,那时我的设计团队 Mail.Ru 需要一个自动的杂志排版。当时产品内容的结构做的很差,而手动修改又代价太大。怎样才能拥有现代感的设计,特别是在编辑无法胜任设计师的时候呢?

是的,脚本可以解析一篇文章。根据每篇文章的内容(段落数、字数、图片数及其格式,插入的引用和表格,等等),脚本会选择最合适的模式去呈现每个部分。脚本也可以进行混排,最终的设计就会变得丰富多样。这省去了编辑人员重做旧内容的时间,设计师只需加上这些拥有新样式的模块就可以了。Flipboard 在几年前建了一个非常类似的模型

Vox Media 用相似的理念做了一个主页生成器。算法结合一个样板库中的不同范例找出所有可能有效的排版,接着,每个排版都用一些特征做了测试和评分。最终,生成器选择“最好的”排版布局——一般来说是得分最高的那个。这比手动选择最好的网页有效多了, Relap.io 这样的推荐引擎也能证实这一点。

Vox的主页生成器


准备内容和资源

制作像饼干模具一样的多个样式的图片资源是设计师最无聊的工作之一了。这种工作浪费了很多时间,让人产生倦怠感。设计师应该把这些时间花在更有价值的工作中。

算法可以担任起诸如配色的任务。Yandex.Launcher 根据 app 的图标用算法自动为 app 卡片设置颜色。其它可能的变量可以是自动设置的选项,比如通过背景色自动改变文本颜色,突出照片中的眼睛用以强调情绪的表达,以及实现参数化的字体等等。

Yandex.Launcher


算法可以创造出完整的作品。Yandex.Market 为电商产品使用了一个增进图像生成器(in Russian)。销售人员填写一个简单的带标题和图片的表格,生成器就会给出一个遵循设计规范的无限多的设计集合。 Netflix 则走的更远——它用脚本为海报挑选电影人物,加上固定风格的、本地化的标题,然后在用户中进行自动化测试。真是神奇!科技培养了机器撰写科技报道的品味。Wow!

Netflix 电影广告


真正的黑科技存在于神经网络算法中。Prisma就是个活生生的例子,它把照片风格化成著名艺术家的作品的样子。Artisto 可以用相似的方法处理视频(甚至视频流)。


Prisma

(视频翻越后可见:Aristo app: example

不过这只是一个开端。当然,你可以在手机上下载一个app,几秒内得到结果,而不用求助Github上的资源库;但它仍然无法让你应用自己想要的风格,不通过训练神经网络就得到很好的结果。然而,当这一切最终发生时,它是否会让画家们变得无用呢?我很怀疑它对那些有着坚定而独特的风格的艺术家的影响。但当你需要为一篇文章或网站配上优雅的插图(而非一个特殊要求)时,它确实降低了门槛。再也不会出现无聊的素材图了!

真正独特的风格可以基于类似“如果我们以统一的标准描绘一个建筑,会怎样”的问题,快速做出固定风格的素描。例如,Pixar 的动画艺术家 Ratatouille 试着把多种不同风格应用到电影的风景和人物上;如果用神经网络来做素描呢?我们也可以用连环画创建故事板和描绘场景(照片可以轻松转化为速写)。这样的例子还有很多。

最后一点,算法还能创造人身特征 live identity。动效设计在近期的品牌宣传中变得非常流行,而有些企业则走的更远。例如,Wolff Olins 为 Brazilian telecom Oi 制作了一个对人声做出反应的 live identity。无需创意团队的帮助,你就能用算法实现一些疯狂的想法。


个性化用户体验

为一部分群体甚至少数特殊用户定制个性化的产品,是获得清晰良好的策略的一种方法。从每天的 Facebook 新闻聚合、Google 搜索结果、Netflix 和 Spotify 的推荐和许多其他产品中我们能看出这点。除了能减轻用户过滤信息的负担,用户与品牌的联系也变得更加感性,因为产品似乎时刻都在为自己着想。

然而,现在的关键问题是设计师在解决方法时扮演的角色。我们很少拥有编写这些算法的技术——工程师和数据分析师是这方面的专业人士。CX Partners 的 Giles Colborne 见证了 Spotify’s Discover Weekly 的一个很好的例子:歌曲列表是其中唯一的经典UX设计元素,而推荐系统担负着特别的工作,它将优秀的音乐填入到设计模板之中。


Spotify 的 Discover Weekly 功能

Colborne 为设计师提供了一些建议,建议如何在数字时代成为“有用”的设计师,以及如何用多种数据资源建立模型、训练算法。学习用大数据设计,把它集成到可实施的想法中去,这些其实很重要。例如,Airbnb 学习了怎样回答这样的问题,“列表中的旅店在未来任何一天的预定价格是多少?” 这样一来,房东就可以设置具有竞争力的价格。Netflix 的推荐引擎也有很多这样的例子。

PPT请见:Interaction designers vs algorithms

( 译者:这篇LinkedIn上的PPT大致意思是:设计其实是为大量你不了解的用户做的,要知道大家的喜好就要学会分析数据,通过一些算法去得出最优解,这样才能更好地为他们提供服务。这里还说到随着设计工作的深入,设计师会越来越明白设计的核心是理解人类的语言,理解人们信息传达的方式。)

超前设计”,一个相对新的概念,对个性化用户体验和预测用户意愿展开了更广泛的讨论。我们已经在手机上拥有了这几样东西:Google Now 用历史位置数据自动规划下班回家的路线;Siri 也用了相似的理念。然而,这里的关键因素是信任。为了超前执行这些动作,人们需要把后台收集个人数据的权限交给这些大公司。

我已经提到一些来自 Netflix, Vox Media 和 The Grid 的自动测试设计变量的例子。Liam Spradlin 的“变化设计”是另一种建立在算法基础上的个性化用户体验的有趣的方式。它是一个良好的自适应界面模型,关联了很多变量来满足特殊用户的需求。


设计师的盔甲

前面的内容已经包含了几个算法驱动设计的案例。现代设计师为此需要哪些工具呢?回想在上世纪中期,计算机被预想成扩展人类能力的一种方式。Roelof Pieters 和 Samim Winiger 仔细分析了计算学历史和提升人类能力的理念。他们发现了设计工具演化的三个阶段:

  • 第一代是用数字方法模仿人设计的工具;
  • 第二代通过不断的操作-反馈循环 ,完成人和机器共同协商的创意过程,帮助人类构建创作模式;
  • 第三代在细粒度的交流中与人协商创意过程,提升人的创作能力,加快从初学者到专家进阶的技巧习得,从而帮助人类构建3.0创作模式。


创意型人工智能

算法驱动的设计应该是产品设计师的盔甲——它加大了我们做决定的数目和深度。设计师和计算机需要怎么合作呢?

数字产品设计师的工作流程可能像是这样:

  1. 探索可能出现的问题,选择对商业和用户最有价值的问题去解决(分析);
  2. 探索可能的解决方法,选出解决(分析)问题的最优解;
  3. 启动,开发,推广一个解决问题的方法;
  4. 评估产品在真实用户中的运行情况,并优化它(分析和设计);
  5. 与公司的其它产品和解决方法保持联系和统一(设计)。

上述任务分为两类:对模糊的信息和已见效的解决方法的分析,以及为此做的需求和解决方案的设计。对这两种任务,我们分别需要什么工具和工作方法呢?


分析

对用户的模糊信息的定性研究难以实现自动化。但发掘现有产品的用户使用方式是一个好办法。我们可以提取出行为模式、得到用户分群,然后为它们优化用户体验。在广告定位中这已经实现了,算法用清晰和模糊的行为模式给用户做分类(在特殊产品或广告网络中)。

为了训练算法,优化针对用户群的界面和内容,设计师应该补充一些机器学习的知识。 Jon Bruner 给了一个很好的例子:从理想结果的基本描述开始的一种遗传算法——一个为节省燃油和方便乘客做优化的航班时刻表。它把不同的变量包括在内:航空公司拥有的飞机数量,起降的机场,每个飞机的座位数。它加入了那些也许你认为无关的变量:关于现有时刻表的数千个航班的细节,或是随机产生的虚假信息。经过成千上万甚至上亿次迭代,时刻表渐渐变得更加有效和便于使用了。算法也让我们理解了时刻表中的每个元素——例如37次航班从 O’Hare 机场的起飞时间——是怎样影响燃油效率和乘客便利这些相关变量的。

在这个场景中,人们掌管着算法,可以任意增减限制条件和变量。从真实用户的试验中可以测量出结果。同时,算法也用持续的反馈循环来提升用户体验。尽管这项工作的复杂说明它是数据分析师的分内事,设计师仍应该懂得机器学习的基本原理。O’Reilly 最近发行的关于这个话题的一本小册子就很棒。


设计

两年前,一个为工业设计师服务的工具 Autodesk Dreamcatcher 弄出了点动静,引发了 UX gurus 的好几次报道。它的基础理念是“生成设计”——一种应用在表演、工业设计、时装和建筑设计等领域多年的设计方法。很多人知道 Zaha Hadid 建筑事务所,他们的官方人士将这种方法称为“参数化设计”。


Autodesk Dreamcatcher

Logojoy 是一款能替代自由设计师设计简单 logo 的产品。你可以选择喜欢的风格、颜色和品牌,Logojoy 会产生无限多的创意结果。它可以精确到一个反映企业风格的特殊定制的 logo,订做关于品牌的商务名片,信封,等等。这简直是现实世界中最棒的算法驱动工具了!它的作者 Dawson Whitfield 阐述了它背后的机器学习原理


Logojoy

然而它还没有出现在数字产品设计中,因为他不能帮忙解决实际的工作任务。当然,建筑师和工业设计师的工作有它足够的专业性和种种限制,但用户界面的设计不是静止的——它们的使用模式、内容和功能常常变化,应该说是变化非常非常的多。而如果我们考虑整个生成设计的过程——一个设计师制定算法创作最终产品的原则——就会发现很多灵感。数字产品设计师的工作过程可能看起来是这样的:

  1. 算法用给定的原则和模式产生多个设计变化的结果;
  2. 这些结果用设计质量和任务要求进行筛选;
  3. 设计师和经理选择最有意思与合适的设计变化,必要时将它们打磨加工;
  4. 设计系统对一个或多个变化运行 A/B 测试,最后人工选出最有效的一个。

在数字产品设计中,我们如何从一大堆概念里筛选出结果尚未可知,因为使用场景实在太多了。如果算法可以帮助过滤这些概念,我们的工作应该会更多产、更有创意吧。然而,作为产品设计师,我们每天大多是在想法巨多的头脑风暴会议或是屏幕上的原型迭代中使用生成设计。为什么我们不能把其中一部分交给算法呢?


Jon Gold 的实验

在 The Grid 工作的 Jon Gold 发明的实验性工具 Rene,就是一个让算法做选择的实践中的例子。Gold 训练计算机为字体设计做有用的决定。他认为这和教会人做决定差不多,因此他把学习过程分为以下几步:

  1. 分析字形,理解字体之间的相似之处;
  2. 为组合字体形成基本的原则;
  3. 找出最好的字体组合,了解流行趋势;
  4. 用算法衡量设计师的工作成果。

它的想法与 Roelof 和 Samim 所说的类似:工具应该成为设计师的创意合作伙伴,而不只是傻乎乎的执行者。


Jon Gold 的生成设计:看上去合理的组合

Gold 的工具 Rene 是建立在这些原则上的。说起命令式编程和声明式编程,Gold 认为现代的设计工具应该选择后者——专注于我们想要得到的目标,而不是如何一步步计算。Jon 用公式表示 Rene 是如何设计并作出一些低级别的 demo 的,你可以试试这个工具。这是一个很早期的概念,但足够传达出这种思想。

视频翻越后可见:Rene ——产品设计工具

Jon 开玩笑地称这种方法为“暴力设计”和“成倍设计”,他强调了专业人员控制的重要性。值得注意的是,他在今年早些时候离开了 The Grid 团队。


工具已经有了?

不幸的是,没有网站或移动产品设计工具能达到和 Autodesk Dreamcatcher 媲美的分析和设计水平。不过,The Grid 和 Wix 多少可以算作高水平的、直接的解决方案。Adobe 一直在加入一些智能特性:最新版本的 Photoshop 有一个内容感知的功能,当你用了裁切工具后旋转图像,把画布扩张到超出图片本身大小时,它会自动填充和裁剪出拥有重要内容的部分。

视频翻越后可见:内容感知的裁切功能介绍

Adobe 和多伦多大学合作的实验——Design Scape 可以自动改善设计布局。它还能为用户推出一个全新的版块。

视频翻越后可见:DesignScape: 与交互式的布局建议一起做设计

你一定要跟上 Adobe 的步伐,因为他们在2016的 the MAX 会议上发布了一个叫做 Sensei 的智能平台。Sensei 利用了 Adobe 在人工智能和机器学习领域的专业技术,它将会成为未来用户级和企业级的 Adobe 产品中算法驱动设计功能的基础。发布会提到了语义图像分割(以图像类型做标签展示一张图片中的每个部分,如建筑、天空等),字体识别(如,通过创意资源和推荐相似字体来识别一种字体,甚至是手写体),以及智能用户分群。

然而,正如John McCarthy——提出“人工智能”术语的计算机学家的说法,“只要它能工作,没有人会再称它为人工智能了。” 曾经最前沿的人工智能现在成了计算机的标准要求。下面是一些可作为产品设计师日常工具包的试验性的想法和工具:

StyLit 无需绘画即可创作3D模型。

Autocomplete handdrawn animations Microsoft 试验性的插画/动画自动补全工具。

但这只是未来世界的一角。现在的更多情况是,个人企业在为他们的工作任务寻找特定的解决方法。最好的方法之一是把算法融入到企业的设计体系中。目标是相似的:自动化大量跟随产品线的任务;得到和维护统一标准的设计;简化项目启动过程;更轻松地支持现有产品。

现代的设计体系始于前端的设计风格规范,但这只是第一步(把设计与开发人员的代码相结合)。开发人员仍然需要手动创建页面。下一步是在预先规定的准则下的半自动化页面创建和测试。

关于平台的思考 by Yury Vetrov


优势和劣势

你的公司应该用算法驱动的设计吗?

优势

如果我们考虑一下近期的趋势,这种方法的价值就比较清晰明了:

  • 省去了准备资源和内容的机械工作;
  • 拓宽了对创作的探索。计算机把各个变量因素放在一起,让设计师从结果中过滤出最好的组合;
  • 为小范围的分群用户甚至特殊用户优化界面;
  • 让设计快速适应多个平台和设备,虽然是一种原始的方法;
  • 可以为一个界面的不同部分或一些特殊的模式做实验——理想的、自动化的实验。

总的来说,这种设计方法可以将设计师从支持开发和创作过程中解放出来,但最重要的决定还是交给他们去做。一个不错的副作用是我们需要弄清楚自己的工作,因为我们需要试着分析它,将其中的一部分自动化。它会让我们更多产,更好地向非设计人员解释我们的工作本质。这样,整个公司的设计氛围将会更加浓厚。

劣势

然而,所有的这些优点不太容易实现,或是存在一些限制:

  • 我们讨论的只是在公司目标下的定制化的解决方案。这种工作需要在开发、支持和提升上的持续投入;
  • 就像 The Grid 那样,单单一个工具不能让奇迹发生。没有设计师的全局指挥,做出来的结果很可能平凡无奇。另一方面,这确实是大部分专业工具的应用现状;
  • 打破过去存在的风格和方案比较困难。算法驱动的设计是建立在已有的模式和原则的基础上的;
  • 如果生成设计工具可以从 Dribbble 中获取到所有信息,抄袭其他设计师的作品就会变得简单。


道德问题也同样存在:算法做出的设计有价值吗,是独一无二的吗?谁是设计的原作者?生成设计的结果难道不会被局部最大值所限制吗?Oliver Roeder 说“计算机艺术”不会比“绘画艺术”或“钢琴艺术”更让人兴奋。毕竟,编程软件是人写出的,背后的原理是人思考得出的,计算机是人制造的,素材是人收集的,公司也是人所经营管理的,工具是人使用的。计算机艺术是人类的艺术——之一,而不是一个另类。改革已经发生了,那么为什么不能进行下去呢?


总结

这是一个关于美好未来的故事,但我们应该记住算法的局限——它建立在人类定义的准则上,即使现在是机器学习在管理这些准则。设计师强大的地方在于他们可以制造和打破准则;因此从现在起的一年内,我们可能会把“美丽”定义为完全不同的东西。业界设计师既有高手也有菜鸟,而算法会轻易取代后者。但那些跟随准则、必要时打破准则的人,会找到强大的新工具和无限的可能性。

更重要的是,数字产品正在变得越来越复杂:我们需要支持更多的平台,为更多的用户群体变化使用场景,做出更多的假设。就像 Frog 的 Harry West 所说,以人为本的设计从设计实物(工业设计)扩展到设计体验(包括交互设计、视觉设计和控件设计)。下一步将会是系统级行为的设计:设计决定自动化系统或智能系统所做行为的算法。比起招聘越来越多的设计师,我们更该做的是把日常工作交给计算机去做。让计算机去和字体玩游戏吧。