汕头网页设计：响应导航模式简介

2019.08.13 mf_web

144

要说响应式网页设计改变了我们的行业，充其量只是轻描淡写。我们曾经问过我们的客户他们希望我们支持哪些分辨率和设备，但我们现在知道答案是“尽可能多的。”为了应对这样的挑战并处理我们日益复杂的世界，我们的行业爆炸式增长思考，模式和方法。

汕头网页设计在本文中，我想特别关注响应式导航问题。我们将首先讨论信息架构，然后讨论导航的目的，最后我们将讨论三种响应性导航模式，这些模式随着时间的推移而发挥良好作用。

信息架构挑战

在移动优先世界中，或者至少应该是受影响的第一件事是内容和信息架构策略。如果我们的应用程序主要是促进任务和信息共享，那么我们必须首先关注那里。

该行业经历了巨型趋势和越来越复杂的导航结构，但响应式网页设计迫使我们重新考虑这种复杂性。我们的导航需要保持多少才能有效？应用程序是否真的需要几种不同类型的导航，或者只有一种可以正常工作？你会发现最敏感的导航模式迫使我们简化和集中，这是移动优先方法的好处。

英特尔网站上使用的响应式导航图像。 — 英特尔的导航很复杂，并且在小视口上这种复杂性更加严重。请注意，导航包含选项卡，小空间中的链接和子类别列表。

事实是，如果您的信息架构没有得到优化，那么响应式导航解决方案的灵活程度并不重要。在我们讨论媒体查询的优点之前很久就已如此，但现在挑战更大。我们必须确保我们的导航结构在我们的网站上显示时是清晰的，并尽量减少任何认知摩擦。

在创建导航时，您需要提出以下几个问题：

难道清楚每个标签的含义是什么，并且您的访客清楚地知道价值主张（有时称为“ 信息香味 ”）？
如何尽可能降低导航的复杂性？如果您的导航结构是七级深度，则不会有太多的挑战。
如何确保导航不会在整个分辨率调整过程中丢失？
您是否彻底测试过它以确保导航符合用户访问网站的目标？

让我们快速思考一下导航的目的。这可能看起来很简单，但我看到太多的应用程序，其设计者已经忘记了这些重要的原则。我读过的最好的文章来自十年前由Derek Powazek撰写的文章（这表明问题的核心仍然是相同的）。他写：

导航还有三个部分，用于向用户传达他们过去，现在和将来的信息。任何好的全球导航方案都应该一目了然地回答每个用户在任何页面上的头脑中的前三个问题：
我在哪里？（当下）
我可以去哪里？（未来）
我去哪儿了？（过去）

我们必须重新审视这些原则，因为我发现大多数响应式导航解决方案处理这些非常不一致。大多数解决方案都能解决“我该去哪里？”的问题，但是大多数网站甚至都不愿意在他们的响应式解决方案中展示用户当前或他们去过的地方。当你调整我们将要看到的一些模式时，一定要塑造它们以满足这些重要标准。

NCSBN网站上使用的响应式导航的图像。 — NCSBN的网站是其在网站结构中的响应式导航标记中为数不多的网站之一。

Stephanie Lin刚刚发表了一篇题为“ 现代导航规则 ”的文章，这篇文章对本文作了很好的补充。她介绍了在导航中要考虑的重要交互设计组件。

请记住，我们今天有很多选项可用于响应式导航，但这是我对最佳模式的看法。布拉德·弗罗斯特做了我们所有的服务和最编目，如果不是全部，这些模式在他的网站，这是响应。他还撰写了两篇关于这些模式的文章：“ 导航模式 ”和“ 响应式设计的复杂导航模式 ”。

1.“做很少”的模式

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

UX Longdon 2017上使用的响应式导航的图像。 — UX London 2017使用最大化其导航可见性和实用性的模式。

为什么会这样

我喜欢这种模式，因为它从根本上使导航成为优先考虑的事情，并且它不会隐藏任何渐进式披露背后的导航。大多数响应式导航模式涉及渐进式披露，虽然披露是一个很好的选择，但只有在没有更好的选择时才应该追求。我同意尼尔森诺曼集团关于这个问题：如果你可以显示导航，请显示它。没有人访问这个网站不得不想知道导航在哪里。一个额外的好处是，它没有客户端依赖关系，因此您可以保持较低的依赖关系并减少失败点。

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

2.多级切换

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

用于WhiteHouse.gov的响应式导航解决方案的图像。 — 白宫的网站提供显示子内容的切换。

为什么会这样

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

我曾经使用FlexNav来实现这种效果，但该项目已被其所有者放弃。一个很有前途的替代品是SmartMenus，但我还没有使用它。如果您对此纯CSS版本感兴趣，请查看CSS Script的代码示例。

3.简单切换

这是另一个不错的选择，实际上是以前模式的变体。在这种情况下，我们不需要多个级别，但导航项目仍然太多，不允许“做很少”的模式。星巴克的网站就是一个例子。

为什么会这样

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

请记住，您不一定要在响应式解决方案中支持多个级别。例如，世界自然基金会在更高视口分辨率下的导航有一个下拉列表，但在最低的视口，它只是切换，顶级链接转到登陆页面，其中显示了其余的导航项目。您还可以提供其他导航方式，包括面包屑，这在任何视口大小都可以是一个有用的添加。

用于世界自然基金会的响应式导航解决方案的图像。 — 世界自然基金会在登陆页面上显示顶级链接并显示子项目。

荣誉奖

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

离帆布

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

Zurb的基金会推广了画布模式。 — 像Zurb基金会这样的响应式框架已经普及了画布模式。

优先级

在过去一年左右的时间里，这种情况有所增加，在某些情况下也会很好。我在具有非常长的水平导航的网站上使用它，以避免在视口缩小时过早隐藏菜单项。这个解决方案唯一的大问题是它会迫使你对最重要的事情做出假设，所以要小心。我已经使用了PriorityNav.js脚本，它运行良好。

可怕的汉堡包图标

我根本无法谈论响应式导航，也没有提及围绕汉堡包图标的争论（还有其他变体的响应式“神秘肉”导航指标）。这里真正的问题是：图标是否能够自行传达足够的意义，还是需要文本指示？辩论基本上是关于汉堡包图标的普遍性和可识别性。对我来说，很少有图标具有普遍清晰的含义，没有某种文字来支持它们，而汉堡包图标只是为什么最好不要单独依赖图标的另一个例子。问问自己，是否值得混淆访客不包括它，或者我应该只是包括它以增加它被理解的可能性？我倾向于包括一个文本指标。请记住始终评估应用程序的上下文以回答这些问题。

结论

好消息是，在响应式应用程序中处理导航的选项比以往任何时候都多。只要您坚持清晰的信息架构设计，测试和经过验证的模式，您就可以确保访问者能够轻松地在现在和将来使用您的网站。下一步是开始尝试这些和其他模式，看看哪种模式最适合您的特定应用程序。行为和需求随着时间的推移而变化，因此不断重新评估您如何使用这些方法。

汕头网页设计