在建设或维护一个网站时,网站的可用性应该是你的首要考虑因素之一。如果你的网站难以使用,人们就会对它望而却步,或者永远不会再来。此外,在许多情况下,良好的可用性在涉及到搜索引擎优化时直接转化为更好的结果。
一些标志是 良好的网站实用性 包括。
- 移动响应性:越来越多的人通过手机上网(谷歌认为这对搜索排名很重要,是他们的一部分)。 移动优先的倡议).
- 页面加载速度:然而,由于与人们与网站互动的方式有关,谷歌的另一个重要排名信号。根据 Kissmetrics,47%的消费者希望网页能在2秒或更短的时间内加载完毕!
- 网站导航。 根据Orbit媒体工作室的说法,如果你的网站易于使用,内容易于找到,这 对网站流量产生积极的影响 你将从搜索引擎获得。 格里-麦戈文 进行了一项研究,结果表明70%的人在寻找东西时依靠导航而不是搜索,因为点击网站内特定页面的链接更容易和更快。
就本文而言,我们将重点讨论网站菜单设计方面的可用性、最佳做法和菜单设计的灵感。
继续阅读,或使用这些链接跳到前面。
网站导航
网站导航 是一个通用术语,指的是网站的内部链接架构。最重要的是,其主要目的是帮助用户在你的网站上轻松找到相关内容。你的导航结构也构成了你网站网站地图的基础,这有助于谷歌等搜索引擎巨头对你的网站进行相应的索引。
当然,有几个方面构成了有效的网站导航,但现在,我们将特别关注的是 菜单 因为这通常是用户登陆一个新网站时与之互动的第一个页面元素。
菜单导航
导航菜单 导航菜单往往位于网站的前端和中心(形象地说,一个居中的菜单会很有趣)。对于有不同类别的网站来说,下拉功能是一个节省空间和解决分类需求的选择。
如今,为了展示极简主义(和移动可用性),许多网站都采用了一个 汉堡包菜单设计 (本质上是一个带有三条短横线的正方形,表示可以一键展开的菜单)。
Woocommerce的Storefront主题提供了一个方便的例子,在右上角。
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design-12.png)
汉堡网站菜单设计在涉及到移动网站设计时最为普遍,因为开发人员的任务是在非常小的空间内创建可用的导航。当然,在移动网站上创建一个可用的下拉菜单可能是很困难的!
综上所述,许多设计师 鄙视 汉堡包菜单这导致了一个新的运动,即寻找创造性的方法来使网站导航变得有趣和实用。考虑到这一点,一个常见的网站菜单设计启发式方法涉及到将菜单导航作为一个永久的固定装置放在每个网页的顶部,这样用户就可以很容易地找到他们返回 “主页 “的路,或者寻找他们感兴趣的下一个页面。
网站菜单设计导航的最佳实践
大多数WordPress主题都有一个预定义的网站菜单设计。无论你是想证明保持它的原样,还是打算完全重做它,这里有设计菜单导航的最佳做法,并考虑到可用性和SEO。
- 在可能的情况下,避免使用下拉菜单。 许多网站喜欢使用下拉菜单,因为它们可以节省空间,但不建议使用,尤其是在涉及到技术性SEO时。来自NN集团的可用性测试发现,大多数人 不喜欢下拉菜单.这是因为人的眼睛比手的速度快,所以当人们已经决定要点击什么的时候,其他的东西就会掉下来,人们会觉得很烦,从而导致某些页面的访问量减少。综上所述,如果你所设计的网站有如此多的内容,以至于你不能不采用下拉菜单的设计,那么 “巨型下拉 “菜单就稍微可以接受。
- 要有描述性。 摆脱像 “服务 “或 “产品 “这样的通用词汇。相反,要说明你的产品或服务是什么 是什么因为没有人真正搜索 “产品 “或 “服务 “这些通用词。更好的是,在决定你的菜单项目的确切名称之前,用搜索引擎优化来证明其中的内容。 关键字研究.Orbit Media建议 使用描述性标签,因为这种做法在搜索引擎抓取网站时对用户和你都有好处。导航出现在每个页面上,所以如果你使用与你的行业相关的术语,你就提醒谷歌你真正关心这个主题。不要忘记,只要每个单独的页面专注于一个特定的主题,就能获得排名。
- 此外,Orbit Media建议不要 基于格式的导航,如根据内容安排页面–如所有的视频、所有的信息图,等等。这是因为人们是根据主题而不是格式来搜索的。
- 导航菜单中的项目的定位(或安排)很重要。 有一个 一般建议的页面列表 在一个网站上,如 “关于 “页面,”联系 “页面等,这些是网站访问者最常搜索的页面。这些突出的页面,往往有很高的流量(因为它们被放在显眼的位置),但参与率往往很低。 使用谷歌分析 来确定你最重要的页面并寻找优化机会。将最重要的导航项目显示在首位(或在顶部,取决于菜单栏的方向)。
- 将菜单项保持在 最多7个.研究表明,人们在同一时间最多只能记住或接受7项信息。有太多的菜单项目类别可能会影响你在搜索中的排名,因为谷歌可能会把太多看似不相关的类别解释为你的网站还没有定位于一个特定的利基。如果你知道你将需要超过7个菜单项,请将它们进一步分解为子类别。
就前述观点而言,美联航的网站菜单设计过于复杂–有太多的选项供用户查看。
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design-13.png)
相反,Cafebond.com在简单分类方面提供了一个井然有序的例子。
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design-2.png)
- 审计你的菜单 每隔一段时间。删除那些很少被点击的链接。重新命名通用标签,使其对你的人类访客和搜索引擎蜘蛛都更有描述性。
创意网站菜单设计的灵感
大飞船
无视典型的网站菜单设计启发式原则(在主要页面内容的顶部或侧面),大飞船的菜单按钮位于其主页的正面和中心。
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design-4.png)
一旦点击,用户会被引导到一个只有四个菜单选项的新页面。
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design-6.png)
在挑选你想去的地方后,你会看到额外的选项。每个页面都以不同的引人注目和创造性的方式提供这些新的子菜单选项。例如,”工作 “链接导致了可点击的照片,而 “职业 “页面提供了不同类型的菜单导航,列出了带有箭头的空缺职位,当点击时,会下拉显示每个项目的描述。
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design.png)
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design-9.png)
用户可以通过点击页面底部的 “菜单 “按钮(变成一个汉堡包菜单),轻松恢复到主菜单导航。
Equus设计公司
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design-11.png)
这家来自新加坡的品牌和传播机构展示了这样一个事实:极简主义的网站菜单设计并不乏味。
在他们网站首页的顶部有一个固定的菜单,但是当你点击上面的一个链接时,每个页面都呈现出自己独特的导航风格。例如,在他们的 “关于 “页面上,访问者会看到一个单页设计 内 现有的菜单导航设计,使得用户体验耐人寻味。
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design-8.png)
与前面提到的大飞船网站菜单设计一样,主要的菜单项目被链接到具有不同内部布局结构的页面。
NKI工作室
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design-5-1.png)
KNI工作室将他们的菜单放在一个非常规的位置:在页面底部的中心位置。此外,你可以点击 “+”来获得相关的社会链接。
导航趋势
根据 影响Bnd,许多设计师正在寻找极简的移动汉堡包菜单的替代品。事实上,Spotify取消了他们的汉堡包菜单,转而使用标签式菜单,这导致了一个 导航菜单的点击量增加了30%。.具有讽刺意味的是,汉堡包菜单设计仍然在许多关于菜单设计趋势的文章中大放异彩!
此外,使用巨型下拉式菜单和固定的顶部菜单(这两种菜单设计 2017年的趋势),仍然是进入2018年的热门话题。一些固定菜单或巨型菜单开始包括视觉元素,如图标、照片、甚至地图。
报道 Kelloggs 网站提供了一个多维巨型下拉菜单的好例子。
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design-7.png)
通用导航 是最近被许多人观察到的另一个网站菜单设计趋势。在网站首页的顶部是一个回到主网站的链接。这对拥有许多子公司或特许经营权的企业来说很有用,例如迪斯尼。
请看这个概念在行动中的 迪士尼冰雪奇缘子网站:
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design-10.png)
所有大写字母的角落链接 是另一个有趣的创意菜单设计趋势。这给了网站一种专业的感觉,感觉很直观,很对称。
利用这种菜单设计趋势的网站,如 Sprout Social,有很多信息要分享,但要以不压倒性的方式进行。
![网站菜单设计](https://wpmudev.com/blog/wp-content/uploads/2018/02/website-menu-design-3.png)
浅色调、无衬线字体和额外的间距有助于使这种菜单设计趋势发挥作用。
创意网站菜单设计和最佳做法
对网站导航元素进行创造性的思考,可以使你的网站在整体上更令人难忘。但在设计时,不要忘记网站导航的真正目的:使用户更容易寻找和访问内容。世界上所有的钟声和口哨声都不能弥补无法使用或不利于你的其他SEO努力的网站导航。
标签。