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

在功能型産品中，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協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部