用 Material Design 打造全球化出行伴侣 | Google Play 开发者故事

  • 腾讯视频链接

    https://v.qq.com/x/page/a3030d8n2c2.html

  • Bilibili 视频链接

    https://www.bilibili.com/video/av78215860/

Trip.com 为全球 1 亿用户提供旅行预订和出行资讯服务,包括机票、酒店、火车票、门票,目的地信息以及海量用户点评、照片还有视频,此外 Trip.com 拥有 24 小时的多语言客服团队。真正做到了一站式的出行体验,让人们出行不再有后顾之忧。

—— 陈冰,Trip.com App 市场部经理

覆盖全球 23 个国家和地区,支持 19 种语言,为如此大量且多样化的受众打造应用,从一开始就注定不是个简单的课题。

具体到设计领域,就有很多单一市场很少涉及到的本地化细节需要处理。

不同国家用户的习惯也有区别,比如日历,有的地方以周一作为一周的开始,有的则是周日,在不同的国家周末的代表色也不同。我们希望产品中充满 “风格统一,但很本地化的细节”。

—— 王继伟,Trip.com 交互设计经理

△ 有的国家和地区以周一作为一周的开始,有的则是周日

Material Design 和 Trip.com 团队可谓一拍即合: 简洁、丰富的设计结构,灵敏且迅捷的操作反馈以及针对更广泛人群 (比如视觉障碍用户) 设计的可访问性规范,让团队设计师们在处理信息密集的界面时有了很好的基础。

△ 针对视觉障碍用户提供多重视觉线索: 颜色区分 + 插画区分 + 解释说明

  • Material Design

    https://material.io/

△ 基于 Material Design 布局规范打造的页面设计

Material Design 的 布局规范 是一个很好的基础,让我们设计出来的内容层级非常清晰,用户可以很快找到需要的信息。另外 Material 很强调交互反馈,这个反馈不仅仅只是按钮上的动效,还包括比如 没有找到查询结果 的时候显示插画来舒缓用户的心情。

—— 吴佳敏,Trip.com 设计总监

△ 搜索结果为空时的插画

  • Material Design 布局规范

    https://material.io/design/layout/understanding-layout.html

  • Material Design 空状态规范

    https://material.io/design/communication/empty-states.html

对旅行用户来说,应用内预定流程体验的好坏也会直接影响体验。Trip.com 团队的解法是在预定流程里加入 转场动效 ,让前后两屏内容之间产生关联。这样操作起来就会有更强的位置感,也会让用户在做决策时更加自信。

△ 预定流程中的界面转场

  • Material Design 多组件动效

    https://material.io/design/motion/choreography.html#sequencing

和 Google Play 团队的紧密沟通也让 Trip.com 团队能持续获得设计反馈与建议,以及最新的平台规范和最佳实践,少走了很多弯路。

在产品改版的过程中,Google Play 团队一直有结合 Material Design 给我们提供建议、指导,以及最佳实践的分享。另外还提醒我们控制 Android 应用的权限请求数量,让用户能更放心地使用我们的产品。

—— 黄炜婷,Trip.com 产品经理

△ 基于 Google Play 团队的建议控制 Android 应用的权限请求数量

在应用改版完成后,Trip.com 首页的 跳出率降低了 3~4 个百分点 ,应用粘性的增加也说明用户在新版设计中的体验更加舒适。在用户体验上持续投入的努力,也让 Trip.com 在今年 3 月获得了 Google Play 的官方推荐,更 在 10 月收获了 Material Design 大奖

△ 团队桌上摆着的 Material Design Award 奖杯

在产品设计的过程中,团队碰到的课题千变万化,这也使得设计规范的灵活性和开放性显得尤为重要。Material Design 的开放性使得 Trip.com 可以在其框架之上充分表达出品牌独有的个性。但眼前的成就并不是终点,正好相反——这是 Trip.com 下一段设计旅程的开始。

Design is never done.

—— Google 设计团队

  点击屏末  |   | 了解更多开发者故事

想了解更多 Google Play 内容?

  • 在公众号首页发送关键词 "Google Play",获取相关历史技术文章;

  • 还有更多疑惑?欢迎点击菜单 "联系我们" 反馈您在开发过程中遇到的问题。

推荐阅读

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章