案例, 设计

围绕业务场景做改版:途牛酒店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 端一致的体验,而且页面会针对屏幕或浏览器宽度自动适配布局,让用户在任何使用场景下都能看到最舒适的页面。

模块+区块结构  

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

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

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

没有评论

(36 篇文章)

一个视觉设计师,一个喜欢科技、数码,也喜欢音乐、电影,热爱生活的好青年。

查看该作者全部文章

留下你的看法

Your email address will not be published. Required fields are marked *