如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
飛豬首頁在這兩年，經歷過無數次大大小小的改造。而在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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
