Case 02 | Imitate design: Airbnb Landing Page

Case 02 | Imitate design: Airbnb Landing Page

Airbnb是我在旅行時預定住宿的時候必看的一個平台,尤其是在旅行目的地當地經濟較發達,民宿一般質量不錯的情況下,都會選擇Airbnb來訂民宿。但之前預定的時候只是有模糊的感覺訂房是比較舒適的體驗,沒有仔細的分析過Airbnb的網站和App的設計。這篇Case Study主要將分析Airbnb的網站和App的交互設計,並把自己模仿覆刻Airbnb landing page的過程記錄下來。

分析

網站

Nav bar主要分為3個子目錄:Places to stay(旅行住宿),Experiences (線下體驗),Online Experiences(線上體驗)。
近期用Airbnb的網站比較少,所以當我發現有Experiences這個選項的時候是挺驚喜的,也更契合Airbnb的民宿想要傳遞的一種融入當地去感受的氣質。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ad6d257f-f80f-4e60-baf0-94bfc03908a6/Untitled.png
c

選Places to stay的時候,下面的bar會出現“Location, Dates(check in & check out), Guests",時間地點人物確定好,旅行住宿的基本要素
當鼠標懸停在某一欄上,會變灰,這個交互體驗讓用戶有一個自己在做什麽的實時反饋

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4a04f356-c20d-4e96-80df-451554357487/Untitled.png

選Experiences的時候,下面的bar會出現“Location, Date"。少了“Guests"這一項,我是覺得挺聰明的這個設置。因為想要的是體驗,不必因為人數而把體驗內容限定住。讓所以可體驗的內容都被搜索出來,然後用戶自己決定此行想要什麽樣的體驗。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/75511fdd-d1bb-49f1-8578-8fd2661fc873/Untitled.png

選Online Experiences的時候,會跳轉到這個有很豐富線上活動內容的頁面。給我的觀感是在世界各地漫遊活動,對於想要體驗世界精彩活動的用戶來說,性價比超高。Online Experience的頁面有比較多的留白(white space), 簡潔幹凈。左側有文字內容簡介強調了“all without leaving home"這個特性,右側的照片墻是不規則的排列像跳躍的鋼琴鍵盤。圓角的照片四角讓照片又像窗戶中透出的場景,so smart!
下面有一排類似於分類的tags,方便用戶快速找到自己感興趣的活動(比如:”Family Friendly" "Dance" etc.)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c9592125-94a8-4767-acbc-7a23bc1e1f68/Untitled.png

點右上角的地球樣的圖標會有大的彈出框,可以選語言和地區(Language and region),貨幣(Currency),對於瀏覽者最基本的兩點:語言選擇是為了能正常瀏覽內容,貨幣選擇是為了能直接看估算自己的預算情況。Airbnb在文字內容的選擇上很讓人驚嘆簡潔性:非必需不選。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1bf3371c-02c9-4412-869d-c9d707477761/Untitled.png

圖片背後的意義
這張網站上的圖片一眼看過去的時候,繪畫風格有電子遊戲場景的即視感,再看會註意到奧運標志和聖火(呼應最近的東京奧運會)。前面第一位起跑姿勢的是一位使用輔助器來行走的黑人運動員,第二位是一位女性。旁邊的黑色的雲朵正好讓上面的白色的字能清晰的顯示出來,對比度提升。從烏雲中沖出來的運動員和聖火照亮了中間區域,仔細感受這幅圖的時候可以解讀出很多意義。

排版工整但也不無趣,上面一行4個,下面一行3個

和“Apple Newsletter"的用一個長條的黑色背景的上面用圖片的來分割區域,有異曲同工之妙

模仿設計:

使用網頁Inspect功能找到元素的細節,Copy網站上的圖片(步驟可見Apple Newsroom imitate design那篇)
圖標的大小

16px*16px

這個抽象的地球儀的圖標是1616的,之前最小的圖標我也是用2424的,現在看來16*16也是ok的。
這一塊區域的文字line-height是比較緊湊的,而字體偏大,這樣整體看起來不會覺得“散”開。

這張圖片在網站上copy/paste之後需要tile一下

我是怎麽發現圖片要tile的:
看原網站裏這張圖片的大樹的位置是在上面的舉重運動員下面

兩張圖片的明暗度不同,上方的文字的顏色也不同,這樣還不顯無趣,很簡單但實用的方法,讓頁面靈動起來

Done

🍺思考:
・在一步一步模仿的過程中,一個感受就是Airbnb website沒有很炫技的東西,但是組合在一起就很好看靈動的設計
・字體的line-height 有不同,緊湊和寬松讓整個頁面的文字內容不顯的枯燥
・五顏六色但是又有質感的圖片提亮了頁面,所以字體也用了黑白灰百搭又基礎的顏色

手機App端

Search bar的radius圓滑,整體界面看起來非常friendly
圖片下面是評分和大標題,直接顯示用戶關心的點:他人的評價,房源的信息
“點讚”在圖片右上角,顯眼且不占用下方文字區域的空間,用戶點讚的時候手勢方便,直接用右手大拇指,或是食指點擊都很方便

Airbnb首页

可以左右滑動的bar

"Calendar"和“flexible dates"滿足出行時間計劃固定和不固定的兩個群體。滑動的設置讓切換的過程比較流暢自然。
比較可愛的是當在“Flexible dates"這一欄的時候,對於還沒有很確切出行計劃時間的用戶來說,下方的“Stay for a Weekend(or Week, or Month)是很貼心的能幫助到用戶縮小搜索範圍提高精確度的一個問詢,沒有很強迫要去確定一個時間的感覺而是有一個寬松的範圍可以給自己選。對於有時候只是想模糊搜索的用戶比較友好。
再下方是關於出行月份的問詢,民宿的房源情況和季節有很大的聯系,一些旅行地點分旅遊的淡旺季,會對房源的價格和available time有影響

Airbnb App设置出行时间的图片

一個很明顯的關於“模糊設置”的對比

個人最近非常不喜歡的iOS的把鬧鐘設置改為了輸入精確數字的這個。原來的滾輪滑動設置,在滾輪的時候也給了我一個思考的時間,比如說有一個event 在12:00,那我就會想大概我需要多少準備時間讓鬧鐘來提醒我,如果距離需要10分鐘車程,加出門前收拾20分鐘,再預留10分鐘,那我會滾動到11:20設置鬧鐘。而現在這個一定要我立刻輸入時間的設置,挺難受的有時候,有壓力感,設置鬧鐘本來是為了減負能讓機器來提醒我,但這種設置讓iOS上的鬧鐘變成了加大壓力的事情,有時候數字輸錯了一位又得重新全部來過,大概我手特別容易滑。這樣多了幾次,我是比較逃避用這個功能。
不過聽說iOS 15把鬧鐘改回去滾輪設置了,期待一下。

iOS输入闹钟时间的图片

Check in worry free的彈框看起來像很可愛的小卡片上記錄著一些叮囑的話

黑色和灰色兩種顏色的文字內容讓頁面不會無趣,灰色的分割線左右兩邊是有間隔的,整個頁面可以“呼吸”的感覺。
從UX的角度來看:入住指南對於旅行者來說非常友好,可以輔助房客制定出行計劃,比如“搭乘什麽車去入住的地方?”,”wifi密碼是多少?“。節約了房東和房客的溝通成本,很貼心。

Airbnb Check in 的页面

“體驗”(Experiences)也很有趣

原來我對於Airbnb的認識局限於“民宿預定”,在分析Airbnb網站和App設計的時候發現還有“體驗”(Experiences)可以售賣
對於買家來說,有更多有意思的活動可以融入當地去體驗;對於賣家來說,有創造獨一無二有趣的活動的能力可以來掙錢,簡直是dream work。
UI/UX角度:大張的圖片吸引用戶的註意力,下方黑色的大標題簡介,再下方是評分和地點。
User journey map: 大圖片吸引--下方標題看看這是什麽活動--看看地點盤算一下旅行計劃--詳細看其他買家的評論,決定是否符合自己想要的旅行體驗主題

一张森林体验的图片

“Stay connected"這一模塊可以在平台上直接和房東對話

既有安全保證而且方便。對話的內容之後的“action",比如說和房東聊過幾句之後預訂下房間,或者和房東聊過之後可以去找到當地好吃好玩的地方。平台對雙方有約束力,對話內容相對安全可信。房東有take charge的責任感,房客有了在旅行城市有一個相對可信任和咨詢的朋友,Win-win!

Airbnb平台内与房东聊天界面

房東上傳房源圖片的界面

右上方是“Add Photos",下劃線表明這是一個可以點擊的CTA (Call To Action)
下方是Cover photo和Photo order,照片的排版是對稱性的上下和左右結構,工整不容易出錯的排版,對於背景不同的房東們都較友好

房东上传房源照片

在房源圖片的界面上右上角是“點讚收藏”和“分享”按鈕

既可以自己收藏方便隨時查看這套房源的信息,又可以分享給別人(一起制定旅行計劃的人)

🍺思考:
・“點讚收藏”和“分享”按鈕都是在圖片的右上方,不占空間又顯眼好操作(右上方比較符合右撇子倒是)
・圖片很大很吸引人。圖片占比很大,像是陳列櫃上非常顯眼的商品。增加瀏覽和購買欲望
・文字的顏色基本都是黑白灰三種,並沒有用顏色來表示“CTA”。對於視障人群的accessiblility做的很好。之前看過一個關於accessibility in design方面的課程就提到,顏色可以作為輔助CTA手段但最好不要只是用顏色來表示CTA。因為很多視障人群對於顏色的敏感度不高或是分辨不出,如果單單只用顏色來表示某個按鈕對於這部分用戶非常不友好

仿照Airbnb landing page的格式做了一個wedding photos share的網站。好的設計覆用起來也很好看

總結:

  1. Airbnb網站和App都選用了大量的大圖片,高質量的圖片讓頁面靈動五彩
  2. line-height和letter-spacing的細微調整可以讓文字內容或寬松或緊湊,頁面有變化而生動
  3. 文字的顏色是“黑白灰”,有質感的顏色,Accessibility做的很好照顧到了視障群體。對於五顏六色的圖片來說,黑白灰的文字也很百搭
  4. 每個元素並沒有很多繁雜的過度設計,但組合在一起非常和諧質感。這一點上大概是所有設計師需要一直修煉的能力:組合後好看又有用設計