產(chǎn)品拆解！12個(gè)維度分析愛(ài)彼迎的用戶體驗(yàn)設(shè)計(jì)

今天和大伙分享一個(gè)非常不錯(cuò)的產(chǎn)品，那就是愛(ài)彼迎。

愛(ài)彼迎（Airbnb）是一個(gè)出租住宿民宿的網(wǎng)站，提供短期出租房屋或房間，讓旅行者通過(guò)網(wǎng)站或手機(jī)發(fā)掘和預(yù)訂世界各地的獨(dú)特房源，為近年來(lái)共享經(jīng)濟(jì)發(fā)展的代表之一。

我第一次用愛(ài)彼迎產(chǎn)品的時(shí)候，發(fā)現(xiàn)愛(ài)彼迎用戶體驗(yàn)、設(shè)計(jì)都非常的不錯(cuò)，給人感受專業(yè)、舒適、信任帶有設(shè)計(jì)追求的產(chǎn)品。雖然愛(ài)彼迎今年已經(jīng)退出中國(guó)市場(chǎng)，聚焦出境游業(yè)務(wù)，但是愛(ài)彼迎的產(chǎn)品體驗(yàn)有很多點(diǎn)值得學(xué)習(xí)，今天我將從 12 個(gè)維度進(jìn)行分析。

往期產(chǎn)品拆解：

一、品牌理念

從這張圖我們清楚看出愛(ài)彼迎符號(hào)融入了人、地點(diǎn)和愛(ài)的品牌愿景。

愛(ài)彼迎說(shuō)任何人都可以畫(huà)出的心形，超越了語(yǔ)言和文化，頌揚(yáng)了愛(ài)彼迎的熱情好客精神，而熱情好客的新調(diào)色板則反映了人們的開(kāi)放心態(tài)。

愛(ài)彼迎的品牌色紅色更好的傳達(dá)了愛(ài)、熱情好客品牌理念。

二、品牌符號(hào)

我從 App Store 找到最新的愛(ài)彼迎的 logo，發(fā)現(xiàn)愛(ài)彼迎的顏色有所變化，偏向粉一些的紅色，更具有活力的顏色。

愛(ài)彼迎的 logo 好看是有原因的，我發(fā)現(xiàn)圖標(biāo)是由三角形區(qū)域中設(shè)計(jì)的，導(dǎo)致圖標(biāo)給人的感覺(jué)很穩(wěn)，同時(shí)利用簡(jiǎn)潔的線條進(jìn)行圖形繪制，非常不錯(cuò)的符號(hào)。

例如日本三菱的 logo，也類似這種設(shè)計(jì)形式，雖然是三個(gè)菱形組成，但是都是在一個(gè)三角形下進(jìn)行設(shè)計(jì)，顯得非常的穩(wěn)。同時(shí)我發(fā)現(xiàn)跟名字也有關(guān)聯(lián)，菱字和菱形的關(guān)聯(lián)。非常的經(jīng)典、克制、耐看，從小就很喜歡這個(gè) logo。

三、啟動(dòng)頁(yè)

每一個(gè) app 都有啟動(dòng)頁(yè)，而愛(ài)彼迎用淺灰色的 logo 作為啟動(dòng)頁(yè)。感受最深就是這個(gè) App 沒(méi)有廣告，保持最純粹的頁(yè)面。

四、首頁(yè)設(shè)計(jì)

愛(ài)彼迎首頁(yè)目標(biāo)非常的明確，頂部卡片利用大投影使得視覺(jué)層級(jí)是最高的，同時(shí)配上紅色大按鈕“搜索房源”的描述來(lái)提高用戶的點(diǎn)擊效率。

五、卡片設(shè)計(jì)

愛(ài)彼迎卡片設(shè)計(jì)非常有細(xì)節(jié)，banner 的比例是 3:2，用戶的頭像在圖的右方，做了一個(gè)破形處理，讓?xiě)糁骱蛨D片關(guān)聯(lián)起來(lái)，非常有創(chuàng)新的布局，讓平庸的界面更加設(shè)計(jì)感，同時(shí)大部分用戶都是右手操作，頭像在右下角，在操作的熱區(qū)，體驗(yàn)會(huì)更佳。

六、標(biāo)簽細(xì)節(jié)

愛(ài)彼迎標(biāo)簽一樣很有細(xì)節(jié)，重要的標(biāo)簽顏色和普通不一樣，重要標(biāo)簽是棕色色值而普通標(biāo)簽只是淺灰色，有個(gè)層級(jí)的對(duì)比。

標(biāo)簽的左右安全距離保持一致，當(dāng)字?jǐn)?shù)有變化的時(shí)候，標(biāo)簽感受和規(guī)范是一致的。

七、透明細(xì)節(jié)

愛(ài)彼迎評(píng)分標(biāo)簽背景是帶一點(diǎn)透明度的，如果用純色會(huì)突兀，而有透明度顯得界面通透、清新。

右上角愛(ài)心圖標(biāo)白色描邊+黑色透明+微投影，為了更好兼容白色圖片和黑色圖片。

八、布局細(xì)節(jié)

愛(ài)彼迎首頁(yè)下滑有一個(gè)探索全球奇屋，全屏都是美麗的民宿，采用瀑布流的設(shè)計(jì)布局，圖片之間錯(cuò)開(kāi)展示，自適應(yīng)的高度設(shè)計(jì)，頭部大 banner，下面配上小圖，具有節(jié)奏感。

左上角按鈕大小高寬的點(diǎn)擊區(qū)域大于 88px(基于 2 倍圖）體驗(yàn)非常的好。

九、沉浸式體驗(yàn)

點(diǎn)擊進(jìn)入民宿，主圖鋪滿 3/4 的手機(jī)界面，用戶可以進(jìn)行左右滑動(dòng)查看民宿圖片細(xì)節(jié)，用戶還可以上下切換名宿，整體給用戶沉浸的感受。

當(dāng)用戶點(diǎn)擊喜歡的按鈕，界面的背景色黑色變成彩色背景，給用戶明顯的感知。

我發(fā)現(xiàn)這些介紹頁(yè)面可以翻譯成中文，也可以顯示原文（葡萄牙語(yǔ)）對(duì)應(yīng)各國(guó)國(guó)家愛(ài)彼迎又做了對(duì)應(yīng)的翻譯處理，作為用戶是非常的友好，能完全看的懂，滿足國(guó)際化設(shè)計(jì)。

十、彌散色彩

愛(ài)彼迎有幾處用了彌散的色彩，例如選擇感興趣的民宿，背景會(huì)加入一些彌散色彩做一些設(shè)計(jì)區(qū)分。

個(gè)人中心也會(huì)在背景上用品牌色作為彌散色彩進(jìn)行設(shè)計(jì)，讓頁(yè)面更加豐富。

十一、圖標(biāo)設(shè)計(jì)

發(fā)現(xiàn)愛(ài)彼迎的圖標(biāo)都是灰色線性圖標(biāo)，同時(shí)每一個(gè)風(fēng)格的民宿會(huì)專門賦予一種圖標(biāo)，保證了圖標(biāo)的一致性。

線性圖標(biāo)的優(yōu)點(diǎn)是簡(jiǎn)潔、高效，減少對(duì)內(nèi)容的視覺(jué)干擾，能給用戶帶來(lái)極致的感受。

十二、字體設(shè)計(jì)

仔細(xì)的人會(huì)發(fā)現(xiàn)，愛(ài)彼迎專門為自己的 APP 設(shè)計(jì)了數(shù)字字體和英文字體 airbnb-cereal-font，字體比較時(shí)尚、粗壯，特別應(yīng)用在標(biāo)題、評(píng)分、價(jià)格重要信息上具有很好的識(shí)別性。

字體也可以給產(chǎn)品提高品牌性，形成差異化。

總結(jié)

1. 品牌符號(hào)可融入企業(yè)的愿景和理念。
2. 品牌色的選擇好的話，可以達(dá)成差異化。
3. 為 APP 打造一款數(shù)字字體和英文字體可以提高產(chǎn)品的品牌性。
4. 破形的設(shè)計(jì)還可以運(yùn)用在 APP 的布局中，會(huì)有創(chuàng)新性的效果。
5. 整個(gè) APP 的圖標(biāo)風(fēng)格需要保持一致，這樣用戶的感受是一致的。
6. 圖片的清晰、美觀、高雅可以給整個(gè) APP 提高美感，這個(gè)需要根據(jù) APP 的定位來(lái)確定。

感謝大家閱讀～～ 關(guān)注黃小偉設(shè)計(jì)，分享好的設(shè)計(jì)。