购物车中还没有商品,赶紧选购吧!

推荐阅读

运营熊 运营熊

旅游网站如何设计优秀的网站导航

时间:2017-09-12 | 分类:网站运营
浏览:225

用户的浏览习惯是从左到右、从上到下,当他们进入一个旅游网站的时候,第一眼看到的就是网站首页Banner图和导航栏,它们共同决定着用户对网站的第一印象,第一印象会一直伴随接下来使用的整个过程,其重要性不言而喻。


举个例子,思途的首页导航栏分别是:首页、解决方案、产品与服务、思途案例、帮助中心以及经验推广,用户就可以直接点击【产品与服务】找到自己想了解的产品。作为第一次来到思途网站的用户来说,可以通过【思途案例】了解建站后具体是什么样子,作为自己建设旅游网站的参考。

可是对于很多站长来说,网站导航栏一直是设计中的一个盲区,他们认为导航栏就是简单的几个词组成,没有必要花费多余的时间在这上面。事实却并非如此,因为导航栏直接关系到用户体验度的问题。在这一篇文章里,我就从网站导航栏的各个方面进行分析,对大家在旅游网站优化过程中导航栏的设计提供一些建议,仅供参考。


一、网站导航栏是什么?

网站导航栏是指通过一定的技术手段,为网页的访问者提供途径,引导他们访问网站的各个栏目、菜单、在线帮助等,使用户可以方便快速的访问自己所需的内容。


二、网站导航栏的作用是什么?

导航栏是网站非常重要的组成部分,一款良好的网站导航栏对于用户体验度和搜索引擎优化都非常有利。


1. 用户体验度:导航栏相当于是网站的眼睛或地图,可以方便用户查看或者寻找自己所需要的信息,并能快速跳转到相应页面。就像图书馆里的书会分门别类的摆放,它们有着各自的标签,以方便读者寻找,导航栏就起着这样的作用。另外,导航栏也能使网站内容看起来更加丰富,方便优化。


2. 搜索引擎优化:网站顶部水平导航栏位于优化网站中F区最重要的位置,也是搜索引擎蜘蛛检索时看重、权重较高的一个位置,同时还布局了各个其他单页面的导入链接,是设置整个网站回流的最核心部分。


三、网站导航栏包含哪些元素

在大部分的站长认识里,导航栏就是网页上方的一个导航条,由几个词组成。也有人认为,导航栏就是一种方法,引导用户去寻找网站上最重要的信息。在设计导航栏之前,我们要先了解导航栏到底包含了哪些元素,以此才能确定自己的旅游网站要展示哪些内容。一般来说,网站导航栏由以下几个元素组成:


1. 网站logo

网站logo是网站的一部分,也是网站的品牌标志,具有唯一性。一个好的logo往往可以反映旅游网站的业务类型或者内容。网站logo的设计一定要简单大方,让用户一眼就能看懂。

如下图所示是使用思途CMS的丝路直通车网,它的网站logo除了有“丝路直通车”和官网网址外,还添加了带有丝绸之路的特色标志骆驼,符合网站定位,用户一眼就能看懂。


2. 网站栏目

一个旅游网站,不可能把所有的业务都呈现在一个页面上,为了便于用户浏览,需要对旅游网站的各个模块进行二次分类,也就是所谓的二级导航。网站的业务不同,内容种类也会不同,旅游网站应该根据自己的主要业务来进行分类,一个不涉及出境业务的网站就不能在导航栏上添加一个出境游模块。


3. 返回首页

用户的浏览层级是一层一层加深,如果没有返回首页,用户到达首页就会显得特别的繁琐,浪费很多时间。导航栏里有返回首页可以节约用户时间,防止用户关闭网页停止浏览。


4. 附加栏目

网站都会有附加栏目,虽然它们不属于网站的主要内容,但它们也是网站不能缺少的内容。比如常见的“24小时客服电话”、“登录/注册按钮”、“联系我们”等。这些应该放在网站哪个位置好呢?顶部导航栏空间有限,主要用来呈现旅游网站主要业务,像线路、酒店、签证等等,如果都放在顶部导航栏,则显得主次不分。一般来说,附加栏目放在网站顶部右侧位置,如下图所示是使用思途CMS的重庆中青旅,它的顶部右侧放了24小时客服电话。


如下图所示是使用思途CMS的华腾游,它的顶部右侧放了登录/注册按钮。


5. 搜索功能

很多人用惯了百度,到任何一个网站寻找信息,都习惯性的想要去搜索。如果一个旅游网站没有搜索功能,对用户访问网站来说就带来了障碍。如下图所示是使用思途CMS的驴程户外网,顶部导航栏上面就是搜索框,极大的方便了用户。


上述五种都是网站导航栏中的常见元素,旅游网站在设计导航栏的时候要根据自己网站的具体情况进行取舍,毕竟把在这些元素都放上去也不太可能,网站没有那么多的多余空间,并且太多信息的展现会让用户觉得网站凌乱、没有主次,注意力会分散。


四、网站导航栏分类

其实很多的旅游网站都不只一种导航设计模式,例如使用思途CMS的顺风旅游网,用顶部水平导航栏作为主导航,并使用侧边导航栏作为辅助,同时还有面包屑导航,增加页面的便利度。

旅游网站应该根据自己网站的业务多少、整体设计综合考虑,到底使用什么模式的导航栏。以下是几种常见的导航栏模式:


1. 顶部水平栏导航

顶部水平栏导航也被称为主导航,是当前最流行的旅游网站导航菜单设计模式,一般位于网页页眉顶部,能够第一时间引导用户指向他所需要的信息栏目。长久以来,网页自上向下滑动培养了人们的阅读习惯,导航栏放在顶部可以让用户感知到位置,哪怕浏览到未知的位置,只要滑动条拖到最上面就可以选择导航。同时顶部导航,占用空间小,突出核心功能,便于用户识别和操作。很多时候,顶部水平栏导航设计模式伴随着下拉菜单,当鼠标移到某个项上时弹出它下面的二级子导航项。 


如下图所示是使用思途CMS的品味中国户外旅游网,把鼠标放到“国际线路”上时下方自动出现二级子导航项。


2. 竖直/侧边栏导航

竖直/侧边栏导航也被称为次导航,一般位于旅游网站的左侧。当用户需要浏览网页时,想去别的栏目看看,可以通过次导航进入其他栏目。侧边栏导航设计模式在旅游网站中也随处可见,因为它可以适应数量很多的链接。对于业务种类繁多,像有国内游、出境游、邮轮、签证等的旅游网站,主导航栏不能全部列出,这时候就需要侧边导航栏作为补充,让用户更容易到达自己感兴趣的页面。


侧边导航栏适用于网站业务和产品较多的旅游网站,如下图所示的重庆中青旅:


3. 面包屑导航

面包屑的名字来源于Hansel和Gretel的故事,他们在沿途播撒面包屑以用来找到加家的路,就像这个故事一样,在互联网中,面包屑为用户提供一种追踪返回最初访问页面的方式,可以帮助用户了解到当前自己在整站中所处的位置。面包屑对于多级别具有层次结构的网站特别有用。如果访客希望返回到某一级,它们只需要点击相应的面包屑导航项,从而降低网站的总体跳出率,如下图所示:


4. 网站地图

网站地图也算是导航的一个分类,主要是给搜索引擎指引道路。网站地图又称站点地图,它就是一个页面,上面放置了网站上需要搜索引擎抓取的所有页面的链接(注:不是所有页面),方便搜索引擎蜘蛛抓取网站页面,通过抓取网站页面,清晰了解网站的架构。


五、网站导航栏设计原则

网站的导航栏是用户查看了网站首页后想要进一步了解网站其他部分时最重要的指示,对留住用户至关重要。设计网站导航栏就相当于为一栋大楼打基础,如果地基都不牢靠,再美、再壮观的大楼也没有什么作用,因为存在着潜在的危险。如果站长想要拥有优秀的用户体验,良好的产品转化率,站长就必须要真正了解用户的需求,从用户角度出发去设计导航栏,真正做到方便用户。设计一款优秀的网站导航栏没有想象中的那么困难,这里有几个在设计过程中要注意的关键点。


1. 一眼看到

网站导航栏必须要让用户一进网站就能看到,这就意味着导航上的文字不要和Banner图或者背景图使用相同或者相近的颜色,以免造成用户寻找困难。导航区域也不能太小,要让用户容易看到。还有导航栏的位置要符合用户使用习惯,放在顶部或者左侧位置。


2. 简洁大方

很多的网站喜欢在导航栏上添加很多繁杂的装饰,其实依我来看,这样完全没有必要,因为导航栏的目的只有一个——方便用户到达所需页面。这也就说明网站导航栏的设计一定要简约,易于操作,能够帮助用户快速查看栏目内容。文字也尽可能的简单易懂,不要让用户花时间思考这里的文本是什么意思。


3. 可点击

网站一定要保证导航栏上所有的文字都可以点击,就算是有下拉菜单,点击子类别链接也要能够点击跳转到相应页面。很多网站都没有注意细节,常常是下拉菜单中的链接点击了却无法跳转,用户体验度很糟糕。


4. 保持简洁

网站导航不应该有太多的模块,可以在下拉菜单中添加更多的分类,避免分散用户的注意力或者使网站看起来繁杂,复杂而拥挤的导航栏设计会严重阻碍网站的整体可用性。一般来说,主导航模块不要超过8项。


5. 排序

通常我们会发现越重要的内容越是出现在靠前的位置。用户的浏览习惯是从左到右,因此站长应该把最重要的模块放在前面。并且网站所有的导航栏应该尽量保持一致的风格,这样能留给用户网站专业的形象。


如果站长做好了网站导航栏的优化工作,首先能够让网站层次更加清晰,方便用户操作,清晰知道自己在网站中的位置,提升其在网站内的操作次数,降低网站跳出率。另外还能利用导航栏的锚文本链接增加网站的核心关键词权重和长尾关键词的权重,有利于页面的收录和抓取,整个网站的排名也会上升很多。希望大家能从以上获得一些启发,从而设计出一款符合自己网站并且独具魅力的网站导航栏。

说明

赞   1

有一点帮助   0

没有帮助  

参与评论

他们说...

脚印旅行

脚印旅游网(https://www.jointrip.cn)赞一个 吸引吸引蜘蛛
积分获取更多
思途CMS系统更新动态
  • 2017-09-21
    1、思途CMS后台新手教程 优化
    2、CMS帮助文档统一样式优化
    3、wap端广告图规范
    4、【思途CMS】手机端404页面改版
    5、升级后,鼠标放图片上没有显示文字说明,谢谢!
    6、【思途CMS】手机端查看更多文字未居中
    7、私人订制页面以及搜索结果页底部样式有问题,显示太小了,看不清楚
    8、一个人会对应几个账号的问题?
    9、取消微信支付时,对支付宝按钮的隐藏;qq、weibo、微信登陆绑定手机时增加图片验证码
    10、wap端基础版广告图规范
查看更多

扫一扫官方微信号

加入微信
在线咨询
返回顶部
<