本文以攜程、去哪兒、途牛和飛豬四家為例，從網(wǎng)頁的頭部區(qū)域和導(dǎo)航設(shè)計(jì)、內(nèi)容區(qū)域與底部方面探討了工具型產(chǎn)品需要怎樣的首頁。

在功能型產(chǎn)品中，OTA平臺算是差旅場景中必備的產(chǎn)品，機(jī)票、酒店、旅行、交通預(yù)訂四項(xiàng)是OTA的基礎(chǔ)功能。

本文將以攜程、去哪兒、途牛和飛豬四家為例，從主頁設(shè)計(jì)方面分析其PC端產(chǎn)品，探討工具型產(chǎn)品在網(wǎng)站設(shè)計(jì)時的必備要素和設(shè)計(jì)思路。

一、頭部區(qū)域和導(dǎo)航設(shè)計(jì)

頭部區(qū)域是用戶進(jìn)入網(wǎng)站后面對的第一視覺沖擊，一般包括網(wǎng)站Logo、搜索框、登錄提示、導(dǎo)航欄等必備要素。在工具型產(chǎn)品中，用戶對主頁的期待在于幫助他解決這幾個主要問題：

• 這是什么網(wǎng)站？
• 我能在這里做什么？
• 從哪里開始？

可以將用戶對OTA平臺的需求分為兩種：

1. 抱著訂票需求即明確的消費(fèi)目的來的用戶；
2. 暫時沒有明確差旅需求以隨便逛逛為心態(tài)的用戶。

OTA網(wǎng)站設(shè)計(jì)時需要兼顧兩者需求同時進(jìn)行考慮，但這四家在頭部區(qū)域的設(shè)計(jì)上其實(shí)都有自己的考慮。

先觀察一下四家在首頁布局上的整體設(shè)計(jì)：

1. 導(dǎo)航欄

導(dǎo)航欄是將用戶引向具體分類的指向標(biāo)，可以看到四家平臺都選擇在Logo或搜索框下端放置導(dǎo)航欄，并保持了和主頁一致的色系以凸顯導(dǎo)航欄的一級入口。本文主要考慮從體驗(yàn)性評估導(dǎo)航欄，具體差異體現(xiàn)在這幾個細(xì)節(jié)：

1）攜程導(dǎo)航欄的特色在于使用了下標(biāo)箭頭設(shè)計(jì)。

下標(biāo)箭頭其實(shí)起到的引導(dǎo)用戶移動光標(biāo)進(jìn)行二次展開的作用。

在二級導(dǎo)航欄下，攜程采用的設(shè)計(jì)是所有字體的大小顏色保持一致。跳轉(zhuǎn)二級導(dǎo)航后，所在的一級導(dǎo)航欄會加深，二級目錄字體標(biāo)藍(lán)（但不展開），可以幫助用戶更好明確自己的瀏覽位置。

2）去哪兒的導(dǎo)航欄體驗(yàn)要差于攜程。

• 第一，首頁導(dǎo)航欄位置不固定，跳轉(zhuǎn)不同頁面后導(dǎo)航欄大小和位置會有不同變化，在視覺效果上不連貫；
• 第二，去哪兒對二級導(dǎo)航中用紅色標(biāo)記重點(diǎn)，但跳轉(zhuǎn)二級頁面后，沒有標(biāo)記顯示用戶現(xiàn)在處于的位置，迷茫的用戶只能選擇退回首頁重新操作。

但去哪兒的優(yōu)點(diǎn)在于：部分二級導(dǎo)航用UI設(shè)計(jì)吸晴，看起來比攜程的界面要年輕態(tài)和活潑，攜程則更簡潔和商務(wù)風(fēng)。

3）途牛的導(dǎo)航欄可以說是上面兩家特色的綜合體——考慮了向下箭頭和二級重點(diǎn)標(biāo)紅的設(shè)計(jì)，并在移動光標(biāo)到二級目錄上，會出現(xiàn)綠色加深。

但進(jìn)入二級子頁面后，沒有一級和二級導(dǎo)航加深標(biāo)記，容易出現(xiàn)和去哪兒用戶迷失在自己選擇的菜單中的問題。

四家OTA平臺中，途牛特有的設(shè)計(jì)是在導(dǎo)航欄上加入了關(guān)鍵詞的引導(dǎo)。如郵輪游的“海上假期”、門票的“上海迪士尼”。這樣的設(shè)計(jì)更多是起到一種喚醒作用，以激發(fā)隨意瀏覽的用戶某個興趣點(diǎn)。

4）飛豬的導(dǎo)航欄設(shè)計(jì)除了剔除下標(biāo)箭頭的引導(dǎo)外，在其他方面都進(jìn)行了詳細(xì)考慮。

• 第一，在二級目錄的重點(diǎn)標(biāo)記上，沒有選擇用字體顏色來強(qiáng)調(diào)，而是用右上角的H小標(biāo)來表示熱門程度；
• 第二，進(jìn)入子頁面后，用標(biāo)題加深來明確當(dāng)前位置，二級目錄保持展開狀態(tài)。

2. 搜索框

搜索框的設(shè)計(jì)在于幫助用戶更快速找到自己想要的內(nèi)容。從布局來看：四家平臺都選擇把搜索框放置在Logo同一區(qū)域的中部，并有詞根聯(lián)想的設(shè)計(jì)。

從搜索框的調(diào)取邏輯來看：都是從數(shù)據(jù)庫匹配用戶輸入的關(guān)鍵詞；但在匹配字段上，從四家的搜索深度、靈活度和便利性來看，可以按照這樣的順序進(jìn)行排名：飛豬＞攜程＞途牛>去哪兒。

1）攜程

攜程的搜索框不限定關(guān)鍵詞類型，從旅行地、酒店、景點(diǎn)到交通都可以，用戶可以省略思考的步驟，直接輸入自己想要的內(nèi)容，交由平臺去識別和匹配。

例如，輸入郵輪，會以新標(biāo)簽頁的形式跳轉(zhuǎn)到一級導(dǎo)航旅游下的郵輪頁面；輸入地名+酒店名（以三亞希爾頓為例），跳轉(zhuǎn)該地的酒店預(yù)訂界面，同理也可以搜索飛機(jī)班次等。搜索框關(guān)鍵詞的靈活組合程度很高。

同時，跳轉(zhuǎn)頁面后，攜程依然會顯示用戶目前所在的一級和二級位置。

2）去哪兒

去哪兒給出的搜索提示僅限于“搜索目的地”，用郵輪、地名+酒店名的關(guān)鍵詞方式進(jìn)行搜索后，都會跳轉(zhuǎn)到新標(biāo)簽頁的“度假”導(dǎo)航欄下。

以三亞+希爾頓為例，和攜程的搜索邏輯不同，去哪兒給你匹配到的就是跟團(tuán)游中包含“三亞”和“希爾頓”關(guān)鍵詞的產(chǎn)品。

3）途牛

途牛搜索框是四家OTA平臺中最復(fù)雜的一個，包含了下拉框和高級搜索按鈕的設(shè)計(jì)，對用戶操作而言并不是很友好。

下拉框需要用戶手動選擇搜索關(guān)鍵詞的屬性，是跟團(tuán)游、門票、酒店、旅拍還是當(dāng)?shù)赝鏄返?。高級搜索則可以根據(jù)用戶鍵入的交通、住宿、價格等要求進(jìn)行旅游團(tuán)匹配，更像是VIP定制。這項(xiàng)設(shè)計(jì)在一定程度上可以幫助用戶在初始搜索時，就根據(jù)需求縮小范圍。

和途牛導(dǎo)航欄所強(qiáng)調(diào)的引導(dǎo)屬性一樣，其搜索框也加入了“購物”“公園游樂園”關(guān)鍵字提示。

我們?nèi)砸浴叭齺喯栴D”為關(guān)鍵詞搜索，匹配到的和去哪兒一樣，也是包含這兩個關(guān)鍵字的出游產(chǎn)品。

4）飛豬

飛豬的搜索框設(shè)計(jì)在移入的時候，就有“搜索發(fā)現(xiàn)”的提示，向用戶推薦交通、酒店、度假的提示，在UI設(shè)計(jì)上，飛豬的搜索圖標(biāo)旁邊還加入了中文“搜索”字樣。

仍以“三亞希爾頓”為關(guān)鍵詞搜索，飛豬在原頁面上跳轉(zhuǎn)，可以匹配到跟團(tuán)游、自由行和酒店+門票幾種類型的產(chǎn)品，給到用戶的選擇更豐富。

3. 其他頂端和側(cè)邊設(shè)計(jì)

頂端和側(cè)邊一般是用戶個人界面和平臺重要相關(guān)提示的入口，四家OTA平臺上在這一設(shè)計(jì)上的布局也是各有特色。

1）頂端設(shè)計(jì)

僅有攜程采用的是只有頂端入口的方式，包含了登錄注冊、消息、訂單、客服這些重要入口，外露的還有標(biāo)語和客服電話兩項(xiàng)。

其實(shí)，在OTA平臺中，標(biāo)語這一項(xiàng)是否重要一直存在爭議，很少有人會去注意到去哪兒的slogan是“聰明你的旅行”，而攜程的slogan是“讓旅行更幸福”。

它們也沒有某家“想去哪拍去哪拍”這樣的標(biāo)語來的有記憶點(diǎn)，但在網(wǎng)站設(shè)計(jì)時，標(biāo)語其實(shí)是必不可少的一項(xiàng)，有特色的slogan有助于加深用戶對產(chǎn)品的印象。

同時，OTA平臺因?yàn)楫a(chǎn)品的消費(fèi)屬性重，客服是必不可少的，選擇將客服電話置于顯眼的位置并標(biāo)記不同顏色，是類似toc的功能型平臺在設(shè)計(jì)時候需要著重考慮的。

2）側(cè)邊設(shè)計(jì)

去哪采用的側(cè)邊設(shè)計(jì)比較隱藏，需要觸發(fā)按鈕才會畫出側(cè)邊欄，但其功能設(shè)計(jì)上和頂端入口其實(shí)是重復(fù)的。

這樣設(shè)計(jì)的好處是用戶在劃動瀏覽下面內(nèi)容區(qū)域時，不必回到頂部再進(jìn)入個人界面，也不用被固定側(cè)欄的設(shè)計(jì)干擾瀏覽。

相比下，途牛和飛豬采用的是固定側(cè)邊欄的設(shè)計(jì)，并采用了純圖標(biāo)的表現(xiàn)方式，一定程度上能減少用戶瀏覽中間內(nèi)容區(qū)域的干擾，只有當(dāng)鼠標(biāo)移動到相關(guān)圖標(biāo)上，才顯示文字提示。

二、內(nèi)容區(qū)域

內(nèi)容區(qū)域的設(shè)計(jì)更趨向滿足隨意瀏覽的用戶的需求。四家平臺在這上的內(nèi)容設(shè)計(jì)大同小異，基本以圖片展示+產(chǎn)品名+價格的方式展現(xiàn)給用戶。但明顯攜程和去哪兒的組合展現(xiàn)方式更多元化，不容易讓瀏覽主頁的用于產(chǎn)生審美疲勞。

在內(nèi)容導(dǎo)航上，針對酒店、機(jī)票、用車等版塊，攜程、去哪和途牛三家設(shè)計(jì)了導(dǎo)航欄。 前兩者采用的是小圖標(biāo)的設(shè)計(jì)，后者用的是文字，飛豬則沒有采用這一設(shè)計(jì)。

三、底部

主頁底部一般被用來做索引、推廣和權(quán)益維護(hù)的入口。衡量標(biāo)準(zhǔn)用版塊區(qū)域劃分和要素覆蓋來看，攜程的界面更簡潔和方便尋找。

除了途牛外，其余三家均使用左對齊的文本排列方式；劇中對齊的途牛因?yàn)槲谋鹃L度不一致，會顯得有些混亂，用戶注意力會容易飄散。

四、總結(jié)

綜上，對四家OTA平臺的首頁設(shè)計(jì)進(jìn)行1-5星評級：

總的來說，飛豬的主頁設(shè)計(jì)在視覺和可用性上更符合用戶的搜索和使用習(xí)慣。

從一款工具類型產(chǎn)品的角度看，其本質(zhì)目的還是向用戶提供服務(wù)。所以在界面設(shè)計(jì)時，不是安排滿越多的內(nèi)容越好，讓用戶去選擇，而是根據(jù)用戶進(jìn)入到這一網(wǎng)站后的思考邏輯，直接把結(jié)果遞給他。

從用戶進(jìn)入網(wǎng)站，到找到他想要的內(nèi)容，這中間需要跳轉(zhuǎn)的界面越少越好，這意味著他花費(fèi)在思考上的力氣也越少。

結(jié)合四款OTA平臺，主頁設(shè)計(jì)的優(yōu)化可以從以下幾個方面考慮：

1）減少用戶思考

以搜索框?yàn)閮?yōu)化對象來看，飛豬的設(shè)計(jì)更人性化。當(dāng)搜索兩個地名+酒店兩個對象時，它會把當(dāng)?shù)鼐频晖平o用戶；同時還提供包含這些關(guān)鍵詞的出游產(chǎn)品、酒店+機(jī)票、酒店+自助餐組合給到用戶，真正做到了“想在用戶前面”。

2）平衡圖標(biāo)和文本

適當(dāng)?shù)膱D標(biāo)和文本的組合能夠幫助用戶集中注意力、緩和審美疲勞。在諸如購物車、手機(jī)這樣通俗易懂的圖標(biāo)上，可以減少文字標(biāo)識；但在冷門不容易理解的圖標(biāo)上最好能加上文字輔助，通常采用的有圖標(biāo)切換文本、文本浮動顯示的方式，可以綜合版面位置考慮設(shè)計(jì)。

3）層次和顏色

這一點(diǎn)在導(dǎo)航欄的設(shè)計(jì)中尤其重要。就像在商場中，用戶非常在意自己逛到了第幾層。用顏色來區(qū)分層次是很好的選擇，當(dāng)然也可以使用“酒店>國內(nèi)酒店>四星級酒店”這樣的指示方式，這一點(diǎn)在論壇社區(qū)里比較常見。

作者：47，關(guān)注內(nèi)容&社交產(chǎn)品，信奉keep exercising , keep learning , keep optimistic

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

題圖來自Unsplash，基于CC0協(xié)議。