带上我！ 
大佬说的是！ 
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
OYO-UED 中心 C端设计小组——《OYO酒店APP2.0改版设计》
设计成员：夏天、万成、安琪
指导：王磊
一、项目背景
OYO酒店中国区自成立以来，仅一年多的时间里，在全国就拥有超1万家酒店、50万间客房，成为国内最大的单品牌酒店之一。同时为了打通线上和线下入住体验，OYO在18年下半年推出了OYO酒店APP，配合线下门店的PMS等系统，使用户在入住中，能感受到“花更少，住更好”的体验。
但是，随着OYO酒店2.0签约模式的推出，最初产品功能已经不能满足业务的发展需求，在拉新，获客，下单，留存，以及品牌认知等方面，都需要进行一次全面的升级。
1.0版本存在的问题
1.0迭代版本的页面（旧版本）
通过对之前版本的用户体验访谈，线下店铺走访调研，以及线上数据埋点，用户反馈等方式收集来的用户数据来看，1.0版本主要存在以下几个问题。
二、项目重构体验目标
在数据收集方面：
1、外围数据，我们对身边外围用户进行了APP的使用体验（面试者，同事朋友等）。
2、主观数据，UED的小伙伴会定期出差体验不同城市的OYO酒店及时发现问题，并对入住酒店的顾客进行意见收集。
3、物理数据，对APP的各页面重点功能，进行数据埋点，掌握用户对各个功能节点的数据反馈。并结合大数据平台，对用户信息进行归类和分析。
4、线上反馈，APP意见及投诉收集，各大分发平台中差评收集整理。
--
通过对1.0及其迭代版本的问题数据收集，最终我们结合产品现阶段的定位和以前存在的问题，给出了3个改进的核心点：
根据产品的核心改进点，重新对产品结构和目标进行梳理：
1. 如何“更聚焦”
a. 结构聚焦
不同于其他平台设计的卡片式样式，我们对页面的卡片的样式与内容进行了平衡。在大家设计不断增加页面结构层级的时候，我们对层级进行了归纳和减少，相比较我们对卡片形式本身也进行了弱化，以内容为设计。
b. 优势聚焦
每个产品的存在都有它最核心的产品定位，就像OYO的slogan“花更少，住更好”一样，我们产品的核心价值就是OYO酒店所独有的“性价比”。
所以，本次改版，我们突出了产品优势。将页面中的价格和优惠信息，强化展示出来，突出与其他平台的优势。
2. 如何“更便捷”
在产品的使用中，流程更简单，推荐更准确，场景更全面，都能让用户更快更准的找到符合意愿的酒店。
a. 流程更便捷
我们首先对产品的流程进行了优化，结合“大部分用户在当天当地预订酒店”的行为，通过产品自身的推荐算法，让整个下单流程最快只需3步，进入首页后，点击推荐酒店——详情页预定该酒店——付款，即可完成整个下单过程。
b. 场景更便捷
在OYO产品的价值体系中，我们对产品各个阶段进行了对应的功能排布，把我们希望用户做的行为簇分为了几个阶段，并指明了不同阶段中我们应当关注哪些数据
获取用户
提高活跃度
用户留存
自传播
3. 如何“更有温度”
在OYO酒店APP以往的版本设计中，我们很难发现有和品牌相关的设计在里面，APP所承载的信息也非常有限。在OYO现阶段的发展中，品牌传播对于产品业务拓展和产品感知体验的作用尤其重要，于是我们在新的版本中强化了品牌存在，赋予产品了内涵和温度；重新梳理了产品结构，增强了各个模块可扩展性。
a. 品牌基因
将OYO的logo图形化后，我们可以很容易从品牌最初的设计语言上来读懂OYO所诠释的简约，logo图形都是基本的几何构成。
于是，我们基于“极简化”的设计原则，在设计元素上提取了“O”作为OYO酒店APP的基因，对页面的模块和设计元素都进行了“圆”的处理，“O”也在整个改版设计中贯穿整个APP。
同样，在产品的动效上，我们也参考了球在滚动时的规律（匀减速）：
b. 品牌识别
基于本次的品牌基因“O”这一基本元素，我们在颜色，图形、排版上都做了基本处理，因此，我们把本次改版的设计语言称为：
“基本设计”
基本图形
icon的设计上也用基本图形去设计，不去做多余的变形，视觉上保持风格一致性。
基本色彩
为了保持整体页面感官的一致性，我们辅助色和补色设定，对酒店房间图颜色进行了提取，在页面浏览感受上使图片和UI框架能更加的保持统一。
其实APP本身的酒店图片已经带有大量的红色色值，所以我们在设计时候，对整个APP进行了大体量的减红，将红色只用到“购买“和优惠的维度上，功能按钮也都使用了纯色，以减少次级信息对用户浏览的干扰。
基本字体
在文字上，我们也采用最基本的字体，ios采用PingFang，android采用思源黑。只有在显示主要价格，付款等数字才会用到DIN系列字体
c. 情感化
下拉加载
怎么能让产品传递出有温度的感知体验呢？线下的入住体验中，除了硬件体验和入住流程价格优惠等触点，哪些地方还能让我们去挖掘使用舒适的感受呢？于是我们结合产品感性体验列举了：柔软的，舒适的，温馨的，拥抱，微笑，咖啡，阳光等关键词。
最后我们将贯穿整个设计的“O”形 与“微笑”与“太阳”与“OYO”LOGO结合起来，形成了OYO品牌特有的温度。
下拉动画的演变过程（由下拉，松手，循环，完成四个动作构成）
首屏背景
我们发现，在国内的住宿行业中，每个节日都是一个入住小高峰，大家可能怀着格式个样的心情和目的去旅游，在每个大的出行季节中进入OYO酒店APP，都会有不一样的惊喜和心情等着你。
于是，我们头部模块用节日背景和搜索框相结合，达到拓展和增强品牌感知的目的。
空白页
往往用户从下单到入住再到入住结束，中间会出现很多有趣的场景，而这些场景可以与实际的下单入住场景相结合，来表达用户真实感受。
在“O”型的基因背景下延续了简约的设计风格；同时对使用场景进行了特定的代表人物设计，并已对这一形象提出设计专利申请。
三、APP设计方案
首页
酒店列表页
酒店列表页是在首页的基础上提供的更加深入的选择酒店页面，我们数据将从距离，浏览收藏，价格，品质等多维度对不同用户进行推荐，满足各种使用场景。
搜索/城市POI
城市POI和搜索更加智能和多样化，根据场景不同，搜索出的结果也不同
酒店详情
我们首页搜索并没有留有入住时间的入口，是为了方便用户更快的去找到酒店，但是在详情页我们对入住时间进行了突出显示，以防止用户忘记选择入住时间。
订单
订单在原版的基础上，将酒店名字突出，弱化酒店图片，订单详情也去除了多余色块，将酒店信息突出。
个人中心
个人中心结合设计语言，在原来基础上，对页面进行了精简设计，并将优惠券、月卡、狂撒1亿、签到等提升用户活跃和留存的功能突出。
登录页
手机两步即可快速登录，底部场景图结合入住场景，你离入住更近一步！
营销图
不让画面元素影响活动宣传的主题文字，突出主题，
所有页面
四、延展设计
其实在本次2.0改版前，我们依据海外市场的风格，进行了OYO日本版的拓展设计，大胆的抛弃了业务属性，只探索设计在可执行范围内的更多可能性，并将部分的设计理念和页面元素用到了OYO2.0的改版中。
「我的订单」页面抛弃了传统订单的模式，它成了一个出行的日记，记录用户住过的OYO酒店在哪个城市，并推荐用户去点亮入住更多的城市，分享在当时发生的事情。
首页除附近的酒店外不再作任何推荐信息，只将APP首页做一个轻便简单的订房工具。首页的「附近酒店」弱化价格，主动计算用户到酒店的出行方案及所用的时间。图标Icon都做了基本的圆形处理。运营Banner全部用平面化去做。
「酒店列表」将更复杂的筛选项收起，只将大部分用户常用的选项露出为快捷筛选，列表的内用以文字展示为主，左文右图，在同一城市下，酒店价格相差不大的情况下，以距离和口碑来选择酒店。
「所有页面」
五、写在最后
其实设计一个项目产品就像孕育一个孩子一样：
当产品在最初的战略构想阶段，他便像一只萌芽；当理出了产品的结构框架，就好比有了骨骼；当加入品牌基因和品牌识别，就像有了肌肉和血液；当加入了情感化和品牌内涵，他便会呼吸起来；当项目真正的开发上线，他就学会跑了起来~~
未来可期，迎接2020。
Powered by Froala Editor
全部评论：33条
-
-
-
-
-
-
-
-
Aaboy
2019-12-18 17:10首页搜索不放时间选择这个变动真不太认同，因为用户基本习惯是先要选时间再搜索，而不是先搜索再选时间。正常流程：选时间---搜索---出结果，你的流程：搜索---选时间---再次搜索---出结果。
-
-
-
-
夏天的剪刀手
2019-12-17 18:37@joeytang: 感谢阅读~~我文章里说的保持统一不是框架里的颜色去适配每张图，那页面岂不是太花里胡哨啦。 调研过我们的酒店图片的话，你会发现我们酒店的布置都是统一的红色枕套和床单，酒店的灯基本都是暖灯，绿色是部分酒店内的绿植摆设。所以我们为了统一，选的就是我们酒店图中常见的这几种颜色。 其中红色和黄色是我们酒店图中出现频率最高的两种颜色，所以我们没有在这两个出镜率很高的颜色之外，再增加其他主要颜色，如果那样的话，页面红色 蓝色 绿色 黄色岂不是都有了，这个不是统一的目的。 结合我们酒店图出镜率最高的这两种颜色，我们的整个UI的主色也是这两种，至于绿色，在图片中出镜率不多，所以绿色我们在UI上仅仅只用于列表评分，和整个大体量的图片概率颜色保持一致，这就是我文章里说的统一。 不过这个只是我们这期改版时候制定颜色的方法，因为文章里有提到我们这次的设计语言叫“基本设计”，所以颜色选取也是因地制宜，选取了大部分图片的基本色，我图中选取的那个图片是酒店大部分图片颜色特性的代表哦。
-
-
joeytang
2019-12-17 14:57“为了保持整体页面感官的一致性，我们辅助色和补色设定，对酒店房间图颜色进行了提取，在页面浏览感受上使图片和UI框架能更加的保持统一” -------酒店房间不可能是都是暖色系或者冷色系吧，你说的页面感官一致性何来？难道根据图片的冷暖色去变色？那更不统一了。要不然就是运营人员既定房间风格只能暖色？那增加运营成本外也让内容不丰富了。
-
-
-
-
-
-
-
-
-
-
番茄炒蛋盖浇饭
2019-12-17 09:17其实设计一个项目产品就像孕育一个孩子一样： 当产品在最初的战略构想阶段，他便像一只萌芽；当理出了产品的结构框架，就好比有了骨骼；当加入品牌基因和品牌识别，就像有了肌肉和血液；当加入了情感化和品牌内涵，他便会呼吸起来；当项目真正的开发上线，他就学会跑了起来~~
-
-
-
-
-
-
- 更多
更多作品
发表评论