9

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的? - 优设网 - UISDC

 2 years ago
source link: https://www.uisdc.com/netflix-ava
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

前几年,基于深度学习的设计系统「鹿班」问世,关于 AI 驱动型的工具是否会革掉设计师的命的讨论甚嚣尘上,如今这个场景依然历历在目。虽然随后还诞生了不少类似的产品,比如服务于京东这样大型企业的「羚珑」,以及各种针对单项功能进行迭代的小型 AI 工具,比如专精换脸的 Deepfake,用来抠图的 Remove.bg 等等。

打不过就加入。相比于对于遥远未来的焦虑,直接用这些 AI 驱动的设计工具来搞定问题,是越来越多设计师同学的务实选择。

如何将机器学习生成的结果和设计师的构想结合起来,输出贴合用户需求的设计结果?也许,我们能够在 Netflix 的「数据科学和工程团队」制作封面/Banner的工作方式中,一窥未来的设计方法。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

当你还在 P 图的时候,Netflix 已经走上了一条截然不同的设计道路。

注意力时间:13毫秒的决策区间

布拉德·皮特在《搏击俱乐部》中所饰演的角色 Tyler Durden,在做电影放映员的时候,会悄悄将一些「敏感」的画面帧插入到正常的电影胶片中,按照正常的胶片电影的播放速度,1秒24帧,实际上这张「突兀」的画面帧大概的存在时长为 42 毫秒。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

即使仅仅只有一帧,一闪而过的42毫秒,观众依然会看到,会惊愕,会出神。这并不稀奇,因为人的肉眼的信息抓取能力相当强。

曾经我们认为人的眼睛能够注意到体停留于视网膜上 100 毫秒以上的视觉信息,麻省理工大的一组神经科学家发现,人脑处理图像信息的机制比我们之前想象中要强。

根据其他的研究,当人的双眼看到信息之后,信息从视网膜传递到大脑能够处理视觉信息的部位,然后反馈给眼球的神经元,这个时候眼球能够根据反馈过来的决策机制来眼动,这个过程大约需要50毫秒。也就是说,当可见内容低于这个时间范畴的时候,信息的处理效果会打折扣——但是仅仅是打折扣。

麻省理工大的研究团队将单个图片存在时长从 100 毫秒降低到 80毫秒,再到 53 毫秒、40毫秒、27毫秒,最极限的情况下,存在是时长仅为13毫秒的图片,也可以被注意到。换句话说,即使在 每秒 75 帧的视频中插入一帧无关的画面帧,都有可能被用户注意到。这一研究成果,被发布在《Attention, Perception, and Psychophysics》 这一学术期刊上。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

这项研究证明了我们日常「一瞥」当中,到底获取到多少信息,我们的决策机制可能比我们想象重要「极端」和「灵敏」得多。这也意味着,用户在浏览社交媒体的时候,也许会在1~2s 内翻一页,但是大脑大概在刚刚看到图片信息的时候就决定了是否要停留下来,而在诸如 Netflix 、Bilibili、爱奇异 这样的视频网站上浏览视频的时候,这种视觉信息的竞争更加残酷。

实际上,正是这项研究促使 Netflix 的数据科学团队有意识地探索用户点开视频的底层逻辑。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

对于每一个影视作品而言,它们起码拥有 13 毫秒的「被看见」的机会,被设计出来的封面,就是通过这狭窄的时间窗口的契机,它们为这部作品争取一个机会。但是实际上,从注意到问题,到找到内容呈现的正确方式,路径非常长。

设计决策:如何找到正确的答案

封面很重要,那么谁来决定封面用哪张?首先这是一个设计决策的问题。

正如同你我所熟知的,当我们需要为一部影片制作封面或宣传图的时候,我们会倾向于由设计师来选取合适的图片和素材物料,经过修整处理之后,搭配上精心设计的标题和辅助文案,调整排版布局,几经反馈和修改之后,输出最终的宣传物料。各位从事平面、视觉甚至 UI 设计的同学对此应该相当熟悉。

选图,做字体,快速排版。就是这么个事儿,但是在 Netflix ,他们有成千上万的影片,受众群体横跨多个国家地区,这也意味着做设计决策不能采用这种逻辑。

「做决策很简单——难的是做出正确的决策。」这句话出自Netflix 的技术博客中,发人深省。通常,我们的设计决策方式会上以下 4 种决策方式中的一种:

  1. 让领导做出所有决定。
  2. 聘请一些设计、产品管理、用户体验、流媒体交付和其他学科方面的专家,然后从他们的建议和方法中得出结果。
  3. 进行内部讨论,让团队内的成员各抒己见,让声量最大的选择占据主导。
  4. 抄袭对手的设计。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

(左上:领导选择;右上:专家决策;左下:内部讨论;右下:抄袭对手;)

如果仅仅只是设计一张海报, 使用上面的任何一种方法,都可以在一定时间内做出「合理」的决策,起码能够较快得出结果。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

2010 年Netflix 的首屏页面

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

2020 年 Netflix 的首屏页面

如果是设计一个首屏界面,涉及到的不仅仅上视觉体验,还要考虑到产品和用户需求,用户体验,交互逻辑,排版布局等等等等,这个决策时间可能还要长。正如同你所看到的,在过去的十几年时间当中,Netflix 的首屏页面经历了不小的变化。但是这并不是最主要的挑战。

海量的电影和剧集,怎样才能给它们匹配上多变、符合不同国家和地区不同审美偏好用户的封面图?一部部影片地做肯定是不现实的。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

Netflix 内部有若干个相辅相成的团队,来共同决策并落地设计,而不是采用上面提及的4种策略。

团队构成:Netflix 的主要决策团队

Netflix 和很多其他同类公司一样,有着专门的业务战略部门(SP&A),通常他们通过财务、运营和战略分析,来协助公司高层进行宏观的决策制定。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

在微观层面上,他们也有专门分析用户行为和决策的消费者洞察部门,直接面对用户,仔细分辨用户所说和用户真正决策之间的差异,把握用户的决策倾向,在某种程度上,他们可以确知消费者个人、受众群体、市场层面的主要的模式、共识和主要的声音。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

但是在全平台的落地执行上,Netflix 所倚靠的,是「数据科学与工程团队」。用户在数据层面上的行为和表达,是不会骗人的。他们要做的是将审美「规范化」和有针对性的「精细化」处理,而且要应用到海量的影视作品和海量的用户头上。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

数据科学团队是一个成员背景各不相同、来源广泛的团队,他们借助各自不同的技能组合,来共通分享技能并推动 Netflix 在宏观数据层面上,逐步优化设计和体验。他们当中很多人熟知个性化算法,了解内容评估,擅长流程优化,当然,也懂得设计,了解工程,可以和其他的业务/工程团队密切合作。

宏观上有战略团队,微观上有消费者洞察部门,而在功能和设计的落地执行上,「数据科学和工程团队」则是中坚力量。其中最硬核的事情,也正是由这个构成复杂的团队来完成的。

关键因素:选取合适的背景图

2014年的时候,Netflix 的团队进行过一项研究,结果发现了了不得的规律。通过这份研究,他们发现用户通常会在每部影视作品的标题上平均花费 1.8s,但是每一部影视作品的图片背景是影响用户是否观看的最关键因素,这些图片内容占据了用户浏览 Netflix 视觉内容比例的 82%。你难以想象用户浏览信息时候的「草率」,对于平台而言,抓取用户兴趣的时间窗口有多短。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

在Netflix 推出原创纪录片《The Short Game》的时候,Netflix 的内容分析团队运用这项研究的结果进行了全方位的测试,最直观的结果是:使用更好、更有针对性的图片内容,会显著增加这部作品的整体流媒体播放时长和用户参与度。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

在这份研究当中,有很多定性的研究结果非常值得参考。

面孔对于用户注意力是有天然吸引力的,这一点可能大家都知道,但是更重要的地方在于:带有复杂情绪的面部,比起温柔或者坚韧的面部表情更能吸引用户——复杂的面部表情更能激起用户对于故事的好奇心。在下面的 Unbrakable Kimmy Schmidt 第二季开播的时候,Netflix 使用了多个不同版本的封面图,其中转化率最高的是右下角的那个:

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

虽然全球化程度正在提升,但是不同地区文化差异也是无法忽略的影响因素,以《黑客帝国》系列导演沃卓斯基姐妹所执导的系列剧集《超感猎杀》为例,这部 Netflix 投资的影视剧集在全球不同地区,转化率最高的封面图各不相同:

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

最具识别度的角色通常会更容易吸引用户,而这个角色不一定要是这部作品的主角!注意看,《驯龙高手》系列的封面途中,通常是反派角色带来的转化率更高:

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

少即是多,也是一个相当重要的规律。在诸如 Netflix 的首页这种封面图使用场景之下,封面当中角色超过3个人的时候,转化率就急转直下了。Netflix 通过数据证明了在小屏幕上,撕番位这种事儿毫无意义,用户会选择单一角色的封面图,它甚至不一定是主角的。以《女子监狱》系列剧集为例,第一季的多人封面数据明显不好,后续学乖了,在二三季上使用了单人封面,数据转化率有了明显回升:

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

上面的这些测试结果,是「数据科学与工程团队」借助大量的具有开创性的 A/B 测试来取得答案的。

A/B 测试:疯狂而细致的对比

上面提出的结论非常易于理解的,但是这些结论是建立在极度复杂而细致的测试的基础上的。「数据科学与工程团队」的工程师们的目标设立得非常明确:

  1. 确定让用户更快找到他们想要观看的影视作品。
  2. 确保用户会逐步增加参与度,观看更多的内容。
  3. 确保在使用多个不同图片背景的时候,不会歪曲标题含义。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

从视觉排版的角度上来看,每一部电影或者剧集,其实都有很多属性。以上图的《毒枭》为例,通常都会有大标题、特征化的图片背景、评级信息、评分信息、内容概要等等。

通过研究表明,用户会先看图片,然后再决定是否要看其他的文字信息。换句话来说,细节详情重要……但是封面图最重要。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

所以,他们打算提高用户指向图片的「第一眼」的转化率。但是,在其他场景下使用的图片物料,其实是不一定适合给 Netflix 来使用的。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

以上面提及的《The Short Game》纪录片为例,数据科学团队最初采用的测试很简单:

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

在 3个不同的测试单元之下,他们监控了点击率、总播放时长、短时播放比例、观看内容比例等不同指标。结果表明,修改背景图片对于转化率有着明显的效果,甚至拓展了这部作品的受众人群。当然,也有人质疑,但是这仅仅只是最简单、粗略的 A/B 测试。因此,在此之后,数据科学团队还进行更加深入、复杂的 A/B 测试:

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

在前期基础的测试当中,将封面图中的主要元素都量化处理了,包含主要的标题、可选的标签和背景图,在用户指标的筛选上则显得更加细致,看了几分钟的用户和看完整剧集的用户,都被区分开来,不同国家、地区的用户也被区分标记了。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

这些 A/B 测试所涉及到的指标和场景相当的多,通过这些测试不仅找出了提升转化率和用户观看时长的主要指标,而且还验证了提升短时播放时长等次要因素的影响指标。之后,他们还花费了长达数月的时间,来做纵向 A/B 测试,来追踪用户跨设备的观影印象的变化,以及同一个封面在不同设备、场景下的转化率影响和变化。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

但是不同设备上同一图片是有不同的大小、纵横比的,这就需要额外创造一套标识系统来标识同一图片不同纵横比的版本,相当于是为这些图片素材创造一个「血统ID管理系统」。

在此之后,数据科学团队还逐步升级出更加复杂的 A/B 测试方法,这些有针对性的测试不断推进过程中,就筛选出上方所提及的结论。这些成果实实在在地转化成 Netflix 的订阅量,这也促使了 Netflix 的数据科学和工程团队开始吸收更多的跨学科人才,并且储备了越来越多的算法和工具,直到后来催生出 AVA 系统。

AVA 系统:真正的算法筛图

尽可能多、尽可能丰富、尽可能符合规律的的封面图,能给 Netflix 带来最直接的转化,精心挑选封面图这个事情……工作量太大了。AVA 系统就是用来解决这个「大量的封面图从哪里来」的问题。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

著名剧集《怪奇物语》一集有大约 86000 个静态帧,这意味着10集一季的剧集当中,可以筛出接近 900 万个静态帧,这是一个巨大的资源库,想想看,900万帧图片当中能够筛出多少用来做封面的图片?

但是要达成这一目标,数据科学与工程团队,需要全方位地拆解和细化这些视觉信息。数据科学与工程团队打算使用帧注释来标记和测量每一帧图片的客观特征元数据:

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

AVA 为《Bright》筛选图片

然后在此基础上,拆分出框架子集,然后借助排名算法,筛选出符合审美、创意、多样性的子集,这些图片的集合,会成为代表这一影视作品的备选图片素材。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

为了尽可能好的筛选图片,Netflix 的团队会将视频先拆分成小块的段落,然后再进行细致的处理。想要实现这一目标,他们创建了一个名为 Archer 的框架来拆分视频,在这个框架的基础上,不断加入智能算法,来逐一处理这些分割出来的视频块,分析图片的元数据,或者是分析这些块的内容和主题的相关度,上下文关系,对重要性进行排名。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

在 Archer 框架的帮助下,他们获得了视频块和图片的 3 类基础数据:

1、视频元数据

简单来说,视频元数据包含了这些视频和图片的亮度、色彩、对比度和动态模糊的程度,这也是 AVA 最容易获取到的内容和数据。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

2、上下文元数据

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

上下文元数据就更有意思了,AVA 可以根据角色的姿势、动作、面部表情来判断角色的情绪,但是这个不是最强的。算法能够估算镜头相对于拍摄主体的运动距离,从而能够给动态模糊提供具体的参数,甚至可以识别拍摄镜头的类型和风格,比如是否是长镜头,是否是角色特写,从而进一步佐证这一角色在这一场景下的情绪或者氛围,而对象检测的数据则能够分辨场景中人物和物品的差异和特征。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

3、构图元数据

AVA 的算法能够结合摄影和视觉美学的逻辑来判断画面的特征,比如使用对称、景深关系和三分法来标识出镜头和画面的特征。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

在确定了这些基础的元数据之后,下一步就会通过自动化流程,来从中提取「最佳」的候选图片。当创意团队需要进行封面合成或者剪辑的时候,就可以从中选取更有用的图片和视频素材。这个图片排名的逻辑,也是有讲究的。

1、筛选演员优先级

影视作品中,主角和关键角色的优先级无疑是更高的,借助深度学习训练,算法可以筛选出符合关键角色和主角特征的图片,当然,还需要兼顾到主角的动作、神态、面部情绪和构图:

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

这个过程中,会将非关键角色、动态模糊的图片以及画面角色情绪不佳的去掉。

2、挑出美学多样性画面帧

考虑到封面图还需要具备创意性和视觉多样性,甚至是非常主观的一门学科,所以从设计师和创意工作者那里获得一些特征明显的指标,借此来筛选出影片中一些有显著美学特征的画面。AVA 会特意筛选出特征性的镜头(远景或中景),视觉性突出场景(三分法、亮度、对比度)、色彩突出场景(突出或者有代表性的颜色),以及特征结构性场景(负空间或者特定复杂度的场景)。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

结合这些特征属性,能够筛选出很多优质的画面。

3、增加分级过滤器

考虑到受众和敏感度,筛选过程中还需要专门过滤掉含有性、裸露性的文字的画面和视频,去掉含有文字、LOGO以及未经授权的品牌的相关画面,AVA 系统会给含有这些元素的画面以较低评级,从而可以自然筛选掉。

基本上,到了这一步,就能够获得大量的图片和视频素材,结合设计师提供的不同语言不同版本的标题设计素材,就能够快速合成针对不同国家地区用户的封面图了。那么,这个关键的「数据科学与工程团队」里,具体都是些什么样的人呢?

「数据科学与工程团队」都是些什么人?

「数据科学与工程团队」是一个很典型的站在「科技和人文」十字路口的团队,他们需要用科学的方式来探索人性和艺术的特征,又要解决用户体验、流媒体的推流算法、合理的个性化推荐等等各种问题。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

这个团队当中,成员主要分成2个不同的类别,「数据分析工程师」和「可视化工程师」,在很大程度上,他们面临的就是 Netflix 平台的内容本身,海量的内容。而这两个职位名称之所以这么模糊,是因为这帮人并非单一学术背景,甚至同一专业的成员都有着各自所擅长的特殊技能和知识门类,这种模糊的称谓恰恰是为了模糊这种界限,促进合作。

「数据科学与工程团队」当中的成员都是多面手,而根据他们所专精的领域差异,它们又可以分为3个主要的类别。

960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

  • 分析师。他们通常可以提供推动业务决策的指标和数据模块,善于和非技术背景的受众进行沟通,和利益相关者讨论不同选择的战略意义,他们的专长是描述性的分析和方法,同时他们也懂得必要的技术工具比如代码、数学和统计。
  • 工程师。他们擅长以最佳的方式来获取数据,构建强大的数据模型、原型系统,并且善于为特定的项目来针对性获取数据。本质上,他们依然是分析师,但是他们对于数据工程有着深入理解,尤其是对数据进行处理和性能优化特别拿手。他们大多位于多学科交叉点,可以全栈输出,对项目进行分层可视化呈现。
  • 洞察者。这是一个特别擅长视觉性表达、叙事的群体,他们对于拓展性、美观和功能性都有非常强的掌控力,对于表层以下的数据和内容有深入洞察,他们大多能够以准确优美的数据图来讲述事件和情形,辅助其他人理解,他们甚至会使用使用代码和设计工具来制作工具、设计 UI。

从他们的职能特征可以看出来,他们日常工作涉及到的点始终都围绕着数据、性能、可视化呈现,而他们要解决的问题也常常会是前人所未曾接触过,甚至需要借助深入分析来「理解」。

Netflix 的「数据科学和工程团队」对于设计的支撑是无处不在的,而他们这种高度技术化、跨学科的属性之强,又和我们现在对于「设计」的认知,有着巨大的差异。当然,很大程度上,这种团队只可能存在于一些大公司或者涉及海量数据的项目当中,但是它在一定程度中揭示了未来设计的一个方向和可能性。

在电视或者浏览器上打开 Netflix 的页面之后,我不会先看60s的广告打扰,也不会在好不容易选好一个剧集后再看 120s 的广告。这份相对纯粹的观影体验背后,大概有 Netflix 自制影视作品带来的收益的支撑,当然也有「数据科学和工程团队」这些硬核玩家努力工作的影响。当然,我最主要还是不太喜欢用广告来倒逼付费订阅的模式……

参考来源:

https://news.mit.edu/2014/in-the-blink-of-an-eye-0116
https://netflixtechblog.com/analytics-at-netflix-who-we-are-and-what-we-do-7d9c08fe6965
https://netflixtechblog.com/selecting-the-best-artwork-for-videos-through-a-b-testing-f6155c4595f6
https://about.netflix.com/en/news/the-power-of-a-picture
https://jobs.netflix.com/teams/data-science-and-engineering
https://uxplanet.org/what-can-we-learn-about-design-from-netflix-502f6a384aa8
https://netflixtechblog.com/ava-the-art-and-science-of-image-discovery-at-netflix-a442f163af6
https://netflixtechblog.com/decision-making-at-netflix-33065fa06481

延伸阅读:


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK