2019-2-18 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
飛豬首頁(yè)在這兩年，經(jīng)歷過(guò)無(wú)數(shù)次大大小小的改造。而在2018年7-8月，我們對(duì)飛豬首頁(yè)進(jìn)行了尤為重要的，一次較為完整的改頭換面。這篇文章，包含了飛豬首頁(yè)歷次改版的回顧。我們也想和大家分享一下，2018年，我們這次完整改造背后的思考。
我在2015年畢業(yè)后，就來(lái)到了飛豬。其實(shí)當(dāng)時(shí)還沒(méi)有飛豬的概念，那時(shí)候的 app 叫「阿里旅行·去啊」，后來(lái)了解到我們還有過(guò)「淘寶旅行」、「阿里旅行」、「去啊」等這些曾用名。
說(shuō)起名字還有個(gè)故事。我剛工作那會(huì)打Uber，司機(jī)們都特?zé)崆椋蜍?chē)能和你聊一路。
有個(gè)司機(jī)問(wèn)我：「你是在阿里哪個(gè)部門(mén)工作呀？」，我就說(shuō)：「去啊」。司機(jī)很激動(dòng)，馬上說(shuō)：「哦哦，我知道，那個(gè)去哪兒網(wǎng)，頭像是綠色駱駝的那個(gè)！我老婆手機(jī)里就裝了一個(gè)！」
我連忙說(shuō)：「不是的不是的，我們叫去啊，不叫去哪兒。我們也叫阿里旅行，或者淘寶旅行，你知道吧…」
然后我們討論了一路「去啊」和「去哪兒」的區(qū)別。
雖然直到我下車(chē)，我也不知道司機(jī)老哥有沒(méi)有弄明白。
這個(gè)事其實(shí)很有代表性。在當(dāng)時(shí)，旅行市場(chǎng)最大的品牌就兩個(gè)，攜程和去哪兒。雖然市場(chǎng)上還有同程、窮游、螞蜂窩、驢媽媽、藝龍等旅行相關(guān)的app，但我們就叫「去啊」，其實(shí)已經(jīng)暴露了我們的目的（并不是為了讓大家想下「去哪兒」的時(shí)候，不小心下載了「去啊」），而是我們當(dāng)時(shí)的目標(biāo)就是要做一個(gè)對(duì)標(biāo)OTA 的旅行預(yù)訂工具。
這時(shí)候我們的首頁(yè)和他們比起來(lái)，簡(jiǎn)直滿(mǎn)分。當(dāng)然，我指的是相似度，滿(mǎn)分。
這其實(shí)就是飛豬的起源版本首頁(yè)。在這里我們可以看到巨大的機(jī)票、酒店這樣的旅行類(lèi)目預(yù)訂的入口，其實(shí)就是為了讓用戶(hù)有「預(yù)訂」的認(rèn)知。
直到有一天，產(chǎn)品經(jīng)理在壓榨設(shè)計(jì)師出圖，我隱約聽(tīng)到「我們是平臺(tái)，不是OTA」這樣的說(shuō)法。那個(gè)設(shè)計(jì)師熬掉好幾根頭發(fā)之后，方案確定了，我們便有了下面這個(gè)版本的首頁(yè)。
我們看到，這個(gè)版本的首頁(yè)看起來(lái)不像攜程了，更像是當(dāng)時(shí)的淘寶。那個(gè)產(chǎn)品經(jīng)理把他的 iphone5s 擦得锃亮，非常興奮地給我展示：「你看，這個(gè)首頁(yè)，改得太棒了！比以前好多了！」
其實(shí)以我當(dāng)時(shí)的聰明才智，真沒(méi)看出來(lái)。但后來(lái)想想，這個(gè)改版其實(shí)是一次覺(jué)醒。這個(gè)改版意味著，我們要在平臺(tái)的業(yè)務(wù)模式下，在機(jī)票酒店這樣的預(yù)訂心智之外，找到自己的特色。
而這種差異化的思維模式影響了接下來(lái)一年多的首頁(yè)設(shè)計(jì)。
剛開(kāi)始接首頁(yè)時(shí)，我們嘗試從內(nèi)容進(jìn)行突破，將商品羅列升級(jí)為旅行內(nèi)容。
同時(shí)，在品牌升級(jí)為飛豬之后，我們嘗試為用戶(hù)提供更個(gè)性的服務(wù)，基于用戶(hù)可能想去、準(zhǔn)備出發(fā)、正在旅行等不同階段，設(shè)計(jì)了「目的地個(gè)性化」模塊，讓有不同需求的用戶(hù)可以看到不一樣的目的地、玩法、商品。
后來(lái)我們新起了場(chǎng)景化項(xiàng)目，有個(gè)業(yè)務(wù)小組產(chǎn)出了全球第一站、周邊好去處這兩個(gè)出境、周邊的導(dǎo)購(gòu)場(chǎng)景。
并且我們將首頁(yè)所有的信息都進(jìn)行了個(gè)性化處理，讓每個(gè)人每天可以看到不一樣的內(nèi)容。
當(dāng)然，首頁(yè)的樣式看起來(lái)越來(lái)越美好了，但我們?nèi)匀徊粷M(mǎn)意。
上面這些版本的首頁(yè)，有一個(gè)共性：我們一直圍繞著業(yè)務(wù)的布局，在首頁(yè)上設(shè)計(jì)業(yè)務(wù)模塊。比如下面的這些模塊：
而體現(xiàn)在數(shù)據(jù)上，也有這么幾個(gè)共性：
用一句話來(lái)總結(jié)，就是用戶(hù)對(duì)排列業(yè)務(wù)模塊搭出的首頁(yè)沒(méi)有建立認(rèn)知。
2018年4月開(kāi)始，我們著手對(duì)飛豬首頁(yè)進(jìn)行一輪整體的改版。在改版之前，我們首先需要對(duì)之前首頁(yè)進(jìn)行一次全面的體檢。
在這里，我們使用 NLP 理解層次，來(lái)深入理解飛豬首頁(yè)到底發(fā)生了什么。
△ 用NLP分析問(wèn)題背后的原因
1. 環(huán)境：飛豬業(yè)務(wù)主導(dǎo)的環(huán)境
飛豬的整體環(huán)境核心是以業(yè)務(wù)為導(dǎo)向的，設(shè)計(jì)的大部分工作是屬于支持性質(zhì)的。在首頁(yè)工作中，我們做得更主動(dòng)一些，常給一些提案，也可以算作是共創(chuàng)。但核心的決策權(quán)是屬于業(yè)務(wù)和產(chǎn)品的，所以這就導(dǎo)致，飛豬最后上線的東西，往往優(yōu)先考慮的是業(yè)務(wù)的重要性。
2. 行為：首頁(yè)根據(jù)業(yè)務(wù)調(diào)整不斷改版
我們始終在跟蹤首頁(yè)的數(shù)據(jù)，并根據(jù)數(shù)據(jù)的變化、業(yè)務(wù)的傾向性對(duì)首頁(yè)進(jìn)行日常的調(diào)整。
3. 能力：設(shè)想的場(chǎng)景沒(méi)有做好，維度少/內(nèi)容欠佳
我們希望做場(chǎng)景化，其實(shí)是很好的想法。但業(yè)務(wù)前期只嘗試了周邊、出境兩個(gè)場(chǎng)景，這很難匹配旅行用戶(hù)各種各樣的偏好。
同時(shí)，飛豬在生產(chǎn)高質(zhì)量?jī)?nèi)容的方面做得不夠，產(chǎn)出的內(nèi)容沒(méi)有讓用戶(hù)產(chǎn)生興趣。
4. BVR：內(nèi)容數(shù)量>內(nèi)容質(zhì)量
因?yàn)轱w豬的內(nèi)容起步晚，在起步初期的目標(biāo)是提高內(nèi)容的數(shù)量，而非生產(chǎn)高質(zhì)量的爆款文章。所以當(dāng)后續(xù)我們需要用到內(nèi)容時(shí)，常常擔(dān)心取到一些充數(shù)的質(zhì)量不高的內(nèi)容。
5. 身份：售賣(mài)平臺(tái)
飛豬以往的定位仍然是旅行商品預(yù)訂平臺(tái)，這也會(huì)在一定程度上，導(dǎo)致我們不會(huì)在提升內(nèi)容質(zhì)量上投入太多。
6. 精神：？
這個(gè)層面我只能說(shuō)我個(gè)人的理解：我希望飛豬能讓旅行者享受更多旅行的快樂(lè)。
通過(guò)分析我們發(fā)現(xiàn)，飛豬的身份定位，對(duì)我們?cè)O(shè)計(jì)產(chǎn)品會(huì)有從表及里的深度影響。如果我們定位是旅行預(yù)訂工具，必然只能做出小的創(chuàng)新。所以如果要做大改變，首先要定義飛豬的新身份。
而恰巧，2018年飛豬迎來(lái)了新的品牌定義──「全球fun肆玩」。我們開(kāi)始從旅行預(yù)訂平臺(tái)進(jìn)行更大膽的轉(zhuǎn)型，試圖建立新的在線旅游生態(tài)。
在這個(gè)身份轉(zhuǎn)變的契機(jī)下，我們?cè)?018年對(duì)首頁(yè)進(jìn)行了升級(jí)。
飛豬的新目標(biāo)叫「全球fun肆玩」，關(guān)鍵在fun。我們需要通過(guò)設(shè)計(jì)，激發(fā)用戶(hù)旅行的欲望。
舊版飛豬的框架依然是圍繞業(yè)務(wù)架構(gòu)建立的。而在這次改版中，我們希望基于每一個(gè)普通旅行者的視角，來(lái)建立新的首頁(yè)框架。
在建立框架之前，我們需要挖掘的是，旅行是什么？
有人說(shuō)旅行是機(jī)酒火汽的預(yù)訂，其實(shí)不是。我理解的旅行指的是人，花一段時(shí)間，離開(kāi)現(xiàn)在的位置，去感受快樂(lè)。其中包含了角色、目的、地點(diǎn)、時(shí)間4個(gè)關(guān)鍵的因素。而取決于角色的不同，每個(gè)人在旅行上作出的決定也是不同的，所以「人」是旅行真正的內(nèi)在因素。
而我們認(rèn)知里零散的旅行方式，如：跟團(tuán)游、自由行、親子游、出境游、周邊游只是被內(nèi)在因素對(duì)旅行產(chǎn)生影響的結(jié)果。
而偏偏旅行還要求我們產(chǎn)生玩的想法，留出足夠的時(shí)間，從一個(gè)地方去另一個(gè)地方。當(dāng)定機(jī)票酒店已經(jīng)不再是個(gè)難題的時(shí)候，我們決策困難的原因更多是在自身：我不知道自己想要什么樣的旅行。
所以我們解析了用戶(hù)的旅行特性，發(fā)現(xiàn)每個(gè)用戶(hù)喜歡的內(nèi)容、商品，都是不同，且是特色鮮明的。所以我們的核心需要做到的，就是讓這些無(wú)數(shù)的普通人，都能感知自己的內(nèi)在，并找到和自己內(nèi)在適合的旅行方式。而直接放商品、內(nèi)容都讓用戶(hù)難以理解。所以我們選擇了更理想的方式來(lái)讓用戶(hù)理解自己的內(nèi)在──主題。
我對(duì)主題這兩個(gè)字的定義是：一句話描述你想要的旅行。這句話可以是：情侶最?lèi)?ài)去、國(guó)內(nèi)必玩地、舌尖上的中國(guó)、隱居西子湖畔等等和你匹配的點(diǎn)。
我們初步將主題組織成了靈感、計(jì)劃、商品三個(gè)維度，希望能在玩什么、什么時(shí)間去、買(mǎi)什么等旅行決策上，對(duì)用戶(hù)由內(nèi)而外地產(chǎn)生幫助。
在搭建好了框架后，我們需要的就是更好的承接能力。核心考驗(yàn)的就是內(nèi)容的生產(chǎn)和算法的組織。
為了讓用戶(hù)看到更好的內(nèi)容，我們使用了新的后臺(tái)，可以通過(guò)算法，動(dòng)態(tài)選出具有相似主題的無(wú)數(shù)商品，搭建頻道，并進(jìn)行投放，做到千人千面。
在內(nèi)容質(zhì)量上，我們還將繼續(xù)尋找突破口，進(jìn)行新的升級(jí)。
飛豬2018的首頁(yè)，我們也在視覺(jué)上打破傳統(tǒng)，做了很多突破。
突破空間 – 打破「屏效比」的偽命題
在移動(dòng)端設(shè)計(jì)的時(shí)候，設(shè)計(jì)師往往被要求利用屏幕的空間。
而業(yè)務(wù)方和 PD 也非常機(jī)智，總能有一些金點(diǎn)子，例如：「區(qū)塊再矮一點(diǎn)」、「文字再小一點(diǎn)」、「給我多放幾排」、「一排再給我多放幾個(gè)」。
在這樣的訴求下，我們的界面設(shè)計(jì)常常會(huì)失去很多留白空間，導(dǎo)致信息密度會(huì)很大。而太大的信息密度反而會(huì)影響用戶(hù)的閱讀欲望，甚至降低用戶(hù)的閱讀效率。
而隨著設(shè)計(jì)影響力的增加，大家認(rèn)識(shí)到了一個(gè)更美的、更能討人喜歡的界面，不是什么都放上來(lái)的界面。
圖片 – 大圖凸顯內(nèi)容品質(zhì)
由于以往對(duì)空間利用的苛刻，我們的圖片常常會(huì)被壓縮得很窄、很矮，有時(shí)甚至無(wú)法形成系統(tǒng)的圖片比例。而在解決了空間的問(wèn)題后，我們可以按照1 : 1、16 : 9、4 : 3這樣的標(biāo)準(zhǔn)比例來(lái)設(shè)計(jì)圖片坑位的大小。這些比例能更好地幫助用戶(hù)閱讀圖片的內(nèi)容。
文字 – 不是裝飾，更不僅是內(nèi)容
隨著iOS11的推出，大標(biāo)題對(duì)設(shè)計(jì)已經(jīng)產(chǎn)生了較大的影響力。我們?cè)谠O(shè)計(jì)首頁(yè)時(shí)就做了大膽的嘗試，使用簡(jiǎn)短有力的大標(biāo)題和留白作為每個(gè)模塊的區(qū)隔，讓用戶(hù)的視線可以從一個(gè)模塊自然地過(guò)渡到下一個(gè)模塊。
同時(shí)，我們盡量保證內(nèi)容是簡(jiǎn)短有力的，這樣就可以用更大的字號(hào)，減少用戶(hù)閱讀的成本。
色彩 – 來(lái)自于旅行的顏色
以往在猜你喜歡中，我們的標(biāo)簽都是用黃色或者黑色底，蓋在圖上來(lái)做的。但這會(huì)影響圖片的品質(zhì)，同時(shí)較小的標(biāo)簽文字蓋在圖上，其實(shí)并不適合用戶(hù)閱讀。
所以我們優(yōu)化了方案，讓小文字和圖片不要重疊，提升了文字的閱讀性。同時(shí)通過(guò)改變標(biāo)簽文字的顏色，讓標(biāo)簽成為了商品卡片的點(diǎn)綴。
我們回顧了飛豬首頁(yè)的設(shè)計(jì)歷史，并看到了2018年我們的探索。這背后伴隨的是行業(yè)、市場(chǎng)、用戶(hù)的變化，提醒著我們需要把產(chǎn)品設(shè)計(jì)得更優(yōu)秀，來(lái)面對(duì)無(wú)盡的挑戰(zhàn)。
2018年飛豬首頁(yè)的改版，也代表著首頁(yè)設(shè)計(jì)模式的轉(zhuǎn)變，從業(yè)務(wù)爭(zhēng)奪入口轉(zhuǎn)型為基于用戶(hù)體驗(yàn)，設(shè)計(jì)師、產(chǎn)品經(jīng)理、業(yè)務(wù)方、技術(shù)團(tuán)隊(duì)協(xié)同作戰(zhàn)的模式。
而作為設(shè)計(jì)師，更需要始終圍繞著用戶(hù)，在桎梏中跳舞，做出好體驗(yàn)的設(shè)計(jì)。
2018飛豬首頁(yè)的改版只是開(kāi)始，飛豬才剛剛轉(zhuǎn)型，未來(lái)我們將更加緊密地圍繞用戶(hù)，提供質(zhì)的服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com