旅游攻略App首頁設(shè)計思考:從窮游、攜程、去哪兒和螞蜂窩的攻略說起

kor
10 評論 50354 瀏覽 347 收藏 21 分鐘

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

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

1. 用戶需求

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

1.1 目標用戶

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

01用戶屬性

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

1.2使用場景

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

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

(3)出游行程都計劃好了,看看機票和酒店訂哪家的好,順便預訂免得到時麻煩。

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

(5)正在旅游,看一下附近還有什么好玩好吃的。

(6)下個月想去泰國旅游,看一下簽證要怎么辦,還有去泰國有什么要注意的。

(7)這次旅游真好玩,要記錄下來才行,順便讓別人看看我拍的美照吧!

1.3需求分析

02需求分析

2.分析對象選擇

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

03品牌認知

(數(shù)據(jù)來源:艾瑞網(wǎng))

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

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

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

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

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

3.1 攜程攻略

3.1.1 首頁展示

04攜程

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

05攜程攻略 信息架構(gòu)

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

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

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

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

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

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

3.2 去哪兒攻略

3.2.1首頁展示

06去哪兒

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

07去哪兒攻略 信息架構(gòu)

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

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

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

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

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

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

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

3.3 螞蜂窩

3.3.1首頁展示

08螞蜂窩

09螞蜂窩

10螞蜂窩
3.3.2 首頁信息架構(gòu)

11螞蜂窩 信息架構(gòu)

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

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

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

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

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

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

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

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

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

3.4 窮游網(wǎng)

3.4.1首頁展示

12窮游

13窮游

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

14窮游 信息架構(gòu)

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

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

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

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

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

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

4.?總結(jié)

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

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

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

排版方面:

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

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

視覺方面:

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

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

5.?我是PM

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

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

“當?shù)鼐包c”模塊由人氣高到低從左到右排列,用戶可左右滑動查看,人氣評分由用戶打分計算得出。

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

下面是首頁demo:

15自己設(shè)計

16自己設(shè)計

后記

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

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 分析還可以,不足在于,需要立足于產(chǎn)品迭代,產(chǎn)品本身的特性,用戶群屬性進行分析。如果單單從排版布局的角度去分析有點欠缺了。

    來自四川 回復
    1. 十分感謝你的意見 ?? 對我?guī)椭艽?謝謝

      來自廣東 回復
    2. ?? 對哦,忘記加版本號了,謝謝你的寶貴意見~

      來自廣東 回復
  2. 寫的不錯,我也剛求職了旅游類的公司,樓主寫的東西也是我以后要做的,感悟還是挺深的,希望以后能多多交流。

    來自廣東 回復
  3. ??

    來自江蘇 回復
    1. ?? 0.0??????????????????

      來自廣東 回復