

当你使用弹性社交网络认识了怦然心动的某人,立即需要一个“做案现场”的时候 ;当你临时出差到一座陌生的城市,一下飞机就为订酒店而烦恼的时候,你可能就要感谢那些“开房 App”了,它们可以根据地理位置显示出离你最近的酒店的实时房源,然后轻松点几下手机屏幕,问题就得到了解决—–这是《创业家》杂志给酒店预定应用描绘的使用场景。我们的“开房 App”已经在Android平台跑了一段时间,相信已经是不少用户的“做案帮凶”了,产品经理又找上我们,谋划着怎么让这个做案工具帮到更多的人这次,我们从ios开始……


2011年开始,“开房 App”就如雨后春笋,争着冒尖了,OTA、酒店集团、单体酒店、一些专注APP的创业型公司都有这类应用产出,我们想要做个好帮凶,面临的挑战还是很大,如何让我们的产品在众多同类应用中脱颖而出?如何让我们的应用更具粘性?在做足功能的同时,还有哪些创新的点子?


通过对V1.x系列版本的总结及对竞品、用户使用场景的分析,我们提炼出本次改版的几个关键点:


记得有人用“被唤醒的记忆”来概括拟物的设计理念,这个概括用在对真实事物的外观和特性模仿都很强的APP上很贴切,比如便应用,外观的操作都可以做的很逼真,酒店预定不像这类应用有那么直观的特性可以模仿,也许做不到“唤醒的记忆”,至少可以用一些拟物的设计拉近和用户的距离吧,也可让APP更有特色。

色彩搭配,直奔主题,寻找与酒店相关的配色:

确定配色之后,继续寻找一些酒店的元素,看怎么让我们的app有更强的酒店属性


经过一段痛苦的设计稿pk过程(此处略去xx字),我们确定了改版的风格,打开APP,跳过启动画面后就是查找酒店的表单,表单的边框模拟了酒店房价牌子的样式,默认定位了当前位置,可以不用其它操作直接按搜索查找附近的酒店,返现账户、个人中心、设置这些不是预定流程上主要的操作,被隐藏在页面下方,需要时再向上拉起。

进入搜索后,如果没有联网,自动启用离线模式,为了让搜索结果首屏就有更大的展示空间,筛选及模式切换类操作都被收纳在页面上方,结果列表有无图模式可选,户外使用时更快更省流量;为了方便定位酒店位置,地图模式也是不可少的。





ICON设计开始,找元素啊找元素,找了一些酒店相关的素材:

一些飞机稿:

这里要回顾下QQ酒店返现的几个特点:1.酒店资源丰富,全国超过30000家酒店,覆盖700多个城市;2.返现高达房费的50%,可以直接支付、提现、充话费;3.无房、差价赔付,7×24小时客服;4.离线模式、便捷的当前位置查找。 icon摆上app store后,就是一个大招牌,最好的设计方式是从特点里面去提炼,做到icon能体现出app的主要特色。几番周折,还是拟物,最后定稿的icon是一个大枕头,上面放一个返现的标签,很直白的表达方式,酒店、返现都体现了,枕头还有个舒适可靠的寓意,不多说,看图:


关于简洁的metro风格和拟物化风格孰优孰劣讨论不少,酒店返现的前一版本是简洁风格的,我们的改版初期也在这个问题上纠结了一下,回头想想,两个风格并没有绝对的好与坏,从产品本身出发做够了分析推导后,适用什么风格自然就清晰了,合适的才是最好的。对设计师来说,多偿试不同风格更不是什么坏事。