飞猪首页2018改版 - 做用户出发的设计优秀UI教程

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

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


Part.1 | 飞猪首页的历史


飞猪首页2018改版 - 做用户出发的设计

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


飞猪首页2018改版 - 做用户出发的设计



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


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


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


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


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


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


飞猪首页2018改版 - 做用户出发的设计



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


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


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


飞猪首页2018改版 - 做用户出发的设计



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


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


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


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


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


飞猪首页2018改版 - 做用户出发的设计



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


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


飞猪首页2018改版 - 做用户出发的设计



当然,首页的样式看起来越来越美好了。


当然,样式变得美好了,但我们仍然不满意。


飞猪首页2018改版 - 做用户出发的设计



Part.2 | 历史版本首页的问题


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


飞猪首页2018改版 - 做用户出发的设计



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


1、用户最主要的点击发生在头部类目预订


2、用户在页面中尾部的点击非常低


3、用户可能虽然看到了页面中尾部,但仍不点击


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


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


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


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


飞猪首页2018改版 - 做用户出发的设计



用NLP分析问题背后的原因


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


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


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


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


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


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


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


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


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


5、身份:售卖平台


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


6、精神:?


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



Part.3 | 2018年飞猪首页做的改变和突破


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


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


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



1、矫正目标


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


飞猪首页2018改版 - 做用户出发的设计



2、重构框架


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


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


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


飞猪首页2018改版 - 做用户出发的设计



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


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


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


飞猪首页2018改版 - 做用户出发的设计



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


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


飞猪首页2018改版 - 做用户出发的设计



3、培养能力


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


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


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


飞猪首页2018改版 - 做用户出发的设计



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


1、突破空间 - 打破“屏效比”的伪命题


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


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


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


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


2、图片 - 大图凸显内容品质


 收藏