Airbnb的設計之道：明晰與優雅的設計語言

想要說服成千上萬的人們允許陌生人住進自己家中，這可不是件容易的事，想要創造一個充滿活力的全球旅行者社群，就更加困難了。Airbnb 在開始設計自己的應用時，就希望給使用者創造一個溫馨好客的環境，就像是見到一位和藹的房主一樣。通過使用 Material Design，Airbnb 以直截了當的方式進行溝通，創造出了一種清晰易懂的視覺語言，讓充滿多樣性的使用者群體都能普遍接受。這種對話式介面為 Airbnb 贏得了超過 8 萬 4 千個五星級評價，以及 2016 Material Design 聚焦高效獎項。

統一各平臺 UI

△ Android 和 iOS 系統統一使用底部導航欄，為不同的平臺提供相同的舒適體驗。頻繁使用的功能，如 “已儲存的專案” 、“已完成的旅行” 、“訊息” 等，將總是顯示在底部導航欄上。

Airbnb 首先定義了一套核心特質，用以指導設計工作。為了吸引來自不同地區和不同語言背景的旅行者和房東，應用必須讓人感覺是統一的、通用的、對話式的以及形象化的。這意味著，基本任務的執行效率需要提升，還需要確保每個設計元素都能融入系統全域性之中。Airbnb 在 Android 系統中，放棄了左側的導航欄，使用了 iOS 與 Android 通用的底部導航欄，從而更好地統一跨平臺使用體驗。Airbnb 首席設計師 Karri Saarinen 向我們解釋，這種轉變是如何強化公司的願景的：

“讓 Airbnb 在任何平臺上都具有鮮明識別特徵是至關重要的。在設計上，我們希望在跨平臺使用時能有歸屬感，並儘可能在導航、系統圖示、上下文操作和互動等重要元素上遵循各個平臺的慣例。” —— Airbnb 首席設計師 Karri Saarinen

用文字和動效讓溝通更清晰流暢

△ 在進行點選後，照片會動畫化並放大，讓客人在瀏覽時可以獲得更好的觀感。

無論使用者身處何地，使用何種語言，簡潔的系統圖示、按鈕和佈局都會給人帶來 “好客而易用” 的觀感。“我們應用很大程度上依賴著文字和排版。” Saarinen 說道。設計團隊更傾向於通過文字和翻譯來促進房東和住客之間的溝通，而非完全依賴那些可能會引起歧義的圖示。使用者可使用 27 種語言來進行溝通，這使得對文字內容的強調將帶來清晰明確的使用體驗，在整個佈局使用不同的文字大小能夠幫助使用者快速的辨別內容的層級關係。而非襯線字型 Circular 的使用，則傳達出了一種友好而溫馨的氣氛。

△  “預訂” 是 Airbnb 應用的主要功能之一。使用浮起的按鈕來進行這一操作，在視覺上強調了它的重要性，也為整個佈局增添了新的維度。

動效傳達了互動行為本身的調性，同時也是一種促進與使用者溝通、讓產品活躍的方式。通過在快速響應的提示中新增動效，可以強化主 - 客雙方的互動，同時為使用者提供視覺反饋以便於他們在搜尋中完成自己的目的。

△ 子母式介面切換（Parent-to-child navigational transition）

比如通過使用子母式介面切換，這種通過動效形象地傳達出從高層級到細節檢視的切換過程的模式，就能創造出更為連貫的使用者體驗。

△ 共享元素的 UI 切換（Shared element transition ）

Airbnb 還利用了共享元素的 UI 切換，將圖片動畫化，並對使用者的關注焦點進行引導。在進行點選後，照片會動畫化並放大，為每條列表錨定清晰的居住空間檢視。Saarinen 將這種過程比作瀏覽精美的旅遊宣傳冊。

“Material Design 的動效指南對我們來說極為重要，它可以幫助我們瞭解如何才能做出更優美準確的動效。 —— Airbnb 高階設計師兼動畫師 Salih Abdul-Karim

使用圖片創造獨特個性

△ 通過對照片的強調和充分的留白，人們可以更好地專注於關鍵資訊。

由房東提供的照片是 Airbnb 體驗的關鍵組成部分。無論是大沙漠中的鄉村小屋，還是城市裡的閣樓居所，豐富的圖片都會為使用者開啟一扇通往目的地的窗戶。圖片為先，意味著讓 UI 擁有鮮明而齊整的外觀，讓使用者可以輕鬆舒適地在不同的介面之間切換。

獨特的設計魅力使其屢獲殊榮

Airbnb 擁有來自全球的忠實使用者，他們無不讚賞這一應用的簡潔和易用特質。Airbnb 擁有 4.3 星的評級，超過 13 萬 8 千條點評，曾被 Google Play Store 選為 “編輯推薦” 與 “頂級開發者” 應用，更榮獲 2016 Material Design 聚焦高效獎項。Airbnb 的設計師們使用 Material Design 作為框架來清晰地表達自己的品牌特質，創造出了一個氛圍友好、功能專注的應用，贏得了全球各地旅行者和房東的廣泛讚譽。

想要打造像 Airbnb 般具有獨特設計魅力的應用，不妨點選 “閱讀原文” 再好好複習一下 Material Design 的使用方法，相信您也可以做到的！

推薦閱讀：

備受矚目的Instant App即將到來

領取《出海寶典》，邁出成功出海的第一步!

Developer Console改進功能，讓訂單管理更高效

與頂尖創業者學習如何在Google Play上取得成功