本文以携程、去哪儿、途牛和飞猪四家为例，从网页的头部区域和导航设计、内容区域与底部方面探讨了工具型产品需要怎样的首页。

在功能型产品中，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协议。