2017-3-21 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
本期我們請到了 Facebook 設(shè)計師 何如佳。她曾任 Facebook 視頻、照片創(chuàng)作和編輯領(lǐng)域的主設(shè)計師、Facebook 前沿科技研究團隊 Building 8 早期成員，主導(dǎo)交互設(shè)計，設(shè)計了擁有全球數(shù)千萬活躍用戶的 Facebook 獨立照片分享應(yīng)用 Moments，現(xiàn)在為 Facebook Messenger 設(shè)計。
我們聊了聊：
Riceman： 歡迎 @Ruthia 何如佳 來到 UX Coffee。能和我們介紹一下自己嗎？
何如佳：大家好，我叫何如佳，現(xiàn)在在 Facebook 做產(chǎn)品設(shè)計師。我是 14 年加入，已經(jīng)在 Facebook 工作了兩年多。
Riceman：能和大家介紹一下 Facebook 大致的產(chǎn)品線和團隊構(gòu)成嗎？
何如佳：Facebook 的主要產(chǎn)品比較集中，最重要的幾個產(chǎn)品是：Facebook、Instagram、WhatsApp，還有 Oculus。Facebook 的設(shè)計團隊分成三個部分：Core app（核心應(yīng)用），Growth（增長）和 Business（商業(yè)）。我剛加入的時候，公司大約有不到 200 個設(shè)計師，兩年多我們的設(shè)計團隊翻了一番。
Facebook 是一家產(chǎn)品驅(qū)動的公司，所以我們的設(shè)計團隊和產(chǎn)品團隊處于一種「你中有我，我中有你」的關(guān)系中。每個設(shè)計師屬于自己所在的產(chǎn)品團隊，方便和自己產(chǎn)品的團隊成員交流，但我們也屬于自己的設(shè)計團隊，和別的產(chǎn)品的設(shè)計師做溝通，進行 design critique（設(shè)計互評）等等。
何如佳：我剛到公司的時候，每個月都有一次設(shè)計師全員大會。每次有一個小組展示他們最近的設(shè)計，這樣有助于全公司設(shè)計師互相了解大家都在做什么。公司鼓勵大家在設(shè)計還在早期的時候就向大家展示，獲得一些早期設(shè)計大方向上的建議。根據(jù)展示的設(shè)計所處的產(chǎn)品周期不同，大家也會針對性地給不同的建議。一些設(shè)計細(xì)節(jié)上的建議，大家一般會在自己所在的小組的會議中去提出。
張撓撓：你覺得要做好一個 design critique，設(shè)計師應(yīng)該要做好什么準(zhǔn)備？
何如佳：我覺得最重要的一點是設(shè)計師要帶著明確的目的走進一次 design critique 的會議。比如，是想要視覺設(shè)計上的、交互流程上的、還是產(chǎn)品方向上的，或者是針對界面中的某個按鈕文字的建議？做展示的設(shè)計師需要主動明確地說清楚你的目的，這樣有利于獲得有針對性、建設(shè)性的反饋。
Facebook 的設(shè)計師 Tanner Christensen 在 Medium 上寫過一篇文章《Peek Inside a Facebook Design Critique》，還原了真實發(fā)生在 Facebook 的一次 design critique，很有意思，我覺得很值得大家參考。
Hoka：Facebook 設(shè)計團隊非常樂于分享，經(jīng)常把產(chǎn)品的設(shè)計過程、反思、總結(jié)、設(shè)計素材和源文件都分享到網(wǎng)上。你們應(yīng)該是最早一批做這件事的硅谷大公司，現(xiàn)在看來應(yīng)該是帶起了一股潮流，很多公司的設(shè)計團隊也慢慢開始對外做分享。你怎么看 Facebook 的這種開放的設(shè)計文化呢？
何如佳：我們是社交公司嘛，天生自帶分享社交屬性。我們公司非常鼓勵員工做分享，內(nèi)部我們甚至還有寫作討論組叫 Writing for Facebook Design，由 Julie Zhuo 發(fā)起，在里面大家分享、互評怎么寫出好文章。這種分享有利于整個設(shè)計社群的發(fā)展，也能擴大我們公司的影響力，有利于我們招募優(yōu)秀的人才。
△ Facebook 設(shè)計官方網(wǎng)站（facebook.design）
Riceman：你們有 400 多人的設(shè)計團隊，你們是如何管理設(shè)計規(guī)范，保持產(chǎn)品間的設(shè)計一致性的呢？
何如佳：我之前提到了幾個大設(shè)計團隊，他們各自都有專門的設(shè)計師來制定和管理設(shè)計樣式的規(guī)范。如果你設(shè)計的產(chǎn)品需要用到新的樣式，就要和這些組的設(shè)計師打交道，審核通過后才能在產(chǎn)品中使用。
但也不是所有產(chǎn)品組都有設(shè)計規(guī)范，像我現(xiàn)在在 Facebook Messenger，我們組設(shè)計團隊的規(guī)模還比較小，就不需要有專門的團隊來做設(shè)計規(guī)范，設(shè)計的一致性主要依賴設(shè)計師之間的溝通。
Riceman：在加入 Facebook Messenger 之前，你做過哪些項目呢？
何如佳：我一開始做的是 Facebook Moments，國內(nèi)的聽眾可能沒有聽過這個 app，我簡單介紹一下吧。Moments 這個產(chǎn)品的出發(fā)點在于，我們發(fā)現(xiàn)用戶拍的照片中的絕大部分，他們其實都不一定想要發(fā)到 Facebook 上，但是他們會想要分享給某一個小的朋友圈子，或者是他們的家人，或者是一個私密的小群體，Moments 就是抓住這個需求，把這種分享變得非常簡單。
△ Facebook Moments 安卓應(yīng)用會在每次拍照后識別用戶照片里的好友，建議用戶把照片分享給他們
Moments 之后，我還做過 Facebook 主 app 中的相機和視頻功能。之后去到了 Facebook Building 8（一個研究導(dǎo)向的前沿創(chuàng)新團隊），然后現(xiàn)在到了 Messenger。
Hoka：做 Facebook 主 app 中的相機或者某個視頻的功能，和設(shè)計 Moments 這樣的獨立 app，你有什么不同的體會嗎？
何如佳：我覺得很不一樣。Moments 整個團隊算上產(chǎn)品、工程師、測試等等才不到 20 個人，我們的開發(fā)速度很快。但我在做 Facebook 主 app 的一些功能的時候進展就會慢很多，因為那些設(shè)計往往需要跨團隊、跨工種、甚至是跨公司的合作。
經(jīng)歷這樣不同的團隊對我來說也是不斷成長的過程。我一開始進公司的時候更像是一個「支持型」的設(shè)計師，一個人埋頭苦干，通過把自己負(fù)責(zé)的部分做好為產(chǎn)品做貢獻(xiàn)。慢慢地就會希望自己的設(shè)計對產(chǎn)品產(chǎn)生更大的影響，這樣就需要和更多人溝通，而不只是自己一個人埋頭做。
何如佳：我在 Moments 團隊中主要負(fù)責(zé)的是安卓平臺的設(shè)計。當(dāng)時比較有意思的是，整個公司其實做安卓平臺的設(shè)計師非常少，大概只有 3 個。
我加入的時候這個產(chǎn)品已經(jīng)開始做了一段時間了，但正在經(jīng)歷一個比較大的產(chǎn)品方向上的轉(zhuǎn)型，基本上把之前的設(shè)計推倒重來，所以我參與到了很多產(chǎn)品的討論當(dāng)中。整個設(shè)計過程是一個團隊合作的過程，并不是流水作業(yè)。每周我要和產(chǎn)品經(jīng)理做很多溝通，列出所有的功能需求，然后商量制定優(yōu)先級。
另外一個有意思的地方就是，當(dāng)時我們的產(chǎn)品還沒有發(fā)布，所以我們會請一些用戶來公司，把他們關(guān)到「小黑屋」里面來做用戶測試和訪談（和犯人審問一樣，屋子里的墻其實從另一個房間看是玻璃）。一個比較棘手的問題是，因為我們公司在硅谷，在公司周圍找的用戶可能都從事互聯(lián)網(wǎng)行業(yè)，和這個世界上絕大部分地方的用戶都不一樣，所以我們要很小心地排除掉硅谷的工程師和設(shè)計師，來獲取比較有代表性的樣本。我們甚至還跑到美國德州，去找當(dāng)?shù)氐拇髮W(xué)生來做測試，去得到更全面的結(jié)果。
Hoka：安卓的設(shè)計規(guī)范很強勢，iOS 的設(shè)計語言相對更開放，你們?yōu)榘沧窟M行設(shè)計時，是遵從安卓的設(shè)計規(guī)范，還是保留 iOS 上的一些風(fēng)格，這一點你們是怎么權(quán)衡的呢？
何如佳：這是設(shè)計界一直在討論的問題。其實現(xiàn)在兩個平臺有逐漸融合的趨勢，可能逐漸地大家總結(jié)出了一些好用的、通用的元素和組件。但我覺得還是有必要去讀一下兩個平臺的設(shè)計文檔。現(xiàn)在美國本土比較注重 iOS 設(shè)計，因為占有率相對有優(yōu)勢，但在全球范圍內(nèi)，尤其在國內(nèi)，可能還是安卓比較占優(yōu)勢。比如 Moments 安卓版本的用戶數(shù)是 iOS 版的很多倍，所以安卓也是一個比較重要的平臺。
Riceman：像 Facebook 這樣的公司，會不會有時候不遵守安卓或 iOS 的規(guī)范，可能會有更好的結(jié)果，或者是出于自己品牌、形象的考慮，想去創(chuàng)造一些東西，打破平臺規(guī)范？
何如佳：有可能，比如 Reactions，現(xiàn)在在 Facebook 上，你不止可以點贊，還可以發(fā)愛心、發(fā)各種表情，這是一個新的交互元素。我對他們的設(shè)計過程有一些了解，他們也有很多迭代版本，有一些其實是傳統(tǒng)的、符合規(guī)范的，最后選擇這個非傳統(tǒng)的版本也是經(jīng)過用戶研究、各種數(shù)據(jù)驗證的。其實設(shè)計師在這方面決策的權(quán)力沒有那么大，因為 Facebook 是一個數(shù)據(jù)驅(qū)動的公司，有時候也不是刻意打破規(guī)范，而是要看用戶更喜歡什么，要從數(shù)據(jù)看哪個版本對整個體驗最有幫助。
Riceman：所以最后是數(shù)據(jù)說了算。如果數(shù)據(jù)說，打破規(guī)范會有更好的用戶體驗，你們會照著數(shù)據(jù)去做，而不是盲目地遵從平臺的設(shè)計規(guī)范。
△ 扎克伯格在 Facebook 上介紹 Reactions 功能，用戶除了點贊，還能發(fā)愛心、笑臉、哭臉等表情
Riceman：我們都知道 Facebook 設(shè)計師正式的職稱是「產(chǎn)品設(shè)計師」，但你們同時也有產(chǎn)品經(jīng)理，你提到 Moments 有很多產(chǎn)品決定，產(chǎn)品設(shè)計師在產(chǎn)品決策中有多少話語權(quán)？
何如佳：其實 Moments 比較特殊，它是從編程馬拉松開始的，當(dāng)時大老板扎克伯格說要做這個項目，后來他都是有很大的參與度的，每次轉(zhuǎn)型都是他定的方向，所以組里的設(shè)計師和產(chǎn)品經(jīng)理的決定權(quán)會比較有限，確實會有一些壓力。不過一般的產(chǎn)品功能都是產(chǎn)品經(jīng)理和設(shè)計師共同討論決定的，我們也會經(jīng)常和工程師一起討論。
當(dāng)時 Facebook 有一個叫 Creative Labs 的組織，做了一系列的獨立應(yīng)用，包括 Paper、Slingshot，這些扎克伯格都挺關(guān)注的，Moments 是 Creative Labs 最后的一個嘗試。
張撓撓：Creative Labs 有點類似大公司的小 startup，在這樣的團隊工作還有什么挑戰(zhàn)？
何如佳：挑戰(zhàn)真的蠻大的，Creative Labs 做了很多實驗性質(zhì)的應(yīng)用，沒有很多存活下來，Moments 是現(xiàn)在來看最成功的，可能也和 Facebook 文化有關(guān)系。做社交應(yīng)用，主要是看在社交方面對用戶需求的挖掘。有時候 app 設(shè)計得太漂亮了，用戶反而可能有距離感，覺得不是給自己這樣的普通人用的。其他方面，我覺得挑戰(zhàn)是 「focus」，怎么樣去集中資源做一件事。在大公司里很容易有很多資源，有時候反而不知道應(yīng)該集中去做什么事情。Startup 能成功往往是因為能 focus 在一件事上，對大公司來說，怎么協(xié)調(diào)這個 focus 是一個很大的挑戰(zhàn)。
△ Creative Labs 的產(chǎn)品之一 Paper，于 2016 年 7 月下架
Riceman：你后來做的兩個產(chǎn)品跟 Moments 很不一樣，分別叫 Slideshow 和 Quick Camera，它們的接口是在 Facebook 的主 app 上的，而不是 Moments 這樣的獨立應(yīng)用。
何如佳：對，我后來在 Facebook 做的是分享這一塊的設(shè)計，比如怎么去發(fā)狀態(tài)，怎么發(fā)照片、視頻。 Slideshow 可以把你的照片做成視頻，配上一些音樂、動畫，靈感來自于很多用戶手機里的照片不是每一張單獨看上去都很精美，但他們也想分享出去作為生活的片段，或者去講是一個故事，比如我去登山，想分享這次登山的很多照片，就可以把這些照片整合成一個視頻。
△ Facebook Slideshow：把幾張照片做成一個幻燈片短視頻
這個功能其實不是特別復(fù)雜，但因為是做在主 app 上，所以花了很長時間。 Moments 設(shè)計開發(fā)整個應(yīng)用做了 6、7個月，只是 Slideshow 這個功能卻做了半年多（不過我同時也在負(fù)責(zé)其他 2 個項目）。一個原因是主 app 的層級溝通會很多，我們內(nèi)部有 FIG （Facebook Interface Guideline）這個組，設(shè)計 Moments 時，我不需要請他們審核，但我做 Slideshow 的時候就需要跟他們溝通。而且 Slideshow 這個功能里結(jié)合了很多元素，包括音樂、視頻、，所以我也要跟其他團隊合作，比如音樂設(shè)計師，還有一個視頻制作的 agency。為了這一個項目，我其實前前后后和 3 個 agency 合作。
Riceman：你和聲音設(shè)計師是怎么合作的，你之前有這方面的背景知識嗎？
何如佳：我們的聲音設(shè)計師都非常有經(jīng)驗，有一個專門的團隊做聲音設(shè)計，團隊的負(fù)責(zé)人 Will Littlejohn 之前做過 Guitar Hero，他非常有經(jīng)驗。只要跟他說需求，他就會提供一個比較滿意的版本，我只需要提一些建議。
Riceman：Facebook 有很多小的聲效，非常動聽，有時候我就為了聽這個聲音也愿意發(fā)一個表情。
何如佳：我們對設(shè)計細(xì)節(jié)要求很高，對聲效也是如此。Slideshow 里有非常多的音樂可以使用，都是 Facebook 聲音設(shè)計團隊和專業(yè)的音樂家一起創(chuàng)作的原創(chuàng)音樂。
Hoka：你還做過一個產(chǎn)品叫 Birthday Cam，一般有朋友過生日的時候大家就簡單發(fā)一句「生日快樂」，甚至是「生快」，但有了這個產(chǎn)品，當(dāng)你進入壽星的個人主頁，給他留言的時候，可以選擇給他錄一段 15 秒以內(nèi)的生日視頻，會讓整個社區(qū)的氣氛更活躍。你們是怎么想到做這個功能的？
何如佳：現(xiàn)在很多人覺得在 Facebook 上發(fā)生日留言不夠有誠意，慢慢很多人就只到 Messenger 上發(fā)生日祝福，我們就想怎么樣讓慶祝生日更特別一點，于是就有了 Birthday Cam 這個產(chǎn)品。現(xiàn)在你生日會收到一個 Facebook 生日視頻，視頻里有朋友給你錄的視頻。這個體驗結(jié)合了 Facebook 的特色，讓這個體驗更有新意，實際上我們也發(fā)現(xiàn)這樣的視頻狀態(tài)往往會有更高的參與度和反饋。
我們有一個團隊專門衡量大家對 Facebook 品牌的好感度，他們會在生日、節(jié)日的時候問候大家，鼓勵大家分享一些慶祝節(jié)日的狀態(tài)，這是 Facebook 非常注重的。
△ Facebook Birthday Cam：錄一段祝福視頻，發(fā)在壽星的時間線上
Hoka：這個 app 的原型是怎么做的呢？
何如佳：我當(dāng)時做的原型其實就是一段視頻，原型主要是團隊溝通用的，包括告訴工程師產(chǎn)品流程，還有組件長什么樣子等等。設(shè)計師通過視頻形式的原型進行溝通，是在 Facebook 比較常見的。
我當(dāng)時用的是 Origami，是 Facebook 自己開發(fā)的原型制作工具。它最開始是基于蘋果的開發(fā)者工具 Quartz Composer，但是他的作者 Brandon Walkin 針對設(shè)計師做了優(yōu)化，就變成了一個獨立的工具。這個工具還是非常強大的，涉及到很多動態(tài)交互元素的時候 Origami 尤其擅長，還可以放到手機上進行預(yù)覽。
Riceman：你們公司有強推說所有設(shè)計師用某一個原型設(shè)計軟件嗎？還是大家可以自己選擇喜歡的工具？
何如佳：還是根據(jù)需求，也看不同的團隊。有的團隊喜歡用 Origami，也有的喜歡用 Framer 或者 Principle。Origami 因為是自家產(chǎn)品，在 Facebook 普及度比較高，每次對新入職的設(shè)計師進行培訓(xùn)的時候，我們有 Origami 的專門課程。
Origami 的學(xué)習(xí)曲線比較陡峭，入門需要一定時間。因為它的使用流程有點反人類，是節(jié)點式的編輯模式，而設(shè)計很多時候是流程式的。所以 Origami 可能不適合制作有很多步驟、很多屏的原型，而是更適合沒有很多屏，但每屏之內(nèi)有比較豐富交互、動畫的設(shè)計。
張撓撓：所以選擇什么工具都是根據(jù)做原型的目的是什么。如果是展示很長的產(chǎn)品流程和概念，那可能用 InVision 這種就可以，但如果要展示有意思的動畫和微交互，那 Origami 就很強大。
△ Origami 軟件
Riceman：現(xiàn)在讓我們把時間倒轉(zhuǎn)很多年，聊一聊一開始你是怎么接觸設(shè)計這個行業(yè)的，為什么對設(shè)計感興趣的吧。
何如佳：小學(xué)的時候很喜歡玩電腦嘛，當(dāng)時會去嘗試各種各樣的東西，比如 Flash。小學(xué)的時候有一些網(wǎng)頁設(shè)計的課程，有 Frontpage、Dreamweaver，當(dāng)時叫網(wǎng)頁設(shè)計三劍客。中學(xué)的時候有機會給?？雒佬g(shù)總監(jiān)，對平面設(shè)計有了一些接觸。后來把電腦軟件和設(shè)計這兩方面結(jié)合起來就找到了自己的興趣點。
在本科期間也做了很多項目，有給學(xué)生會做一些平面設(shè)計；另外也參加了計算機應(yīng)用與設(shè)計協(xié)會，還被選為這個協(xié)會的會長。當(dāng)時做會長就有一些責(zé)任感，想讓加入?yún)f(xié)會的小朋友們有事情做、真正學(xué)到東西，所以就發(fā)起了做手機 app 的項目。當(dāng)時智能手機開始普及，安卓和 iPhone 慢慢開始流行起來，但是很多校園的基礎(chǔ)設(shè)施和網(wǎng)絡(luò)還沒有針對智能手機進行優(yōu)化，所以就想做一個服務(wù)學(xué)生的 app，叫頤和園路 5 號，名字也是我們學(xué)校的地址。這個 app 可以查詢空教室去自習(xí)、查自己的課表、記作業(yè)的提交日期等等，都是學(xué)生經(jīng)常用的功能，大家做起來也很有激情。產(chǎn)品上線之后也有一些投資人來聯(lián)系我們，其實我們也有做創(chuàng)業(yè)公司，但因為畢業(yè)后團隊成員有各自的安排和考慮，就沒有再做下去，算是一個遺憾。
Riceman：你曾經(jīng)在騰訊和知乎實習(xí)過。你覺得在硅谷和國內(nèi)的互聯(lián)網(wǎng)公司工作體會有什么不同？
何如佳：我覺得不同還是蠻大的。在設(shè)計上，國內(nèi)的設(shè)計師可能更多偏向執(zhí)行，在明確要做什么之后去把它實現(xiàn)；而美國這邊對設(shè)計師的要求更有挑戰(zhàn)性，在沒有完全明確方向的時候，設(shè)計師要做一些探索，引導(dǎo)團隊去找到方向。
當(dāng)時我在騰訊做的是產(chǎn)品的實習(xí)。在產(chǎn)品上，國內(nèi)和美國也有一些不同。比如騰訊當(dāng)時有很多產(chǎn)品經(jīng)理共同負(fù)責(zé)一塊，而在美國一個產(chǎn)品可能只有一個主要的產(chǎn)品經(jīng)理；而且國內(nèi)很多產(chǎn)品經(jīng)理需要畫交互圖，在美國比較大型的互聯(lián)網(wǎng)公司，產(chǎn)品經(jīng)理往往不直接參與設(shè)計。
Riceman：最后我們來聊一聊設(shè)計師都愛做的 side project 吧，我們看到你在做的是跟 VR 相關(guān)的，來給大家介紹一下吧。
何如佳：Moon Player 是一個在 VR 上的視頻播放器，我的目標(biāo)是想把它做得非常好用、精致。我個人對 VR 非常感興趣，在 Facebook 我們也有更多的機會去接觸 VR 的東西，包括試用 Oculus。這種沉浸式的體驗很不一樣，需要先把場景搭建提來，再看人怎么在其中進行交互，有點像實體的交互設(shè)計，不僅局限于屏幕。
VR 的設(shè)計和普通的 app 其實也有很多共通之處的，只要把整個體驗做流暢，是不是使用 3D 元素其實沒有那么重要。這個項目做得還是蠻快的，當(dāng)時就花了一個多月的時間就把這個應(yīng)用從無到有做出來了。如果有聽眾小伙伴有興趣做小項目，歡迎和我聯(lián)系，工程師、運營、產(chǎn)品、設(shè)計師等等都?xì)g迎。
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.bouu.cn