响应导航模式简介，响应式导航如何设计？响应式导航怎么做？

说回应式网页设计已经改变了我们的行业，最多只会是轻描淡写。我们曾经向客户询问他们希望我们支持哪些决议和设备，但我们现在知道答案是“尽可能多的”。为了应对这样的挑战，并处理我们日益复杂的世界，我们的行业已经爆炸了新的思维，模式和方法。

在这篇文章中，我想特别看一下响应式导航的问题。我们将首先谈论信息架构，然后谈论导航的目的，最后我们将看一下三种响应速度快的导航模式。

信息架构挑战链接

在移动第一世界中，或者至少应该是第一件事情是内容和信息架构策略。如果我们的应用主要是为了促进任务和信息共享，那么我们首先要把重点放在首位。

该行业经历了一个大型的趋势和越来越复杂的导航结构，但响应式的网页设计迫使我们重新思考这种复杂性。我们的导航需要持有多少才能有效？一个应用程序真的需要几种不同类型的导航，还是只能使用一个？您会发现，最响应敏捷的导航模式迫使我们简化和集中精力，而且这也是移动优先方式的优点。

响应式网站

事实是，如果您的信息架构未被优化，那么响应式导航解决方案的光滑无关紧要。在我们辩论媒体查询的优点之前，这是真的，但现在的挑战甚至更大。我们必须确保我们的导航结构在我们的网站上公布时，是清楚的，并尽可能减少任何认知的摩擦。

创建导航时，有几个问题要询问：

• 难道你们的标签意味着什么，而且您的访问者是否明确了这个价值主张（有时称为“ 信息气味 ”）？
• 如何尽可能地降低导航的复杂性？如果您的导航结构深入七层，那么挑战就不会有太多。
• 你如何确保导航不会在你的决议适应中迷失？
• 您是否彻底测试过，以确保导航符合用户访问网站的目标？

导航链接的目的

让我们快点来考虑导航的目的。这可能看起来很小，但是我看到太多的应用程序设计人员已经忘记了这些重要原则。我读过的最好的文章来自于十年前由德里克·鲍亚泽克（Derek Powazek）撰写的文章（这表明事情的核心性仍然相同）。他写：

导航还有三个部分，用于向用户传达他们的过去，现在和未来。任何良好的全球导航方案，一目了然地回答了每个用户在任何页面上的头三个问题：

• 我在哪里？（当下）
• 我去哪里 （未来）
• 我去过哪里 （过去）

我们必须重新审视这些原则，因为我看到最响应的导航解决方案处理这些原则是不一致的。大多数解决方案都处理了“我可以去哪里”的问题，但是大多数网站甚至不会在他们的响应解决方案中显示用户目前或者曾经在哪里。当您调整我们将要查看的一些模式时，请确保模具满足这些重要标准。

响应式网站

史蒂芬妮刚刚发表了一篇题为“ 现代导航规则 ”的文章，这对本文很好的补充。她涵盖了您导航中要考虑的重要互动设计组件。

响应导航链接的优选模式

记住，我们今天有很多选择来进行响应式导航，但是这里是我最好的模式。Brad Frost已经为我们提供了所有的服务，并在他的网站上对这些模式中的大部分（如果不是全部）进行编目，这是响应性的。他还写了两篇关于这些模式的帖子：“ 导航模式”和“ 响应式设计的复杂导航模式 ”。

1.“做很少”图案链接

这种模式在UX London 2017的网站上有很好的说明。这是它在小视口中的外观。

响应式网站

为什么它工作链接

我喜欢这种模式，因为它从根本上使导航成为优先事项，它不会隐藏导航背后的任何进步的披露。最敏感的导航模式包括逐渐披露，而披露是一个很好的选择，只有当一个更好的选择不存在时才应该追求。我同意尼尔森诺曼集团就此问题：如果您可以显示导航，显示它。没有人访问这个网站不得不想知道导航在哪里。一个奖金是，这没有客户端依赖，所以你可以保持你的依赖关系，减少失败点。

然而，这对于很多响应式应用来说是一个难题。首先，它不能很好地处理复杂的导航。如果您一次在应用程序中显示多个级别，则此模式不适合您。此外，它可能占用了应用程序中的很多重要的垂直空间，因此请确保您可以像UX London站点一样实现它，并保留分配的空间。

多层切换链接

大多数应用程序可以通过两个级别的导航来消除，我发现这是我的很多实现的最佳选择。在小视口中，此模式使用户可以轻松切换子部分，并查看其内容。白宫的一个现代例子就是白宫的网站。

响应式网站

为什么它工作链接

这可能不是最闪光的解决方案，但我发现它非常稳定。这种模式对于我需要支持的大多数导航都是有效的，它有效地处理简单的两级导航结构（在大多数情况下我都犹豫不决）。此外，我们必须始终逐渐构建这些解决方案，以便即使支持它们的代码失败，它们也可以工作。

我以前使用FlexNav来实现这个效果，但该项目已被其所有者放弃。一个有希望的选择是SmartMenus，但我还没有使用它。如果您对纯CSS版本感兴趣，请查看CSS脚本的代码示例。

3.简单的切换链接

这是另一个很好的选择，而且是以前模式的一个变体。在这种情况下，我们不需要多个级别，但导航项目仍然太多，无法使“做很少”的模式。星巴克网站上有一个例子。

响应式网站

为什么它工作链接

有一些清晰的图像和颜色，这个选项真的可以很好的工作，因为它非常简单的实现和使用。这种模式的变化推动内容下降或重叠，我觉得两者都是可以接受的。如果你想要一个很好的脚本，请查看响应导航。

请记住，您不一定需要在响应式解决方案中支持多个级别。例如，世界野生动物基金会在较高的视口决议中的导航有一个下拉菜单，但是在最低的视口，它只是切换，顶级链接进入着陆页，剩下的导航项目被显示。您还可以提供替代的导航方式，包括面包屑，这可以在任何视口大小上有所帮助。

响应式网站

荣誉指导链接

如上所述，您可以从今天选择许多方法来处理您的项目需求。即使我喜欢上面三个最好的，这里还有另外两种可能性。

非帆布链接

这可能是最受欢迎的，但是一些实现比其他实现更好。它可以做得很好，如果你想要一个脚本，我使用的MMenu有很好的结果。

响应式网站

PRIORITY PLUS 链接

这在过去一年左右已经有所回升，在某些情况下也可能很好。我已经在真正长的水平导航的网站上使用它，以避免在视口缩小的同时过早隐藏菜单项。这个解决方案的唯一大问题是它强制你对最重要的事情做出假设，所以要小心。我已经使用了PriorityNav.js脚本，并且运行良好。

响应式网站

可怕的汉堡包图标链接

没有办法我可以谈论敏感的导航，而不是提到关于汉堡包图标的辩论（还有其他变体的敏感的“神秘肉”导航指标）。这里的真正问题是：图标本身是否传达足够的意义，还是需要文字指标？辩论本质上是关于汉堡包图标的普遍性和可识别性。对我来说，很少有图标具有普遍清晰的含义，没有某种文本来支持它们，而汉堡包图标仅仅是为什么最好不要依靠图标的另一个例子。问问自己，不要让访客感到困惑，不要包含它，还是应该把它包含在内，以增加一个可以理解的可能性？我倾向于包括文本指标。