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
往下滑看下一篇文章
從第一天就走向全球!MOOIMOM、大研生醫、特力集團借力亞馬遜出海,以創新、信任打造品牌護城河
從第一天就走向全球!MOOIMOM、大研生醫、特力集團借力亞馬遜出海,以創新、信任打造品牌護城河

在全球「消費升級」的時代,現今消費者要找的,不是最便宜、CP 值最高的產品,而是更安全、更值得信任、更符合需求的商品。在此趨勢下,台灣品牌的優勢反而被放大。

事實上,憑藉著深厚的製造底蘊、對品質的堅持,許多來自台灣的品牌,正透過精準的「價值創新」研發,以及「安全信任」的品牌經營,在亞馬遜上,擄獲各國消費者的青睞。

拒絕等待完美,MOOIMOM 透過出海、迭代快速進化

新創母嬰品牌 MOOIMOM 自 2016 年創立起,便瞄準全球市場,MOOIMOM 創辦人周靖棠指出,近年來,台灣新生兒人數持續下滑,若一開始就只做台灣市場,花去的時間、開發成本都無法撐起未來的成長性,「所以我們第一天就決定『Go Gloabl』,這對新創非常重要。」

AWS-2.png
新創品牌MOOIMOM瞄準母嬰市場,有鑒於台灣新生人口持續負成長,從2016年創立的第一天,創辦人周靖棠就決定Go Gloabl,決心用優質產品,挑戰更大的市場。
圖/ MOOIMOM

MOOIMOM 是從印尼市場起家,再逐步拓展回台灣,但周靖棠隨即又意識到,若「Go Global」僅在東南亞、台灣,仍然有侷限,於是 MOOIMOM 決定加入亞馬遜,跨出亞洲、進軍澳洲等市場,「MOOIMOM 需要一個已經有高信賴度、強大物流、精準數據的夥伴,協助我們降低跨足北美、澳洲等市場的門檻。」

AWS-3
MOOIMOM創辦人周靖棠、共同創辦人李沆澎及團隊,透過運用亞馬遜數據與工具,以最真實的消費者反饋,反覆打磨產品。
圖/ MOOIMOM

為了找到市場缺口、實踐價值創新,MOOIMOM 積極運用亞馬遜上的數據與賣家工具。相較於其他品牌可能會注意自家產品有多少五顆星的評價,周靖棠尤其重視「四顆星」的留言,「因為那往往是能不能從『好』做到『更好』的關鍵。」以 MOOIMOM 的「涼感產後束腹帶」為例,團隊透過評論,發現邊緣縫線會造成皮膚的些微摩擦,加上產婦穿不住悶熱的材質,於是,MOOIMOM 花了近兩年時間,參考亞馬遜後台數據,包括消費者留言、競品的包裝顏色、排名落差等資訊,將產品從 1.0 迭代至 3.0 版本,不僅改採涼感透氣材質,更做到無縫線的舒適感。周靖棠透露,1.0 版的束腹帶,原先一週賣不到 1000 美元,但發展至 3.0 時,除了評價穩定保持在 4.3 顆星以上,一週甚至可以達到1萬美元的營業額,等於成長十倍。

AWS-4.png
圖/ MOOIMOM
AWS-5.png
產後束腹帶三代迭代圖,不僅涼感透氣,更做到無縫線的舒適體驗,讓產後媽媽可以穿得住,真正達到束腹的效果。
圖/ MOOIMOM

另外,周靖棠也善用亞馬遜的「A+ Content」等工具,將「永續」元素植入 MOOIMOM。由於澳洲對環保、安全規範的要求,向來以嚴格聞名,對於跨境電商無法「觸摸實品」的鴻溝,團隊便運用 A+ Content,在產品頁面中將小麥桿融合PP材質等無毒認證和安全細節,讓消費者一目瞭然。針對各國嚴格的母嬰用品法規,團隊也在亞馬遜協助下,一一完成合規程序,把出海阻礙轉化為讓消費者安心買單的保證。

科學實證敲開日本大門,大研生醫靠極致細節贏得信任

以德國頂級魚油、視易適葉黃素等產品聞名的大研生醫,起初是為了自己和家人的保健需求創立,在台灣取得佳績後,大研決定將這份堅持帶向世界。而出海的首站,是保健食品發展逾百年、相當競爭的日本市場。

AWS-6.jpg
大研生醫出海首站就挑戰保健食品發展逾百年、相當競爭的日本市場,大研生醫董事長林東慶表示,進入日本市場真的很辛苦,但當收到日本消費者正向的回饋時,對團隊帶來很大的鼓舞。
圖/ 數位時代

大研生醫董事長林東慶解釋,先選擇日本,是因為當地消費者偏好網購、多居住於公寓,購物習慣、商業環境和台灣相近。至於決定透過亞馬遜進軍日本,一方面出於亞馬遜是日本使用率最高的電商網站之一。其次,在日本市場想「從 0 到 1」發展不易,溝通成本高,「但亞馬遜上的消費者,都很願意接受新東西。代表我們更容易在上面找到對的人。」

林東慶特別提到,日本保健食品市場歷史悠久,卻並非完全沒有切入機會。例如:日本延續過往經驗,原料進展未必跟上時代需求,市面的魚油濃度普遍都不足。除了端出創新的產品之外,想進入相對成熟的日本保健品市場,安全有效、建立信任是唯一真理,「大研經營的正是『信任』,信任背後代表了你的產品、服務和品牌。而亞馬遜就是過程中的最強後盾。」

大研透過亞馬遜的後台數據,從消費習慣與市場需求兩個面向,深入了解日本市場。例如,日本消費者偏好小顆粒、一天可服用多顆保健品;另一方面,日本社會因工作壓力大,助眠、舒緩情緒等產品需求也持續成長。團隊再搭配「在地製造、世界原料」的策略,讓「Made in Japan」成為敲門磚,「就和在台灣帶起『高濃度魚油』的風潮一樣,我們以國際頂級專利原料、強大的科學實證及嚴格的產品檢驗,帶起新趨勢。」

大研甚至將細節延伸至包裝、服務。比方說,日本家戶的信箱尺寸偏小,大研的包裝設計,便要確保能順利投遞進信箱;消費者認為用紙盒包裝更安全,大研也從善如流,採精緻紙盒而非美國市場的簡約瓶裝。由於在每個環節都做到極致,大研才進軍日本亞馬遜半年,就奪下 Omega-3 魚油類目排名第一,整體 BSR 也達到 1000 至 1200 名以內。

接下來,大研計劃進軍極度重視天然與健康的澳洲市場,以及競爭激烈的美國市場,林東慶強調,大研期望透過亞馬遜,將對品質的堅持帶出台灣,成為具影響力的全球品牌。

AWS-7.jpg
大研生醫因應不同市場消費習慣,推出日本、美國、台灣三種版本魚油產品,同樣訴求高濃度、高品質。不僅在生產上呼應其「在地製造、世界原料」的全球化策略,更配合當地市場習慣,量身定做外包裝規劃,左:日本版、中:美國版、右:台灣版德國頂級魚油)
圖/ 數位時代

跳脫傳統代工宿命,特力集團用數據算出市場需求

擁有 30 年歷史的特力集團,從傳統 B2B 貿易起家,如今再下一城、攻入跨境電商市場,在亞馬遜上的營收,每月穩定達到美元六位數。這背後,是一場為了解決傳統代工痛點發起的 DNA 轉型。

特力集團業務總監 Isaac Liao 指出,傳統 B2B 貿易是特力深厚且穩固的根基,但為了在全球供應鏈重組的變局中更具敏捷度,特力必須打破過去與終端市場之間的隔紗。但中上游企業打下游 B2C 戰局,最怕盲目下注或因為怕虧損而不敢試錯。特力的心法,是建立一個「基於數據的科學容錯機制」,把亞馬遜當成全球導航儀,大膽做小規模的市場實驗,算準了、看清了再重注出擊。

AWS-8.jpg
特力集團出席亞馬遜新銳品牌加速器活動,分享如何運用數據工具找出消費者痛點,推動企業從製造思維轉向市場思維。
圖/ 數位時代

Isaac 透露,特力在歐美家居市場突圍的關鍵,在於用「數據」找出消費者的痛點,再據此創新產品,「中上游企業常覺得自家產品無敵,怎麼會賣不好?但在電商戰場,消費者沒搜那個關鍵字,產品再好都等於不存在。」特力是用亞馬遜的商機探測器、品牌分析工具,抓出高需求、低競爭的藍海市場,並將自家產品、競品的負評,作為研發參考。例如團隊抽絲剝繭後,發現消費者通常在購買資源回收桶時,最痛恨「異味洩漏」和「腳踏板易壞」;買烤肉推車時,則有「說明書看不懂」、「組裝太複雜」等痛點。團隊會再據此回頭改良製程、產品,並將行銷時,將這些痛點的「解方」直接放大在亞馬遜的產品頁面 A+ Content 和主圖影片中。

AWS-9.jpg
Isaac分享,透過數據發現消費者通常在購買資源回收桶時,最痛恨「異味洩漏」和「腳踏板易壞」,團隊會再據此回頭改良製程、產品,並將行銷時,將這些痛點的「解方」直接放大在亞馬遜的產品頁面A+ Content和主圖影片中,讓消費者一目瞭然,加速決策。
圖/ Amazon

Isaac 特別提到,近期特力導入了亞馬遜行銷雲(Amazon Marketing Cloud, AMC),拆解完整的消費旅程。以特力在亞馬遜熱銷的烤肉推車為例,透過 AMC 的底層數據藍圖,團隊發現歐洲消費者從心動到行動平均需要三週。消費者可能在第一週看球賽時,先被特力的品牌影片廣告(DSP)吸引;第二週滑亞馬遜時,看到展示型廣告(SD)被再次提醒;直到第三週週末要辦派對了,才在搜尋框輸入關鍵字並透過商品廣告(SP)下單結帳,「AMC 讓我們看清這條跨渠道的『消費旅程藍圖』,把過去盲目砸廣告的焦慮,變成每分錢都能精算回報率的高精準 ROI 投資。」

特力已立下月營收達七位數美元的新目標。Isaac 透露,團隊正積極布局生成式引擎優化(GEO)等最新 AI 搜尋趨勢,並根據亞馬遜的後台數據,延伸家居周邊產品線,期望推動內部從「製造思維」進化為「市場和品牌思維」,讓台灣深厚的製造底蘊,能在國際零售舞台上走得更深、更遠。

在迎戰「消費升級」的此刻,台灣企業從來不缺好技術,缺的是直面終端市場的勇氣與機會。而亞馬遜提供的,不只是一套銷售工具,而是一套完整的「持續創新」能力——從全球物流、在地合規,到消費者洞察與數據分析,讓品牌得以直接理解世界各地消費者的真實需求。透過這套基礎設施,品牌能在國際市場中「快速測試、快速修正、快速成長」,把每一次迭代都變成站穩腳步的養分。台灣品牌只要願意邁出第一步,再借力亞馬遜的全球能力,勢必能在世界舞台走得更穩、更遠,實踐「Go Global From Day One」的布局。

想要挑戰跨境,讓更多人認識你的產品嗎?
立即報名 Taiwan Select Day

圖/ Amazon

登入數位時代會員

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

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
代理式商務連動百兆商機
© 2026 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓