【UIUX】20170528_Airbnbアプリをトレースしてみた

前回の予告通り、今回はairbnbアプリをトレースしてみました。

トレースも少し慣れてきた感じする。

 

airbnbってそもそも自分も使ったことないんですが、

個人が旅行者に宿を貸す、数年前からどんどん話題に、人気になってきてるCtoCマッチングサービスです。

そんな攻め攻めサービス。UIも学ぶことが多いハズ…。

 

アプリをインストールして早速驚いた↓

f:id:ayaconasuta:20170528144849p:plain

つええええええorz 

最初の設定画面は無意識にトントンYesしちゃうものだし、やりすぎに見えるけどボタンが柔らかいデザインなので、自然にオンにしちゃうかも。

 

さて、粛々とトレースをしてみました。

まずガイド引いてて思ったけど、美しいなー

f:id:ayaconasuta:20170528145752p:plain

  • この均一感!!これだけで見やすいページってわかる…。

(トレースしたもの↓)

f:id:ayaconasuta:20170528152049p:plainf:id:ayaconasuta:20170528152001p:plainf:id:ayaconasuta:20170528152223p:plain

レイアウトがとても多かったので、まずは下ナビ「探す」から3画面選んでみました。

 

【気づいたこと(動的)】

  • 起動時の画面はちなみに「旅行」からも「探す」と同じ画面にアクセスされる>>「探す」ページへのアクセス方法は複数ある
  • 上ナビはスクロースによってサイズが3段階変わる(背景:緑&検索フォーム:3段>>背景:緑&検索フォーム:1段>>背景:白&検索フォーム:なし。)>>ちなみにスクロールのスピード感でも変わる。ユーザーの動きと画面の連動感が触ってて楽しい。
  • 中間のナビ「おすすめ…」を移動すると、選択ライン(白い棒)もスライドする。

階層構造、もうちょっと深掘りすると面白そうなのでそれはまた次回…

 

【気づいたこと(静的)】

  • ユーザーが宿泊先を「探す」段階においては、選択肢はタイトル(と金額)のみで、情報を最小限にしている。
  • 余白が多い。>>最小限の情報量とスペースをうまく使って、判読生を高めている。項目の横間隔はだいたい12px、縦間隔はだいたい42~50px。
  • 横スクロールのある箇所(注目の目的地等)は、ファーストビューで横に展開されることがわかるように、次の項目をチラ見せしている。
  • フィルターを画面中央下部に配置しているのも、ちょっと珍しい。>>ちなみに、上の検索フォームと検索条件は重複してないっぽい。
  • 下ナビ(Y:0.5px, Blur:0px)のシャドウを除くと、中央ナビの「おすすめ…」選択ライン(Y:1px, Blur:2px)と、フィルター(Y:1px, Blur:4px)にシャドウががっつりかかっていて、高さが高めに配置されている。
  • 欧文フォントは、Circular Std。$がかわいい。

 

airbnbはもうちょっと掘り下げたいので、宿の詳細・その他の画面もトレースしたいところです(^u^)♫