【案例解析】爱彼迎Airbnb设计细节解析-细节与核心功能至上

静电说：这一期的案例赏析栏目，为大家解析一直都非常具有设计感的爱彼迎，就是Airbnb！爱彼迎是一款民宿类型的应用，它的设计和良好的应用体验一直被使用者称道。虽然爱彼迎已经退出中国市场，但是依然有很多细节在吸引我们，今天我们就一起来看看爱彼迎的设计有哪些值得学习的地方。

更多案例解析请点击这里查看

001.人文气息的塑造

爱彼迎通过不同的方式来塑造温暖，具有人文气息的感受，首先我们能直观感受到的就是文字，这也是爱彼迎让很多人喜欢的原因，“爱存千里，前路相迎”，让文字瞬间温暖了很多。现在很多时候我们在讨论用户体验，怎样是好的用户体验，在于通过各种方式来塑造和关心用户的心情，应用氛围。很多时候，它会围绕着“爱”去做文章，瞬间会拉进用户和应用的距离。

接下来我们回到手机应用本身，看看有哪些值得学习的细节？

不同于国内很多应用在首页就一股脑的塞轮播图，塞各种广告，爱彼迎首页最直观的感受就是在首页就会直接满足用户的使用场景，那就是：“订民宿”。是啊，来爱彼迎不就是订民宿的吗？那些乱七八遭的东西就省省，其实很好。

民宿预定模块采用一个圆角矩形加阴影方式呈现，跨栏形式与上面的插画风格宣传图更好的融合。

在这里有一个体验的亮点，搜索区域用户可以直接输入“景点，地址，房源名称”，这样的混合搜索方式更加智能，大幅提升了用户的搜索效率，无需一个个的表单进行搜索。

搜索栏目下方提供了金刚区，这个金刚区其实是对民宿种类进行了细分，将用户更关注的一些点拿出来单独放置，这是对上方搜索的有效补充，可以说整个搜索模块+金刚区的设置是有更强的关联度的。

继续往下拉，则是不同的房源推荐模块，一般国外应用的设计都稍显“粗犷”，Airbnb的标题也是直接是用了两行文字来展示，这种方式需要特别注重版式，也是比较难的设计形式，需要设计师更高的版式设计能力。

而下图的设计并不混乱，一方面得益于更好的配图，大圆角的风格，另一方面则是下方的标题文字的细节打磨，大小，粗细的对比。

不同的模块之间，留白非常大，而分隔线在合适位置的使用也让这些模块的去个更加明显。其实，不只有分割线可以分隔区块，按钮，banner都可以用上哈。比如下方的模块，也可以当一个分隔模块。

首页继续往下的列表模块则采用了，圆角卡片+阴影的方式呈现。因为，这是页面最下方了，所以，使用瀑布流的方式是个更好的选择。大家也要注意配图，咱们在设计的时候，配图一定要精心选择，精心拍摄，因为配图是设计中非常重要的一环。

002.心愿单栏目

这个页面将两个常用的栏目“我的合集”和“历史足迹”做成大卡片形式置于页面最上方。而下方的筛选同样很明显。

另一个特征，就是房源列表均使用较小的字体，较小的字体给人一种精致感，但是在这里静电持保留意见。总体来说，爱彼迎的字体设置并不过于影响用户阅读，还好。

003.社区栏目

社区栏目其实就是列表了，但是，背景比较有意思，极光风格的设计虽然咱们说过很多次了，但是这里用到真的一点也不维和，采用稍微深一点点的背景让卡片更加突显，效果很好。

社区是一个很好的和房源进行结合的栏目，也是我们在“静电的UI设计教室”课程中提到的信息结构中的“桥梁”栏目，联通了不同的信息结构。页面中部有个带有阴影的大卡片，突显了所提及的房源。

下面是房屋详情页面，设计师采用了通栏卡片的形式进行展示，对于这种复杂的信息页面，通栏卡片是一个很好的选择。

最下方是“你可能还喜欢”栏目，传统的圆角配图，但是设计师非常大胆，善于利用留白来营造氛围，这一点我们要去学习。

004.“我的”栏目

“我的”栏目，采用了霓虹色背景，用在这里让我们觉得很温暖和别致，跟传统的“我的”页面又有不少区别，很新颖。在霓虹背景上叠加了两个大阴影卡片，分别展示用户信息和订单信息。

下方的模块全部使用卡片+浅描边的形式展示。

接下来有一个小细节，就是个人模式和经营模式的切换，Airbnb采用了一个动画进行转场，这个在不同模式的切换设计中非常形象，形成了一个“转换”效果。大家可以参考使用。

最后一点是个人模式和经营模式的对比，大家可以发现他们的区别非常大，经营模式完全是极简形式，最大限度的满足效率和管理。可以说设计师在不同模式之间取得了平衡，让用户感受到了两者之间的差异。

005.要点总结

Airbnb的设计风格非常鲜明，1. 恰当的处理字体大小，减小字体的使用，更精致，但不影响可读性为前提 2. 创新的背景使用，风格更显著 3. 卡片的更巧妙的使用，突出重点 4. 大留白 5. 专注功能本身，不硬塞各种乱七八遭的功能，简约，让所有模块的设计都围绕着产品本身。