設計師需要做夢的空間——關於 Facebook Home 產品設計的三件事

上週 Facebook Home 正式在美國 Google Play 開放下載,產品設計主管 Julie Zhuo 則在 Medium 發表了一篇文章 〈 Go Big by Going Home 〉,談她從 Facebook Home 開發過程學到的三件事。
評論
評論

上週 Facebook Home 正式在美國 Google Play 開放下載,產品設計主管 Julie Zhuo 則在 Medium 發表了一篇文章 〈 Go Big by Going Home 〉 1,談她從 Facebook Home 開發過程學到的三件事。(還不太認識 Julie Zhuo 的讀者,我們推薦她所寫的 〈 管理者宣言 〉 相當值得一讀。)

一個大型專案必須具備偉大的願景

Facebook Home 並不是我們看著手上既有的東西說:「嗯,我要如何讓它更進一步?」而是一個由 Mark 所推動,擁有強烈願景的專案:「盡可能讓人們取得想看的內容——關於自己身邊人們的訊息、通知和狀態更新等等。」這樣的願景最終成為「在螢幕鎖定畫面享有『動態訊息』的使用體驗」和「將螢幕鎖定畫面與主畫面合而為一」。

我可以很正經地告訴你:起初這兩個想法聽起來簡直瘋狂極了,非常、非常誇張的瘋狂。沒有哪個螢幕鎖定畫面跟主畫面是一樣的,因為他們各自具有不同的功能。鎖定畫面必須預防意外的觸控行為、顯示時間、讓你得以辨識出這是自己的手機、快速進入(螢幕鎖定前)正在使用的 app 並具備通知系統等等。而主畫面的功能則必須要能有效率地開啟我們想要的 app。我們很擔心胡亂把兩者結合的後果。例如,開啟 app 必須在「滑動螢幕」的動作之後,這也就表示按了 Home 鍵之後無法快速使用 app,這樣沒問題嗎?更不用說「動態訊息」成了你的鎖定螢幕畫面後,要怎麼把通知塞進去?如何讓動態訊息不打斷你去用 app?還要支援按讚、評論、繼續閱讀、展示照片和狀態、查看下一則訊息和點擊連結等功能,同時得避免因為誤觸而發出一堆奇奇怪怪的評論。

因為這是第一版的產品,我們無法面面俱到。10 個月之後,看著 Home 這個產品,我們發現前述的一些問題其解決方案看起來竟是如此顯而易見。我想這是個很好的徵兆。(我的第一個老闆曾經告訴我:「回顧起來,成功設計的徵兆看似明顯。但那些通常是最難想到的解決方案。」)這要歸功於四位了不起的設計師——Joey、Francis、Justin 和 Mac。然而正是 Mark 的願景奠下了基礎,推動團隊完成起初看似不可能的大膽任務。如果我說自己從未有一絲懷疑,那是在說謊,我的疑慮確實不小,畢竟 Mark 的願景不時令人覺得要求過高、對設計產生層層約束。

然而,同樣的,那也是願景之所以強而有力的象徵。

讓設計師有做夢的空間

告訴你們一個小秘密:這次發表的「Chat Heads」功能是源自 Joey 和 Brandon 的構想,而那是在 Facebook Home 專案開始之前就從別的專案中孕育出來了。沒人要求他們設計 Chat Heads,沒人走過去說:「嘿,麻煩把幾個設計概念組合一下,也許我們可以做出一個輕量化、簡易的行動版聊天介面。」沒人對他們開出規格或是指導他們該怎麼做,沒有。Chat Heads 的點子之所以產生是因為他們發現了一個問題——在手機上聊天實在太困難了——而他們有空間、有時間自由地去解決那個問題。當他們還在各自專案的早期階段時,這個環境就一直鼓勵他們去探索各種模糊不明、天馬行空的瘋狂點子。設計師如果能有空間自由地去探索、去夢想,對於提昇設計理念是不可或缺的。當你總是按照以週為單位在執行專案開發的時候,很可能你會取得一些不錯的成果,但真正突破性的新概念通常不會在這樣的環境下破繭而出。關於設計上的執行與最佳化策略,需要的是時間和空間來醞釀更有創造力、更大格局的解決方案。

設計 Facebook Home 這樣的東西不能用 Photoshop

我先前在 〈 How to Survive in Design (and in a Zombie Apocalypse) 〉 這篇文章提過這點,但 Facebook Home 所需的設計工具能力得在 Photoshop 之上。我們怎能光是看那些靜止的模擬畫面去討論能夠在螢幕上拖來拖去、基於物理學的 UI 和訊息框呢?(提示:我們不行)Facebook 設計團隊充斥著 Quartz Composer 使用狂早已不是秘密,QC 是一套視覺原型工具,用於製作高度擬真、接近產品最終模樣的 demo(由 Mike Matas 在幾年前介紹給大家,Mike 是一名傳奇設計師,曾參與初代 iPhone 與 iPad 的介面設計)。QC 改變了我們在 Facebook 設計產品的方式。QC 不只讓我們(設計團隊)跟工程團隊合作更容易,談起設計理念也更加清晰有效。當你看到一個會動、幾經打磨而且能與之互動的 demo,便能在瞬間明白它的運作概念和使用感受,那是一大串文字敘述或 wireframe 永遠難以企及的效果。這種作法能在過程中獲得更佳的回響、做出更好的修改,最終設計出更佳的產品。當妳努力打造一個互動性式如此重要、充滿豐富的手勢和物理性 UI 的產品,例如 Facebook Home,前面提到的要素是缺一不可。

facebook_chat_heads

(編按:我們可以發現,Facebook Home 產品頁面 上的展示都是模擬各種功能真實的運作情形搭配實際影片,這絕對比靜態的圖像和文字說明要有用得多。隨著網頁技術的進步,這樣的作法在各種高品質的產品網頁上更是越來越常見。)

最後 Julie Zhuo 強調,Facebook Home 之所以能成形當然遠不僅是設計而已,還需要強大的工程、領導、研究、夥伴關係和行銷之間的合作,只不過這是篇關於設計的文章,所以 higlight 出設計的部分。她還說,在大公司裡工作的員工往往被融合成一個沒有各自形象的企業體,然而,任何產品的中心都是人,他們貢獻了自己的心血。於是 Julie 個別感謝了幾位設計師:Francis Luu、Justin Stahl 和 Mac Tyler,還有 Facebook Home 的體驗網頁設計者 Skyler Vander Molen。

此外,Julie 這篇文章的標題 〈 Go big by Going Home(做大就從回家做起,「家」指的自然是 Facebook「Home」)〉 也有一點雙關語的成份在,推測應是改自 Facebook 辦公室裡掛的標語「Go big or go home(要嘛做大,要嘛回家吃自己)」。


精選熱門好工作

平台營運專員

樂購蝦皮股份有限公司
臺北市.台灣

獎勵 NT$15,000

後端工程師 (Back-End Developer)

FunNow
臺北市.台灣

獎勵 NT$15,000

iOS工程師

Omlet Arcade 美商歐姆雷特
臺北市.台灣

獎勵 NT$15,000

評論