官方揭秘!飞猪首页2018完整改版背后的设计过程回顾 - 优设网 - UISDC

官方揭秘!飞猪首页2018完整改版背后的设计过程回顾

2019/02/17 29604评论 16

飞猪首页在这两年,经历过无数次大大小小的改造。而在2018年7-8月,我们对飞猪首页进行了尤为重要的,一次较为完整的改头换面。这篇文章,包含了飞猪首页历次改版的回顾。我们也想和大家分享一下,2018年,我们这次完整改造背后的思考。

飞猪首页的历史

我在2015年毕业后,就来到了飞猪。其实当时还没有飞猪的概念,那时候的 app 叫「阿里旅行·去啊」,后来了解到我们还有过「淘宝旅行」、「阿里旅行」、「去啊」等这些曾用名。

说起名字还有个故事。我刚工作那会打Uber,司机们都特热情,打车能和你聊一路。

有个司机问我:「你是在阿里哪个部门工作呀?」,我就说:「去啊」。司机很激动,马上说:「哦哦,我知道,那个去哪儿网,头像是绿色骆驼的那个!我老婆手机里就装了一个!」

我连忙说:「不是的不是的,我们叫去啊,不叫去哪儿。我们也叫阿里旅行,或者淘宝旅行,你知道吧…」

然后我们讨论了一路「去啊」和「去哪儿」的区别。

虽然直到我下车,我也不知道司机老哥有没有弄明白。

这个事其实很有代表性。在当时,旅行市场最大的品牌就两个,携程和去哪儿。虽然市场上还有同程、穷游、蚂蜂窝、驴妈妈、艺龙等旅行相关的app,但我们就叫「去啊」,其实已经暴露了我们的目的(并不是为了让大家想下「去哪儿」的时候,不小心下载了「去啊」),而是我们当时的目标就是要做一个对标OTA 的旅行预订工具。

这时候我们的首页和他们比起来,简直满分。当然,我指的是相似度,满分。

这其实就是飞猪的起源版本首页。在这里我们可以看到巨大的机票、酒店这样的旅行类目预订的入口,其实就是为了让用户有「预订」的认知。

直到有一天,产品经理在压榨设计师出图,我隐约听到「我们是平台,不是OTA」这样的说法。那个设计师熬掉好几根头发之后,方案确定了,我们便有了下面这个版本的首页。

我们看到,这个版本的首页看起来不像携程了,更像是当时的淘宝。那个产品经理把他的 iphone5s 擦得锃亮,非常兴奋地给我展示:「你看,这个首页,改得太棒了!比以前好多了!」

其实以我当时的聪明才智,真没看出来。但后来想想,这个改版其实是一次觉醒。这个改版意味着,我们要在平台的业务模式下,在机票酒店这样的预订心智之外,找到自己的特色。

而这种差异化的思维模式影响了接下来一年多的首页设计。

刚开始接首页时,我们尝试从内容进行突破,将商品罗列升级为旅行内容。

同时,在品牌升级为飞猪之后,我们尝试为用户提供更个性的服务,基于用户可能想去、准备出发、正在旅行等不同阶段,设计了「目的地个性化」模块,让有不同需求的用户可以看到不一样的目的地、玩法、商品。

后来我们新起了场景化项目,有个业务小组产出了全球第一站、周边好去处这两个出境、周边的导购场景。

并且我们将首页所有的信息都进行了个性化处理,让每个人每天可以看到不一样的内容。

当然,首页的样式看起来越来越美好了,但我们仍然不满意。

历史版本首页的问题

上面这些版本的首页,有一个共性:我们一直围绕着业务的布局,在首页上设计业务模块。比如下面的这些模块:

而体现在数据上,也有这么几个共性:

  • 用户最主要的点击发生在头部类目预订;
  • 用户在页面中尾部的点击非常低;
  • 用户可能看到了页面中尾部,但仍不点击。

用一句话来总结,就是用户对排列业务模块搭出的首页没有建立认知。

2018年4月开始,我们着手对飞猪首页进行一轮整体的改版。在改版之前,我们首先需要对之前首页进行一次全面的体检。

在这里,我们使用 NLP 理解层次,来深入理解飞猪首页到底发生了什么。

简单介绍一下 NLP 理解层次:我们一般可以通过6个层次理解事物,由低到高分别是:环境、行为、能力、BVR(信念/价值观/原则)、身份、精神。这套框架几乎可以帮我们分析理解一切问题。

△ 用NLP分析问题背后的原因

  1. 环境:飞猪业务主导的环境

飞猪的整体环境核心是以业务为导向的,设计的大部分工作是属于支持性质的。在首页工作中,我们做得更主动一些,常给一些提案,也可以算作是共创。但核心的决策权是属于业务和产品的,所以这就导致,飞猪最后上线的东西,往往优先考虑的是业务的重要性。

  2. 行为:首页根据业务调整不断改版

我们始终在跟踪首页的数据,并根据数据的变化、业务的倾向性对首页进行日常的调整。

  3. 能力:设想的场景没有做好,维度少/内容欠佳

我们希望做场景化,其实是很好的想法。但业务前期只尝试了周边、出境两个场景,这很难匹配旅行用户各种各样的偏好。

同时,飞猪在生产高质量内容的方面做得不够,产出的内容没有让用户产生兴趣。

  4. BVR:内容数量>内容质量

因为飞猪的内容起步晚,在起步初期的目标是提高内容的数量,而非生产高质量的爆款文章。所以当后续我们需要用到内容时,常常担心取到一些充数的质量不高的内容。

  5. 身份:售卖平台

飞猪以往的定位仍然是旅行商品预订平台,这也会在一定程度上,导致我们不会在提升内容质量上投入太多。

  6. 精神:?

这个层面我只能说我个人的理解:我希望飞猪能让旅行者享受更多旅行的快乐。

2018年飞猪首页做的改变和突破

通过分析我们发现,飞猪的身份定位,对我们设计产品会有从表及里的深度影响。如果我们定位是旅行预订工具,必然只能做出小的创新。所以如果要做大改变,首先要定义飞猪的新身份。

而恰巧,2018年飞猪迎来了新的品牌定义──「全球fun肆玩」。我们开始从旅行预订平台进行更大胆的转型,试图建立新的在线旅游生态。

在这个身份转变的契机下,我们在2018年对首页进行了升级。

  1. 矫正目标

飞猪的新目标叫「全球fun肆玩」,关键在fun。我们需要通过设计,激发用户旅行的欲望。

  2. 重构框架

旧版飞猪的框架依然是围绕业务架构建立的。而在这次改版中,我们希望基于每一个普通旅行者的视角,来建立新的首页框架。

在建立框架之前,我们需要挖掘的是,旅行是什么?

有人说旅行是机酒火汽的预订,其实不是。我理解的旅行指的是人,花一段时间,离开现在的位置,去感受快乐。其中包含了角色、目的、地点、时间4个关键的因素。而取决于角色的不同,每个人在旅行上作出的决定也是不同的,所以「人」是旅行真正的内在因素。

而我们认知里零散的旅行方式,如:跟团游、自由行、亲子游、出境游、周边游只是被内在因素对旅行产生影响的结果。

而偏偏旅行还要求我们产生玩的想法,留出足够的时间,从一个地方去另一个地方。当定机票酒店已经不再是个难题的时候,我们决策困难的原因更多是在自身:我不知道自己想要什么样的旅行。

所以我们解析了用户的旅行特性,发现每个用户喜欢的内容、商品,都是不同,且是特色鲜明的。所以我们的核心需要做到的,就是让这些无数的普通人,都能感知自己的内在,并找到和自己内在适合的旅行方式。而直接放商品、内容都让用户难以理解。所以我们选择了更理想的方式来让用户理解自己的内在──主题。

我对主题这两个字的定义是:一句话描述你想要的旅行。这句话可以是:情侣最爱去、国内必玩地、舌尖上的中国、隐居西子湖畔等等和你匹配的点。

我们初步将主题组织成了灵感、计划、商品三个维度,希望能在玩什么、什么时间去、买什么等旅行决策上,对用户由内而外地产生帮助。

  3. 培养能力

在搭建好了框架后,我们需要的就是更好的承接能力。核心考验的就是内容的生产和算法的组织。

为了让用户看到更好的内容,我们使用了新的后台,可以通过算法,动态选出具有相似主题的无数商品,搭建频道,并进行投放,做到千人千面。

在内容质量上,我们还将继续寻找突破口,进行新的升级。

飞猪2018的首页,我们也在视觉上打破传统,做了很多突破。

突破空间 – 打破「屏效比」的伪命题

在移动端设计的时候,设计师往往被要求高效利用屏幕的空间。

而业务方和 PD 也非常机智,总能有一些金点子,例如:「区块再矮一点」、「文字再小一点」、「给我多放几排」、「一排再给我多放几个」。

在这样的诉求下,我们的界面设计常常会失去很多留白空间,导致信息密度会很大。而太大的信息密度反而会影响用户的阅读欲望,甚至降低用户的阅读效率。

而随着设计影响力的增加,大家认识到了一个更美的、更能讨人喜欢的界面,不是什么都放上来的界面。

图片 – 大图凸显内容品质

由于以往对空间利用的苛刻,我们的图片常常会被压缩得很窄、很矮,有时甚至无法形成系统的图片比例。而在解决了空间的问题后,我们可以按照1 : 1、16 : 9、4 : 3这样的标准比例来设计图片坑位的大小。这些比例能更好地帮助用户阅读图片的内容。

文字 – 不是装饰,更不仅是内容

随着iOS11的推出,大标题对设计已经产生了较大的影响力。我们在设计首页时就做了大胆的尝试,使用简短有力的大标题和留白作为每个模块的区隔,让用户的视线可以从一个模块自然地过渡到下一个模块。

同时,我们尽量保证内容是简短有力的,这样就可以用更大的字号,减少用户阅读的成本。

色彩 – 来自于旅行的颜色

以往在猜你喜欢中,我们的标签都是用黄色或者黑色底,盖在图上来做的。但这会影响图片的品质,同时较小的标签文字盖在图上,其实并不适合用户阅读。

所以我们优化了方案,让小文字和图片不要重叠,提升了文字的阅读性。同时通过改变标签文字的颜色,让标签成为了商品卡片的点缀。

未来的首页

我们回顾了飞猪首页的设计历史,并看到了2018年我们的探索。这背后伴随的是行业、市场、用户的变化,提醒着我们需要把产品设计得更优秀,来面对无尽的挑战。

2018年飞猪首页的改版,也代表着首页设计模式的转变,从业务争夺入口转型为基于用户体验,设计师、产品经理、业务方、技术团队协同作战的模式。

而作为设计师,更需要始终围绕着用户,在桎梏中跳舞,做出好体验的设计。

2018飞猪首页的改版只是开始,飞猪才刚刚转型,未来我们将更加紧密地围绕用户,提供质的服务。

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/2018-alibaba-feizhu-redesign

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 用户体验设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里