以主流OTA平台为例，分析工具型产品需要怎样的首页 .docVIP

以主流OTA平台为例，分析工具型产品需要怎样的首页 本文以携程、去哪儿、途牛和飞猪四家为例，从网页的头部区域和导航设计、内容区域与底部方面探讨了工具型产品需要怎样的首页。 在功能型产品中，OTA平台算是差旅场景中必备的产品，机票、酒店、旅行、交通预订四项是OTA的基础功能。 本文将以携程、去哪儿、途牛和飞猪四家为例，从主页设计方面分析其PC端产品，探讨工具型产品在网站设计时的必备要素和设计思路。 一、头部区域和导航设计 头部区域是用户进入网站后面对的第一视觉冲击，一般包括网站Logo、搜索框、登录提示、导航栏等必备要素。在工具型产品中，用户对主页的期待在于帮助他解决这几个主要问题： 这是什么网站？ 我能在这里做什么？ 从哪里开始？ 可以将用户对OTA平台的需求分为两种： 抱着订票需求即明确的消费目的来的用户； 暂时没有明确差旅需求以随便逛逛为心态的用户。 OTA网站设计时需要兼顾两者需求同时进行考虑，但这四家在头部区域的设计上其实都有自己的考虑。 先观察一下四家在首页布局上的整体设计： 1. 导航栏 导航栏是将用户引向具体分类的指向标，可以看到四家平台都选择在Logo或搜索框下端放置导航栏，并保持了和主页一致的色系以凸显导航栏的一级入口。本文主要考虑从体验性评估导航栏，具体差异体现在这几个细节： 1）携程导航栏的特色在于使用了下标箭头设计。 下标箭头其实起到的引导用户移动光标进行二次展开的作用。 在二级导航栏下，携程采用的设计是所有字体的大小颜色保持一致。跳转二级导航后，所在的一级导航栏会加深，二级目录字体标蓝（但不展开），可以帮助用户更好明确自己的浏览位置。 2）去哪儿的导航栏体验要差于携程。 第一，首页导航栏位置不固定，跳转不同页面后导航栏大小和位置会有不同变化，在视觉效果上不连贯； 第二，去哪儿对二级导航中用红色标记重点，但跳转二级页面后，没有标记显示用户现在处于的位置，迷茫的用户只能选择退回首页重新操作。 但去哪儿的优点在于：部分二级导航用UI设计吸晴，看起来比携程的界面要年轻态和活泼，携程则更简洁和商务风。 3）途牛的导航栏可以说是上面两家特色的综合体——考虑了向下箭头和二级重点标红的设计，并在移动光标到二级目录上，会出现绿色加深。 但进入二级子页面后，没有一级和二级导航加深标记，容易出现和去哪儿用户迷失在自己选择的菜单中的问题。 四家OTA平台中，途牛特有的设计是在导航栏上加入了关键词的引导。如邮轮游的“海上假期”、门票的“上海迪士尼”。这样的设计更多是起到一种唤醒作用，以激发随意浏览的用户某个兴趣点。 4）飞猪的导航栏设计除了剔除下标箭头的引导外，在其他方面都进行了详细考虑。 第一，在二级目录的重点标记上，没有选择用字体颜色来强调，而是用右上角的H小标来表示热门程度； 第二，进入子页面后，用标题加深来明确当前位置，二级目录保持展开状态。 2. 搜索框 搜索框的设计在于帮助用户更快速找到自己想要的内容。从布局来看：四家平台都选择把搜索框放置在Logo同一区域的中部，并有词根联想的设计。 从搜索框的调取逻辑来看：都是从数据库匹配用户输入的关键词；但在匹配字段上，从四家的搜索深度、灵活度和便利性来看，可以按照这样的顺序进行排名：飞猪＞携程＞途牛gt;去哪儿。 1）携程 携程的搜索框不限定关键词类型，从旅行地、酒店、景点到交通都可以，用户可以省略思考的步骤，直接输入自己想要的内容，交由平台去识别和匹配。 例如，输入邮轮，会以新标签页的形式跳转到一级导航旅游下的邮轮页面；输入地名+酒店名（以三亚希尔顿为例），跳转该地的酒店预订界面，同理也可以搜索飞机班次等。搜索框关键词的灵活组合程度很高。 同时，跳转页面后，携程依然会显示用户目前所在的一级和二级位置。 2）去哪儿 去哪儿给出的搜索提示仅限于“搜索目的地”，用邮轮、地名+酒店名的关键词方式进行搜索后，都会跳转到新标签页的“度假”导航栏下。 以三亚+希尔顿为例，和携程的搜索逻辑不同，去哪儿给你匹配到的就是跟团游中包含“三亚”和“希尔顿”关键词的产品。 3）途牛 途牛搜索框是四家OTA平台中最复杂的一个，包含了下拉框和高级搜索按钮的设计，对用户操作而言并不是很友好。 下拉框需要用户手动选择搜索关键词的属性，是跟团游、门票、酒店、旅拍还是当地玩乐等。高级搜索则可以根据用户键入的交通、住宿、价格等要求进行旅游团匹配，更像是VIP定制。这项设计在一定程度上可以帮助用户在初始搜索时，就根据需求缩小范围。 和途牛导航栏所强调的引导属性一样，其搜索框也加入了“购物”“公园游乐园”关键字提示。 我们仍以“三亚希尔顿”为关键词搜索，匹配到的和去哪儿一样，也是包含这两个关键字的出游产品。 4）飞猪 飞猪的搜索框设计在移入的时候，就有“搜索发现”的提示，向用户推荐交通、酒店、度假的提示，在UI设