8萬人滿分好評,Airbnb如何拿下Google年度設計獎?
8萬人滿分好評,Airbnb如何拿下Google年度設計獎?

想要說服成千上萬的人們允許陌生人住進自己家中,這可不是件容易的事,想要創造一個充滿活力的全球旅行者社區,就更加困難了。Airbnb在開始設計自己的程式時,就希望給使用者創造一個溫馨好客的環境,就像是見到一位親切的房主一樣。

透過使用Material Design,Airbnb以直截了當的方式進行溝通,創造出了一種清晰易懂的視覺語言,讓充滿多樣性的使用者群體都能普遍接受。 這種對話式界面為Airbnb贏得了超過8萬4千個五星級評價,以及2016 Material Design Focused Efficiency獎項。

統一各平臺UI

Airbnb的Android和iOS版客戶端統一使用底部導航欄,為不同的平台提供相同的舒適體驗。頻繁使用的功能,如「已保存的計畫」、「已完成的旅行」、「消息」等,將一直顯示在底部導航欄上。

Airbnb首先定義了一套核心特質,用以指導設計工作 。為了吸引來自不同地區和不同語言背景的旅行者和房東,App 必須讓人感覺是統一的、通用的、對話式的以及形象化的。這意味著基本任務的執行效率需要提升,還需要 確保每個設計元素都能融入系統全局之中 。

Airbnb在Android系統中,放棄了左側的導航欄,使用了iOS與Android通用的底部導航欄,從而更好地統一跨平台使用體驗。Airbnb首席設計師Karri Saarinen向我們解釋,這種轉變是如何強化公司願景:

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

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

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

圖/ ifanr

無論使用者身處何地,使用何種語言,簡潔的系統圖標、按鈕和配置都會給人帶來「好客而易用」的觀感。「我們很大程度上依賴著文字和排版。」Saarinen說。

設計團隊更傾向於通過文本和翻譯來促進房東和住客之間的溝通,而非完全依賴那些可能會引起歧義的圖標。使用者可使用27種語言來進行溝通,這使得對文字內容的強調將帶來清晰明確的使用體驗,在整個佈局使用不同的文字大小能夠幫助使用者快速的辨別內容的層級關係。而非襯線字體Circular的使用,則傳達出了一種友好而溫馨的氣氛。

「預訂」是Airbnb的主要功能之一。使用浮起的按鈕來進行這項操作,可在視覺上強調其重要性,也為整個佈局多了一份新的空間。

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

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

子母式界面切換(Parent-to-child navigational transition)
圖/ ifanr

Airbnb還利用了共享元素的UI切換,將圖片動畫化,並對使用者的關注焦點進行引導。

共享元素的 UI 切換(Shared element transition)
圖/ ifanr

在點擊後,照片會動畫化並放大,為每條列表錨定清晰的居住空間視圖。Saarinen將這種過程比作瀏覽精美的旅遊宣傳冊。

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

使用圖片創造獨特個性

由房東提供的照片是Airbnb體驗的關鍵組成部分 。無論是大沙漠中的鄉村小屋,還是城市裡的閣樓居所,豐富的圖片都會為使用者打開一扇通往目的地的窗戶。

圖片為先,意味著讓UI擁有鮮明而齊整的外觀,讓使用者可以輕鬆舒適地在不同的界面之間切換。

airbnb
透過對照片的強調和充分的留白,使用者可以更專注於關鍵資訊。

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

Airbnb擁有來自全球的忠實使用者,他們無不讚賞其簡潔和易用性。Airbnb擁有4.3星的評級,超過13萬8千條點評,曾被Google Play Store選為「編輯推薦」與「頂級開發者」APP,更榮獲2016 Material Design Focused Efficiency 獎項。

Airbnb的設計師們使用Material Design作為框架來清晰地表達自己的品牌特質,創造出了一個氛圍友好、功能專注的應用,贏得了全球各地旅行者和房東的廣泛贊譽。

本文授權轉載自:愛范兒

關鍵字: #UI/UX設計 #Airbnb
往下滑看下一篇文章
小店成團,地方開張!第4屆小店永豐計畫,看微型經濟如何自立利人
小店成團,地方開張!第4屆小店永豐計畫,看微型經濟如何自立利人

一間小店的行動,如何匯聚成改變地方的能量?由永豐金控支持、永豐基金會推動的第4屆「小店永豐故事展」,10月1日於台北華山1914文化創意產業園區中4B館登場,精選展出10家來自全台各地的在地實踐故事。現場由入選團隊高雄「台青蕉」香蕉創意工作坊旗下的台青蕉樂團,以活力充沛的不插電演出點燃氛圍。

「台青蕉樂團帶來充滿在地生命力的演出,熱鬧活潑的演唱,就像小店的鮮活生命力。」永豐基金會董事長陳思寬表示,「當有人看見、有人回應、有人加入,一間小店的行動,就會慢慢成為一群人的力量。」她也邀請民眾週末前往華山,「走走、看看、吃吃、買買,讓我們一起成為改變地方的力量。」

10家獲選小店,橫跨飲食、工藝與循環經濟

「小店永豐計畫」源自永豐金控深耕在地、關注不同群體獨特需求的理念,以經濟為樞紐轉動地方生活。計畫自2022年10月啟動,每年投入上千萬資源,支持兼具自立與利人精神的小店,足跡遍及臺灣本島與離島城鄉,逐漸在社會各角落帶來迴響。

今年成果發表以「成團,開張!」為題,10家獲選小店齊聚華山,把一路累積的方法與故事向更多人打開,呈現10個正在地方發生的行動。本屆小店的經營型態涵蓋飲食、文化、工藝、環境、循環經濟及社會參與,領域各異,共同之處在於讓原本停下來、散開來,或逐漸被遺忘的人事物重新產生關係:地方因此開始說話,文化開始流動,人重新聚在一起。

作為微型經濟主體,小店靈活發展出多元型態的交流體驗,從量到質,再走向有意識的串連協作,成為社區鄉里的韌性據點。從一間店到一個街區,再從街區擴展至鄉里,大企業觸及不到的人間煙火,就由小店帶來改變。

addLEss把舊衣送回市場、杉恆壹樹讓玫瑰進企業供應鏈

同樣從地方需求出發,兩家獲選小店各自找到不同的熱情領域。

身為母親,也愛買衣服,「addLEss循環時尚」創辦人黃瑾茹不捨衣物因孩子長大或喜新厭舊而閒置,以「讓舊衣重返市場、平價流通」為初衷創辦平台,投入後才發現營運遠比預期複雜。

在addLEss,二手衣須歷經「初篩、細篩、送洗、定價、上架、拍照、入庫」7道工序,並依品質細分為5級。目前平台每月處理的衣物,上架率僅約4成;其餘6成無法上架的衣物,則依特性捐贈社福機構,或轉製為再生衣架等環保商品。

「單純的二手衣買賣,我認為還不足以解決衣物浪費的問題,我想做的是盡可能讓所有衣服都進到循環。」黃瑾茹指出,二手衣產業的流程高度仰賴人工、產能有限,是營運最大的瓶頸,也是她參與「小店永豐計畫」的契機。

#2 永豐基金會
圖/ 永豐基金會

在永豐支持下,addLEss導入AI智慧倉儲、將超商物流納入衣循環生態系,預計處理量可提升至3倍。在參與計劃過程中,她印象深刻的是永豐評審曾說:「我覺得你是想要做一個生態系」,這句話說中她心中所想、令她倍感欣慰。隨著數位後台逐步完備,黃瑾茹期盼串連更多品牌與消費者投入減碳經濟,朝著「讓每件衣服都有去處」的目標邁進。

在高雄杉林,青農王宥勝則把家中原本打算收掉的休閒農場,轉型為有機食用玫瑰產地。

擁有20年餐飲資歷的他,起初將玫瑰製成花醬赴歐洲參賽,沒想到獲得不錯的成果,就此帶著家裡轉種玫瑰,將食用玫瑰嫁接於台灣原生薔薇,種植有機樹玫瑰。「我不想只是當一個年輕的勞動力,而是希望我的投入能為地方帶來新氣象。」王宥勝表示,盼藉由玫瑰提升地方認同感,因此他將大愛商業中心建置作為地方創生基地,讓在地人有地方可匯集、也讓外地人藉此認識杉林。

#1 永豐基金會
圖/ 永豐基金會

隨著產量暴增,玫瑰也成為連結社區長輩的紐帶。周邊客家、閩南與原住民社區的長輩會協助分選、撥花,動動手指、也聊聊天;再結合在地小農契作,產量從年產270公斤躍升至月產1,800公斤,所種植的玫瑰原料更進入知名企業供應鏈,玫瑰果醬與花茶亦獲iTQi星級肯定。

王宥勝坦言,第2屆曾報名未入選,本屆獲選後認為,除了有資金挹注,最大的支持是曝光。在永豐支持下,他將持續優化新設的青農共創基地;短期讓大家知道國產玫瑰可媲美進口玫瑰,長期則期待台灣成為玫瑰輸出國,「希望大家想到台灣有機玫瑰的時候,可以想到高雄杉林!」

小店持續發光,第5屆小店永豐計畫啟動徵選

除了成果發表,本屆「小店永豐故事展」同步於華山1914文化創意產業園區中4B館展出。作為永豐基金會每年匯集地方第一線觀察與土地故事的平台,今年透過10家獲選小店的實踐行動,向大眾展現地方正在萌芽的轉變。

10月3日至4日週末登場的「小店永豐市集」,更集結眾多小店設攤,讓民眾在走逛、品嚐與選購之間,近距離感受扎根在地的鮮活風土。

隨著第4屆圓滿落幕,第5屆「小店永豐計畫」也已正式展開徵選,持續尋找兼具自立與利他精神的在地經營者。永豐基金會將持續提供實質資金、陪伴資源與推廣舞台,支持更多以一間店回應地方需求的夥伴;當更多小店加入,原本散落各地的人事物得以重新連結,地方的未來,也有了繼續發生的可能。

第5屆小店永豐計劃徵選資訊請見官網 https://www.sinopacfoundation.org.tw/sinopac_found/public/event-method.html

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
一次搞懂工業AI
© 2026 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓