camiler

响应式导航模式概述 – Smashing Magazine

原文链接: www.smashingmagazine.com

响应式web设计改变了我们的行业顶多是一句轻描淡写。过去我们经常会询问客户希望我们支持哪种设备和分辨率,但现在我们知道是“尽可能多的”。为了应对这样的挑战,并处理我们日益复杂的世界,web行业已经爆发出了新的思维,模式和方法。

在这篇文章中,我想主要看一下响应式导航的问题。首先,我们要谈一谈信息架构,然后是导航的目的,最后我们会看一下三种历经时间的洗礼效果一直不错的响应式导航模式。

进一步阅读:

信息架构挑战

在移动先行的世界中,受到影响的第一件事情是,或者至少应该是内容和信息架构策略。如果我们的应用主要是为了工作便利和信息共享,那么我们首先要把这一点放在首位。

这个行业经历了趋于大幅的网页菜单以及日益复杂的导航结构,但响应式网页设计迫使我们重新思考这种复杂性。我们的导航需要保持多少才能有效?一个应用真的需要几种不同类型的导航,还是只用一个就可以了?你会发现,最具响应式的导航模式迫使我们去简化浓缩,这也是移动优先方法的一个好处。 An image of the responsive navigation used on Intel's website.

英特尔网页上的导航就很复杂,而且在小视口上显得更复杂。请注意,就在这狭小的空间内,导航上就挤满了选项卡,一系列链接和子类别列表。

事实是,如果信息架构未被优化,那么你的响应式导航解决方案如何滑溜都无关紧要了。在我们正在讨论媒体查询的优点之前,这样的导航真的很冗长。但现在的挑战甚至更大。必须确保我们的导航结构在网站上显示是清晰的,并且还要减少任何认知摩擦

在创建导航时,需要问问自己以下几个问题:

  • 每个标签的意义是否很难明白,你的用户是否清楚这个价值主张(有时叫做“信息洞察”)呢?
  • 如何尽可能地降低导航的复杂性?如果你的导航结构有七层深,那么这个挑战也不会困难很多。(译者觉得这里是反话,意思是说导航结构本质就没设计好,还要如何降低其复杂性?)
  • 你如何确保导航自始至终在屏幕调整时不会丢失?
  • 你是否已经完全测试,以确保导航在网站访问时符合用户目标?

导航的目的

让我们快速思考一下导航的目的。这可能看起来是很基本的东西,但是我见到在太多的应用中,设计人员已然忘记了这些重要原则。我读过一篇最好的文章来自于十年前由德里克·鲍亚泽克(Derek Powazek)撰写的(这篇文章表明了任何问题的核心始终是一样的)。他写到:

导航也有三个部分,用来向用户传达它们的过去,现在和将来。任何优秀的总体导航方案应该是,一目了然地回答每个用户在浏览任何页面时思考的前三个问题:

  • 我在哪里? (现在)
  • 我能去哪里? (将来)
  • 我去过哪里? (过去)

我们必须重新审视这些原则,因为我看到最具响应式的导航解决方案在处理这些原则时是不一致的。大多数解决方案处理不错的问题是“我能去哪里”,但大多数网站甚至懒得在他们的响应解决方案中显示用户目前或曾经在哪里。当你要修改我们接下来要讲的这些模式时,请确保它能满足这些重要标准。 An image of the responsive navigation used on NCSBN website.

NCSBN是少数在响应式导航中标志你在这个网站结构中所在位置的网站之一。(查看大图)

Stephanie Lin刚刚发表了一篇题为“现代导航规则”的文章,对本文有很好的补充。里面涵盖了在导航中要考虑的重要互动设计组件。

响应式导航的优选模式

记住,针对响应式导航,我们现在有很多选择,但这里我呈现的是最好的模式。 Brad Frost已经为我们提供了所有的服务,并在他的网站上编写了大部分(虽然不是全部的)模式:This Is Responsive。他还写了两篇关于这些模式的文章:“导航模式”和“响应式设计的复杂导航模式”。

1. “Do Very Little” 模式

这种模式在UX London 2017网站上诠释的挺不错。下面是它在小视口中的展现。 An image of the responsive navigation used on UX Longdon 2017.

UX London 2017使用了一种能将其导航的可见性和实用性最大化的模式。

为什么选它

我喜欢这种模式,因为它从根本上使导航成为优先事项,它不会隐藏导航背后任何的逐步揭开(按需显示)。最具响应式的导航模式会牵涉逐步揭开,虽然这是一个很不错的选择,但只有当没有更好的选择时才应该实行这种。我同意 Nielsen Norman Group网站上的这个议题:如果你可以显示导航,那就显示它。没有人访问这个网站就一定想知道导航在哪里。这样有个额外好处就是没有客户端依赖,所以你可以保持少量的依赖关系,减少故障点。

然而,这是很多响应式应用的难点。首先,它并不能很好地处理复杂导航。如果要在应用中一次性显示不止一个级别,那么这种模式就不适合。此外,它可能会占用应用中很多重要的垂直空间,因此请确保你可以像UX London站点那样去实现,并保留分配的有限空间。

2. 多级切换

大多数应用可以做成两个层级的导航,我发现这对于大部分实现是一种最佳选择。在小视口中,这种模式使用户可以轻松地切换下一级,并查看其内容。当下的一个例子就是白宫的网站。 An image of the responsive navigation solution used for WhiteHouse.gov.

白宫的网站提供了切换项来显示子级内容。

为什么选它

这可能不是最闪光的解决方案,但我发现它非常稳定。这种模式对于我需要支持的大多数导航都很有效,它有效地处理了简单的两级导航结构(在大多数情况下这会让我犹豫会不会超出)。此外,我们必须保持逐步地构建这些解决方案,以便在支持它们的代码出故障时,也可以工作。

我过去经常使用FlexNav 来实现这个效果,但该项目已被其负责人放弃了。还有一个有希望的选择是SmartMenus,但我还没有用过。如果你对纯CSS实现的版本感兴趣,请查看CSS Script的代码示例

3. 简单切换

这也一个不错的选择,是上一个模式的一种变体。在这种模式下,我们不需要多个层级,但导航项仍然太多,不能用“do very little”的模式。我们在星巴克的网站上找到这样一个例子。 An image of the responsive navigation solution used for Starbucks.

星巴克网站提供了一种简单切换的导航. (查看大图)

为什么选它

通过一些清晰的图标和颜色,这种模式真心展示的不错,因为它实现使用起来都非常简单。虽然这种模式的变化会推动内容下降或重叠,但我觉得这两者还可以接受。这里有个还不错的脚本实现,请查看Responsive Nav

请记住,你不一定需要在响应式解决方案中支持多个层级。例如,世界野生动物基金会的官网在更高的视口分辨率下的导航有一个下拉菜单,但在最小的视口下,它只有简单切换,以及可以到首页的顶级链接,在首页中才会显示剩下的导航项。你还可以提供导航的可选方式,包括面包屑,这对任何视口大小都是一种有力的补充。 An image of the responsive navigation solution used for World Wildlife Fund.

世界野生动物基金会上存在顶级链接,并在目标网页上显示子项目。(查看大图)

其他导航模式提名

如前所述,从今天起你就有许多方法可以选择来处理项目需求了。虽然最好的还是上面三个,但还有另外两种选择。

Off-Canvas(滑动导航)

这可能是最受欢迎的一种模式,而且一些实现效果比其他模式更好。它可以做得很好,需要脚本的话,我之前用过MMenu,这个效果不错。 Zurb's Foundation has popularized the off-canvas pattern.

像Zurb's Foundation之类的响应式框架已经普遍使用了off-canvas模式。(查看大图)

Priority Plus

这种模式在过去大约一年内使用情况已经有所回升,在某些情况下,它的效果也不错。在水平导航很长的情况下,我用过这种模式,可以避免在视口缩小时过早隐藏菜单项。这个解决方案唯一的大麻烦就是它强制你对最重要的事情做出假设,所以要小心使用。我用过PriorityNav.js脚本,效果挺好的。

Wonderful Machine uses the Priority Plus pattern to good effect.

Wonderful Machine就是使用Priority Plus模式得到了很好的效果。(查看大图)

可怕的汉堡图标

我没办法只是简单的谈论响应式导航,却不提及对于汉堡图标(就是三条线,像个汉堡一样,表示有很多菜单)的争论(还有对于响应式“神秘肉类”导航指标的变体)。这里真正的问题在于:图标本身是否传达了足够的意义,还是需要文字指示?这个争论本质上是关于汉堡图标的普遍性和可识别性。对我来说,很少有图标在没有有效文本做支撑的情况下能够表达出普遍清晰的含义,而汉堡图标仅仅是回答为什么最好不要依靠图标的一个例子而已。问问你自己,是不包含文字让访问者混淆值得?还是应该包含文字来增加图标被理解的可能?我倾向于包含文本指示。记得,在任何时候都要评估你的应用环境来回答这些问题。

如果您想了解更多信息,请参考以下文章:

总结

好消息是,相比之前,在响应式应用中你有更多的选择来处理导航。只要你坚持清晰的信息架构设计,测试并使用被证明的模式,你就能确保用户可以轻松地访问你的网站。下一步就是开始尝试这些模式还有其他的,看看什么最适合你特定的这款应用。行为和需求会随着时间而变化,所以要不断地重新评估怎么使用这些方案。Smashing Magazine上还有另一篇文章:“复杂网站的响应式导航”,提供了学习案例和代码,你可以做进一步了解。

感谢Ben CallahanJacqui Olkin对本文稿的反馈意见。