本文以攜程、去哪兒、途牛和飛豬四家為例，從網頁的頭部區域和導航設計、內容區域與底部方面探討了工具型產品需要怎樣的首頁。

在功能型產品中，OTA平臺算是差旅場景中必備的產品，機票、酒店、旅行、交通預訂四項是OTA的基礎功能。

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

一、頭部區域和導航設計

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

• 這是什么網站？
• 我能在這里做什么？
• 從哪里開始？

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

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

OTA網站設計時需要兼顧兩者需求同時進行考慮，但這四家在頭部區域的設計上其實都有自己的考慮。

先觀察一下四家在首頁布局上的整體設計：

1. 導航欄

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

1）攜程導航欄的特色在于使用了下標箭頭設計。

下標箭頭其實起到的引導用戶移動光標進行二次展開的作用。

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

2）去哪兒的導航欄體驗要差于攜程。

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

但去哪兒的優點在于：部分二級導航用UI設計吸晴，看起來比攜程的界面要年輕態和活潑，攜程則更簡潔和商務風。

3）途牛的導航欄可以說是上面兩家特色的綜合體——考慮了向下箭頭和二級重點標紅的設計，并在移動光標到二級目錄上，會出現綠色加深。

但進入二級子頁面后，沒有一級和二級導航加深標記，容易出現和去哪兒用戶迷失在自己選擇的菜單中的問題。

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

4）飛豬的導航欄設計除了剔除下標箭頭的引導外，在其他方面都進行了詳細考慮。

• 第一，在二級目錄的重點標記上，沒有選擇用字體顏色來強調，而是用右上角的H小標來表示熱門程度；
• 第二，進入子頁面后，用標題加深來明確當前位置，二級目錄保持展開狀態。

2. 搜索框

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

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

1）攜程

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

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

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

2）去哪兒

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

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

3）途牛

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

下拉框需要用戶手動選擇搜索關鍵詞的屬性，是跟團游、門票、酒店、旅拍還是當地玩樂等。高級搜索則可以根據用戶鍵入的交通、住宿、價格等要求進行旅游團匹配，更像是VIP定制。這項設計在一定程度上可以幫助用戶在初始搜索時，就根據需求縮小范圍。

和途牛導航欄所強調的引導屬性一樣，其搜索框也加入了“購物”“公園游樂園”關鍵字提示。

我們仍以“三亞希爾頓”為關鍵詞搜索，匹配到的和去哪兒一樣，也是包含這兩個關鍵字的出游產品。

4）飛豬

飛豬的搜索框設計在移入的時候，就有“搜索發現”的提示，向用戶推薦交通、酒店、度假的提示，在UI設計上，飛豬的搜索圖標旁邊還加入了中文“搜索”字樣。

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

3. 其他頂端和側邊設計

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

1）頂端設計

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

其實，在OTA平臺中，標語這一項是否重要一直存在爭議，很少有人會去注意到去哪兒的slogan是“聰明你的旅行”，而攜程的slogan是“讓旅行更幸?！?。

它們也沒有某家“想去哪拍去哪拍”這樣的標語來的有記憶點，但在網站設計時，標語其實是必不可少的一項，有特色的slogan有助于加深用戶對產品的印象。

同時，OTA平臺因為產品的消費屬性重，客服是必不可少的，選擇將客服電話置于顯眼的位置并標記不同顏色，是類似toc的功能型平臺在設計時候需要著重考慮的。

2）側邊設計

去哪采用的側邊設計比較隱藏，需要觸發按鈕才會畫出側邊欄，但其功能設計上和頂端入口其實是重復的。

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

相比下，途牛和飛豬采用的是固定側邊欄的設計，并采用了純圖標的表現方式，一定程度上能減少用戶瀏覽中間內容區域的干擾，只有當鼠標移動到相關圖標上，才顯示文字提示。

二、內容區域

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

在內容導航上，針對酒店、機票、用車等版塊，攜程、去哪和途牛三家設計了導航欄。 前兩者采用的是小圖標的設計，后者用的是文字，飛豬則沒有采用這一設計。

三、底部

主頁底部一般被用來做索引、推廣和權益維護的入口。衡量標準用版塊區域劃分和要素覆蓋來看，攜程的界面更簡潔和方便尋找。

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

四、總結

綜上，對四家OTA平臺的首頁設計進行1-5星評級：

總的來說，飛豬的主頁設計在視覺和可用性上更符合用戶的搜索和使用習慣。

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

從用戶進入網站，到找到他想要的內容，這中間需要跳轉的界面越少越好，這意味著他花費在思考上的力氣也越少。

結合四款OTA平臺，主頁設計的優化可以從以下幾個方面考慮：

1）減少用戶思考

以搜索框為優化對象來看，飛豬的設計更人性化。當搜索兩個地名+酒店兩個對象時，它會把當地酒店推給用戶；同時還提供包含這些關鍵詞的出游產品、酒店+機票、酒店+自助餐組合給到用戶，真正做到了“想在用戶前面”。

2）平衡圖標和文本

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

3）層次和顏色

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

作者：47，關注內容&社交產品，信奉keep exercising , keep learning , keep optimistic

本文由 @47 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。