网站菜单设计要点

网站菜单设计要点

设计一个电子商务网站或商业网站,有现成的 CMS 模板可以让这一切变得非常简单——尽管如此,即使我们决定使用一个,仍然需要注意网站导航。只是如何设计网站导航菜单以确保人类和谷歌爬虫、机器人或蜘蛛的可用性?

网站导航菜单只是最核心和最重要的导航工具。它的唯一目的是帮助用户有效地找到他们感兴趣的内容,并使他们能够快速轻松地到达他们想要的站点位置。因此,网站导航菜单首先应该简单直观。不幸的是——尽管 UX 规则成为所有数字设计的框架,不仅是网站,而且菜单仍然被认为是网站的可用性基石——令人惊讶的是,它仍然经常辜负用户的期望。

为了充分利用它,在布置新的网站导航菜单时,请注意搜索引擎优化!做得对,网站导航菜单可以提升您的 SEO 并更轻松地保护 Google TOP10!它绝对应该是技术 SEO 服务中最重要的元素之一。 

信息架构——绝对基础

首先,需要简要解释的是信息架构。然而,在网站设计的背景下,一个不同解释的概念被定义为一种设计网站的方法,以便以用户友好的方式构建内容 – 以便每个访问者都能快速找到他们需要的内容。网站信息架构包括:

  • 清晰的内容组织,
  • 正确的命名(标签),
  • 清晰的导航,
  • 一个用户友好的搜索引擎
  • 最后但并非最不重要的一点——精心设计的网站菜单。

IA很强大。如果信息架构运作良好,网站就会转换——很简单。IA 不仅产生用户行为响应,还允许您创建它。这基本上就是为什么可用性和设计驱动的网站建设是正确的事情,商业明智。苹果公司的史蒂夫·乔布斯(Steve Jobs)的话“人们不知道他们想要什么,除非你把它展示给他们”。

谷歌也将信息架构视为排名因素。总部确实证实,最受欢迎的 TOP10 蛋糕来自那些充满独特、优质内容、组织良好且完全按照用户喜欢的内容提供服务的网站。这是 UX 对 SEO 影响的又一个例子。

现在我们明白了为什么正确的信息架构如此重要——对于电子商务或商业网站,或任何东西。现在我们可以转到本条目的主要焦点,即网站导航的核心——菜单。

网站菜单设计清单

在启动网站菜单设计过程时,请确保遵循以下几点:

  • 首先也是最重要的:澄清您网站的目的。你需要什么——像亚马逊一样的大型电子商务或只有几页的在线名片?确定主要目的基本上决定了网站导航设计过程的整个其余部分。拿个人博客来说——主菜单会比较简单,链接到关于我、联系方式页面等等……此外,如果你想要一个侧边菜单(显示你最新或最热门的条目),它可能是,例如、日历或按月组织条目的列表 – 但永远不要忘记标签或类别等组织工具。但是,为大型电子商务设计导航稍微复杂一些。对于这种类型的网站,良好的导航必须包括所有主要类别的细分,然后是子类别等;清晰是重中之重——客户以多快的速度找到他或她需要的东西,这一点很重要。
  • 其次:设置页面菜单结构正确设计的树视图(允许在类别之间进行简单直观的转换以及快速查找单个项目)对于整个网站的成功至关重要。
  • 第三:想想你的命名/标签/标签。简单胜出——通常最好有一个“博客”选项卡,它清楚地告诉每个人它链接到一个商业博客,而不是尝试提出“创意”名称,即“灵感”、“见解”或“知识”。
  • 第四:关注用户。总是。整个设计需要以用户为导向,以使您的网站取得成功——清晰和直观是最重要的。

基本的网站菜单类型 – 优点和缺点

在决定菜单的类型之前,首先要考虑它在布局中的位置。左还是右?朝向顶部,还是与底部对齐?当然,用户是有习惯的,但无论其他十亿个因素如何,都没有也永远不会有一个每个用户都喜欢的理想设计。这就是网站目的规范如此重要的原因。此外,如果您真的想确保您的网站及其导航功能对用户友好,请考虑在一个好的样本上对其可用性进行研究。一个好的网站菜单既要与整个网站保持一致,又要以用户为导向。

1. 水平标签栏菜单——主要用于较小的页面,通常是页面顶部的标签,位于内容字段的正上方。

水平标签栏菜单https://healthyplanbyann.com/

这种解决方案虽然经常被发现,但既有优点也有缺点。清晰度绝对是一个优势。这样一个菜单在进入网站后立即完全可见的事实也是如此。此外,它不会占用太多的内容专用空间。看起来也挺自然的。至于缺点:由于插槽数量有限,它需要在网站启动之前进行完善的规划——很难用新按钮来扩展它,尤其是当不同的显示设备启动时。通常,大约有 6-8 个插槽。最重要的是,此类菜单中的任何链接文本都需要简短——最好是一个单词。水平菜单既可以用作唯一的导航工具,也可以与例如侧面菜单结合使用(即用于子类别)。

2. 下拉菜单、飞出菜单、弹出菜单等——这些是水平菜单,但具有各种下拉选项卡子菜单。一种非常流行的解决方案,尤其是在电子商务中。主要类别沿水平菜单排列,将鼠标悬停在它们上方(有时仅在单击后)后,带有子类别的子菜单会下拉。

H&M主打产品H&M专卖店菜单

该解决方案具有标准水平菜单的所有优点和缺点。不过,另一个好处是它们提供的清晰度——所有子类别都清楚地链接到它们的主要类别,从而向用户暗示他们在网站中的下落。最重要的是,它是一个非常直观的解决方案——如果设计得当,页面和页面背后的逻辑对任何人来说都是显而易见的。至于缺点——这个菜单可能会占用大量的主页面布局空间,将所有内容向下推送,但是,使用下拉子菜单,这通常不是问题。下拉菜单适用于 2 级导航结构;“子”类别越多,菜单就越不清晰。

3. 侧边菜单——一个列表,通常将一个类别置于另一个类别之下。有时,子类别列表会横向扩展(这不是一个完美的解决方案,顺便说一句 – 需要近乎完美的光标精度才能单击正确的链接,尤其是在多级菜单中),如图中的情况。侧边菜单经常出现,尤其是在产品范围广泛的电子商务中。它可以支持顶部菜单,也可以是完全独立的元素。它通常位于左侧(因为世界上大多数国家的人们从左到右阅读 – 所以理论上,菜单是第一个偶然发现的)。除非您的重点是让用户首先阅读内容,然后才查看菜单——然后,将其与右边缘对齐。

如您所见,以用户为中心的设计需要具有文化敏感性;始终了解您的目标用户——虽然大多数语言都是左旋右旋的——从左到右阅读,其他语言是右旋的——所以,否则;即使是浏览网站时的眼球运动也是相对文化的——对于一些用户来说,外观是第一位的,然后才转向类别选择——这里的因素是习惯、消费主义等)。

侧边菜单示例侧边菜单 https://www.infibeam.com

侧面菜单允许按类别构建各种产品 – 长列表链接在其中看起来会很好。此外,当需要多级导航时,这是一个很好的解决方案,仍然可以清楚地显示类别和子类别之间的关系。长名称也不成问题——类别名称甚至可以有几个单词。此外,这样的菜单是可扩展的——添加新类别不是问题——因此,如果你愿意提供扩展服务,这似乎是一个不错的选择。

侧边菜单的缺点是它经常占用大量的网站空间;此外最好清楚地传达类别级别可以进一步探索 – 使整个结构尽可能清晰。

这当然是一个非常普遍的解决方案。通常,它补充了顶部菜单。例如,顶部栏列出了主要类别,链接到页面,还提供带有子类别的侧边菜单 – 所有这些都是为了更流畅的网站导航。

带有面包屑的侧边菜单https://clockshops.com/

上图中的电子商务使用顶部和侧边菜单,以及所谓的面包屑——指向之前访问过的页面的链接。这使得网站导航更加直观。

4. 汉堡菜单——一个展开的图标,默认隐藏菜单。主要用于移动应用程序、网站和门户;Facebook 在 2010 年出名,现在已经放弃了这种解决方案。“汉堡包”,因为它看起来像一个?

汉堡菜单

然而,图标本身可以追溯到 80 年代,由 Norm Cox(顶级设计公司 Cox & Hall 的联合创始人)为施乐设计。

这种类型的菜单在所有移动设备上都特别适用——应用程序或网站,然而,也经常被用作桌面解决方案。它符合最新的视觉设计趋势。毕竟,极简主义统治着全世界的设计。一些人反对汉堡菜单,声称该解决方案不够清晰——至少不是对所有人都适用。

概括

当然,网站导航菜单的类型更多——上面的列表只是皮毛而已。要为您的业务设计完美的菜单,请注意黄金用户体验规则。毕竟,设计不佳的菜单会使您的转化率下降 – 优质的设计和精心的计划会带来回报。

如上所述,确保给定菜单类型是否有效的最佳方法是进行专业的用户偏好研究,探索目标群体用户的直观性和清晰度。但是,永远不要忘记 SEO——以及良好的类别命名——尝试平衡人类用户和搜索引擎爬虫的期望。

推荐阅读
Scroll to Top

联系我们

=