Facebook 方法論：如何培養設計視野

摘要： 簡評：Facebook 產品設計師介紹自己的方法論，通過拆解其他 App，來深入思考產品設計。 本文作者：Kathleen Warner，Facebook 產品設計。以下「我」代表 Kathleen Warner。 當我最...

本文作者：Kathleen Warner，Facebook 產品設計。以下「我」代表 Kathleen Warner。

當我最開始做設計的時候，我很蒙。我痴迷於複製 Dribble 熱門的作品但是卻不在意這些作品背後的設計邏輯。但隨著設計經驗的積累，我漸漸能看到那些隱藏很深的陰影，那些看似無用的線條，以及要如此設計的因果。今天我就和大家分享一下，我的方法論。

不要只使用 App，你要研究它們

你要思考如果你是 App 的設計者，為什麼這裡要如此設計。現在開啟你經常使用的 App，別隨意滑動，剋制著玩它的衝動，仔細觀察這個 App 的頁面，以下是你要關注的點：

1. 層次結構：App 如何設計，引導你的關注？哪些資訊是突出顯示的？文字、顏色如何處理來凸顯某些元素的重要性？

2. 內容：App 為了達成某種體驗和感官設計了什麼樣的文案？什麼內容是可見的、有趣的？什麼內容不能直接可見需要點選跳轉？如何使用間距和模組來劃分區域？

3. 意圖：為什麼有人會開啟這個 App？它解決了什麼問題？如何設計，來更好地解決問題？

4. 使用者：誰是它的受眾？使用者之間使用場景有什麼不同？如何針對不同場景來做設計？

拆解 App

在下面的 Gif 中（園長：檔案較大但等待是值得的），我拆解了 App，以更直觀和方便的形式展示每個元件。你可能會發現之前使用 App 時沒有注意到的細節。請保持好奇，時刻反思，為什麼這個產品要這麼設計？為什麼這裡要放圖片？為什麼搜尋欄放在這裡等問題。

Airbnb

上面這張 Airbnb 圖中，可以思考一下：

• 在最頂端搜尋欄中，提示的文字為什麼不是「請在這裡搜尋」而是「試試'倫敦'」？
• 為什麼在首頁無法看到日曆？通過旅行時間來選擇出行酒店，這是正常邏輯。但 Airbnb 是先選擇位置再看時間，是什麼資料支援了這種邏輯？

Twitter

觀察：

• 要注意轉發（Retweets）和喜歡（Likes）的數字是加粗的
• 為什麼在個人主頁是具體的時間（3/9/18,3:37 PM）？在 Twitter App 首頁的 feed 流是其他的形式時間（3 h）。想一想這個細節有什麼不同？
• 為什麼發表回覆的時候不是「Add Tweet」而是「Add another Tweet」？（中文版直接是「發表回覆」）

Spotify

觀察：

• Spotify 如何保持歌曲的視覺化？
• 在歌曲下面展示的資訊是什麼？
• 為什麼播放列表 New Music Friday 能看到關注者數量，而播放列表 Release Radar 則沒有？

深入瞭解，你才能獲取設計思維

下次在排隊或者等朋友的時候，開啟一個 App，並且以設計師的視野和思維方式來思考一下，為什麼如此設計？通過定期分析其他 App，你也將慢慢獲取產品思維，設計視野。