旅遊攻略App首頁設計思考：從窮游、攜程、去哪兒和螞蜂窩的攻略說起 | 人人都是產品經理

本文將通過對現今市場上知名度較高的幾款旅遊攻略App的首頁進行比較，然後從信息架構、產品定位與設計分析這幾方面來進行探討，總結出一些規律及亮點，並嘗試設計出一個demo來對分析結果進行應用。

本文數據均來自互聯網，由於數據來源及個人能力有限，故本文存在的不足之處還請各位看官指出，本人定虛心接受，同時本文也作拋磚引玉之用，希望能吸引有經驗的前輩來分享一二。

產品首頁的設計包含了很多信息，其中有對產品定位的體現，產品信息框架的體現，對用戶的引導等，而把這眾多信息聯繫起來的，就是用戶需求，而要明確用戶需求我們就得先確定用戶是誰。

艾瑞網研究報告中對2015旅遊攻略應用用戶屬性的總結如下圖：

根據上圖可知，旅遊攻略應用的用戶是以沿海發達城市的高學歷青年為主，而且他們的收入狀況良好。而根據生活經驗可以知道，這類人是對生活有一定追求的，他們喜歡的格調偏向清新、小資、時尚這幾個方面，對事物的審美和品質也有一定的要求。

1.2使用場景

（1）快要放假了，想去雲南玩，先看看別人是怎麼安排路線的。

（2）雲南才玩5天，假期還有一個多星期，看看還有其他什麼地方好玩的。

（3）出遊行程都計劃好了，看看機票和酒店訂哪家的好，順便預訂免得到時麻煩。

（4）究竟東京火車站怎麼買票的呀，怎麼攻略都沒說，問一下人好了，順便看看有沒有人一起去玩。

（5）正在旅遊，看一下附近還有什麼好玩好吃的。

（6）下個月想去泰國旅遊，看一下籤證要怎麼辦，還有去泰國有什麼要注意的。

（7）這次旅遊真好玩，要記錄下來才行，順便讓別人看看我拍的美照吧！

2.分析對象選擇

先來看一組數據：

（數據來源：艾瑞網）

根據艾瑞網數據顯示，無論從用戶品牌認知度還是使用情況來看，排名前四的均為基於行業影響力發展壯大的綜合企業的攻略社區攜程攻略、去哪兒攻略，多年UGC積累的垂直企業螞蜂窩，以出境攻略為主導的垂直企業窮游網。

另外截至2016年6月3日，在AppStore旅遊類別免費欄目的排名中，除掉電商票務、打車用車、短租住房及一些其他應用，只看專註旅遊攻略的應用的話，排名前四的也是這四個應用，排名分別是去哪兒攻略第11位，攜程攻略第20位，螞蜂窩第21位，窮游網第47位。

並不是說這幾款產品的首頁設計優秀程度與他們的市場排名一樣，其市場排名背後還有資本、運營、市場積累等多方面因素影響，但作為行業領跑者，他們的產品首頁這樣設計肯定是經過資深產品團隊的考慮，也經過多次迭代以如今的設計呈現，對他們進行比較分析，相信能收穫不少，對以後工作開展也有所幫助。

至此，可確定選擇的首頁分析對象為：攜程攻略，去哪兒攻略，螞蜂窩，窮游網。

3.1.1 首頁展示

3.1.2 首頁信息架構

3.1.3 產品定位及設計分析

Slogan：遇見不一樣的世界。關鍵詞為「遇見」、「不一樣」。

首先來看產品的骨架底部tab，選擇舵式設計，重點突出「寫遊記」，意在引導用戶分享，提高UGC產出率，對旅遊攻略類產品意義重大。然後除掉首頁和我的，剩餘的「微遊記」符合「遇見」的定位，「口袋攻略」也符合旅遊攻略的主題。

再來看首頁布局首頁第二屏是「本月該去這裡」目的地推薦和「看看別人怎麼玩」遊記推薦，一個是以景點為切入，一個是以人為切入，但目的都是幫助用戶發現更多有趣的旅遊勝地，再次與「遇見」呼應。。首頁第一屏包含的信息為滾動banner、目的地模塊、票務模塊、口袋攻略推薦，其中重點落在目的地模塊，通過留白、大圖標、字體加粗等方式，將用戶視線聚焦在該模塊，引導用戶發現所在目的地及周邊的遊玩項目，與slogan強調的「遇見」呼應。然後是商業需要與方便用戶的票務模塊，剩餘的首屏位置產品團隊選擇了口袋攻略推薦模塊，（這也是攜程攻略的亮點之一，有興趣的可以去看看）各攻略封面圖採用類書本視覺的設計風格，給人專業、可信的感覺，與其PGC的定位貼合。

視覺方面採用的是天藍色與白色搭配，不同於攜程旅行票務業務的深藍色給人專業沉穩的感覺，攻略的天藍色感覺更為清新、輕快，更貼近旅遊、出行、攻略的主題，同時整個首頁的視覺設計也和目標用戶的審美相符合。

至此可確定產品定位為遇見、發現，包含的信息除了問答其他基本滿足用戶需求，視覺也滿足用戶審美。

3.2.1首頁展示

3.2.2 首頁信息架構

3.2.3產品定位及設計分析

Slogan：你最聰明的旅行指南。關鍵詞為「聰明」、「指南」。

首先是底部tab，同樣是舵式設計，突出寫遊記按鈕，引導用戶產出UGC。除掉首頁和我的，剩下「發現」和「問答」，其中「問答」在一定程度上貼合了「指南」的主題。

然後來看首頁布局，首頁第一屏包含了大部分信息，第二屏中僅有遊記模塊。第一屏中頂部居然沒有banner，這個有點意外，考慮設計思路為在首屏顯示盡量多信息。頂部導航欄為目的地定位、目的地搜索、目的地足跡、簽到。然後是攻略模塊，通過8個共2行的圖標來接入目的地的吃、住、行、游、購、娛、聰游榜（當地遊玩特色）、旅行須知（攻略細節），這8個圖標在整個頁面中顏色鮮艷，是想要突出的重點，但是可惜的是，顏色的搭配、分布沒有規律，圖標也過多略顯擁擠、混亂，反而讓用戶無法快速找到想要了解信息的入口，稍微有點本末倒置？

其次是票務模塊，採用表格的形式展現，避免了與攻略模塊的趨同，但是採用表格展示再加上是灰色的配色，相當於弱化了這個模塊，對於一個商業轉化的模塊來說，這樣的設計個人覺得不夠明智。

往下是聰游榜模塊，主打的內容是當地遊玩特色，與「指南」的主題呼應。第二屏則是瀑布流式的當地遊記模塊，有標籤分類和篩選功能，便於用戶獲取感興趣的信息。

總的來說，產品定位主基調為「指南」，給人感覺是想要打造成工具型的旅遊攻略產品。但首頁中對「指南」的主題雖有體現，可惜仍不夠突出。功能方面基本能滿足用戶需求，而模塊布局和視覺設計方面還有改善空間。

3.3 螞蜂窩

3.3.1首頁展示

3.3.2 首頁信息架構

3.3.3產品定位及設計分析

Slogan：螞蜂窩自由行。關鍵詞為「自由行」。

先來看tab，底部tab採用標籤導航設計，而且僅有3個標籤，除掉首頁和我的，剩下的就是「目的地」，簡單明了，但是這樣設計就會增多首頁信息內容，有可能會讓用戶產生擁擠混亂感覺的不好體驗。

來看首頁布局，自上而下是頂部固定的banner、搜索框、目的地搜索歷史，到這裡已經佔據了第一屏的一半空間，剩下的下半部空間主要為攻略票務模塊，而這個模塊因為留白較多不太覺得擁擠，反而能很好地聚焦用戶視線，但是顏色分布會略顯混亂，如果能更有規律地分布相信視覺效果會更好。

第二屏是一篇精選遊記推薦和一元旅遊產品奪寶模塊，其中遊記模塊採用大圖和簡潔的遊記信息組合，然後是大片留白，給人清新的感覺。而奪寶模塊採用鮮紅色的大按鈕和進度條，此處考慮為聚焦用戶視線，提高商業轉化。

第三屏信息量較少，只有「嗡嗡」的圖片推薦模塊，用戶可對喜歡的嗡嗡點贊，同時圖片帶有定位信息，用戶對感興趣的圖片或地區可進入嗡嗡詳情頁與作者互動。

第四屏是「嗡嗡」的旅遊達人推薦模塊和熱門目的地推薦票務模塊。達人模塊為左右滑動，這樣可以在屏內展示更多內容，又不會覺得頁面冗長、擁擠。而熱門目的地模塊在推薦目的地同時融合了票務功能，增強了商業盈利的可能性。

第五屏是目的地推薦，按照未來半年的6個月，每個月為一個頻道來推薦目的地，從時間方面來考慮推薦顯得十分人性化，用戶也更容易找到適合自己假期的旅遊目的地。

總體來說首頁雖然信息量較大，不過設計合理所以並沒有擁擠混亂的感覺，但可能沒有攜程和去哪兒那樣強大的票務支持的原因，所以螞蜂窩的商業元素相對多一點。視覺方面給人感覺較清新，符合旅遊產品的風格，也符合目標用戶的審美。功能方面也能滿足用戶需求。對於產品的定位「自由行」，更多的是通過內容來體現，從推薦的遊記，到奪寶的旅遊產品，到熱門目的地，都是與自由行相關的優質內容，相信運營團隊沒少下功夫，所以整個首頁都是有貼合產品定位的。

3.4 窮游網

3.4.1首頁展示

3.4.2首頁信息架構

3.4.3產品定位及設計分析

Slogan：出境游，盡在窮游APP。關鍵詞為「出境游」。

先來看底部tab，除掉首頁推薦和我的，剩下的是「目的地」和「社區」，可見社區在窮游的戰略布局中的重要性。然後是首頁布局，第一屏頂部是滾動banner，緊接著的是攻略票務模塊，但是該模塊與其他幾款攻略產品相比頻道分類較少，僅有4個頻道，其中2個是攻略相關，2個是票務相關，功能較為簡單。其次是「發現下一站」，推薦一些有趣的地方及實用的tips。

第二屏只有搶特價折扣一個模塊，一個專題大圖再加4個折扣旅遊產品。窮游同樣沒有攜程和去哪兒那樣具規模的票務業務，所以商業模塊在首頁中佔據整個第二屏也就不難理解了。

第三屏及之後的均為列表排列的遊記推薦，共推薦50篇，每次載入10篇，這樣分批載入的設計一來可以減少用戶不必要的流量浪費，二來可以提高載入速度。

總體來看窮游的首頁信息架構比較簡單，降低了旅遊攻略產品功能繁多、眼花繚亂的感覺，但其實是更多的模塊隱藏在了二級甚至三級頁面中，這樣設計對於需要用到這些模塊的用戶來說會增加操作步驟，需要跳轉到更深的頁面去，降低用戶體驗。所以就首頁來說是沒有滿足基本的用戶需求的，而整個產品的話是能滿足的。其次是視覺方面，因為展示圖片太多且布局留白較少，讓人覺得頁面較擁擠。另外對產品定位的「出境游」也是通過內容來反的，banner展現、發現tips、折扣產品、遊記推薦等都是出境游相關的，沒有與境內游相關的信息出現，可見產品是真的專攻出境游市場。

通過對這4款應用的首頁分析，我們可以總結出一些旅遊攻略產品首頁設計的經驗。

在首頁中通常包含的模塊有：

banner，定位，搜索欄，目的地（搜索）歷史，票務，攻略，目的地推薦，遊記推薦，旅遊達人推薦，旅遊產品推薦。這些模塊能基本滿足用戶的需求，而根據各自產品的定位不同會對其中的一些模塊進行取捨。另外首頁中的模塊通常與tab的頻道在內容上形成互補，首頁中的推薦內容是無差別推薦的話，tab通常會有定位目的地的頻道，而如果首頁是按照定位目的地來推薦內容的話，tab則會有專門的頻道來讓用戶發現其他的旅遊信息。

排版方面：

自上而下通常分為4個部分：

1. banner，定位，搜索欄（頂部跟隨式），目的地（搜索）歷史
2. 票務
3. 攻略，遊記推薦
4. 目的地推薦，旅遊達人推薦，旅遊產品推薦

視覺方面：

多採用鮮艷、亮麗的顏色，給人清新、愉悅的感覺，貼合旅遊的主題，也符合目標用戶的審美，其次是採用留白的方式來聚焦視線，同時減少頁面擁擠感。

不可否認，這幾款產品在一些架構方面有趨同的現象，但對於用戶來說，即使嘴上說不出，心裡也是分得清的，自由行會上螞蜂窩，經濟型出境游會上窮游，票務路線相關的會上攜程去哪兒，這都是與產品定位、信息架構、內容運營分不開的，只有用心做好這些才會在用戶腦中留下印象，贏得細分得市場。

總結過後我嘗試設計了一個旅遊攻略產品的首頁demo，假設背景如下，公司是一家處於行業中上水平的互聯網旅遊行業公司，已有網站積累用戶和內容多年，也有各種酒店、機票合作渠道，App端新上線，slogan為「XX，讓旅遊計劃更輕鬆！」整個首頁通過路線、攻略、景點的推薦評分、遊記的推薦、出行的酒店機票組合，來貼合讓旅遊計劃更輕鬆的定位。

點擊搜索框會展開搜索頁面，輸入關鍵字提供候選選項，候選選項會進行分類，地區、景點、酒店、機票、路線、攻略、遊記、社區問答等，根據關鍵字類型候選項會相應不同。

「當地景點」模塊由人氣高到低從左到右排列，用戶可左右滑動查看，人氣評分由用戶打分計算得出。

「精選遊記」模塊的推薦按不同地區更新周期不同，團隊內部先將旅遊地區分級，例如：一級為熱門地區三天一更，二級為次熱門地區一周一更，三級為普通旅遊地區二周一更，實際操作中運營團隊按實際情況設定。

下面是首頁demo：

後記

感謝閱讀，鑒於水平、視野有限，本文存在不妥之處還望大家指點，請盡情地批評拍磚，拍得越大力就是對我越大的幫助，筆者定虛心接受，謝謝。

作者：kor，小姓何，QQ/微信/Q郵：411814246。正在求職中，有產品專員/助理相關工作歡迎聯繫

本文由 @kor 原創發佈於人人都是產品經理。未經許可，禁止轉載。

贊 7 收藏

推薦閱讀：