屏大天地大 ——携程折叠屏应用方案

酒店预订流程

旅游度假类产品和电商购物类产品最大的区别在于:在交易达成前发生位移的主体物不同,前者是人本身,而后者是商品。这就意味着用户所关注的重心有所区别,而做出的决策也会更加谨慎。

用户去一个陌生环境且需要住宿的时候,最需要的是安全感,这些安全感可能由所订酒店方方面面的因素来体现。比如说价格、地理位置、周边交通、用户口碑、房间的面积、设施等等。用户需要了解完整的内容,才会慎重选择。

由于折叠屏展开态尺寸为单屏的二倍,因此可以将基础决策内容放于左屏,辅助决策内容放于右屏,符合用户从左到右阅读习惯的同时,也不会干扰用户对于主功能区的认知。

屏大天地大 ——携程折叠屏应用方案

屏大天地大 ——携程折叠屏应用方案

屏大天地大 ——携程折叠屏应用方案

另一方面,富裕的空间实现了双屏互动功能。酒店列表页采用左右分栏布局,将左侧酒店列表和右侧地图强关联,纵向滑动酒店列表,右侧地图会默认标记左屏第一家酒店的位置。当点选地图上其它标记点,列表也会快速滑动到对应的酒店卡片。折叠屏的这一特性便于用户通过地标或是商圈预订酒店,将酒店信息和地理位置强关联,缩短用户对于距离的思考时长,让远近变得一目了然。

屏大天地大 ——携程折叠屏应用方案

屏大天地大 ——携程折叠屏应用方案

酒店列表页动态演示


用户在做决策前需要浏览大量的信息,而酒店详情页正是承载这些内容的页面。在折叠屏终端中,可以将用户最关注的几个页面:相册页、点评页、详情/设施页放在右屏。用户进入酒店详情页后,右侧默认会显示相册列表,当点击了点评或是详情/设施版块时,也仅仅在右屏进行刷新展示。这样就减少了用户频繁点击返回的操作行为,辅助用户尽快决策。

屏大天地大 ——携程折叠屏应用方案

屏大天地大 ——携程折叠屏应用方案

酒店详情页动态演示


当用户确定选择的酒店后,在填写信息的同时在右侧显示校对信息,降低用户出错概率;同时,在用户预订完酒店后提供更多选择,例如接送机、租车、景点门票等等,强化平台一站式服务的优势,为用户提供更好的服务体验。

当用户确定选择的酒店后,在填写信息的同时在右侧显示校对信息,降低用户出错概率;同时,在用户预订完酒店后提供更多选择,例如接送机、租车、景点门票等等,强化平台一站式服务的优势,为用户提供更好的服务体验。

屏大天地大 ——携程折叠屏应用方案

屏大天地大 ——携程折叠屏应用方案


问路卡

携程一直关注用户旅途中的需求。寻找酒店就是其中一个典型场景。在用户酒店订单的住宿日期内,携程会为其提供问路卡。问路卡包括了中外双语的酒店名称和地址,并提供地图以方便用户找到酒店。

在折叠屏中原先存在于两屏的内容在同一屏中展示,增加了内容的连结,降低了操作成本。多种关联信息同屏展示,不仅在同一时间为用户提供了更多的信息,也提升了寻找酒店的便利度。

屏大天地大 ——携程折叠屏应用方案


客服聊天

优质的服务是携程旅行的核心竞争力之一,在线咨询是其中的重要组成部分。用户可以通过在线咨询获得关于产品、订单、售前、售后的各种服务。在线咨询的核心页面是聊天列表页和聊天页。

基于简化信息层级的思路,可以将聊天列表页和聊天页合二为一。方便用户在不同聊天页面进行切换,缩短用户操作路径,降低用户操作成本。当前聊天界面和列表做联动处理,让用户明确知道是在和哪个客服对话。

在设计过程中,我们考虑到用户和客服的咨询场景中,当前聊天界面的优先级高于列表界面,因此,我们采用栅格化设计方式,在列表内容能基本展示的情况下,最大限度展现聊天界面,同时页面布局又遵循规律的排版,便于未来适配各种厂商各种尺寸的折叠屏。

屏大天地大 ——携程折叠屏应用方案

屏大天地大 ——携程折叠屏应用方案


设计畅想

折叠屏设备的到来让APP的交互方式出现更多可能性,让我们在旅游场景的设计上迎来更多机会和挑战。除了上文介绍的几项落地方案外,携程UED也畅想了折叠屏界面的后续规划。
例如,利用大屏大空间的特点,酒店详情页可以结合VR看房技术,给用户提供沉浸式浏览体验。
酒店AR看房动态演示

再比如,利用分屏模式,横向比较多家酒店信息、不同航班方案,便于用户快速筛选。
 

携程APP的折叠屏适配方案和设计思路已被华为公司采纳入《华为折叠屏白皮书》中, 后续我们会继续研究和优化折叠屏界面的设计,为用户和旅游行业创造更多价值。


本篇文章来源于微信公众号: TripDesign

UI/UX

听说这款银行APP不但省钱还体验很好,于是我们评测了一下

2019-10-28 8:20:00

UI/UX

天猫双十一品牌设计背后的故事

2019-10-28 17:00:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索