html中使用什么标签做的导航栏_网站导航:7个最佳实践,设计技巧和警示

news/2024/5/11 23:44:09/文章来源:https://blog.csdn.net/weixin_39663729/article/details/111213934

4a5b775962586badffd0a3f6cc9991f7.png

一些小的事物可以创造大的变化,网站导航栏就是一个很好的例子。导航的结构和标签可能会对结果产生巨大影响,原因如下:
  • 导航会影响流量:你的网站在搜索引擎中的排名高低会影响你从搜索中获得的流量量的多少
  • 导航会影响转化:网站的易用性会影响访问者转化为潜在客户的百分比

01

让导航栏具有描述性

“我们做什么”这五个字并没有说明你具体到底做什么,“产品”、“服务”、“解决方案”这些词其实也没有。使用带有关键词的描述性导航更好,原因有二:
  • 导航中的描述性标签更适合搜索引擎:导航栏是与搜索引擎相关性很大的关键位置。由于导航栏出现在每个页面上,因此描述性标签会向搜索引擎(如谷歌、百度)展示您的网页内容确实关乎该主题。
  • 导航中的描述性标签对访问者有利:导航栏在视觉上突出显示,因此它可以与访问者进行即时互动。当导航栏列出i你的主要产品或服务时,访问者一眼看就能知道你公司的主要业务,并确定他们在正确的网站中。
警告!避免使用诸如“服务”之类的标签。没有人会搜索“产品”或“服务”这样的词语,因此这些标签对你的排名没有帮助。a36a2e3efe0da07e3f75c96b58be2871.png此外,如果你把所有的业务列在同一个网页里,那它将永远不会位于搜索结果的前列,这是因为它没有专注于一个主题。其实你网站上的每个页面都有机会在搜索结果中获得高位次,只要它专注于某单一主题或关键短语。这就是为什么你的网站架构(而不只是导航)是SEO的关键所在。在经过搜索优化的网站上,每个服务、每个产品、每个主题都会拥有一个页面。总之,请避免创建笼统的“服务”主题页面,除非你将其链接到经过搜索优化的具体服务的页面上。

02

避免以格式为标签的导航栏

以“视频”、“照片”、“白皮书”作为标签的导航栏告诉访问者内容的格式,却没有告诉访问者主题。人们访问网站的真正目的是寻找所需要的答案和信息,而不是单纯的寻找“视频”或“白皮书”。指示格式的标签不是描述性的,因此对访问者不是很有帮助,这就是尼尔森诺曼集团的Aurora Bedford建议避免导航栏以格式为标签的原因。
“对特定主题感兴趣的用户通常不在乎信息以何种格式传递给他们;他们只专注于找到可以解决他们所想到的问题的答案。”——Aurora Bedford,尼尔森诺曼集团用户体验专家

03 

避免使用下拉菜单

是的,下拉菜单很流行,但它不是一个好主意。避免使用下拉菜单有两个好处:
  • 对搜索引擎有利:由于编程式的原因,搜索引擎是很难下拉菜单的,因为这可能会导致一些问题。
  • 对访问者有利:可用性研究表明下拉菜单很烦人。原因如下:访问者移动眼睛的速度比移动鼠标的速度快得多。当他们将鼠标移到菜单项时,他们可能能已经决定单击,然后你给他们提供了更多选项,这会导致访问者思维上的卡顿。
更重要的是,下拉菜单会导致访问者跳过重要页面,如果你使用下拉菜单,那就很容易在分析结果中看到此问题。168d7533ea5c46058e1a8dd4d1f2159a.png但是研究也表明,在可用性测试中,一种类型的下拉菜单表现良好——“大型下拉菜单”。此类下拉菜单提供了许多种选择,使那一刻的思路阻力减弱。

f6e403cb21b0e6e183437e1f4b3b5970.png

如果你的网站很大,页面很多而且产品或服务种类繁多,那么大型菜单可能是个好主意,虽然它们大大增加了首页的链接数量。

04

将菜单项的数量限制在七个以内

一些网站的主页上有数百个链接,这是非常糟糕的。限制主导航中的链接数量是有好处的,原因有二,且这两个原因与使用描述性标签的两个原因相同:

第一,导航栏中放较少的项目适合搜索引擎。

你的首页在搜索引擎中拥有最高的“权限”,因为链接到你的首页的网站比链接到你的内部页面的网站要多,通过导航栏,该权限可以深入到更深的页面。如果你的首页具有大量链接,这可能会稀释传递到内部页面的权限,这样会降低你的内部页面在搜索结果中处于靠前位次的可能性。导航越简洁,就越会有更多权限流到每个内部页面,从而使你的内部页面在搜索结果中可能有更高排名。

第二,导航中较少的项目对访问者有利。

“短期记忆仅包含七个事物,上下浮动两个。”这摘自乔治·米勒(George Miller)在1956年发表的著名心理学论文。最近的研究表明,尽管大脑使用“分块”作为改善短期记忆的回想方法,但短期记忆的数量取决于类别,对数字来说可能是七个,但对单词来讲可能只有五个。无论如何,导航中的项目越多,对于访客来说,记住和处理信息的难度就越大。在视觉上,八个比七个多很多,如果数量过多,访客的眼睛可能会忽略掉重要信息。将导航栏尽量分成五到七个项目,如果你需要使用七个以上的项目,请考虑将它们分成几个组。警告!避免长列表。小技巧!每次从页面上删减菜单项(或任何其他元素)时,剩下的所有内容在视觉上都变得更加突出,重要内容更有可能被访客看到并作出考虑。

4fc9e108d9447044b843e0f8b197d5ac.png

做出艰难的决定需要一定的磨练,但相信你能行的,挑战自己,将其减少到五个!

05

网站导航的顺序很重要

不仅导航栏中的项目的数量很重要,这些项目的顺序也很重要。在网站导航中,就像任何列表一样,开头和结尾的项目最有效,因为这是关注度和保留度最高的地方。上述现象叫序列位置效应,它与认知偏见结合在一起:优先效果:更容易记住列表开头的项目。新近度效果:更容易记住列表末尾的项目(或刚刚发生的事情)。因此,在导航开始或结束时放置的所有内容都会变得更加突出,我们应该将对我们的业务和访客最重要的项目放在这些地方。始终设法将最重要的东西放在视觉上最显眼的地方,这符合网页设计和内容营销的核心原则:首先给访问者他们想要的东西,然后他们就可能给你你想要的东西。因此,你应当将最流行,重要的项目放在导航的开头。如果不知道最重要的项目是什么,只要查看你的数据分析结果就行了。说到数据分析,我们继续讲后面的技巧。

06

如何优化网站的导航

设计导航是开始,而不是结束。创建导航几周后,你可以使用数据进行回顾并进行一些评估。有两种报告可以向你显示访问者最常使用的导航项。一种是行为报告中的导航摘要或页内视图,另一种是行为流/用户流报告。页内分析功能在每个导航项旁边显示一个小的橙色框,指示从任何页面访问每个页面的访问者的百分比。由于某些原因,它不准确且具有误导性。如果此报告不适合你,则可以从主页上查看导航摘要。页面列表和页面浏览量的百分比可以让你很好地了解菜单上的内容。

000d1895209fffabfc9abdb3323a5437.png

人们点击的另一种视图是在“行为>行为流”报告中。该报告与“受众群体>用户流”报告相同。除非你要跟踪事件,否则,这两种报告是相同的。事件跟踪已添加到行为流报告数据中。无论哪种情况,报告都将如下所示:

891490f9f8800001c79dca59fa3a2adf.png

通过这些报告,你可以了解访问者正在使用哪些导航项以及哪些导航项未使用,从而进行导航栏优化。以下是你可能根据这些报告中的分析做出的一些决策示例:
  • 如果不是很重要,请删除很少被点击的项目
  • 如果某些很少被点击的项目很重要,则对它们进行重命名或重新贴标签
  • 将经常被点击的项目移到开头
警告!请记住,你的主页可能不是许多访问者的切入点,经过搜索优化的网站有许多入口点,许多(甚至大多数)访问者都不会从首页开始。

07

移动设备上的网站导航

响应式网页设计带来了移动端导航栏最佳实践和标准,可以用两个词来概括——“汉堡图标”。“汉堡图标”是由三个短的水平线组成的图标,代表一个菜单。但是它看起来有点像三明治,所以人们称其为汉堡包图标。它显示在移动网站的右上角,单击它会显示导航菜单。以下是一些移动导航示例:44bd89184eb8e886339c0f4a5b60f81b.png在“汉堡图标”旁添加“菜单”一词可能会帮助访问者找到这种隐藏导航。然而,尼尔森诺曼集团警告说,隐藏导航也可能会增加访问者任务完成的时间。专业技巧!对于移动访问者,请确保电话号码变成一个在点击时会拨打电话的按钮。在你网站上的移动版本电话号码的href代码中添加tel,这很简单,该代码应如下所示:(773)348.4581结语我们希望这些技巧能为你的菜单提供新的思路和灵感。理想情况下,你可以在内容管理系统中快速实现你的想法。一个好的内容管理系统,可以让你灵活地调整菜单的标签和顺序。上述的每个规则都可能有例外,如果不确定是否应该进行更改,你可以请网络策略专家一起评估分析结果。如果你能让导航既迎合“人类”访客,也适合“机器人”搜索引擎,那么你的数据分析团队将非常感谢你!

注:本系列分享均译自 Andy Crestodina的《Website Navigation: 7 Best Practices, Design Tips and Warnings》,经译者龚柏芃翻译、整理而成。

——————易观方舟通过全量实时采集用户属性与行为数据,连通内外部数据源,打通用户运营触点,为企业各个部门提供从数据采集、分析、应用到智能用户运营闭环的数据管理平台,目前已经覆盖银行、证券、品牌零售、电商、教育等多个行业。易观方舟可以帮助企业整合用户数据资产,建立用户数据分析体系,通过用户精准分群实现用户精细化运营,为企业决策层提供数据决策依据,提升决策效率,以数据驱动企业精益成长

ea3cbe0bf79a1e6827406b0abd6f0107.png

3a8bed7330395e9c2e844359c582ae29.png

 点击阅读原文,了解智能用户运营

你“在看”我吗?a463ae5ea68d30284381283d30b3258e.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_824135.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站二次开发如何防止别人打包源码_建站公司不给网站源码和代码怎么办?

建站公司不给网站源码的纠纷由来已久,今天正好我们标兵seo的客户因为网站被黑导致和建站公司产生纠纷最后我们帮助下拿回了网站源码。为避免企业建站踩雷今天我们来聊聊如何避免建站公司不给网站源代码的问题。建站分类说起建站我们要区分一下哪些情况不会给源码。自…

腾讯云iis8.5新建网站无法访问_腾讯云服务器搭建 Typecho 博客

云服务器设置首先肯定要先有一台云服务器了,可以看看哪家优惠力度比较大,然后选择哪家。我这里购买的腾讯云,安装的 Centos 系统。所以后边的教程也是以腾讯云为例,其他家的也都大同小异。为了安全和方便我们先把服务器的密码改了…

asp站点服务器,ASP网站搭建 ASP服务器搭建 教程

asp现在或许用的人很少了,但是不代表没有人用。无论是ASP网站搭建还是ASP服务器搭建其实都差不多,区别不是很大。搭建asp的方法也很多,例如:IIS、AspWebServer、小旋风等。我们只需要掌握一两种就可以了。下面给大家简单分享一下&…

电商网站开发记录(一) 项目初始化

新建一个maven -achetype-webapp项目,建好完善后基本的目录,然后配置tomcat,在deployment里引入artifact,第一次建的时候发现没有artifact,可能是module之类的没有初始化好,当时也没有吧maven的依赖import changes,不知道默认的webapp模板会不会自动引入初始的依赖,第二次建的时…

价值匹配策略SEO

在解释这个策略之前,我们首先要了解,什么是有价值的东西。100元对你也许很有价值,但是对于百万富翁来说,也许根本不值得一提;小米手机对你来说很有价值,但是对于苹果手机爱好者来说,小米要差很多…

如何用个人电脑发布网站到外网

自己用自己的电脑搭建了Apache服务器,在内网可以访问,但外网不行,怎么办呢?下面就来说说吧!分类: 网站建设自己搭建一个服务器很简单,用PHPstudy是个不错的选择,百度下教程是一大把&…

如何通过Python暴力破解网站登陆密码

首先申明,该文章只可以用于交流学习,不可以用于其他用途,否则后果自负。 现在国家对网络安全的管理,越来越严,但是还是有一些不法网站逍遥法外,受限于国内的人力、物力,无法对这些网站进行取缔。…

基于php的购物网站源代码,[内附完整源码和文档] 基于PHP的网上购物系统设计与实现...

摘 要随着Internet技术的发展,人们的日常生活已经离不开网络。未来社会人们的生活和工作将越来越依赖于Internet技术的发展,也将越来越数字化、网络化、电子化、虚拟化。电子商务也随着网络的发展日益和人们的生活贴近。Internet的发展历程以及目前的应用…

大型分布式网站架构:缓存在分布式系统中的应用

缓存是分布式系统中的重要组件,主要解决高并发,大数据场景下,热点数据访问的性能问题。提供高性能的数据快速访问。 一、缓存概述 缓存是分布式系统中的重要组件,主要解决高并发,大数据场景下,热点数据访问…

用正则扒网站图片_推荐 12 个学习前端必备的神仙级工具类项目与网站

今天给大家推荐的是平时学习前端时,经常用到的一些辅助工具类网站。1. codelf有一种痛,不是程序员可能不懂,但如果是程序员一定懂,那就是给变量或函数命名。随着项目越来越复杂,变量和函数数量越来越多,英语…

按钮做页面调转_自媒体人如何自己建立一个手机网站,超简单,任何人都能做...

随着移动互联网的兴起,越来越多的公司、个人把展示的内容转到了手机网站上,学会制作手机网站就成了大家关注的热点。传统的网页制作工具制作电脑端的网站功能很强大,但手机网站由于手机屏幕大小和CPU处理能力较弱,对网站的要求与传…

html静态网页模板_静态与动态链接:哪种最适合SEO?

关于动态链接与静态链接的争论在行业中引起越来越多的争议,每个SEO人员都对哪种类型的链接最适合SEO有自己的看法。然而我们首先来了解一下基本概念。动态或静态链接到底是什么?静态链接是具有永久不变的网页。例如,您的首页网址可能是静态链…

linux中关于磁盘配额的描述,Linux磁盘配额 - Linux操作系统基础进阶练习题_Linux教程_Linux公社-Linux系统门户网站...

Linux操作系统基础进阶练习题Linux磁盘配额[日期:2009-06-01]来源:Linux社区作者:Linux编辑[字体:大 中 小]1)建立测试组gtest,测试用户test1,test2,test3以上两个测试用户的初始组为gtest参考答案:groupadd gtestuseradd -m -g g…

struts2+hibernate学习之实现网站留言板和好友互相添加功能

前面我将自己添加好友的思路,以及测试做好了,这里放在一起来回顾自己的思路和中间遇到问题:先看结果,╭(╯^╰)╮界面是有点说不过去。。。。 这里不再说留言板的显示具体实现过程,留言表有两个外键,对应用…

网站的中英文切换--i18next

这两天公司让我做公司官网,就是几个静态页面。我都不好意思说自己是Java开发了,年后来公司基本上自己做毕业设计才写Java代码。在公司基本没有写过Java的东西,我都怀疑公司是不是看我Java太菜,让我以后就做前端了。。。然后我前端…

如何观看一些被屏蔽的网站_什么是屏蔽网线、非屏蔽网线,超五类双屏蔽网线?一文彻底清楚...

【工控课堂】电气工程师必备网站!海量免费资源下载学习! 下载地址:čľć庍-塼ć诞ĺ - www.gkket.com前天我们发布了关于超5类线水晶头与6类线水晶头有什么不同?6类水晶头如何接线?有朋友提到屏蔽双绞线&…

wordpress 内网安装插件_wordpress零基础建站(5)-启用redis+优化php-fpm和mysql

在上一节教程中,我们已经搭建了wordpress环境phpnginxmysqlredis,并完成wordpress安装,目前你应该可以正常登录wordpress后台了。这篇文章是wordpress优化的第一篇文章,主要是软件配置方面的内容,后面我们还会再写一篇…

linux字符驱动程序过程,字符设备驱动程序 - Linux设备驱动程序笔记_Linux编程_Linux公社-Linux系统门户网站...

.主设备号和次设备号对字符设备的访问时通过文件系统内的设备名称进行的。那些设备名称简单称之为文件系统树的节点,它们通常位于/dev目录。字符设备驱动程序的设备文件可通过ls -l命令输出的第一列中的c来识别。块设备同样位于/dev下,由字符b标识crw-rw…

亳州学院计算机查询网址,亳州学院教务处网站【官网入口】

亳州学院教务处网站(一)亳州学院教务处网站(二)2016亳州中小学寒假放假时间:1月29日-2月22日中国招生考试网资讯 12月30日,市教育局下发通知,敲定了亳州市中小学幼儿园寒假放假时间。全市中小学、幼儿园寒假从1月29日(腊月二十)开始&#xff…

买服务器做网站 镜像选什么,云服务器做网站镜像类型选啥

云服务器做网站镜像类型选啥 内容精选换一换超高性能计算型主要用于满足高端计算(例如工业仿真、分子建模、计算流体力学)的需要,除了提供强大的CPU能力外,还提供了多种选择,使用EDR InfiniBand网卡组成的低延迟RDMA网络,支持内存…