弹出菜单已经接管作为主要的导航模式。

弹出菜单已经接管作为主要的导航模式的移动布局 - 甚至是一些桌面布局已经在船上跳下。

并有很好的理由：菜单是一个伟大的方式来保持上下文，同时给用户提供了很多附加信息。

在这篇文章中，我们将讨论为什么弹出导航已经变得如此成功的一个导航模式，并显示其潜力是这么多。从产品列表页面过滤器，购物车，以最近查看过的物品的清单，这种模式的潜力只受我们的驱动器为先锋。这时候，我们探讨是多么遥远的画布，我们可以走了。

你已经看到了画布弹出按钮之前 - 你知道，那些在滑动从屏幕的边缘侧边栏？现在，他们甚至可以被认为是司空见惯。还有一个原因，他们的知名度，最近爆炸：在移动，一个窗口的概念已经全部消失。市场上的大多数设备今天给我们几乎无法控制的窗口。

相反，我们只有两个主要层一起工作：视口和画布。虽然这些提供充足的潜力，设计师们开始对摩擦约束视口的限制。休帆布弹出 - 少用在桌面上 - 在这个景观就显得极为重要。

随着移动设备有限的平面，设计师认为有必要打开上行空间，不强迫用户失去上下文或在屏幕上留下自己的位置提供相关信息。出场的帆布，使我们能够做到这一点。在桌面上，我们很少去了帆布 - 只是没有必要。在移动，离画布是一个突破性的概念。它创建的设计可能性的新领域。而且，与任何映射处女地，它提供了珍宝那些愿意承担风险。对设计师来说，这是一个难得的机会，创造新的东西。

早期的探险

当然，第一个人去画布超越和勇敢的未知都输给了我们。像美洲，我们只有那些谁登陆，最有名的记得。因此，Facebook是我们的哥伦布。

Facebook的着手解决它发现手机屏幕一个非常具体的问题。它的导航菜单很长，有很多相关的内容给用户。用户需要能够探索导航不失其时间轴到位。如果他们决定不导航离开，他们应能跳右后卫在何处。

      Facebook的原休帆布弹出是很多像目前Facebook作为其移动互联网导航。今天，它仍然是它的通讯系统，以及它的Android应用程序使用了帆布。

常见的导航模式是行不通的。菜单过长流行在整个屏幕上，如果其他地方出现在画布上，这将拉动用户断章取义。该问题的解决方法是锁定画布，并将其拉至右 - 揭示导航下方。使用弹出导航像，这是一种全新的概念。

图表新界

它的工作原理的原因 - 为什么感觉那么自然 - 是因为动作是很自然的。移动到东西方暂时重定向重点，同时保持一个什么样的用户在做之前惊鸿一瞥，是在物理领域一个非常普遍的行动。我们将保持我们的地方在报纸上，因为我们翻到一个引用的部分。我们将保持我们的拇指在页面上并翻转到一本书的尾注。我们将伸延出一个表，我们试图找到收据行项目在我们的报税表。

这是一个什么样的脱帆布弹出模拟所有的物理例子：节省你的位置，让您可以马上回你在做什么。休帆布弹出的是一个完美的方式与移动内容进行交互，因为它解决了一个非常明显的问题：焦点。

在移动，我们所是重点。这使得维护方面非常努力。我们强制用户上下滚动，而我们隐藏和显示内容做所有我们希望用户做的事情。滚动条，这表明用户所在的页面上，通常是缺席，又回到了一个人的确切位置常常是困难的。上下文中重要的是要在使用者的心理的内容的图。如果没有它，他们会迷路，脱落的网站。

随着弹出导航展开工具栏，我们保持上下文的页面上，而呈现出巨大的新的信息的数组。弹出按钮可容纳值得一新的互动和内容的整个页面，而不会迷失于所有的用户。这是一个非常强大的模式，与潜在的，我们甚至还没有开始发掘。

平地球综合症

尽管这种潜在的，我们是不是真的愿意蹬帆布的界限。我们的设计师已经开发了一个不幸的趋势，以避免试验。我们更愿意实施行之有效的模式，但我们不太可能批判性的思考，为什么一个模式是成功的。当然，我们知道，弹出导航弹出是伟大的导航，但是这还不是全部这是很好的。

影未解决导航问题时，它产生的图案。它是解决一个交互的问题。它需要一种方法来呈现大量的交互和信息不从他们的初衷分心用户 - 时间轴。相反，弹出导航弹出一个导航模式的思维，我们需要把它当做一个内容战略。我们如何呈现更多的信息，用户无需从什么是手头分心呢？

Facebook的没有飞出限制航行要么。它用它的消息联系人列表中也是如此。这可能是一个更好的利用弹出的，因为用户是高度倾向于快速弹出打开侧边栏，看看谁在线，并返回到浏览时间线之前，他们通过系统快信。这样的模式不是一成不变的。事实上，他们会得到更好的唯一途径是，如果我们不断地尝试他们。Facebook的彻底改变了我们奠定了移动内容的方式，只有极少数的人携带的火炬前进。

当心高歌猛进

这里有一个风险。我们不应该使用断开帆布图案，只是因为它是小说或流行。正如在Web开发大多数事情一样，每一种方法都有其优点和缺点。休帆布弹出是不是完美的每一种情况。这是最好的时候，你需要提供大量的信息或复杂的相互作用，而不将用户远离主要内容。

如果你只有少数的导航项目，或者如果您所提供的补充资料是短暂的，那么该模式很可能会比方便更具破坏性。请记住，它提供了一个新的视图，同时保持原始视图的背景下 - 人们会失去一些流量，每当他们打开弹出。如果补充资料是最小的，然后使用一个酥饼或下推互动，而不是和保留用户的屏幕上。

另一件要记住的是，休帆布弹出需要更多的处理能力和浏览器功能比其他方法。虽然这主要是由一个很好的框架（见我在这篇文章的末尾推荐）缓解，这些问题仍然站立。旧设备和设备不支持JavaScript可能被甩在后面，如果你不提供一个良好的后备这种模式。我建议逐步提高 -即提供旧的浏览器一个简单的解决方案，同时检测对新功能的支持，并提供对浏览器，可以处理它更优化的解决方案。

填写详细资料

那么，什么是弹出的真的很好吗？下面是该突出图案的值的几个例子。

购物车

当我工作的设计在今年早些时候Garmin的电子商务网站，我有一个聊天我的标准“测试用户”（即我的女友）。我们讨论了一些什么，她喜欢和不喜欢的手机网站电子商务。她带来了最大的问题是，她经常要检查什么，她被放置在她的车，但要做到这一点，她有探望购物车页面，这需要她远离她目前正在浏览的内容。

这引发了小小的“啊哈！”的时刻对我来说。为什么不使用脱帆布弹出按钮来保存所有的车的信息？用户可以快速弹出打开自己的购物车，每当他们想要的，瞄了一眼里面有什么。他们还可以立即开始检查 - 有效去除结帐过程整体的一步。如果您在电子商务工作，那么你就会知道，在结帐过程中的步骤较少，不太可能用户会放弃自己的购物车。

       Garmin公司使用弹出的移动，而不是一个独立的购物车页面。用户可以直接去结账面积从这个弹出按钮，无论他们在网站上。

教有关此功能的用户，我设计了车弹出，弹出打开每当用户补上一到购物车。这种刚刚在时间的指令是非常有帮助的，而时机是完美的，因为用户并不需要了解的车，直到他们添加的东西给它。如果你正在构建一个电子商务网站，那么你可能已经有你需要做到这一点的一切。

许多网站显示购物车的预览当用户将鼠标悬停在购物车图标或增加了一个产品它。您可以轻松地重复使用这些信息为在小屏幕上弹出按钮。对于一个负责任的网站，有一个弹出购物车的例子，看看Zazzle诞生。

Zazzle诞生有一个酥饼车的大屏幕和场外帆布弹出的小屏幕。

我们没有获得来自Garmin的桌面网站的页面上现有的车的信息，所以我们用渐进增强“Ajax”的跨页的车信息。我们的工程团队存储在本地存储购物车信息，这样我们就不需要在每次加载页面进行检查。每当用户执行，将导致其改变的行动，我们对其进行更新。

这导致了一个快速和非常实用购物车弹出。用户可以做一切他们可以与普通车做 - 更新数量，添加优惠券代码 - 从任何网页，他们都在。在弹出的添加功能以直观的方式，而不采取任何远离用户。

产品筛选

另一个很好的用途上的电子商务网站上的弹出按钮，是房子过滤器分类页和产品列表页面。许多桌面布局有一个巨大的过滤器数量分析和选择的产品列表中的用户。传统上，与这些交易有关的移动已经非常困难：你要么向用户呈现的筛选器的一长串或显示的产品 - 永远两个。

随着弹出导航弹出，用户可以弹出过滤器，切换他们想要的那些，然后轻松地返回到产品的更新列表。就不会失去自己的位置，他们会得到所有的桌面布局的功能。最重要的是，如果内容的条子是显示，用户将获得他们的行动即时反馈。产品列表将实时为用户切换过滤器更新。

页面历史

弹出导航弹出不限于电子商务的，当然。一个设计的时候，我们的目标Style.com的新的移动网站是为了使用户能够时装系列之间轻松切换，并深入探究展示画廊。上下文切换是如此普遍，在这个网站，用户需要一种方式来轻松地保持一切，他们一直在寻找的轨道。

开发人员实现的休帆布弹出，可以滑出，并显示每一件事该用户已完成的网站上，按时间顺序排列的缩略图。找到一个以前查看过的集合是通过滚动列表一样简单。

纽约时报“的新网站已经关闭，帆布弹出征求意见。有趣的是，这种模式是不使用在所有的移动视图，在那里它可能会更有效。

这种想法可以应用于以后的博客和新闻网站。想象一下，读一本科学论文或脚注的任何文字。每个链接可以打开一个包含有关一个注脚弹出。用户将能够快速地获得他们需要的信息，而不会永远失去了页面的上下文。这实际上提高了阅读体验 - 的东西数字设计师梦想的那种。

最后的边境

所有上面列出的例子有共同性。用户通过图示列辅助，但他们的成功并不依赖于使用它们。他们可以访问他们的购物车或他们的收视历史或意见没有弹出。弹出导航绝不必要的手段，但它使生活变得更加简单。用户更可能留下来买东西，多读一些文章和更多的广告。

我们需要停止自满。仅仅因为一个弹出的作品真的很好的Facebook的导航不使它成为一个“导航模 式。”让我们批判性的思考关于每个模式的功能以及为什么它是有效的。如果我们这样做，那么我们会在建立在我们下奠定了基础达到完美的境地。这是特别重要的移动，其模式是比台式机的不太成熟的-有很好的理由：手机设计者根本就没有被周围的长。

你会发现，我一直在谈论仅约弹出导航展开工具栏。这是一个有点懒惰，太。当考虑了画布，我们不由自主地想到图示列的。但更可能的是与休帆布布局。无数的方法和模式，等待被强悍的设计师被发现。我们的油画是各不相同的-当然，他们有许多共同的地方，但每做一些事情略有不同。我们弹出导航的解决方案应该是不同的，太。

作为网页设计师，我们不断踏着相同的路径 - 也许发现了一个快捷方式，如果我们是幸运的。但地图通常保持不变。我们自满，追溯那些谁拥有了我们面前，穿着下来的道路越陷越深的步骤。我们需要先驱。正如Facebook的带领我们过的画布与展开工具栏，我们需要探索新的领域。也许现在，我们只需要找到新用途展开工具栏。也许以后，我们会发现全新的休帆布概念。也许真正的冒险会发现一个全新的交互层。

责任编辑：上海网站制作协策网络（网址：http://www.580plan.com/），转载请注明出处，谢谢!