本文將通過對(duì)現(xiàn)今市場(chǎng)上知名度較高的幾款旅游攻略App的首頁進(jìn)行比較，然后從信息架構(gòu)、產(chǎn)品定位與設(shè)計(jì)分析這幾方面來進(jìn)行探討，總結(jié)出一些規(guī)律及亮點(diǎn)，并嘗試設(shè)計(jì)出一個(gè)demo來對(duì)分析結(jié)果進(jìn)行應(yīng)用。

本文數(shù)據(jù)均來自互聯(lián)網(wǎng)，由于數(shù)據(jù)來源及個(gè)人能力有限，故本文存在的不足之處還請(qǐng)各位看官指出，本人定虛心接受，同時(shí)本文也作拋磚引玉之用，希望能吸引有經(jīng)驗(yàn)的前輩來分享一二。

1. 用戶需求

產(chǎn)品首頁的設(shè)計(jì)包含了很多信息，其中有對(duì)產(chǎn)品定位的體現(xiàn)，產(chǎn)品信息框架的體現(xiàn)，對(duì)用戶的引導(dǎo)等，而把這眾多信息聯(lián)系起來的，就是用戶需求，而要明確用戶需求我們就得先確定用戶是誰。

1.1 目標(biāo)用戶

艾瑞網(wǎng)研究報(bào)告中對(duì)2015旅游攻略應(yīng)用用戶屬性的總結(jié)如下圖：

根據(jù)上圖可知，旅游攻略應(yīng)用的用戶是以沿海發(fā)達(dá)城市的高學(xué)歷青年為主，而且他們的收入狀況良好。而根據(jù)生活經(jīng)驗(yàn)可以知道，這類人是對(duì)生活有一定追求的，他們喜歡的格調(diào)偏向清新、小資、時(shí)尚這幾個(gè)方面，對(duì)事物的審美和品質(zhì)也有一定的要求。

1.2使用場(chǎng)景

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

（2）云南才玩5天，假期還有一個(gè)多星期，看看還有其他什么地方好玩的。

（3）出游行程都計(jì)劃好了，看看機(jī)票和酒店訂哪家的好，順便預(yù)訂免得到時(shí)麻煩。

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

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

（6）下個(gè)月想去泰國(guó)旅游，看一下簽證要怎么辦，還有去泰國(guó)有什么要注意的。

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

1.3需求分析

2.分析對(duì)象選擇

先來看一組數(shù)據(jù)：

（數(shù)據(jù)來源：艾瑞網(wǎng)）

根據(jù)艾瑞網(wǎng)數(shù)據(jù)顯示，無論從用戶品牌認(rèn)知度還是使用情況來看，排名前四的均為基于行業(yè)影響力發(fā)展壯大的綜合企業(yè)的攻略社區(qū)攜程攻略、去哪兒攻略，多年UGC積累的垂直企業(yè)螞蜂窩，以出境攻略為主導(dǎo)的垂直企業(yè)窮游網(wǎng)。

另外截至2016年6月3日，在App?Store旅游類別免費(fèi)欄目的排名中，除掉電商票務(wù)、打車用車、短租住房及一些其他應(yīng)用，只看專注旅游攻略的應(yīng)用的話，排名前四的也是這四個(gè)應(yīng)用，排名分別是去哪兒攻略第11位，攜程攻略第20位，螞蜂窩第21位，窮游網(wǎng)第47位。

并不是說這幾款產(chǎn)品的首頁設(shè)計(jì)優(yōu)秀程度與他們的市場(chǎng)排名一樣，其市場(chǎng)排名背后還有資本、運(yùn)營(yíng)、市場(chǎng)積累等多方面因素影響，但作為行業(yè)領(lǐng)跑者，他們的產(chǎn)品首頁這樣設(shè)計(jì)肯定是經(jīng)過資深產(chǎn)品團(tuán)隊(duì)的考慮，也經(jīng)過多次迭代以如今的設(shè)計(jì)呈現(xiàn)，對(duì)他們進(jìn)行比較分析，相信能收獲不少，對(duì)以后工作開展也有所幫助。

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

3.?產(chǎn)品首頁分析

3.1 攜程攻略

3.1.1 首頁展示

3.1.2 首頁信息架構(gòu)

3.1.3 產(chǎn)品定位及設(shè)計(jì)分析

Slogan：遇見不一樣的世界。關(guān)鍵詞為“遇見”、“不一樣”。

首先來看產(chǎn)品的骨架底部tab，選擇舵式設(shè)計(jì)，重點(diǎn)突出“寫游記”，意在引導(dǎo)用戶分享，提高UGC產(chǎn)出率，對(duì)旅游攻略類產(chǎn)品意義重大。然后除掉首頁和我的，剩余的“微游記”符合“遇見”的定位，“口袋攻略”也符合旅游攻略的主題。

再來看首頁布局首頁第二屏是“本月該去這里”目的地推薦和“看看別人怎么玩”游記推薦，一個(gè)是以景點(diǎn)為切入，一個(gè)是以人為切入，但目的都是幫助用戶發(fā)現(xiàn)更多有趣的旅游勝地，再次與“遇見”呼應(yīng)。。首頁第一屏包含的信息為滾動(dòng)banner、目的地模塊、票務(wù)模塊、口袋攻略推薦，其中重點(diǎn)落在目的地模塊，通過留白、大圖標(biāo)、字體加粗等方式，將用戶視線聚焦在該模塊，引導(dǎo)用戶發(fā)現(xiàn)所在目的地及周邊的游玩項(xiàng)目，與slogan強(qiáng)調(diào)的“遇見”呼應(yīng)。然后是商業(yè)需要與方便用戶的票務(wù)模塊，剩余的首屏位置產(chǎn)品團(tuán)隊(duì)選擇了口袋攻略推薦模塊，（這也是攜程攻略的亮點(diǎn)之一，有興趣的可以去看看）各攻略封面圖采用類書本視覺的設(shè)計(jì)風(fēng)格，給人專業(yè)、可信的感覺，與其PGC的定位貼合。

視覺方面采用的是天藍(lán)色與白色搭配，不同于攜程旅行票務(wù)業(yè)務(wù)的深藍(lán)色給人專業(yè)沉穩(wěn)的感覺，攻略的天藍(lán)色感覺更為清新、輕快，更貼近旅游、出行、攻略的主題，同時(shí)整個(gè)首頁的視覺設(shè)計(jì)也和目標(biāo)用戶的審美相符合。

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

3.2 去哪兒攻略

3.2.1首頁展示

3.2.2 首頁信息架構(gòu)

3.2.3產(chǎn)品定位及設(shè)計(jì)分析

Slogan：?你最聰明的旅行指南。關(guān)鍵詞為“聰明”、“指南”。

首先是底部tab，同樣是舵式設(shè)計(jì)，突出寫游記按鈕，引導(dǎo)用戶產(chǎn)出UGC。除掉首頁和我的，剩下“發(fā)現(xiàn)”和“問答”，其中“問答”在一定程度上貼合了“指南”的主題。

然后來看首頁布局，首頁第一屏包含了大部分信息，第二屏中僅有游記模塊。第一屏中頂部居然沒有banner，這個(gè)有點(diǎn)意外，考慮設(shè)計(jì)思路為在首屏顯示盡量多信息。頂部導(dǎo)航欄為目的地定位、目的地搜索、目的地足跡、簽到。然后是攻略模塊，通過8個(gè)共2行的圖標(biāo)來接入目的地的吃、住、行、游、購(gòu)、娛、聰游榜（當(dāng)?shù)赜瓮嫣厣?、旅行須知（攻略?xì)節(jié)），這8個(gè)圖標(biāo)在整個(gè)頁面中顏色鮮艷，是想要突出的重點(diǎn)，但是可惜的是，顏色的搭配、分布沒有規(guī)律，圖標(biāo)也過多略顯擁擠、混亂，反而讓用戶無法快速找到想要了解信息的入口，稍微有點(diǎn)本末倒置？

其次是票務(wù)模塊，采用表格的形式展現(xiàn)，避免了與攻略模塊的趨同，但是采用表格展示再加上是灰色的配色，相當(dāng)于弱化了這個(gè)模塊，對(duì)于一個(gè)商業(yè)轉(zhuǎn)化的模塊來說，這樣的設(shè)計(jì)個(gè)人覺得不夠明智。

往下是聰游榜模塊，主打的內(nèi)容是當(dāng)?shù)赜瓮嫣厣c“指南”的主題呼應(yīng)。第二屏則是瀑布流式的當(dāng)?shù)赜斡浤K，有標(biāo)簽分類和篩選功能，便于用戶獲取感興趣的信息。

總的來說，產(chǎn)品定位主基調(diào)為“指南”，給人感覺是想要打造成工具型的旅游攻略產(chǎn)品。但首頁中對(duì)“指南”的主題雖有體現(xiàn)，可惜仍不夠突出。功能方面基本能滿足用戶需求，而模塊布局和視覺設(shè)計(jì)方面還有改善空間。

3.3 螞蜂窩

3.3.1首頁展示

3.3.2 首頁信息架構(gòu)

3.3.3產(chǎn)品定位及設(shè)計(jì)分析

Slogan：螞蜂窩自由行。關(guān)鍵詞為“自由行”。

先來看tab，底部tab采用標(biāo)簽導(dǎo)航設(shè)計(jì)，而且僅有3個(gè)標(biāo)簽，除掉首頁和我的，剩下的就是“目的地”，簡(jiǎn)單明了，但是這樣設(shè)計(jì)就會(huì)增多首頁信息內(nèi)容，有可能會(huì)讓用戶產(chǎn)生擁擠混亂感覺的不好體驗(yàn)。

來看首頁布局，自上而下是頂部固定的banner、搜索框、目的地搜索歷史，到這里已經(jīng)占據(jù)了第一屏的一半空間，剩下的下半部空間主要為攻略票務(wù)模塊，而這個(gè)模塊因?yàn)榱舭纵^多不太覺得擁擠，反而能很好地聚焦用戶視線，但是顏色分布會(huì)略顯混亂，如果能更有規(guī)律地分布相信視覺效果會(huì)更好。

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

第三屏信息量較少，只有“嗡嗡”的圖片推薦模塊，用戶可對(duì)喜歡的嗡嗡點(diǎn)贊，同時(shí)圖片帶有定位信息，用戶對(duì)感興趣的圖片或地區(qū)可進(jìn)入嗡嗡詳情頁與作者互動(dòng)。

第四屏是“嗡嗡”的旅游達(dá)人推薦模塊和熱門目的地推薦票務(wù)模塊。達(dá)人模塊為左右滑動(dòng)，這樣可以在屏內(nèi)展示更多內(nèi)容，又不會(huì)覺得頁面冗長(zhǎng)、擁擠。而熱門目的地模塊在推薦目的地同時(shí)融合了票務(wù)功能，增強(qiáng)了商業(yè)盈利的可能性。

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

總體來說首頁雖然信息量較大，不過設(shè)計(jì)合理所以并沒有擁擠混亂的感覺，但可能沒有攜程和去哪兒那樣強(qiáng)大的票務(wù)支持的原因，所以螞蜂窩的商業(yè)元素相對(duì)多一點(diǎn)。視覺方面給人感覺較清新，符合旅游產(chǎn)品的風(fēng)格，也符合目標(biāo)用戶的審美。功能方面也能滿足用戶需求。對(duì)于產(chǎn)品的定位“自由行”，更多的是通過內(nèi)容來體現(xiàn)，從推薦的游記，到奪寶的旅游產(chǎn)品，到熱門目的地，都是與自由行相關(guān)的優(yōu)質(zhì)內(nèi)容，相信運(yùn)營(yíng)團(tuán)隊(duì)沒少下功夫，所以整個(gè)首頁都是有貼合產(chǎn)品定位的。

3.4 窮游網(wǎng)

3.4.1首頁展示

3.4.2首頁信息架構(gòu)

3.4.3產(chǎn)品定位及設(shè)計(jì)分析

Slogan：出境游，盡在窮游APP。關(guān)鍵詞為“出境游”。

先來看底部tab，除掉首頁推薦和我的，剩下的是“目的地”和“社區(qū)”，可見社區(qū)在窮游的戰(zhàn)略布局中的重要性。然后是首頁布局，第一屏頂部是滾動(dòng)banner，緊接著的是攻略票務(wù)模塊，但是該模塊與其他幾款攻略產(chǎn)品相比頻道分類較少，僅有4個(gè)頻道，其中2個(gè)是攻略相關(guān)，2個(gè)是票務(wù)相關(guān)，功能較為簡(jiǎn)單。其次是“發(fā)現(xiàn)下一站”，推薦一些有趣的地方及實(shí)用的tips。

第二屏只有搶特價(jià)折扣一個(gè)模塊，一個(gè)專題大圖再加4個(gè)折扣旅游產(chǎn)品。窮游同樣沒有攜程和去哪兒那樣具規(guī)模的票務(wù)業(yè)務(wù)，所以商業(yè)模塊在首頁中占據(jù)整個(gè)第二屏也就不難理解了。

第三屏及之后的均為列表排列的游記推薦，共推薦50篇，每次加載10篇，這樣分批加載的設(shè)計(jì)一來可以減少用戶不必要的流量浪費(fèi)，二來可以提高加載速度。

總體來看窮游的首頁信息架構(gòu)比較簡(jiǎn)單，降低了旅游攻略產(chǎn)品功能繁多、眼花繚亂的感覺，但其實(shí)是更多的模塊隱藏在了二級(jí)甚至三級(jí)頁面中，這樣設(shè)計(jì)對(duì)于需要用到這些模塊的用戶來說會(huì)增加操作步驟，需要跳轉(zhuǎn)到更深的頁面去，降低用戶體驗(yàn)。所以就首頁來說是沒有滿足基本的用戶需求的，而整個(gè)產(chǎn)品的話是能滿足的。其次是視覺方面，因?yàn)檎故緢D片太多且布局留白較少，讓人覺得頁面較擁擠。另外對(duì)產(chǎn)品定位的“出境游”也是通過內(nèi)容來反的，banner展現(xiàn)、發(fā)現(xiàn)tips、折扣產(chǎn)品、游記推薦等都是出境游相關(guān)的，沒有與境內(nèi)游相關(guān)的信息出現(xiàn)，可見產(chǎn)品是真的專攻出境游市場(chǎng)。

4.?總結(jié)

通過對(duì)這4款應(yīng)用的首頁分析，我們可以總結(jié)出一些旅游攻略產(chǎn)品首頁設(shè)計(jì)的經(jīng)驗(yàn)。

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

banner，定位，搜索欄，目的地（搜索）歷史，票務(wù)，攻略，目的地推薦，游記推薦，旅游達(dá)人推薦，旅游產(chǎn)品推薦。這些模塊能基本滿足用戶的需求，而根據(jù)各自產(chǎn)品的定位不同會(huì)對(duì)其中的一些模塊進(jìn)行取舍。另外首頁中的模塊通常與tab的頻道在內(nèi)容上形成互補(bǔ)，首頁中的推薦內(nèi)容是無差別推薦的話，tab通常會(huì)有定位目的地的頻道，而如果首頁是按照定位目的地來推薦內(nèi)容的話，tab則會(huì)有專門的頻道來讓用戶發(fā)現(xiàn)其他的旅游信息。

排版方面：

自上而下通常分為4個(gè)部分：

1. banner，定位，搜索欄（頂部跟隨式），目的地（搜索）歷史
2. 票務(wù)
3. 攻略，游記推薦
4. 目的地推薦，旅游達(dá)人推薦，旅游產(chǎn)品推薦

視覺方面：

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

不可否認(rèn)，這幾款產(chǎn)品在一些架構(gòu)方面有趨同的現(xiàn)象，但對(duì)于用戶來說，即使嘴上說不出，心里也是分得清的，自由行會(huì)上螞蜂窩，經(jīng)濟(jì)型出境游會(huì)上窮游，票務(wù)路線相關(guān)的會(huì)上攜程去哪兒，這都是與產(chǎn)品定位、信息架構(gòu)、內(nèi)容運(yùn)營(yíng)分不開的，只有用心做好這些才會(huì)在用戶腦中留下印象，贏得細(xì)分得市場(chǎng)。

5.?我是PM

總結(jié)過后我嘗試設(shè)計(jì)了一個(gè)旅游攻略產(chǎn)品的首頁demo，假設(shè)背景如下，公司是一家處于行業(yè)中上水平的互聯(lián)網(wǎng)旅游行業(yè)公司，已有網(wǎng)站積累用戶和內(nèi)容多年，也有各種酒店、機(jī)票合作渠道，App端新上線，slogan為“XX，讓旅游計(jì)劃更輕松！”整個(gè)首頁通過路線、攻略、景點(diǎn)的推薦評(píng)分、游記的推薦、出行的酒店機(jī)票組合，來貼合讓旅游計(jì)劃更輕松的定位。

點(diǎn)擊搜索框會(huì)展開搜索頁面，輸入關(guān)鍵字提供候選選項(xiàng)，候選選項(xiàng)會(huì)進(jìn)行分類，地區(qū)、景點(diǎn)、酒店、機(jī)票、路線、攻略、游記、社區(qū)問答等，根據(jù)關(guān)鍵字類型候選項(xiàng)會(huì)相應(yīng)不同。

“當(dāng)?shù)鼐包c(diǎn)”模塊由人氣高到低從左到右排列，用戶可左右滑動(dòng)查看，人氣評(píng)分由用戶打分計(jì)算得出。

“精選游記”模塊的推薦按不同地區(qū)更新周期不同，團(tuán)隊(duì)內(nèi)部先將旅游地區(qū)分級(jí)，例如：一級(jí)為熱門地區(qū)三天一更，二級(jí)為次熱門地區(qū)一周一更，三級(jí)為普通旅游地區(qū)二周一更，實(shí)際操作中運(yùn)營(yíng)團(tuán)隊(duì)按實(shí)際情況設(shè)定。

下面是首頁demo：

后記

感謝閱讀，鑒于水平、視野有限，本文存在不妥之處還望大家指點(diǎn)，請(qǐng)盡情地批評(píng)拍磚，拍得越大力就是對(duì)我越大的幫助，筆者定虛心接受，謝謝。

作者：kor，小姓何，QQ/微信/Q郵：411814246。正在求職中，有產(chǎn)品專員/助理相關(guān)工作歡迎聯(lián)系

本文由 @kor 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。