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

2019-2-18    雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

飞猪首页在这两年,经历过无数次大大小小的改造。而在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飞猪首页的改版只是开始,飞猪才刚刚转型,未来我们将更加紧密地围绕用户,提供质的服务。

蓝蓝设计 www.lanlanwork.com )是一家专注而深入的 界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、 BS界面设计   cs界面设计   ipad界面设计   包装设计   图标定制   用户体验 、交互设计、 网站建设 平面设计服务

 

分享本文至:
« 关于设计的大事件! 让我们目瞪口呆的十大黑科技!创新改变生活! »

分类

  • 图标设计文章及欣赏(108)
  • 大屏界面设计文章及欣赏(84)
  • 网站设计文章及欣赏(472)
  • B端界面设计文章及欣赏(419)
  • APP界面设计文章及欣赏(645)
  • 行业趋势(438)
  • 设计资源(918)
  • 交互设计及用户体验(861)
  • 前端及开发文章及欣赏(1031)
  • seo优化(146)
  • 平面设计(247)
  • 随笔的一些文章(59)
  • 设计思维(1888)
  • 用户研究(230)
  • 设计管理与成长(224)
  • cs界面设计文章及欣赏(56)

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档

  • 2024年5月(1)
  • 2024年4月(44)
  • 2024年3月(50)
  • 2024年2月(58)
  • 2024年1月(44)
  • 2023年12月(47)
  • 2023年11月(41)
  • 2023年10月(15)
  • 2023年9月(27)
  • 2023年8月(88)
  • 2023年7月(62)
  • 2023年6月(58)
  • 2023年5月(28)
  • 2023年4月(47)
  • 2023年3月(37)
  • 2023年2月(90)
  • 2023年1月(78)
  • 2022年12月(45)
  • 2022年11月(69)
  • 2022年10月(51)
  • 2022年9月(135)
  • 2022年8月(60)
  • 2022年7月(111)
  • 2022年6月(162)
  • 2022年5月(143)
  • 2022年4月(86)
  • 2022年3月(119)
  • 2022年2月(53)
  • 2022年1月(99)
  • 2021年12月(105)
  • 2021年11月(83)
  • 2021年10月(101)
  • 2021年9月(153)
  • 2021年8月(147)
  • 2021年7月(149)
  • 2021年6月(157)
  • 2021年5月(124)
  • 2021年4月(185)
  • 2021年3月(144)
  • 2021年2月(35)
  • 2021年1月(103)
  • 2020年12月(95)
  • 2020年11月(76)
  • 2020年10月(31)
  • 2020年9月(45)
  • 2020年8月(50)
  • 2020年7月(46)
  • 2020年6月(33)
  • 2020年5月(78)
  • 2020年4月(69)
  • 2020年3月(100)
  • 2020年2月(59)
  • 2020年1月(31)
  • 2019年12月(50)
  • 2019年11月(57)
  • 2019年10月(48)
  • 2019年9月(48)
  • 2019年8月(57)
  • 2019年7月(58)
  • 2019年6月(58)
  • 2019年5月(31)
  • 2019年4月(37)
  • 2019年3月(43)
  • 2019年2月(25)
  • 2019年1月(45)
  • 2018年12月(41)
  • 2018年11月(40)
  • 2018年10月(29)
  • 2018年9月(40)
  • 2018年8月(87)
  • 2018年7月(107)
  • 2018年6月(86)
  • 2018年5月(109)
  • 2018年4月(40)
  • 2018年3月(35)
  • 2017年8月(35)
  • 2017年7月(45)
  • 2017年6月(7)
  • 2017年5月(27)
  • 2017年4月(51)
  • 2017年3月(69)
  • 2017年2月(65)
  • 2017年1月(69)
  • 2016年12月(55)
  • 2016年11月(111)
  • 2016年10月(92)
  • 2016年9月(53)
  • 2016年8月(9)
  • 2016年7月(4)
  • 2016年6月(9)
  • 2016年3月(19)
  • 2016年2月(26)
  • 2016年1月(29)
  • 2015年12月(34)
  • 2015年11月(35)
  • 2015年10月(46)
  • 2015年9月(43)
  • 2015年8月(40)
  • 2015年7月(33)
  • 2015年6月(46)
  • 2015年5月(58)
  • 2015年4月(70)
  • 2015年3月(55)
  • 2015年2月(17)
  • 2015年1月(33)
  • 2014年12月(21)
  • 2014年11月(83)
  • 2014年10月(94)
  • 2014年9月(6)
  • 2014年8月(1)
  • 2014年7月(13)
  • 2014年6月(66)
  • 2014年5月(99)
  • 2014年4月(88)
  • 2014年3月(101)
  • 2014年2月(67)
  • 2014年1月(83)
  • 2013年12月(106)
  • 2013年11月(111)
  • 2013年10月(61)
  • 2013年9月(20)
  • 2013年7月(13)
  • 2013年6月(27)
  • 2013年5月(48)
  • 2013年4月(39)
  • 2013年3月(8)
  • 2013年2月(20)
  • 2013年1月(31)
  • 2012年12月(33)
  • 2012年11月(31)
  • 2012年10月(22)
  • 2012年9月(8)
  • 2012年7月(14)
  • 2012年6月(15)
  • 2012年5月(31)
  • 2012年4月(24)
  • 2012年2月(4)
  • 2012年1月(8)
  • 2011年12月(35)
  • 2011年11月(32)
  • 2011年10月(13)
  • 2011年8月(1)
  • 2011年6月(1)

代做工资流水公司九江打印薪资银行流水兰州银行流水办理临沂代办企业贷流水武汉办转账银行流水温州做背调工资流水鞍山代办自存银行流水南宁制作入职流水太原工资证明价格南宁日常消费流水查询湛江银行流水PS报价江门银行流水单图片南阳银行对公流水制作咸阳办理贷款银行流水常州制作签证工资流水临沂个人工资流水 代办淮安办理签证工资流水哈尔滨企业对私流水图片开封代做在职证明滁州转账银行流水查询台州工资流水单报价孝感日常消费流水图片佛山入职银行流水价格泉州打印自存银行流水宁波代开房贷收入证明福州银行流水PS模板荆州工资银行流水代开哈尔滨薪资流水代办商丘企业对公流水制作吉林转账流水多少钱大连背调工资流水开具香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

代做工资流水公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化