前言:
如今咱们对“目录字体怎么是蓝色的”大体比较关怀,各位老铁们都需要了解一些“目录字体怎么是蓝色的”的相关知识。那么小编也在网摘上汇集了一些关于“目录字体怎么是蓝色的””的相关文章,希望同学们能喜欢,咱们快快来学习一下吧!本文以携程、去哪儿、途牛和飞猪四家为例,从网页的头部区域和导航设计、内容区域与底部方面探讨了工具型产品需要怎样的首页。
在功能型产品中,OTA平台算是差旅场景中必备的产品,机票、酒店、旅行、交通预订四项是OTA的基础功能。
本文将以携程、去哪儿、途牛和飞猪四家为例,从主页设计方面分析其PC端产品,探讨工具型产品在网站设计时的必备要素和设计思路。
一、头部区域和导航设计
头部区域是用户进入网站后面对的第一视觉冲击,一般包括网站Logo、搜索框、登录提示、导航栏等必备要素。在工具型产品中,用户对主页的期待在于帮助他解决这几个主要问题:
这是什么网站?我能在这里做什么?从哪里开始?
可以将用户对OTA平台的需求分为两种:
抱着订票需求即明确的消费目的来的用户;暂时没有明确差旅需求以随便逛逛为心态的用户。
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协议。
标签: #目录字体怎么是蓝色的