携程机票订后服务“航班助手”的三大设计秘籍

前言

说到携程机票，大多数用户第一个想到的可能就是“预订机票”。但实际上“预订”场景仅仅是携程「包围式服务」的冰山一角，更大的服务场景存在于“订后”。我们长久以来的目标一直是致力于为用户提供一个 贴心、完善、智能的订后服务 。

“航班助手”主要服务于机票用户的出行场景。用户每乘坐一次飞机都需要关注非常多的信息，这些信息过于繁杂，对于用户而言逐渐变成一种负累。我们希望帮助用户减轻负担，拥有一个很好的出行体验。

一、“航班助手”的前世今生

1.1 双管齐下，专业而全面——1.0时代

一开始我们通过“航班动态”为用户提供专业全面的航班信息，通过详尽的信息曝光，让用户对自己的航班了如指掌。

但我们的服务不仅仅局限于此，在“动态”为用户提供服务的同时，“飞行助手”（一条聚焦用户出行服务的产品线）也在快马加鞭赶往战场。通过“航班动态”和“飞行助手”，为用户打造全方位的闭环场景。

随着两块功能的专业度和场景覆盖度越来越高，我们发现通过两条产品线为用户服务终究还是有点笨重，操作费力度也不尽如人意。

所以我们开启了改版之路，为用户打造一个贴心且智能的行程助手。

1.2 重组与过渡——2.0 时代

重构产品框架，将两条产品线合并。对于由此产生的海量信息，我们基于时间、空间等多个维度进行场景化处理，以此实现信息“变多的同时变少一点”。2.0 时代的开启，让用户仅通过一个入口就能看到原先分布在两条产品线内的航班信息和服务，大大减轻了费力度。而对于我们而言维护成本也极大降低，实现了用户体验和公司利益的双赢。

1.3 易用与智能——3.0 时代

结合“服务”理念及携程机票 UED 最新设计语言 -zelda。在 3.0 时代我们对产品从交互逻辑到视觉表达进行全面升级，采用结构化的呈现方式将复杂的数据信息化繁为简，为用户提供更贴心、舒适与智能的体验。

二、设计策略与方法

如 2.0 时代中提到的，改版最大的设计挑战在于「处理海量信息」。为此在战术上我们制定了两条设计策略：

1）讲一个与用户息息相关的故事，让用户驻足；

2）驻足之后还要停留，把故事听下去；

并在战略上引入了【GUCDR】模型：

1）目标（GOAL）

合并两条产品线，信息体量不变的前提下化繁为简，使产品变的易用与智能。

2）用户（USER）

通过真实的场景体验与用户访谈反馈，明确两项用户「核心痛点」——航班、行程。

• 航班·动态信息

飞机有没有延误\取消？能不能按时起飞\抵达？

• 行程·服务信息

“几点截止办理值机？哪个门进入离值机柜台最近？我的行李是否符合托运规范？飞机上有没有餐食？”“我定了接送机，司机师傅会在哪儿等我？”等等。预订机票后，行程就已经开始了，越是临近出发，需要关注的信息就越多。

3）条件（CONDITION）

这一部分主要是资源、业务、技术、数据等的支持度，本次不讲。

4）设计（DESIGN）

向郭靖大侠学习，一招一式拳拳到肉，从框架到内容对产品进行层层锤炼。

5）落地（REALIZE）

设计全面改造完善，与业务开发技术配合优化与统一，并推动技术的优化调整，负责的业务模块还使用内部研发的 Kirby 工具更好地提高还原效率。

三、设计三大“秘籍”

下面我们来解析在航班助手改版中运用到的三大“武林秘籍”：

• 双剑合璧：让资讯与服务归为一处。
• 白云出岫：以用户体验为本位，优先将最重要的放在第一位。
• 风伴流云：让信息呈现智能起来，清晰的为用户排序，减少信息过多导致认知的负荷。

3.1 第一招：双剑合璧 ——取自 无名·《风云》

我们通过调研发现，用户最关心的是航班动态信息，其次是行程服务信息。

在 1.0 时代，这两类信息散落在「航班动态」和「飞行助手」两个频道中。对用户而言，这如同站在一个没有导视的商场中，很难知道应该去何处找到自己需要的资讯。

我们仔细分析了两条产品线的信息构成，存在的核心问题有：

• 部分信息重复展示
• 动态、服务类信息相互干扰
• 首屏利用率低，信息隐藏过深

为了解决这些问题，我们放出了第一招“双剑合璧”。顾名思义，第一步就是将两条产品线合并，让用户从一个入口进入即可纵观全部信息。合并可以实现“合璧”，但处理好“双剑”之间的关系才是重中之重。由于「航班助手」主要是以众多卡片的形式提供服务，在合并后如何避免服务信息的堆叠，就成了本次改版的设计挑战点。为此我们祭出第二招“白云出岫”。

3.2 第二招：白云出岫 ——取自 华山剑法·《笑傲江湖》

释义：白云从山峦中飘出

原则示意 ：用户最关心的是航班动态，其次才是服务信息。核心动态信息要足够大，首屏曝光，便于用户能够精准快速触达，同时服务作为辅助功能，与主信息保持足够的间距。

处理方案 ：我们将原航班动态内的所有信息聚合在一张卡片中（如何处理大量的信息聚合会在第三招中详细解说），运用深色背景来反衬航班卡片的优先层级，就如同蓝天下的白云一样。同时在卡片的头部配以场景化文案，与用户产生时间空间上的共鸣。

1）首推展示航班信息后，多行程时如何处理？

我们关注到不同用户群体的使用习惯不尽相同。通过对用户的访谈与数据分析发现：

• 部分用户会提前预定多个行程的机票，虽然占比少（但都是爸爸）。
• 如果需要手动关注不同的航班，用户需要往返于航班列表和详情页之间，特别麻烦。

解决多行程问题： 在新版的设计中我们充分利用 X 轴的横向空间，让“云”飘起来。用户在关注当前行程信息的同时，只需横划行程卡，即可切换，查看不同行程。

2）在旧有的关注流程中，如需关注航班，需要在多页面切换，降低了用户的触达效率，并且缺少了与行程的共性关联。

解决手动关注问题： 调整了架构后，我们对操作路径做了大量减法，充分利用 X 轴支持横向滑动这一交互特性，定义最左第一张卡片为手动关注的功能卡片。这样，一则让用户感知自己并未跳出，依然是专注当前任务，二来减少了跳转，提升了用户对搜索行程的触达。

至此，从“双剑合璧”到“白云出岫”，通过两个招式，我们打通了航班助手的任督二脉，合并了两条产品线。在框架层让产品的易用性达到了一个新的高度。紧接着，就要引入第三招“风伴流云”。

3.3 第三招：风伴流云 ——取自 华山剑法·《笑傲江湖》

释义：云舒云卷，与风为伴

原则示意： 航班的状态，用户需要关注的信息会随着时间的流逝不断变化。如果说航班卡片中的信息是云，时间是风，那我们要做的就是让信息呈现智能起来，如云般随风云卷云舒，时刻变化。

处理方案： 为了做好这一变化，我们引入了「关注度」作为线索。

上图是我们基于用户对信息的关注度整理出的大致曲线，基于这张曲线图，我们对大量的信息进行了有理有据的排列。但这一步工作依然只是保证了产品的易用性，并没有体现出智能。接下来需要做的就是通过细分场景让信息变的更智能。通过“随风而动”的场景划分，对内容根据不同的时间场景、用户场景灵活变化。以求让产品的智能性上有一个新的突破。具体是怎么实现？

1）【时间场景】的处理

用随时间而变的大字号形态的召唤文案，来获取用户的注意力，这是一个与你相关的故事。

紧随其后的航班动态信息与用户密切相关，持续吸引用户的注意力。获取用户注意力后，我们通过细分时间场景的颗粒度，为用户打造了一片动态信息的展示区。

通过细分时间场景，将高时效性的信息在合适的时间，合适的地点推给用户，为信息降噪，也为用户的信息获取减负。

2）【用户场景】的处理

在呈现给用户最关注的动态信息后，如何留住用户关注到服务信息是本次改版的另一个设计挑战点。我们了解用户行程的特征，所以如果能与用户在情感上产生共鸣，将起到事半功倍的效果。

场景共鸣文案的设计： 想用户所想，给用户所需才能让用户感到贴心。我们通过大而显眼的场景文案与用户产生共鸣，引出服务类卡片信息流。

提升卡片的易阅读能力： 我们通过数据可视化、图形化、适当添加动画及优秀的排版等手段让卡片变的更易读，从而降低用户的阅读费力度。

至此，“万剑归宗”“白云出岫”“风伴流云”三招打完，航班助手页面焕然一新，无论从易读性，统一性，扩展性上都得到了极大地提升。虽然场景变多了，但动态的信息体现更游刃有余了。后期即使接入了复杂的业务，我们都能快速迭代上线。

作者介绍：

野原，携程 UED 视觉设计师，致力于洞察用户需求与商业价值。Jaye，携程 UED 交互设计师，一个安静的交互设计师。