當扎克伯格是你的產品經理（何如佳 · Facebook 設計師）
《UX Coffee 設計咖》是一檔關於用戶體驗和產品設計的播客節目。你可以在 iTunes、網易雲音樂和喜馬拉雅FM 搜索「UX Coffee」訂閱收聽。
本期節目，我們請到了 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 的設計團隊結構
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 發起，在裡面大家分享、互評怎麼寫出好文章。這種分享有利於整個設計社群的發展，也能擴大我們公司的影響力，有利於我們招募優秀的人才。
在不同產品團隊的經歷讓我快速成長
Riceman：在加入 Facebook Messenger 之前，你做過哪些項目呢？
何如佳：我一開始做的是 Facebook Moments，國內的聽眾可能沒有聽過這個 app，我簡單介紹一下吧。Moments 這個產品的出發點在於，我們發現用戶拍的照片中的絕大部分，他們其實都不一定想要發到 Facebook 上，但是他們會想要分享給某一個小的朋友圈子，或者是他們的家人，或者是一個私密的小群體，Moments 就是抓住這個需求，把這種分享變得非常簡單。
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：所以最後是數據說了算。如果數據說，打破規範會有更好的用戶體驗，你們會照著數據去做，而不是盲目地遵從平台的設計規範。
當扎克伯格是你的產品經理……
Riceman：我們都知道 Facebook 設計師正式的職稱是「產品設計師」，但你們同時也有產品經理，你提到 Moments 有很多產品決定，產品設計師在產品決策中有多少話語權？
何如佳：其實 Moments 比較特殊，它是從編程馬拉鬆開始的，當時大老闆扎克伯格說要做這個項目，後來他都是有很大的參與度的，每次轉型都是他定的方向，所以組裡的設計師和產品經理的決定權會比較有限，確實會有一些壓力。不過一般的產品功能都是產品經理和設計師共同討論決定的，我們也會經常和工程師一起討論。
當時 Facebook 有一個叫 Creative Labs 的組織，做了一系列的獨立應用，包括 Paper、Slingshot，這些扎克伯格都挺關注的，Moments 是 Creative Labs 最後的一個嘗試。張撓撓：Creative Labs 有點類似大公司的小 startup，在這樣的團隊工作還有什麼挑戰？何如佳：挑戰真的蠻大的，Creative Labs 做了很多實驗性質的應用，沒有很多存活下來，Moments 是現在來看最成功的，可能也和 Facebook 文化有關係。做社交應用，主要是看在社交方面對用戶需求的挖掘。有時候 app 設計得太漂亮了，用戶反而可能有距離感，覺得不是給自己這樣的普通人用的。其他方面，我覺得挑戰是 「focus」，怎麼樣去集中資源做一件事。在大公司里很容易有很多資源，有時候反而不知道應該集中去做什麼事情。Startup 能成功往往是因為能 focus 在一件事上，對大公司來說，怎麼協調這個 focus 是一個很大的挑戰。
Creative Labs 的產品之一 Paper，於 2016 年 7 月下架
設計 Facebook 主 app 中的功能，和設計一個 Moments 這樣的獨立 app 有何不同？
Riceman：你後來做的兩個產品跟 Moments 很不一樣，分別叫 Slideshow 和 Quick Camera，它們的介面是在 Facebook 的主 app 上的，而不是 Moments 這樣的獨立應用。
何如佳：對，我後來在 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 Birthday Cam：錄一段祝福視頻，發在壽星的時間線上
用 Origami 做動態原型
Hoka：這個 app 的原型是怎麼做的呢？
何如佳：我當時做的原型其實就是一段視頻，原型主要是團隊溝通用的，包括告訴工程師產品流程，還有組件長什麼樣子等等。設計師通過視頻形式的原型進行溝通，是在 Facebook 比較常見的。
我當時用的是 Origami，是 Facebook 自己開發的原型製作工具。它最開始是基於蘋果的開發者工具 Quartz Composer，但是他的作者 Brandon Walkin 針對設計師做了優化，就變成了一個獨立的工具。這個工具還是非常強大的，涉及到很多動態交互元素的時候 Origami 尤其擅長，還可以放到手機上進行預覽。
Riceman：你們公司有強推說所有設計師用某一個原型設計軟體嗎？還是大家可以自己選擇喜歡的工具？
何如佳：還是根據需求，也看不同的團隊。有的團隊喜歡用 Origami，也有的喜歡用 Framer 或者 Principle。Origami 因為是自家產品，在 Facebook 普及度比較高，每次對新入職的設計師進行培訓的時候，我們有 Origami 的專門課程。
Origami 的學習曲線比較陡峭，入門需要一定時間。因為它的使用流程有點反人類，是節點式的編輯模式，而設計很多時候是流程式的。所以 Origami 可能不適合製作有很多步驟、很多屏的原型，而是更適合沒有很多屏，但每屏之內有比較豐富交互、動畫的設計。
張撓撓：所以選擇什麼工具都是根據做原型的目的是什麼。如果是展示很長的產品流程和概念，那可能用 InVision 這種就可以，但如果要展示有意思的動畫和微交互，那 Origami 就很強大。
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 元素其實沒有那麼重要。這個項目做得還是蠻快的，當時就花了一個多月的時間就把這個應用從無到有做出來了。如果有聽眾小夥伴有興趣做小項目，歡迎和我聯繫，工程師、運營、產品、設計師等等都歡迎。
嘉賓聯繫方式
rujiahe@gmail.com
何如佳的知乎：@Ruthia 何如佳
何如佳主辦的知乎 Live：談談在矽谷設計創新產品。
本文圖片來自何如佳本人和網路
本文編輯：@Hoka 、@Riceman 、@張撓撓
微信公眾號：uxcoffee | 每周一杯咖啡，聊聊用戶體驗
推薦閱讀：
※如何成為 Dribbble 的 Player ？
※做景觀設計師熬個5、6年就真的能賺錢嗎?
※2017 年創建網站的 11 個便利資源
※平面設計中，出血（bleed）為什麼這樣叫？最初是如何設定的名字？
※為什麼一些很厲害的設計師用 Photoshop 時都喜歡拉網狀輔助線？