承德企业网站建设：下拉导航菜单的UX设计技巧

2019.08.17 mf_web

108

由于现代JavaScript和CSS3效果，下拉菜单已经走过了漫长的道路。但并非所有下拉菜单都是平等的，有些用户体验策略的效果比其他有效。

在本指南中，我将介绍一些用于构建可用下拉导航菜单的设计技巧。这包括多级下拉菜单和大型菜单，它们都依赖于相同的核心设计原则。承德企业网站建设

子菜单的标记

包含附加子菜单的链接的标记是个好主意。这些小的可视指示器让用户知道链接的放置位置以及如何访问它们。

这些规则适用于所有菜单，无论您是使用1层还是4层链接进行设计。

标记的范围可以从箭头到点或正方形或任何明显的标记。大多数用户足够聪明，只要它具有普遍性，就可以获得符号的含义。

子菜单的标记

该Threadbird导航是在行动这个效果一个梦幻般的例子。

他们的一些链接有子菜单，而其他链接没有。实际上，它们的一些链接具有子子菜单，您只能通过每个链接旁边的唯一标记来识别这些子菜单。

Threadbird使用右指向的双角引号，简化为raquo。网页设计师更喜欢这个符号而不是单个箭头，因为它更笨重，更容易在远处注意到。此外，即使尺寸较小，它也能保持良好的外形。

您可以在TutsPlus导航上找到类似的设计。它们使用向下箭头表示弹出菜单的下拉菜单和向右箭头（关闭点括号）。

子菜单

在这个设计中我不喜欢的一个是子菜单箭头样式。只有在悬停菜单项时才会出现箭头图标，即使所有其他链接也都有子菜单。良好的设计实践将鼓励始终保持这些箭头可见。

但我确实喜欢TutsPlus设计的简洁性。这是一个完美的例子，说明微小的标记如何能够在很大程度上提高可用性。

带链接填充的空间

当我看到设计师在导航中滥用空间时，它让我发疯。

大多数下拉菜单在链接之间有一些空间。但是边距和填充之间存在巨大差异。

使用边距，您需要单击/点击实际的链接文本。可点击区域仅与文本本身一样大。但是使用填充，您可以使整个区域可单击，这意味着用户具有更大的目标。在菜单链接的上下文中，我认为更大的总是更好。

带链接填充的空间

Webdesigner Depot有一个很酷的动画下拉菜单，由他们最近的重新设计提供。当您悬停“博客”链接时，您将获得一个双列下拉菜单。如果您将这些链接中的任何一个悬停，您会注意到它们使用填充来创建空间。

这意味着您可以单击链接文本周围的空白区域，这样可以更轻松地浏览网站。

大多数下拉菜单分为两种类型之一：间距填充或间距边距。

您可以通过悬停链接周围的空间来判断您的光标是否变成可点击的手套。这是一个不使用填充的网站示例。

费城交响乐团

费城交响乐团有一个很棒的网站。清洁，可用，易于阅读。

但是，当您悬停任何下拉链接时，您会注意到只有文本是可点击的。最糟糕的是所有下拉菜单都很宽，但链接文本相当短。

我无法想象一个边距比填充更好的场景。通过创建链接块级元素，它们可以跨越100％的下拉菜单。这意味着用户可以点击该链接框中的任意位置并仍然访问该页面。

对我来说，选择是显而易见的。如果您可以增加下拉菜单中链接的点击/点按区域，那么您将大大改善导航体验。

清除悬停状态

为悬停菜单设计“活动”类可以将注意力集中在它所属的位置。大多数设计师使用CSS ：hover伪类，它非常适合主动悬停的链接。

但是，当用户悬停子菜单链接时，保持主链接突出显示也是一个好主意。这表示一个明确的活动路径，任何人都可以浏览菜单并快速确定哪个主链接处于活动状态以及哪个子菜单链接悬停。

您可以使用许多技术设计悬停状态，如字体颜色更改，BG颜色更改，文本下划线，高光，框阴影等。目标是保持父链接激活，即使它没有被直接悬停。

清除悬停状态

DePauw大学使用白色和黑色之间非常简单的对比色。默认导航在深色背景上使用白色文本。当悬停链接时，您会注意到这些颜色反转。

但是，当您将主链接与子菜单悬停时，您还会注意到它始终保持亮起状态。您可以悬停任何内部链接，仍然可以获得主要的高光效果。

每个设计都有自己的风格，所以你不需要像DePauw那样去黑白。但是活动样式应该与默认链接明显不同。

在Comedy Central的网站上你会发现同样的效果。但它们使用的是柠檬绿/黄色，而不是白色高光颜色。

Comedy Central的网站

您可以构建一个没有此活动突出显示效果的工作下拉菜单。但是，UX设计师知道，仅仅因为某些工作并不意味着它能够以最佳方式工作。

我认为所有下拉菜单都应该在父链接上保持活跃的突出显示。这还包括2-3层深的子子菜单。

快速下拉动画

与jQuery混合的CSS3可以为Web 制作一些强大的动画。无论是滑动还是淡入视图，下拉菜单都会在动画中茁壮成长。

但动画应始终有用。UI / UX设计人员需要实际使用动画。它应该使界面生动，但不应该减慢过程中的用户体验。

最好的下拉动画可以用两个词来概括：快速而明显。

看看ESPN顶部导航。你可以悬停任何体育部门，获得团队和相关链接的下拉菜单。

这个下拉列表从上到下清晰地显示在视图中。但是它很快就能做到这一点，所以你不能在等待2-3秒之后再等待链接。

一般来说，我建议保持1.5秒或更短的菜单动画。此经验法则仅适用于菜单动画，因为它们是交互式元素。但是如果有意义的话，您可以轻松地将其他页面项目的动画扩展到3-5秒（或更长）。

具有讽刺意味的是，CSS MenuMaker网站拥有令人惊叹的顶级菜单设计。下拉列表中有标注气泡等标注箭头，表示它属于哪个主要链接。

但在动画的背景下，这些下拉动作很快。我估计他们的动画运行300毫秒很快就会逐渐消失。

但是只有当焦点移动到其他地方时它们才会生成动画，因此一旦它们可见，链接就会感觉很稳固。

这是一个伟大的下拉菜单动画的关键。它应该具有我们都喜欢动画的神奇感觉，但动画元素也应该感觉像是页面的坚实部分。

闭幕

质量下拉菜单同时考虑形式和功能。是的，它应该看起来不错，但它也应该运作良好，为游客创造一个梦幻般的体验。

这些技巧是我在设计工作中所经历的一些技巧。使用非常少的代码将它们添加到您的下拉菜单中非常简单。

承德企业网站建设

承德企业网站建设：下拉导航菜单的UX设计技巧

子菜单的标记

带链接填充的空间

清除悬停状态

快速下拉动画

闭幕

相关推荐