據(jù)說點擊藍色字體關注同學都升職加薪了

靜電說：這一期的案例賞析欄目，為大家解析一直都非常具有設計感的愛彼迎，就是Airbnb！愛彼迎是一款民宿類型的應用，它的設計和良好的應用體驗一直被使用者稱道。雖然愛彼迎已經(jīng)退出中國市場，但是依然有很多細節(jié)在吸引我們，今天我們就一起來看看愛彼迎的設計有哪些值得學習的地方。

更多案例解析請點擊這里查看
001.人文氣息的塑造
愛彼迎通過不同的方式來塑造溫暖，具有人文氣息的感受，首先我們能直觀感受到的就是文字，這也是愛彼迎讓很多人喜歡的原因，“愛存千里，前路相迎”，讓文字瞬間溫暖了很多?，F(xiàn)在很多時候我們在討論用戶體驗，怎樣是好的用戶體驗，在于通過各種方式來塑造和關心用戶的心情，應用氛圍。很多時候，它會圍繞著“愛”去做文章，瞬間會拉進用戶和應用的距離。

接下來我們回到手機應用本身，看看有哪些值得學習的細節(jié)？

不同于國內(nèi)很多應用在首頁就一股腦的塞輪播圖，塞各種廣告，愛彼迎首頁最直觀的感受就是在首頁就會直接滿足用戶的使用場景，那就是：“訂民宿”。是啊，來愛彼迎不就是訂民宿的嗎？那些亂七八遭的東西就省省，其實很好。

民宿預定模塊采用一個圓角矩形加陰影方式呈現(xiàn)，跨欄形式與上面的插畫風格宣傳圖更好的融合。

在這里有一個體驗的亮點，搜索區(qū)域用戶可以直接輸入“景點，地址，房源名稱”，這樣的混合搜索方式更加智能，大幅提升了用戶的搜索效率，無需一個個的表單進行搜索。? ? ?

搜索欄目下方提供了金剛區(qū)，這個金剛區(qū)其實是對民宿種類進行了細分，將用戶更關注的一些點拿出來單獨放置，這是對上方搜索的有效補充，可以說整個搜索模塊+金剛區(qū)的設置是有更強的關聯(lián)度的。

繼續(xù)往下拉，則是不同的房源推薦模塊，一般國外應用的設計都稍顯“粗獷”，Airbnb的標題也是直接是用了兩行文字來展示，這種方式需要特別注重版式，也是比較難的設計形式，需要設計師更高的版式設計能力。

而下圖的設計并不混亂，一方面得益于更好的配圖，大圓角的風格，另一方面則是下方的標題文字的細節(jié)打磨，大小，粗細的對比。

不同的模塊之間，留白非常大，而分隔線在合適位置的使用也讓這些模塊的去個更加明顯。其實，不只有分割線可以分隔區(qū)塊，按鈕，banner都可以用上哈。比如下方的模塊，也可以當一個分隔模塊。

首頁繼續(xù)往下的列表模塊則采用了，圓角卡片+陰影的方式呈現(xiàn)。因為，這是頁面最下方了，所以，使用瀑布流的方式是個更好的選擇。大家也要注意配圖，咱們在設計的時候，配圖一定要精心選擇，精心拍攝，因為配圖是設計中非常重要的一環(huán)。

002.心愿單欄目
這個頁面將兩個常用的欄目“我的合集”和“歷史足跡”做成大卡片形式置于頁面最上方。而下方的篩選同樣很明顯。

另一個特征，就是房源列表均使用較小的字體，較小的字體給人一種精致感，但是在這里靜電持保留意見?？傮w來說，愛彼迎的字體設置并不過于影響用戶閱讀，還好。

003.社區(qū)欄目
社區(qū)欄目其實就是列表了，但是，背景比較有意思，極光風格的設計雖然咱們說過很多次了，但是這里用到真的一點也不維和，采用稍微深一點點的背景讓卡片更加突顯，效果很好。

社區(qū)是一個很好的和房源進行結合的欄目，也是我們在“靜電的UI設計教室”課程中提到的信息結構中的“橋梁”欄目，聯(lián)通了不同的信息結構。頁面中部有個帶有陰影的大卡片，突顯了所提及的房源。

下面是房屋詳情頁面，設計師采用了通欄卡片的形式進行展示，對于這種復雜的信息頁面，通欄卡片是一個很好的選擇。

最下方是“你可能還喜歡”欄目，傳統(tǒng)的圓角配圖，但是設計師非常大膽，善于利用留白來營造氛圍，這一點我們要去學習。

004.“我的”欄目

“我的”欄目，采用了霓虹色背景，用在這里讓我們覺得很溫暖和別致，跟傳統(tǒng)的“我的”頁面又有不少區(qū)別，很新穎。在霓虹背景上疊加了兩個大陰影卡片，分別展示用戶信息和訂單信息。

下方的模塊全部使用卡片+淺描邊的形式展示。

接下來有一個小細節(jié)，就是個人模式和經(jīng)營模式的切換，Airbnb采用了一個動畫進行轉場，這個在不同模式的切換設計中非常形象，形成了一個“轉換”效果。大家可以參考使用。

最后一點是個人模式和經(jīng)營模式的對比，大家可以發(fā)現(xiàn)他們的區(qū)別非常大，經(jīng)營模式完全是極簡形式，最大限度的滿足效率和管理。可以說設計師在不同模式之間取得了平衡，讓用戶感受到了兩者之間的差異。

005.要點總結
Airbnb的設計風格非常鮮明，1. 恰當?shù)奶幚碜煮w大小，減小字體的使用，更精致，但不影響可讀性為前提? 2. 創(chuàng)新的背景使用，風格更顯著? 3. 卡片的更巧妙的使用，突出重點? 4. 大留白 5. 專注功能本身，不硬塞各種亂七八遭的功能，簡約，讓所有模塊的設計都圍繞著產(chǎn)品本身。

《靜電的UI設計教室》暑期特訓課報名ing！

靜電老師全程主講?

1V1作品集輔導及打造

不流于形式? 設計工具/思路/方法全面講解?
高含金量UI小班課程現(xiàn)在預約享特惠價

↓↓長按二維碼加靜電老師咨詢↓↓

? ? ? ? ??