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

2022-10-27 11:02:52 浏览数 (2)

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

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

001.人文气息的塑造

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

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

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

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

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

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

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

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

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

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

002.心愿单栏目

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

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

003.社区栏目

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

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

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

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

004.“我的”栏目

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

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

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

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

005.要点总结

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

0 人点赞