如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
飞猪首页在这两年，经历过无数次大大小小的改造。而在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年飞猪迎来了新的品牌定义──「全球fun肆玩」。我们开始从旅行预订平台进行更大胆的转型，试图建立新的在线旅游生态。
在这个身份转变的契机下，我们在2018年对首页进行了升级。
飞猪的新目标叫「全球fun肆玩」，关键在fun。我们需要通过设计，激发用户旅行的欲望。
旧版飞猪的框架依然是围绕业务架构建立的。而在这次改版中，我们希望基于每一个普通旅行者的视角，来建立新的首页框架。
在建立框架之前，我们需要挖掘的是，旅行是什么？
有人说旅行是机酒火汽的预订，其实不是。我理解的旅行指的是人，花一段时间，离开现在的位置，去感受快乐。其中包含了角色、目的、地点、时间4个关键的因素。而取决于角色的不同，每个人在旅行上作出的决定也是不同的，所以「人」是旅行真正的内在因素。
而我们认知里零散的旅行方式，如：跟团游、自由行、亲子游、出境游、周边游只是被内在因素对旅行产生影响的结果。
而偏偏旅行还要求我们产生玩的想法，留出足够的时间，从一个地方去另一个地方。当定机票酒店已经不再是个难题的时候，我们决策困难的原因更多是在自身：我不知道自己想要什么样的旅行。
所以我们解析了用户的旅行特性，发现每个用户喜欢的内容、商品，都是不同，且是特色鲜明的。所以我们的核心需要做到的，就是让这些无数的普通人，都能感知自己的内在，并找到和自己内在适合的旅行方式。而直接放商品、内容都让用户难以理解。所以我们选择了更理想的方式来让用户理解自己的内在──主题。
我对主题这两个字的定义是：一句话描述你想要的旅行。这句话可以是：情侣最爱去、国内必玩地、舌尖上的中国、隐居西子湖畔等等和你匹配的点。
我们初步将主题组织成了灵感、计划、商品三个维度，希望能在玩什么、什么时间去、买什么等旅行决策上，对用户由内而外地产生帮助。
在搭建好了框架后，我们需要的就是更好的承接能力。核心考验的就是内容的生产和算法的组织。
为了让用户看到更好的内容，我们使用了新的后台，可以通过算法，动态选出具有相似主题的无数商品，搭建频道，并进行投放，做到千人千面。
在内容质量上，我们还将继续寻找突破口，进行新的升级。
飞猪2018的首页，我们也在视觉上打破传统，做了很多突破。
突破空间 – 打破「屏效比」的伪命题
在移动端设计的时候，设计师往往被要求利用屏幕的空间。
而业务方和 PD 也非常机智，总能有一些金点子，例如：「区块再矮一点」、「文字再小一点」、「给我多放几排」、「一排再给我多放几个」。
在这样的诉求下，我们的界面设计常常会失去很多留白空间，导致信息密度会很大。而太大的信息密度反而会影响用户的阅读欲望，甚至降低用户的阅读效率。
而随着设计影响力的增加，大家认识到了一个更美的、更能讨人喜欢的界面，不是什么都放上来的界面。
图片 – 大图凸显内容品质
由于以往对空间利用的苛刻，我们的图片常常会被压缩得很窄、很矮，有时甚至无法形成系统的图片比例。而在解决了空间的问题后，我们可以按照1 : 1、16 : 9、4 : 3这样的标准比例来设计图片坑位的大小。这些比例能更好地帮助用户阅读图片的内容。
文字 – 不是装饰，更不仅是内容
随着iOS11的推出，大标题对设计已经产生了较大的影响力。我们在设计首页时就做了大胆的尝试，使用简短有力的大标题和留白作为每个模块的区隔，让用户的视线可以从一个模块自然地过渡到下一个模块。
同时，我们尽量保证内容是简短有力的，这样就可以用更大的字号，减少用户阅读的成本。
色彩 – 来自于旅行的颜色
以往在猜你喜欢中，我们的标签都是用黄色或者黑色底，盖在图上来做的。但这会影响图片的品质，同时较小的标签文字盖在图上，其实并不适合用户阅读。
所以我们优化了方案，让小文字和图片不要重叠，提升了文字的阅读性。同时通过改变标签文字的颜色，让标签成为了商品卡片的点缀。
我们回顾了飞猪首页的设计历史，并看到了2018年我们的探索。这背后伴随的是行业、市场、用户的变化，提醒着我们需要把产品设计得更优秀，来面对无尽的挑战。
2018年飞猪首页的改版，也代表着首页设计模式的转变，从业务争夺入口转型为基于用户体验，设计师、产品经理、业务方、技术团队协同作战的模式。
而作为设计师，更需要始终围绕着用户，在桎梏中跳舞，做出好体验的设计。
2018飞猪首页的改版只是开始，飞猪才刚刚转型，未来我们将更加紧密地围绕用户，提供质的服务。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
