分类:案例

案例, 设计

围绕业务场景做改版:途牛酒店PC站改版经验(下)

三、围绕业务场景做改版

打造预订绿色通道

借助「模块+区块」的理念布局的页面,拥有更加清晰的结构,也能够让我们更加灵活地针对业务场景优化页面内容布局,从而帮助用户更好地挑选、预订酒店。

对于途牛酒店而言,引导用户预订下单是我们的唯一重要指标。通过改版,我们希望能够为 用户提供一条预订的绿色通道,让用户预订路线一路畅通无阻。从首页到列表页、详情页再到预订页的过程,用户的注意力是逐渐集中的,用户的预订意向也是逐渐提升,相对应的,我们的页面也通过将信息的清晰度逐渐提高来满足用户获取信息的需求。但是,我们预订相关的功能在页面中的位置却逐渐下调,那是因为当用户在从浏览到预订的过程中,随着预订意愿逐渐清晰,我们便不需要着重强调预订路线的位置,而是通过在列表页强化筛选功能来帮助用户更容易找到心仪的酒店,而在详情页中,我们通过呈现更多用户可能感兴趣的酒店信息来帮助用户做决策。

复杂功能简单化

为了实现我们改版后功能简单的定位,我们对业务中几个过去要用复杂形式呈现的功能进行了特殊的考虑和优化,其中一个例子就是酒店详情页中的复合筛选组件。

在用户进入详情页时,会产生房型筛选的需求。我们吸收了移动端设计的思路,放弃了原先利用表头来作筛选这种不直观的形式,转而采用了一种复合型的筛选组件。默认状态下,当鼠标悬浮到对应筛选项时会弹出浮层菜单,用户选择筛选条件后,筛选组件会变成标签的形式展示用户已选的条件,如果用户对筛选条件不满意,不仅可以再次通过菜单选择,还能够通过「X」按钮一键清空筛选条件。通过这样的做法,我们将原先需要三种不同形式的组件构成的功能转变为同一种形式,不论是视觉上还是功能上都为用户提供了更简单、高效的筛选体验。 另外一个例子则是我们的「限时优惠区块」的设计,在特定的情形下某些报价无法匹配房型,这类报价由于缺少房型信息(比如房间基本情况、房间照片等)通常没有竞争力,这种情况在我们的APP中也是以单个报价直接呈现,而此次改版我们重新对问题进行了审视。

在与产品经理沟通后,我们决定刚好利用这些房型的临时性和价格优势,将原本难以卖出的报价包装成「限时优惠」的形式。打造差异化的设计和配色来打造让用户产生视觉记忆的特殊区块,只有比用户入住期间所有房型报价的起价要底时,未匹配房型的优惠报价才会展示。 

非模态弹窗的应用

我们希望为用户打造一个衬手的工具,所以任何影响用户流畅操作的功能设计都应该修改或摈除。因此,我们在设计中尽可能地减少中断用户操作的模态弹窗,转而使用气泡、半透明浮层等非模态形式给用户带来行云流水般的体验。 

在订单详情页中,用户可以在发票模块中添加或修改发票信息,通常的做法是弹出窗口或打开新窗口来让用户填写,这样的做法一来打断用户的思路,二来会影响填写的效率。而我们在对这一功能进行设计时,充分利用了「模块」的优势,通过「修改发票」按钮将「发票模块」无缝切换为「发票修改模块」。这一设计让用户能够直接在订单页面内完成所有操作,在编辑的过程中不影响用户查看页面内的其他信息,实现了「所见即所得」的操作体验。

通过引导创造闭环

A 修改提示文案 

我们通过对文案风格的打磨,减少用户的负面情绪和挫败感,降低文案中的消极内容,把重心放在鼓励用户参与解决问题的方向。以上示例即是此次项目中对酒店不可订的错误提示进行的优化,仅仅对文案进行非常细微的改动,却能改变向用户传递的讯息。高亮展示操作建议,也能让整段文案的重心向解决方案侧偏移,让用户最先感受到的是「情况尽在掌控中」的安全感,而非由程序错误带来的沮丧和惊愕。

B 增加简短明确的引导提示

当用户遇到一些复杂的错误时,如果解决方法有多条,就不再适用上文中单纯的文案描述了。在我们实际场景中,也有诸如酒店没有评价、没有搜索到酒店等情况,这时,我们通过插画的形式将建议操作展示出来。 

上图是对点评区域空状态的优化案例,在原先的版本中,冰冷而耿直的提示无疑为这家酒店判了死刑,因为对于酒店产品而言,用户评价是用户判断酒店品质非常重要的标准,没有评价意味着酒店是一张白纸,我们要如何尽可能的让用户忽视这件事,甚至鼓励用户做第一个吃螃蟹的人呢?

很幸运的是,途牛酒店为所有预订酒店的用户提供了点评返现的福利,我们决定利用这个福利作为宣传点,将错误提示包装成一个鼓励用户点评拿返现的宣传文案。同时,为了让用户感到更加友好和亲切,我们还将插图的风格从抽象化的图标修改为手绘人物插画。

C 增加酒店推荐

在酒店详情页内,如果遇到酒店无法订购或是其它一些问题的时候,用户需要返回列表页重新挑选酒店,这样的操作对用户而言无疑是非常不悦的。 

我们通过在错误提示下方增加相关酒店的推荐,帮助用户减少在列表页与详情页之间的切换,同时也降低了用户对酒店无房、酒店不可订状态的反感,不让页面成为死胡同,从而提高转化率。

四、结语

在此次改版过程中,我们在结构上将产品以页面、模块、区块和组件逐级细分,从而得以灵活地调整页面布局。在挖掘用户需求的基础上,结合业务需求,探索出一套围绕业务场景需求作改版的思路。

最后,欢迎大家通过 hotel.tuniu.com 体验我们的产品,并为我们提出宝贵意见,我们将持续思考和优化,为用户提供更多、更好的产品体验。

阅读全文 暂无评论
案例, 设计

围绕业务场景做改版:途牛酒店PC站改版经验(上)

文章摘要

本文以途牛酒店PC站改版项目为例,完整记录了一次产品设计改版过程中,采用定性分析的方法指导设计策略。通过对产品定位和业务模型的分析获取改版思路,并针对改版思路构筑产品设计最基础的部分,再围绕业务场景对页面进行针对性地调整。

通过对业务场景的分析,让设计师避免一头钻进用户需求的牛角尖,更多地站在业务层面去审视,以后退一步的方式看到产品全局,从而更好地管理产品中的功能、信息和体验。

一、理解业务

产品定位

途牛酒店是途牛旅游网的一项子业务,通过 APP、小程序、手机 M 站和 PC 站等形式提供酒店查询、预订和点评服务。我们依托强大的供应商为用户提供海量酒店资源,7X24 小时在线旅游顾问让顾客后顾无忧。

途牛酒店在行业内仍然处于积极寻找突破口的阶段,在点评量、用户体验、价格竞争力等方面仍有不少进步空间。在 PC 站方面,我们的整体表现中规中矩,在视觉风格和产品结构上与国内同行趋于同质化,难以在用户心中形成差异化印象。

我们制作了一张图表来帮助了解产品定位,图表的横轴代表视觉风格,纵轴代表功能的复杂程度。

从图表中我们可以看到,携程的功能最复杂,页面中信息密度高,是典型的老门户网站风格。Booking 作为业内最具代表性的品牌之一,在功能上也相对复杂,但是在信息排布上更加符合国际市场,视觉风格相对于国内品牌而言更加现代。而民宿品牌 Airbnb 是新晋的独角兽企业,视觉设计非常现代,而功能上也保持简洁克制。通过此次改版,我们的终极目标是在不影响功能的前提下,尽可能简化结构,并拥抱现代化网站视觉风格。

业务模型 

为了更好地理解业务,我们制作了业务结构图,从中了解我们的用户在预订流程中接触到的业务场景。我们的业务主要分两条线,一条是酒店预订线,一条是专题浏览线。对我们而言,酒店预订线是我们的核心业务线,用户在首页通过搜索模块进入对应的酒店列表页,在列表页中通过筛选工具根据酒店的评分、起价、位置等要素挑选心仪的酒店产品,进入详情页查看酒店的照片、点评、位置、房型等信息,最终进入预订页填写订单完成预订。在这一流程中用户的预订意向逐渐提高,所以页面中信息的呈现也从模糊逐渐清晰。

改版思路

首先,我们需要重新思考业务场景,并针对业务场景来有针对性地优化页面中的元素布局和信息呈现;其次,我们需要摒弃过去趋同的视觉风格,重新确立视觉形象;第三,我们要重新考虑 PC 站的定位,结合用户使用场景来调整页面结构。

二、构筑业务场景的地基和砖瓦

强化品牌视觉

改版的首件事便是重新思考我们的品牌视觉,经过持续一年的改版,我们的 APP、小程序和移动端 M 站已经统一了视觉风格,而在 PC 站,我们将延续统一的视觉风格,并且针对 PC 网页的特点,对我们的视觉风格和交互表现做了一些调整。

A 色彩 

我们重新调整了 APP 中使用的品牌色的饱和度和明度,使绿色和橙色在电脑显示器上更加沉稳和冷静,主题色的改变也能透过在页面中的实际应用效果体现出酒店产品的专业性。不仅如此,我们通过减少大面积色彩填充来让内容成为页面的主体,而多个辅助色则能服务于不同的信息,带来一定的区分度。

B 图标 

图标的风格同样是品牌视觉识别的重要表现,相比于移动端,在设计 PC 端图标时去除了具有明显风格化的元素,转而采用更加专业、无倾向的线形图标。我们将图标制作成 IconFont,在减少文件请求的同时,还能确保在不同的屏幕分辨率下都能有清晰锐利的表现。我们使用四种固定尺寸的「基底」来锁定图标的尺寸,设计师在设计稿上也只需要将绘制好的图标放入对应尺寸的模板中,就可以方便地交付前端了。

C 控件

网站的按钮、标签和表单等等都是品牌视觉的重要组成部分,优秀的品牌设计仅凭一个按钮就能被用户识别。控件之间并非独立,使用相同的逻辑来设计不同的组件,能让用户在操作时无须多加思考。在本次的改版中,我们通过对组件、控件的统一管理,为用户提供持续一致的使用体验,以传达统一、鲜明的品牌形象。

视觉设计组件化 

此次改版工期短任务重,调整和修改始终贯穿于整个项目过程中,为了保证设计师之间信息同步,我们使用 Sketch Library 搭建了途牛酒店的设计组件库,将文字、色彩、图标和组件统一管理,从而实现一处修改处处生效的高效管理方式。

在移动互联网浪潮下,随着智能手机市场向三、四线城市和村镇进一步下沉,相较于电脑,越来越多的人更先接触到手机。原先对 PC 端交互方式的一些教条也逐渐被人淡忘,移动端的许多交互方式在 PC 端产品上的出现越来越频繁,甚至还带来了一些设计的新思路。

在这次改版中,我们尝试引入移动端的开关、滑动等组件和交互方式,在设计风格上也打破了 PC 端设计一贯思路,充分融合我们在移动端产品中的特色。

响应式布局

在确定 PC 站使用场景时,我们讨论了在 iPad 端适配 PC 网页的可能性。由于改版前,我们与途牛主站采取了相同的适配策略,即检测到用户透过手机或是平板电脑访问时,就会自动跳转到 M 站。然而 M 站页面在 iPad 上的显示效果其实并不好,页面会被拉宽、图片也会被放得很大,原先设计好的布局在大屏幕上会严重变形。通过此次改版,我们为 iPad 用户带来如同 PC 端一致的体验,而且页面会针对屏幕或浏览器宽度自动适配布局,让用户在任何使用场景下都能看到最舒适的页面。

模块+区块结构  

在分析旧版的结构设计时,我们发现信息的分布比较分散,同场景的信息没有有效整合。比如在旧版详情页,当用户从列表页选择了某一家酒店进入详情页后,用户所期望获得的是关于这个酒店更加清晰的信息,比如评价、房型、具体位置等等。在旧版详情页中,用户需要不断地左右上下切换视觉焦点来寻找所需的信息,也会被穿插在页面中巨大的酒店相册所干扰。

而在新版详情页中,我们首先将吸引注意力的酒店相册放置在页面的顶部,从而与页面其他部分形成区分,然后将酒店名称、档次、评分、地址等信息整合到了一个模块中,通过一栏布局,引导用户采用像阅读书刊报纸一般自然地浏览我们的页面,信息自然也就能够高效地被用户获取。从这个页面开始,我们实际做法中提炼出了「模块」的概念,在视觉表现上,「模块」是浅灰色背景上白色的圆角矩形方块。在信息设计上,我们规定每一个「模块」只针对一个业务场景,从而帮助用户更好地理解和使用我们的产品。如果用户不需要这个功能或信息,那他可以直接忽略整个「模块」中的内容。 

然而很快我们发现,「模块」的颗粒度还是太大了,比如在「房型报价信息模块」中,分别有「筛选」、「房型」和「报价」三种信息,为了更好地理解和区分「模块」中的功能或信息,我们又引入了「区块」的概念,在不同的情况下,区块的表现形式更加灵活。我们通过「模块+区块」的理念来将页面根据业务场景需求来布局,使业务目标和用户需求得到有机结合,我们的页面也更加经得起推敲和考验。

阅读全文 暂无评论
案例

一份喵粮 – 面向95后的猫粮产品

客户:一份喵粮

时间:8/17/2017

「一份喵粮」是一个面向90后、00后年轻人群的初创猫粮品牌,客户希望这款产品的logo能充满「可爱」和「中二」气息,还希望能够配上一个萌萌的肥猫形象。

为了营造这种氛围,我想要在标识中增加一些故事性,那就放一只馋猫和一条胖鱼如何?通过对产品的了解,这款猫粮中鱼肉的含量很高,这样就非常契合我目前的想法。

第一稿草图:一只肥猫和一条胖鱼

成稿

阅读全文 暂无评论
案例

东巴文词典APP

东巴文是云南纳西族的古老文字,也是目前世界上唯一存活的象形文字,它的形态甚至比甲骨文还原始,但已濒临失传,为了保护这一宝贵的文化遗产,我和我的合作伙伴共同制作了《东巴文词典》手机APP,并已上架苹果App Store。

阅读全文 暂无评论