腾讯QQ酒店返现 APP设计回顾 - 优设网 - UISDC

腾讯QQ酒店返现 APP设计回顾

2013/03/07 8039评论区

QQ酒店返现2.0设计回顾
项目背景

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

前期准备
分析

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

提炼

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

情感化设计

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

视觉推导

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

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

视觉输出

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

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

其它细节
Icon设计

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

一些飞机稿:

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

结语

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

腾讯ecd原文:http://ecd.tencent.com/qq-hotel.html

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/qq-hotel

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 设计师干货 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里