Airbnb完整流程体验

Airbnb APP可是经常被当做案例来分析的哦，所以也从众下载了一个，看一下到底有多好，实际需要嘛，没有机会旅行，要它何用，这次的体验报告纯粹为了分析而分析的。

先看手机桌面上的icon图标。

Paste_Image.png

你会发现主图形红色的圆形之外被加了一个蓝色的圆角矩形的底层，猜测是手机自带系统干的，所以各种APP应用上传之前，老老实实把背景层搞成方形的且图案与四周保持一定距离，谁知道是哪种裁切方案呐，万一切到主图，或者切到花花草草也是不好的嘛。

欢迎页.png

来看首页，单刀直入，要么登录，要么GUN。根本不给用户体验的入口，这么霸气的设计，怎么说呢，作为一般的APP，用户能吓跑一半，Airbnb嘛，心里默默的说一句，忍了！另外服务条款当真是清清楚楚，明明白白，倒也蛮让用户放心的。

试一下创建账号，做了一个简单的流程图：

流程图.png

这个中文APP估计是拿原版的APP直接汉化没有重新做排版什么的，从姓名的输入方式就可以看出来，这个的话，其实我还是倾向于入乡随俗的，当然咯，如果你的潜在用户都是高知人群的话，这倒也无可厚非。整个看下来，操作引导做的蛮不错的，每一次完成输入信息后，都有明显的按钮的可用状态的一个变化，所以即使注册流程需要跳转的页面比较多（3个页面），但每个页面集中于完成一个小任务，有时候反而比集中在一个页面的注册流程更让用户容易接受，因为每一步都有一个正确的反馈，流程完成的轻松愉快。等待状态是按钮状态变化的轻量提示，喜欢这种设计，比非模态弹窗要更好。而且在录入手机确认码事，颜色有个跳跃的小变化（深蓝→浅蓝），也在暗示用户，这个操作有所不同。密码设置时用现在较为流行的可“显示”密码，不用两次输入进行确认。出生日期这种年月日上下滑动的选择方式中规中矩，最后在完成设置的最后一步，页面和登录页相同，有种周而复始的感觉，从哪里开始，在哪里结束，首尾相接，不错的设计。

错误反馈.png

来看中间一个错误状态的反馈，简单的颜色提示，因为是强烈的反差背景色，效果很明显。

完成注册流程.png

成功注册后的页面。简洁干脆的一句“我们出发吧”，引导用户开启APP的使用。

整个流程给我最大的感受就是文案文字大且清晰，ios10的设计风格。美中不足，纯色界面（带轻微的渐变）略显单调。

首页.png

下面就到了具体的功能页，先来看首页，中规中矩，搜索，内容推荐，底部导航。

顶部搜索区.png

当触发搜索区域时，呈现这种筛选条件列表样式，这在APP中还比较少见的一种，动效过渡很自然，页面整体下移，顶部区域高度扩展。

Paste_Image.png

先看第一个“任何地方”的搜索项。风格和注册页非常统一，标题清晰明了。

日期选择.png

日期的选择，是我认为设计的非常出色的一个地方，时间段的选择一目了然，重置为整体重置。

Paste_Image.png

入住人员的设定，不支持直接录入，而是步进计数器，仅支持加减选择，没有不方便的感觉，反而感觉恰当好处的单一设计。

十字交互方式.png

当触发页面向上滑动的动作时，顶部区域消失，呈现在屏幕的就是主要内容陈列，每个版块选择横向滑动，而这种展现方式能够很自然的引导用户进行横向浏览。

以上就是Airbnb最想呈现给用户的信息的集合。

Paste_Image.png

顶部的选项卡切换到房源，看一下筛选条件功能，风格当然也是和前面的页面非常统一，这里有一个我认为非常棒的选择价格的方式，把数据进行了图形化，不但有最高价和最低价这种基础的价格区间，更有价格的分布走势图，且会随着筛选条件的变化而变化，贴心，实用，且蛮有科技感的样子。每选中一个筛选条件，下方的FAB都会有加载数据的小动态（这里因为时间太短，不好截图，我就大概画了几个圆点），由于整体界面风格是文字部分非常大，所以每页呈现的筛选条件有限，当选择“查看所有”时，打开的页面是和注册时风格相同的界面。全部筛选完成后，关闭筛选页，在筛选条件那里会有数字标示勾选的筛选项。

还有一些具体的功能页，因为不是最主要的功能模块，就暂时没有体验，先提交作业，以后再补充。