如何打动用户？携程用户体验实践分享
程序员文章站
2022-05-07 23:30:52
...
进入Web2.0时代以来，用户体验（User Experience）逐渐在互联网站实践中被发掘、提炼和延展，它贯穿产品的整个环节，于细微处体现着价值，助推着商机，在企业快速成长的征途中将成为核心竞争力之一。伴随这一趋势，可用性、易用性、转化率、用户研究、交互设计、视觉设计、前端开发……新概念不断进入我们的视野。本文将从概念、衡量标准、流程把控出发，并结合具体应用实践，分享携程在用户体验领域中的探索。
什么是好的用户体验？
把出品iPhone的苹果和海底捞之间连根线，你会想到什么？
苹果推崇简单易用，产品设计时就专注于顾客的想法和需求，用户往往只需按一个键，就可以完成想要实现的功能。原本并非手机巨头的苹果，将这一理念带入手机设计，从iPod、iPhone到iPad，一键通行，即使儿童操作起来都毫无障碍。出众的用户体验获得消费者追捧，迅速赢得市场优势。而海底捞则践行“以提升用户体验打开市场”的理念，令员工以全心全意的极致服务来征服顾客的心。
一个久负盛名的高科技企业，一个服务见长的餐饮新贵，看似互不相干，却有着同样的核心竞争力——用户体验（User Experience）。
在强调以人为本、以用户为中心的今天，用户体验被称做创新2.0模式的精髓。它直接决定了用户对企业的整体印象，界定了企业和竞争对手的差异。在同等条件下，好的用户体验会使产品赢得竞争优势。尤其当市场趋于“同质化”，同类型产品竞争日益激烈，用户体验显得愈发重要。
ISO标准将用户体验定义为“人们对于使用或期望使用的产品、系统及服务的认知印象和回应”。通俗讲，就是产品好不好用，用起来方不方便，下次还愿不愿意再来（12306也许是个反面典型）。
什么是好的用户体验？想象你逛进一家超市，印刷精美的促销目录即时派送给你，清晰明确的导航指示让你很快找到商品区域，排列有层次的商品不致让你陷入太多选择的纠结，商品说明、点评、标价、折扣信息简约全面，重点突出还能排序对比，你不费太多力气就找到心仪的物品放进购物车。此时，相关商品的推荐适时出现，而且正合你的需求，购物清单很快勾满。你推着购物车来到结账处，没有排队还支持各种支付，这样的购物体验，值得点赞吧。
同样的经验，我们也希望出现在携程的网站。并且，访客自登录进入网站起，便仿佛有高级客服相伴，他会收到根据个人信息为他定制的产品信息；简约大气的页面伴随条理明晰的目录分类，用户搜索浏览一路快捷畅通；填写订单时存于网站的个人资料自动填入而无须再费周折。快速的响应、精准的推荐、靠谱的承诺、搜索无结果时贴心周到地给出备选方案……在精心设计规划的虚拟超市里，用户所做的，只是舒适地浏览—选择—下单，省心省力。在线预订过程不再是带着压力的任务，而成为一种享受，一种愉悦的经验。
所有这一切，都源于以用户为中心的用户体验设计 （User Experience Design）。设计的全过程中，产品经理会专注于战略层次（Strategy）明确用户需求和产品目标，在范围层次（Scope）确立网站功能，把握方向。而UED设计中心则会用巧思创意和缜密逻辑，在结构层（Structure）展示网站的具体架构，在框架层（Skeleton）优化页面的设计布局，最终在表现层 （Surface）呈现出面对用户的网页图文，和给用户带来直观体验的交互效果——通俗来讲，产品经理界定“有什么”，交互设计确定“怎么使用”，而视觉设计决定“看起来如何”。
良好的用户体验是各团队共同努力的结果，上线的页面往往都经过反复推敲和优化，集纳了社会学、人类学、心理学、设计学、美学、IT各种知识并平衡于商业考量。页面的改进并不限于外观，统计数据会说话，从不断提升的访问量、订单转化率和用户忠诚度上，用户体验的价值终会让你看到。
如何让用户对产品“一见钟情”？
在携程，客户服务是核心优势。从登上携程页面，到下达订单，再到走完行程感受携程的服务，用户体验随时相伴。单说线上，如何通过文字、图片和潜藏其下的各种逻辑、各种交互行为的运用，让万千访客对携程产品“一见钟情”，UED用户体验设计就承载了这样的任务。
产品的IDEA来源于产品经理，他们会根据用户需求和市场研究，定义出产品的目标、功能和范围，并付诸于具体的产品需求文档。
进入设计阶段，设计师们首先要理解、分析用户的需求，以他们的眼光重新审视，比如将人物角色（Persona）提取到情景（Scenario）中，通过想象用户会有何种购买经历来描述用户需求的完成过程。
现有产品分析也是这一阶段的任务。用研团队通过眼动测试、用户可用性测试和满意度问卷调查这些科学客观的方法，评估设计原型（即设计稿）和需要验证的设计原则，令设计更有的放矢，也能在原型完成后组织用户测试，验证设计使之更臻完善。竞品分析，则是实践“知己知彼”的古训，紧跟市场需求，关注对手动向，科学分析而非盲目跟风。
理清需求后，交互设计师开始进入概念设计，他们将依序规划出产品的工作流程（Workflow）、信息架构和网页布局。在获得需求方认可后的详细设计阶段，UI设计师要为网页上各个元素做出界面和交互设计。具体到一个“提交订单”功能，是否用按钮来完成、按钮何处摆放、按钮的大小层级、鼠标移上去及按下后的变化效果、按下按钮后的成功失败反馈、用户后续操作的提示信息……所有这些用户下单时可能发生的行为，以及系统如何配合响应，事无巨细，交互设计师都要考虑周到。
交互设计完成的将是着重信息元素组织及概念模型搭建的低保真原型，视觉设计师将用他们的创意将之转换成高保真原型（顾名思义，高保真在观感上已十分接近最终的网页）。视觉设计同样历经研究分析、设计草案、视觉提案与定稿完善等阶段，设计师们通过构思创意、多方案对比、配色表现和细节深入，将内容、功能和美学汇集在一起，以专业而有魅力的视觉展示为网页赢得注目。
网页空间寸土寸金，文字内容需符合互联网的扫视习惯，能引领视线，突出符合用户期望且有价值的信息，促进购买。同时需符合语言使用规范，符合法律法规，避免风险。
文案团队会在此时登场，对原型中的文字推敲斟酌，做出优化修改。文案质量关乎公司形象和专业水准，更重要的是能确保用户无障碍、准确、快速地接受产品需要传达的信息，甚至在字里行间感受到携程对用户的尊重与热情。比如，用户选择和预订时，行文给予正面鼓励，完成订单时加以祝贺；而因携程原因遇到客房已订完等状况，则需在结果页使用抱歉提示，并提供其他解决方案。
如果将交互设计比作建筑领域的方案设计、技术设计和施工图绘制，那视觉设计更像经修饰、渲染后模拟出效果图。而样板房的构建，就有赖于前端开发的工程师了。
他们根据设计稿，用HTML完成静态页面制作并用CSS提炼出统一规格的样式表，实现交互效果为动态JS做好铺垫。在此基础上，维护完成页面并对网站前端性能不断优化。在他们手中，高保真原型真正转化成了网页，可交付后续的开发环节。
打动用户，携程是如何做到的？
上文主要介绍了用户体验应遵循的基本流程及设计原则，接下来将结合旅行日程移动应用的设计过程，重点谈谈携程是如何抓住用户核心需求，突破原有局限，为用户提供旅游一站式服务的。
旅行日程通过整合用户订单中的行程信息，可为用户提供统一的行程管理。用户在完成预订后，可在应用上查看出行的整个活动，如飞机出发时间、是否延误、到达目的地要不要接机、怎样去酒店等相关问题。这改变了传统旅游订单管理仅为完成信息确认而简单罗列订单信息的单一功能，延长了与用户交互时间，覆盖了整个出行行程，服务更完善、更贴心。
该应用的设计初期，面临的挑战是如何抽取和呈现一张旅游订单所包含的关键出行信息，同时需要能符合手机这一移动设备场景的使用习惯，方便用户能最有效地获取当前所需行程信息。经过团队成员之间的研究，最后选择了动态卡片这一形式，其优点在于对信息的收敛性，能让用户感知到一张行程卡片就是在说一件事情，也正是这种特性，促使设计能够真正从出行的使用场景出发，对展示信息作出正确的取舍。
举例来说，旅行日程的机票卡片，在乘机前几天着重展示时间和航站楼信息，而临近起飞，则着重展示航班动态、值机和登机口信息。若它们变更了，会及时通知用户。而到飞机到达时，又会着重展示行李信息。这种动态的卡片设计，保证了在方寸之地，用户看到的都是和当前场景相符的重要信息。
2014年年中，在旅行日程上线半年后，旅行日程的产品方向要往一站式服务更进一步，然而原有的设计框架已经无法承载。比如用户想从一个景点，游玩其他通勤方便的景点，再比如到了三亚酒店，用户想在那里租车*行，甚至发现因为是通过携程预订的酒店，租车能更便宜。这时的设计挑战是既要保证原有轻而美的体验，又能开辟出一块面向用户行程中服务的设计。
我们尝试了延展设计。
当然，延展必定意味着更多页面。但我们不想打断用户操作，要让用户感到虽然它功能全新了，但页面间，逻辑、操作，以及信息的前后承接比过去更加流畅。我们通过减少卡片的非必要操作，暗示用户可以触摸卡片获得更多与其相关的信息，同时，配合动效，使用户感知如何方便地回到主页面。
新的延展性设计正式亮相后，得到了很多正面反馈。通过前后的动效以及信息的延展让用户意识到整个卡片的延展，同时通过非常自然的手势快速回到主页面。以机票场景为例，当我已经知晓了起飞时间以及值机完成后，想了解机场的具体位置，会自然而然地去触摸卡片本身了解是否有更多有价值信息，接下来出现的更多补充信息会让人意识到这就是延展以及更多帮助信息。这时我们还可以推送有效的机场中或者周边服务，帮助用户的同时也能提高自身的转化。
凭借独特的设计理念和卡片展现形式，旅行日程已成为整个携程App的大入口，活跃用户获得了数十倍的增长，也吸引了其他OTA的跟进效访。在未来的时间里，旅行日程仍会坚持向一站式服务更进一步。
结语
将用户置于核心，用爱和专业悉心浇注产品，是企业产品设计整个流程的指向标。同时遵循基本设计流程，一环一环紧密配合、快速迭代，用户体验设计才能运转若行云流水。
作者简介
林传毅，现任携程酒店研发部设计专家，客栈通产品主设计师，曾是解放日报社编辑和柯达PDC产品可用性专家、记录生命网创始人。
花知鸣，现任携程攻略社区设计专家，曾是今夜酒店特价首席产品设计师，MSN购物首席交互设计师，携程无线事业部设计专家。
本文来自：程序员电子版2015年3月下半月刊，欢迎订阅。
什么是好的用户体验？
把出品iPhone的苹果和海底捞之间连根线，你会想到什么？
苹果推崇简单易用，产品设计时就专注于顾客的想法和需求，用户往往只需按一个键，就可以完成想要实现的功能。原本并非手机巨头的苹果，将这一理念带入手机设计，从iPod、iPhone到iPad，一键通行，即使儿童操作起来都毫无障碍。出众的用户体验获得消费者追捧，迅速赢得市场优势。而海底捞则践行“以提升用户体验打开市场”的理念，令员工以全心全意的极致服务来征服顾客的心。
一个久负盛名的高科技企业，一个服务见长的餐饮新贵，看似互不相干，却有着同样的核心竞争力——用户体验（User Experience）。
在强调以人为本、以用户为中心的今天，用户体验被称做创新2.0模式的精髓。它直接决定了用户对企业的整体印象，界定了企业和竞争对手的差异。在同等条件下，好的用户体验会使产品赢得竞争优势。尤其当市场趋于“同质化”，同类型产品竞争日益激烈，用户体验显得愈发重要。
ISO标准将用户体验定义为“人们对于使用或期望使用的产品、系统及服务的认知印象和回应”。通俗讲，就是产品好不好用，用起来方不方便，下次还愿不愿意再来（12306也许是个反面典型）。
什么是好的用户体验？想象你逛进一家超市，印刷精美的促销目录即时派送给你，清晰明确的导航指示让你很快找到商品区域，排列有层次的商品不致让你陷入太多选择的纠结，商品说明、点评、标价、折扣信息简约全面，重点突出还能排序对比，你不费太多力气就找到心仪的物品放进购物车。此时，相关商品的推荐适时出现，而且正合你的需求，购物清单很快勾满。你推着购物车来到结账处，没有排队还支持各种支付，这样的购物体验，值得点赞吧。
同样的经验，我们也希望出现在携程的网站。并且，访客自登录进入网站起，便仿佛有高级客服相伴，他会收到根据个人信息为他定制的产品信息；简约大气的页面伴随条理明晰的目录分类，用户搜索浏览一路快捷畅通；填写订单时存于网站的个人资料自动填入而无须再费周折。快速的响应、精准的推荐、靠谱的承诺、搜索无结果时贴心周到地给出备选方案……在精心设计规划的虚拟超市里，用户所做的，只是舒适地浏览—选择—下单，省心省力。在线预订过程不再是带着压力的任务，而成为一种享受，一种愉悦的经验。
所有这一切，都源于以用户为中心的用户体验设计 （User Experience Design）。设计的全过程中，产品经理会专注于战略层次（Strategy）明确用户需求和产品目标，在范围层次（Scope）确立网站功能，把握方向。而UED设计中心则会用巧思创意和缜密逻辑，在结构层（Structure）展示网站的具体架构，在框架层（Skeleton）优化页面的设计布局，最终在表现层 （Surface）呈现出面对用户的网页图文，和给用户带来直观体验的交互效果——通俗来讲，产品经理界定“有什么”，交互设计确定“怎么使用”，而视觉设计决定“看起来如何”。
良好的用户体验是各团队共同努力的结果，上线的页面往往都经过反复推敲和优化，集纳了社会学、人类学、心理学、设计学、美学、IT各种知识并平衡于商业考量。页面的改进并不限于外观，统计数据会说话，从不断提升的访问量、订单转化率和用户忠诚度上，用户体验的价值终会让你看到。
如何让用户对产品“一见钟情”？
在携程，客户服务是核心优势。从登上携程页面，到下达订单，再到走完行程感受携程的服务，用户体验随时相伴。单说线上，如何通过文字、图片和潜藏其下的各种逻辑、各种交互行为的运用，让万千访客对携程产品“一见钟情”，UED用户体验设计就承载了这样的任务。
产品的IDEA来源于产品经理，他们会根据用户需求和市场研究，定义出产品的目标、功能和范围，并付诸于具体的产品需求文档。
进入设计阶段，设计师们首先要理解、分析用户的需求，以他们的眼光重新审视，比如将人物角色（Persona）提取到情景（Scenario）中，通过想象用户会有何种购买经历来描述用户需求的完成过程。
现有产品分析也是这一阶段的任务。用研团队通过眼动测试、用户可用性测试和满意度问卷调查这些科学客观的方法，评估设计原型（即设计稿）和需要验证的设计原则，令设计更有的放矢，也能在原型完成后组织用户测试，验证设计使之更臻完善。竞品分析，则是实践“知己知彼”的古训，紧跟市场需求，关注对手动向，科学分析而非盲目跟风。
理清需求后，交互设计师开始进入概念设计，他们将依序规划出产品的工作流程（Workflow）、信息架构和网页布局。在获得需求方认可后的详细设计阶段，UI设计师要为网页上各个元素做出界面和交互设计。具体到一个“提交订单”功能，是否用按钮来完成、按钮何处摆放、按钮的大小层级、鼠标移上去及按下后的变化效果、按下按钮后的成功失败反馈、用户后续操作的提示信息……所有这些用户下单时可能发生的行为，以及系统如何配合响应，事无巨细，交互设计师都要考虑周到。
交互设计完成的将是着重信息元素组织及概念模型搭建的低保真原型，视觉设计师将用他们的创意将之转换成高保真原型（顾名思义，高保真在观感上已十分接近最终的网页）。视觉设计同样历经研究分析、设计草案、视觉提案与定稿完善等阶段，设计师们通过构思创意、多方案对比、配色表现和细节深入，将内容、功能和美学汇集在一起，以专业而有魅力的视觉展示为网页赢得注目。
网页空间寸土寸金，文字内容需符合互联网的扫视习惯，能引领视线，突出符合用户期望且有价值的信息，促进购买。同时需符合语言使用规范，符合法律法规，避免风险。
文案团队会在此时登场，对原型中的文字推敲斟酌，做出优化修改。文案质量关乎公司形象和专业水准，更重要的是能确保用户无障碍、准确、快速地接受产品需要传达的信息，甚至在字里行间感受到携程对用户的尊重与热情。比如，用户选择和预订时，行文给予正面鼓励，完成订单时加以祝贺；而因携程原因遇到客房已订完等状况，则需在结果页使用抱歉提示，并提供其他解决方案。
如果将交互设计比作建筑领域的方案设计、技术设计和施工图绘制，那视觉设计更像经修饰、渲染后模拟出效果图。而样板房的构建，就有赖于前端开发的工程师了。
他们根据设计稿，用HTML完成静态页面制作并用CSS提炼出统一规格的样式表，实现交互效果为动态JS做好铺垫。在此基础上，维护完成页面并对网站前端性能不断优化。在他们手中，高保真原型真正转化成了网页，可交付后续的开发环节。
打动用户，携程是如何做到的？
上文主要介绍了用户体验应遵循的基本流程及设计原则，接下来将结合旅行日程移动应用的设计过程，重点谈谈携程是如何抓住用户核心需求，突破原有局限，为用户提供旅游一站式服务的。
旅行日程通过整合用户订单中的行程信息，可为用户提供统一的行程管理。用户在完成预订后，可在应用上查看出行的整个活动，如飞机出发时间、是否延误、到达目的地要不要接机、怎样去酒店等相关问题。这改变了传统旅游订单管理仅为完成信息确认而简单罗列订单信息的单一功能，延长了与用户交互时间，覆盖了整个出行行程，服务更完善、更贴心。
图1 旅行日程展示方便用户随时获取行程信息
该应用的设计初期，面临的挑战是如何抽取和呈现一张旅游订单所包含的关键出行信息，同时需要能符合手机这一移动设备场景的使用习惯，方便用户能最有效地获取当前所需行程信息。经过团队成员之间的研究，最后选择了动态卡片这一形式，其优点在于对信息的收敛性，能让用户感知到一张行程卡片就是在说一件事情，也正是这种特性，促使设计能够真正从出行的使用场景出发，对展示信息作出正确的取舍。
举例来说，旅行日程的机票卡片，在乘机前几天着重展示时间和航站楼信息，而临近起飞，则着重展示航班动态、值机和登机口信息。若它们变更了，会及时通知用户。而到飞机到达时，又会着重展示行李信息。这种动态的卡片设计，保证了在方寸之地，用户看到的都是和当前场景相符的重要信息。
图2 根据当前场景推送用户所需服务
2014年年中，在旅行日程上线半年后，旅行日程的产品方向要往一站式服务更进一步，然而原有的设计框架已经无法承载。比如用户想从一个景点，游玩其他通勤方便的景点，再比如到了三亚酒店，用户想在那里租车*行，甚至发现因为是通过携程预订的酒店，租车能更便宜。这时的设计挑战是既要保证原有轻而美的体验，又能开辟出一块面向用户行程中服务的设计。
我们尝试了延展设计。
图3 延展设计让卡片承载更多服务内容
当然，延展必定意味着更多页面。但我们不想打断用户操作，要让用户感到虽然它功能全新了，但页面间，逻辑、操作，以及信息的前后承接比过去更加流畅。我们通过减少卡片的非必要操作，暗示用户可以触摸卡片获得更多与其相关的信息，同时，配合动效，使用户感知如何方便地回到主页面。
新的延展性设计正式亮相后，得到了很多正面反馈。通过前后的动效以及信息的延展让用户意识到整个卡片的延展，同时通过非常自然的手势快速回到主页面。以机票场景为例，当我已经知晓了起飞时间以及值机完成后，想了解机场的具体位置，会自然而然地去触摸卡片本身了解是否有更多有价值信息，接下来出现的更多补充信息会让人意识到这就是延展以及更多帮助信息。这时我们还可以推送有效的机场中或者周边服务，帮助用户的同时也能提高自身的转化。
凭借独特的设计理念和卡片展现形式，旅行日程已成为整个携程App的大入口，活跃用户获得了数十倍的增长，也吸引了其他OTA的跟进效访。在未来的时间里，旅行日程仍会坚持向一站式服务更进一步。
结语
将用户置于核心，用爱和专业悉心浇注产品，是企业产品设计整个流程的指向标。同时遵循基本设计流程，一环一环紧密配合、快速迭代，用户体验设计才能运转若行云流水。
作者简介
林传毅，现任携程酒店研发部设计专家，客栈通产品主设计师，曾是解放日报社编辑和柯达PDC产品可用性专家、记录生命网创始人。
花知鸣，现任携程攻略社区设计专家，曾是今夜酒店特价首席产品设计师，MSN购物首席交互设计师，携程无线事业部设计专家。
本文来自：程序员电子版2015年3月下半月刊，欢迎订阅。
上一篇： 面对变化，解决问题，走向成熟