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

本文以携程、去哪里、途牛、朱非为例，从首页区域和导航设计、内容区域和底部等方面探讨了首页工具产品的需求。

在功能产品中，在线旅行社平台是旅游领域的必备产品。在线旅行社的四个基本功能是机票、酒店、旅游和交通预订。

本文将以携程、去哪里、途牛和朱非为例，从网页设计的角度来分析他们的个人电脑产品，并探讨网站设计中工具产品的必要元素和设计思路。

一、头部区域和导航设计

头部区域是用户进入网站后的第一个视觉冲击，一般包括网站徽标、搜索框、登录提示、导航栏等基本元素。在工具型产品中，用户对主页的期望是帮助他解决这些主要问题:

这是什么网站？我能在这里做什么？你从哪里开始？用户对在线旅行社平台的需求可以分为两种类型:

用户随订票需求而来，即明确消费目的；目前，对于有休闲购物心态的用户来说，没有明确的旅行需求。在线旅行社网站的设计需要同时兼顾这两方面的要求和考虑，但这四个方面在头部区域的设计中都有各自的考虑。

首先看看四个主页布局的总体设计:

-23451。导航栏

导航栏是一个指针，引导用户到特定的类别。可以看出，所有四个平台都选择将导航条放置在Logo或搜索框的底部，并保持与主页相同的颜色系统，以突出导航条的一级入口。本文主要从经验角度考虑导航条的评价。这些细节反映了具体的差异:

1)携程导航条功能下标箭头设计。

下标箭头实际上起到了引导用户移动光标进行二次扩展的作用。

在辅助导航栏下，携程的设计是保持所有字体的大小和颜色相同。跳转到二级导航后，主导航栏会加深，二级目录的字体会标记为蓝色(但不会扩展)，这有助于用户更好地定义自己的浏览位置。

2)导航栏体验比携程旅行更糟糕。

首先，导航栏在第一页上的位置是不固定的。跳转到不同页面后，导航栏的大小和位置会有不同的变化，导致视觉效果不一致。第二，在二级导航中去哪里用红色标记关键点，但跳转到二级页面后，没有标记显示用户的当前位置，困惑的用户只能选择返回首页重新操作。然而，去哪里的优势在于，一些辅助导航用户界面设计吸收了阳光，看起来比携程的界面更年轻、更生动，而携程的界面更简洁、更有商业气息。

3)头牛的导航条可以说是以上两个功能的结合——考虑到向下箭头和红色次键的设计，当光标移动到次目录时，会有一个绿色加深。

然而，在进入次级子页面之后，没有初级和次级导航加深标记，这很容易导致用户在他选择的菜单中迷失方向。

在四个OTA平台中，头牛的独特设计是在导航条上增加关键词导航。如邮轮旅游的“海上度假”和门票的“上海迪士尼”。这种设计更像是一个警钟，激发用户随意浏览的兴趣点。

4)除了消除下标箭头的指导外，在其他方面详细考虑了飞猪的导航条设计。

首先，在二级目录的关键标记中，字体颜色没有被选择来强调，但是右上角的小H标记用于指示流行度。第二，进入子页面后，深化标题以澄清当前位置，并且辅助目录保持展开。2。搜索框

搜索框旨在帮助用户更快地找到他们想要的东西。从布局的角度来看:所有四个平台都选择将搜索框放在Logo的同一个区域的中间，并带有根关联的设计。

从搜索框的检索逻辑来看，它们都与用户从数据库中输入的关键词相匹配。然而，在匹配领域，从四家公司的搜索深度、灵活性和便利性来看，它们可以按以下顺序排列:朱飞>携程>途牛>去哪里。

1)携程

携程的搜索框不限制关键词的类型，从旅游地、酒店、景点到交通。用户可以省略思考的步骤，直接输入他们想要的，并提交给平台进行识别和匹配。

例如，如果你进入一艘游轮，你将跳转到一级导航之下的游轮页面，以一个新的标签页的形式。输入地点名称+酒店名称(以三亚希尔顿酒店为例)，跳转到该地点的酒店预订界面，类似地搜索航班等。搜索框关键词的灵活组合非常高。

同时，在跳转页面后，携程仍将显示用户当前所在的主要和次要位置。

2)去哪里

在哪里给出搜索提示仅限于“搜索目的地”。在使用关键字邮轮，地名+酒店名称搜索后，搜索将跳转到新标签的“假期”导航栏。

以三亚+希尔顿为例。与携程的搜索逻辑不同，在团队旅游中，匹配你的是包含关键词“三亚”和“希尔顿”的产品。

3)土牛

头牛搜索框是四个在线旅行社平台中最复杂的。它包括一个下拉框和一个高级搜索按钮。它对用户不太友好。

下拉框要求用户手动选择搜索关键字的属性，如团体旅游、门票、酒店、旅游或当地娱乐。高级搜索可以根据用户输入的交通、住宿、价格和其他要求匹配旅游团，更像是VIP定制。在一定程度上，这种设计可以帮助用户在初始搜索时根据需要缩小搜索范围。

就像头牛导航条中强调的导航属性一样，它的搜索框也包含“购物”和“公园和游乐园”的关键词提示。

我们仍然使用“三亚希尔顿”作为关键词进行搜索，匹配和去哪里一样，也是一个包含这两个关键词的旅游产品。

4)飞猪

当飞猪的搜索框被设计为移动时，它会有一个“搜索发现”提示，向用户推荐交通、酒店和度假。在用户界面设计中，在飞猪的搜索图标旁边添加了中文单词“搜索”。

仍然以“三亚希尔顿”为关键词搜索，飞猪可以跳转到原始页面，匹配多种类型的产品，如团体旅游、免费旅游和酒店+门票，给用户更多选择。

3。其他顶部和侧面设计

顶部和侧面通常是用户个人界面和平台的重要相关提示的入口。这种设计在四个在线旅行社平台上的布局也很独特。

1)顶部设计

携程使用的唯一方式是只有顶层入口，包括登录注册、新闻、订单和客户服务等重要入口。标牌和客户服务电话号码也暴露在外。

事实上，在在线旅行社平台上，标语是否重要一直是有争议的，很少有人会注意到标语是“为你明智地旅行”，而携程的标语是“让旅行更快乐”。

他们对“想拍哪里就拍哪里”这样的口号没有任何记忆，但在设计网站时，口号实际上是一个必不可少的项目，独特的口号有助于加深用户对产品的印象。

同时，由于产品的高消费属性，OTA平台对于客户服务是必不可少的。在设计类似toc的功能平台时，选择将客户服务电话放在显眼的位置并标记不同的颜色是一个关键的考虑因素。

2)侧面设计

去哪里使用侧边设计比较隐蔽，需要触发按钮来绘制侧边栏，但其功能设计和顶部入口实际上是重复的。

这种设计的优点是用户在浏览下面的内容区域时不必回到顶部进入个人界面，也不必被固定侧栏的设计所干扰。

相比之下，头牛和朱非采用固定侧栏设计，采用纯图标表示，在一定程度上减少了用户浏览中间内容区域的干扰。只有当鼠标移到相关图标上时，才能显示文本提示。

2。内容区

内容区域的设计倾向于满足随意浏览的用户的需求。本网站四个平台的内容设计是相同的，基本上以图片展示+产品名称+价格的形式展示给用户。然而，携程和去哪里的结合显然更加多样化，浏览网页的用户不容易产生审美疲劳。

在内容导航中，导航条是为酒店、机票、汽车等部门设计的，包括携程、去哪里和途牛。前两个使用了一个小的标志设计，后一个使用了文字，而飞猪没有使用这个设计。

1613，底部

主页的底部通常用作索引、宣传和权利保护的入口。根据度量标准，通过划分论坛区域和覆盖元素，携程的界面更简单、更容易找到。

除了头牛，其他三个使用左对齐文本排列。由于文本长度不一致，在游戏中对齐的图牛会显得有点混乱，用户的注意力很容易转移。

2024。摘要

总而言之，四个在线旅行社平台的主页设计被评为5星级:

总的来说，朱非的网页设计在视觉和可用性方面更符合用户的搜索和使用习惯。

从工具型产品的角度来看，它的根本目的是为用户提供服务。因此，在界面的设计中，不是安排尽可能多的内容供用户选择，而是根据用户进入网站后的思维逻辑将结果直接交给用户。

从用户进入网站寻找他想要的内容开始，他需要跳转到的界面越少越好，这意味着他花在思考上的精力越少。

结合四大在线旅行社平台，可以从以下几个方面考虑网页设计的优化:

1)减少用户思考

以搜索框为优化对象，飞猪的设计更加人性化。当搜索两个地名+酒店时，它会把当地的酒店推给用户。同时，它还向用户提供包含这些关键词的旅游产品、酒店+机票、酒店+自助餐组合，真正“想在用户面前”。

2)平衡图标和文本

图标和文本的适当组合可以帮助用户集中注意力，缓解审美疲劳。在购物车和手机等易于理解的图标上，文字符号可以减少；但是，最好给不容易理解的图标添加文本帮助。通常，图标用于切换文本，文本以浮动方式显示，因此可以根据总体布局位置考虑设计。

3)等级和颜色

这在导航栏的设计中尤其重要。就像在购物中心一样，用户非常关心他们去哪一层。通过颜色来区分等级是一个不错的选择，当然，你也可以使用“酒店>国内酒店>四星级酒店”是论坛社区中常见的教学方式。

作者:47岁，专注于内容和社交产品，相信保持锻炼，保持学习，保持乐观。

这篇文章最初由@47发表。每个人都是产品经理。未经允许禁止复制。

主题图来自Unsplash，基于CC0协议。

本文由 在线网速测试 整理编辑，转载请注明出处，原文链接：https://www.wangsu123.cn/news/6801.html。