Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

本期我们请到了 Facebook 设计师 何如佳。她曾任 Facebook 视频、照片创作和编辑领域的主设计师、Facebook 前沿科技研究团队 Building 8 早期成员,主导交互设计,设计了拥有全球数千万活跃用户的 Facebook 独立照片分享应用 Moments,现在为 Facebook Messenger 设计。

我们聊了聊:

  • Facebook 的设计文化和设计团队
  • Facebook 内部是怎么做「设计批评」的
  • 如何维持跨团队间的设计一致性
  • 设计 Facebook 主 app 中的功能,和设计一个 Moments 这样的独立 app 有何不同?
  • Facebook Moments 的设计开发流程
  • 如何做好安卓平台上的 app 设计
  • 扎克伯格是你的产品经理……
  • Facebook 的声音设计团队
  • 用 Origami 做动态原型
  • 在腾讯、知乎和在 Facebook 工作有什么不同体会?

Riceman: 欢迎 @Ruthia 何如佳 来到 UX Coffee。能和我们介绍一下自己吗?

何如佳:大家好,我叫何如佳,现在在 Facebook 做产品设计师。我是 14 年加入,已经在 Facebook 工作了两年多。

Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

Facebook 的设计团队结构

Riceman:能和大家介绍一下 Facebook 大致的产品线和团队构成吗?

何如佳:Facebook 的主要产品比较集中,最重要的几个产品是:Facebook、Instagram、WhatsApp,还有 Oculus。Facebook 的设计团队分成三个部分:Core app(核心应用),Growth(增长)和 Business(商业)。我刚加入的时候,公司大约有不到 200 个设计师,两年多我们的设计团队翻了一番。

Facebook 是一家产品驱动的公司,所以我们的设计团队和产品团队处于一种「你中有我,我中有你」的关系中。每个设计师属于自己所在的产品团队,方便和自己产品的团队成员交流,但我们也属于自己的设计团队,和别的产品的设计师做沟通,进行 design critique(设计互评)等等。

Facebook 设计团队是怎么做 design critique 的?

何如佳:我刚到公司的时候,每个月都有一次设计师全员大会。每次有一个小组展示他们最近的设计,这样有助于全公司设计师互相了解大家都在做什么。公司鼓励大家在设计还在早期的时候就向大家展示,获得一些早期设计大方向上的建议。根据展示的设计所处的产品周期不同,大家也会针对性地给不同的建议。一些设计细节上的建议,大家一般会在自己所在的小组的会议中去提出。

张挠挠:你觉得要做好一个 design critique,设计师应该要做好什么准备?

何如佳:我觉得最重要的一点是设计师要带着明确的目的走进一次 design critique 的会议。比如,是想要视觉设计上的、交互流程上的、还是产品方向上的,或者是针对界面中的某个按钮文字的建议?做展示的设计师需要主动明确地说清楚你的目的,这样有利于获得有针对性、建设性的反馈。

Facebook 的设计师 Tanner Christensen 在 Medium 上写过一篇文章《Peek Inside a Facebook Design Critique》,还原了真实发生在 Facebook 的一次 design critique,很有意思,我觉得很值得大家参考。

Facebook 的设计分享文化

Hoka:Facebook 设计团队非常乐于分享,经常把产品的设计过程、反思、总结、设计素材和源文件都分享到网上。你们应该是最早一批做这件事的硅谷大公司,现在看来应该是带起了一股潮流,很多公司的设计团队也慢慢开始对外做分享。你怎么看 Facebook 的这种开放的设计文化呢?

何如佳:我们是社交公司嘛,天生自带分享社交属性。我们公司非常鼓励员工做分享,内部我们甚至还有写作讨论组叫 Writing for Facebook Design,由 Julie Zhuo 发起,在里面大家分享、互评怎么写出好文章。这种分享有利于整个设计社群的发展,也能扩大我们公司的影响力,有利于我们招募优秀的人才。

Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

△  Facebook 设计官方网站(facebook.design)

Riceman:你们有 400 多人的设计团队,你们是如何管理设计规范,保持产品间的设计一致性的呢?

何如佳:我之前提到了几个大设计团队,他们各自都有专门的设计师来制定和管理设计样式的规范。如果你设计的产品需要用到新的样式,就要和这些组的设计师打交道,审核通过后才能在产品中使用。

但也不是所有产品组都有设计规范,像我现在在 Facebook Messenger,我们组设计团队的规模还比较小,就不需要有专门的团队来做设计规范,设计的一致性主要依赖设计师之间的沟通。

在不同产品团队的经历让我快速成长

Riceman:在加入 Facebook Messenger 之前,你做过哪些项目呢?

何如佳:我一开始做的是 Facebook Moments,国内的听众可能没有听过这个 app,我简单介绍一下吧。Moments 这个产品的出发点在于,我们发现用户拍的照片中的绝大部分,他们其实都不一定想要发到 Facebook 上,但是他们会想要分享给某一个小的朋友圈子,或者是他们的家人,或者是一个私密的小群体,Moments 就是抓住这个需求,把这种分享变得非常简单。

Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

△  Facebook Moments 安卓应用会在每次拍照后识别用户照片里的好友,建议用户把照片分享给他们

Moments 之后,我还做过 Facebook 主 app 中的相机和视频功能。之后去到了 Facebook Building 8(一个研究导向的前沿创新团队),然后现在到了 Messenger。

Hoka:做 Facebook 主 app 中的相机或者某个视频的功能,和设计 Moments 这样的独立 app,你有什么不同的体会吗?

何如佳:我觉得很不一样。Moments 整个团队算上产品、工程师、测试等等才不到 20 个人,我们的开发速度很快。但我在做 Facebook 主 app 的一些功能的时候进展就会慢很多,因为那些设计往往需要跨团队、跨工种、甚至是跨公司的合作。

经历这样不同的团队对我来说也是不断成长的过程。我一开始进公司的时候更像是一个「支持型」的设计师,一个人埋头苦干,通过把自己负责的部分做好为产品做贡献。慢慢地就会希望自己的设计对产品产生更大的影响,这样就需要和更多人沟通,而不只是自己一个人埋头做。

Moments 的设计开发过程

何如佳:我在 Moments 团队中主要负责的是安卓平台的设计。当时比较有意思的是,整个公司其实做安卓平台的设计师非常少,大概只有 3 个。

我加入的时候这个产品已经开始做了一段时间了,但正在经历一个比较大的产品方向上的转型,基本上把之前的设计推倒重来,所以我参与到了很多产品的讨论当中。整个设计过程是一个团队合作的过程,并不是流水作业。每周我要和产品经理做很多沟通,列出所有的功能需求,然后商量制定优先级。

另外一个有意思的地方就是,当时我们的产品还没有发布,所以我们会请一些用户来公司,把他们关到「小黑屋」里面来做用户测试和访谈(和犯人审问一样,屋子里的墙其实从另一个房间看是玻璃)。一个比较棘手的问题是,因为我们公司在硅谷,在公司周围找的用户可能都从事互联网行业,和这个世界上绝大部分地方的用户都不一样,所以我们要很小心地排除掉硅谷的工程师和设计师,来获取比较有代表性的样本。我们甚至还跑到美国德州,去找当地的大学生来做测试,去得到更全面的结果。

什么时候应该打破平台的设计规范

Hoka:安卓的设计规范很强势,iOS 的设计语言相对更开放,你们为安卓进行设计时,是遵从安卓的设计规范,还是保留 iOS 上的一些风格,这一点你们是怎么权衡的呢?

何如佳:这是设计界一直在讨论的问题。其实现在两个平台有逐渐融合的趋势,可能逐渐地大家总结出了一些好用的、通用的元素和组件。但我觉得还是有必要去读一下两个平台的设计文档。现在美国本土比较注重 iOS 设计,因为占有率相对有优势,但在全球范围内,尤其在国内,可能还是安卓比较占优势。比如 Moments 安卓版本的用户数是 iOS 版的很多倍,所以安卓也是一个比较重要的平台。

Riceman:像 Facebook 这样的公司,会不会有时候不遵守安卓或 iOS 的规范,可能会有更好的结果,或者是出于自己品牌、形象的考虑,想去创造一些东西,打破平台规范?

何如佳:有可能,比如 Reactions,现在在 Facebook 上,你不止可以点赞,还可以发爱心、发各种表情,这是一个新的交互元素。我对他们的设计过程有一些了解,他们也有很多迭代版本,有一些其实是传统的、符合规范的,最后选择这个非传统的版本也是经过用户研究、各种数据验证的。其实设计师在这方面决策的权力没有那么大,因为 Facebook 是一个数据驱动的公司,有时候也不是刻意打破规范,而是要看用户更喜欢什么,要从数据看哪个版本对整个体验最有帮助。

Riceman:所以最后是数据说了算。如果数据说,打破规范会有更好的用户体验,你们会照着数据去做,而不是盲目地遵从平台的设计规范。

Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

△  扎克伯格在 Facebook 上介绍 Reactions 功能,用户除了点赞,还能发爱心、笑脸、哭脸等表情

当扎克伯格是你的产品经理……

Riceman:我们都知道 Facebook 设计师正式的职称是「产品设计师」,但你们同时也有产品经理,你提到 Moments 有很多产品决定,产品设计师在产品决策中有多少话语权?

何如佳:其实 Moments 比较特殊,它是从编程马拉松开始的,当时大老板扎克伯格说要做这个项目,后来他都是有很大的参与度的,每次转型都是他定的方向,所以组里的设计师和产品经理的决定权会比较有限,确实会有一些压力。不过一般的产品功能都是产品经理和设计师共同讨论决定的,我们也会经常和工程师一起讨论。

当时 Facebook 有一个叫 Creative Labs 的组织,做了一系列的独立应用,包括 Paper、Slingshot,这些扎克伯格都挺关注的,Moments 是 Creative Labs 最后的一个尝试。

张挠挠:Creative Labs 有点类似大公司的小 startup,在这样的团队工作还有什么挑战?

何如佳:挑战真的蛮大的,Creative Labs 做了很多实验性质的应用,没有很多存活下来,Moments 是现在来看最成功的,可能也和 Facebook 文化有关系。做社交应用,主要是看在社交方面对用户需求的挖掘。有时候 app 设计得太漂亮了,用户反而可能有距离感,觉得不是给自己这样的普通人用的。其他方面,我觉得挑战是 「focus」,怎么样去集中资源做一件事。在大公司里很容易有很多资源,有时候反而不知道应该集中去做什么事情。Startup 能成功往往是因为能 focus 在一件事上,对大公司来说,怎么协调这个 focus 是一个很大的挑战。

Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

△  Creative Labs 的产品之一 Paper,于 2016 年 7 月下架

设计 Facebook 主 app 中的功能,和设计一个 Moments 这样的独立 app 有何不同?

Riceman:你后来做的两个产品跟 Moments 很不一样,分别叫 Slideshow 和 Quick Camera,它们的接口是在 Facebook 的主 app 上的,而不是 Moments 这样的独立应用。

何如佳:对,我后来在 Facebook 做的是分享这一块的设计,比如怎么去发状态,怎么发照片、视频。 Slideshow 可以把你的照片做成视频,配上一些音乐、动画,灵感来自于很多用户手机里的照片不是每一张单独看上去都很精美,但他们也想分享出去作为生活的片段,或者去讲是一个故事,比如我去登山,想分享这次登山的很多照片,就可以把这些照片整合成一个视频。

Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

△  Facebook Slideshow:把几张照片做成一个幻灯片短视频

这个功能其实不是特别复杂,但因为是做在主 app 上,所以花了很长时间。 Moments 设计开发整个应用做了 6、7个月,只是 Slideshow 这个功能却做了半年多(不过我同时也在负责其他 2 个项目)。一个原因是主 app 的层级沟通会很多,我们内部有 FIG (Facebook Interface Guideline)这个组,设计 Moments 时,我不需要请他们审核,但我做 Slideshow 的时候就需要跟他们沟通。而且 Slideshow 这个功能里结合了很多元素,包括音乐、视频、特效,所以我也要跟其他团队合作,比如音乐设计师,还有一个视频制作的 agency。为了这一个项目,我其实前前后后和 3 个 agency 合作。

Riceman:你和声音设计师是怎么合作的,你之前有这方面的背景知识吗?

何如佳:我们的声音设计师都非常有经验,有一个专门的团队做声音设计,团队的负责人 Will Littlejohn 之前做过 Guitar Hero,他非常有经验。只要跟他说需求,他就会提供一个比较满意的版本,我只需要提一些建议。

Riceman:Facebook 有很多小的声效,非常动听,有时候我就为了听这个声音也愿意发一个表情。

何如佳:我们对设计细节要求很高,对声效也是如此。Slideshow 里有非常多的音乐可以使用,都是 Facebook 声音设计团队和专业的音乐家一起创作的原创音乐。

设计积极友善的社区文化

Hoka:你还做过一个产品叫 Birthday Cam,一般有朋友过生日的时候大家就简单发一句「生日快乐」,甚至是「生快」,但有了这个产品,当你进入寿星的个人主页,给他留言的时候,可以选择给他录一段 15 秒以内的生日视频,会让整个社区的气氛更活跃。你们是怎么想到做这个功能的?

何如佳:现在很多人觉得在 Facebook 上发生日留言不够有诚意,慢慢很多人就只到 Messenger 上发生日祝福,我们就想怎么样让庆祝生日更特别一点,于是就有了 Birthday Cam 这个产品。现在你生日会收到一个 Facebook 生日视频,视频里有朋友给你录的视频。这个体验结合了 Facebook 的特色,让这个体验更有新意,实际上我们也发现这样的视频状态往往会有更高的参与度和反馈。

我们有一个团队专门衡量大家对 Facebook 品牌的好感度,他们会在生日、节日的时候问候大家,鼓励大家分享一些庆祝节日的状态,这是 Facebook 非常注重的。

Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

△  Facebook Birthday Cam:录一段祝福视频,发在寿星的时间线上

用 Origami 做动态原型

Hoka:这个 app 的原型是怎么做的呢?

何如佳:我当时做的原型其实就是一段视频,原型主要是团队沟通用的,包括告诉工程师产品流程,还有组件长什么样子等等。设计师通过视频形式的原型进行沟通,是在 Facebook 比较常见的。

我当时用的是 Origami,是 Facebook 自己开发的原型制作工具。它最开始是基于苹果的开发者工具 Quartz Composer,但是他的作者 Brandon Walkin 针对设计师做了优化,就变成了一个独立的工具。这个工具还是非常强大的,涉及到很多动态交互元素的时候 Origami 尤其擅长,还可以放到手机上进行预览。

Riceman:你们公司有强推说所有设计师用某一个原型设计软件吗?还是大家可以自己选择喜欢的工具?

何如佳:还是根据需求,也看不同的团队。有的团队喜欢用 Origami,也有的喜欢用 Framer 或者 Principle。Origami 因为是自家产品,在 Facebook 普及度比较高,每次对新入职的设计师进行培训的时候,我们有 Origami 的专门课程。

Origami 的学习曲线比较陡峭,入门需要一定时间。因为它的使用流程有点反人类,是节点式的编辑模式,而设计很多时候是流程式的。所以 Origami 可能不适合制作有很多步骤、很多屏的原型,而是更适合没有很多屏,但每屏之内有比较丰富交互、动画的设计。

张挠挠:所以选择什么工具都是根据做原型的目的是什么。如果是展示很长的产品流程和概念,那可能用 InVision 这种就可以,但如果要展示有意思的动画和微交互,那 Origami 就很强大。

Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

△  Origami 软件

从网页设计三剑客开始的设计之路

Riceman:现在让我们把时间倒转很多年,聊一聊一开始你是怎么接触设计这个行业的,为什么对设计感兴趣的吧。

何如佳:小学的时候很喜欢玩电脑嘛,当时会去尝试各种各样的东西,比如 Flash。小学的时候有一些网页设计的课程,有 Frontpage、Dreamweaver,当时叫网页设计三剑客。中学的时候有机会给校刊做美术总监,对平面设计有了一些接触。后来把电脑软件和设计这两方面结合起来就找到了自己的兴趣点。

在本科期间也做了很多项目,有给学生会做一些平面设计;另外也参加了计算机应用与设计协会,还被选为这个协会的会长。当时做会长就有一些责任感,想让加入协会的小朋友们有事情做、真正学到东西,所以就发起了做手机 app 的项目。当时智能手机开始普及,安卓和 iPhone 慢慢开始流行起来,但是很多校园的基础设施和网络还没有针对智能手机进行优化,所以就想做一个服务学生的 app,叫颐和园路 5 号,名字也是我们学校的地址。这个 app 可以查询空教室去自习、查自己的课表、记作业的提交日期等等,都是学生经常用的功能,大家做起来也很有激情。产品上线之后也有一些投资人来联系我们,其实我们也有做创业公司,但因为毕业后团队成员有各自的安排和考虑,就没有再做下去,算是一个遗憾。

在腾讯、知乎和在 Facebook 工作有什么不同体会?

Riceman:你曾经在腾讯和知乎实习过。你觉得在硅谷和国内的互联网公司工作体会有什么不同?

何如佳:我觉得不同还是蛮大的。在设计上,国内的设计师可能更多偏向执行,在明确要做什么之后去把它实现;而美国这边对设计师的要求更有挑战性,在没有完全明确方向的时候,设计师要做一些探索,引导团队去找到方向。

当时我在腾讯做的是产品的实习。在产品上,国内和美国也有一些不同。比如腾讯当时有很多产品经理共同负责一块,而在美国一个产品可能只有一个主要的产品经理;而且国内很多产品经理需要画交互图,在美国比较大型的互联网公司,产品经理往往不直接参与设计。

设计 VR 视频播放器

Riceman:最后我们来聊一聊设计师都爱做的 side project 吧,我们看到你在做的是跟 VR 相关的,来给大家介绍一下吧。

何如佳:Moon Player 是一个在 VR 上的视频播放器,我的目标是想把它做得非常好用、精致。我个人对 VR 非常感兴趣,在 Facebook 我们也有更多的机会去接触 VR 的东西,包括试用 Oculus。这种沉浸式的体验很不一样,需要先把场景搭建提来,再看人怎么在其中进行交互,有点像实体的交互设计,不仅局限于屏幕。

VR 的设计和普通的 app 其实也有很多共通之处的,只要把整个体验做流畅,是不是使用 3D 元素其实没有那么重要。这个项目做得还是蛮快的,当时就花了一个多月的时间就把这个应用从无到有做出来了。如果有听众小伙伴有兴趣做小项目,欢迎和我联系,工程师、运营、产品、设计师等等都欢迎。

Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

△  Moon Player 下载页面

嘉宾联系方式

往期回顾:

  1. 《从GOOGLE到AIRBNB,这个萌妹子想让设计更有温度》
  2. 《专访丨不会做PPT的人机交互博士不是好用研》
  3. 《专访丨十年设计,不忘初心(三星北美设计经理穆怡雯)》
  4. 《专访丨从上海到硅谷的GOOGLE 交互设计师王斯捷》
  5. 《专访丨从迪士尼到纪念碑谷的中国设计师》
  6. 《FACEBOOK 设计师张宁夏:斯坦福大学的人机交互专业是怎样的?》

扫描二维码或微信内搜索「UXCoffee」,关注 UX Coffee 设计咖 微信公众账号:

Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

收藏 11
点赞 1

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。