韶关网站建设：关闭被击败的画布——探索画布模式的潜力

画布上的弹出式菜单已经成为移动布局的主要导航模式 - 甚至一些桌面布局已经跳板。并且有充分的理由：非画布菜单是维护上下文的好方法，同时为用户提供了大量附加信息。韶关网站建设

在本文中，我们将讨论为什么非画布作为导航模式变得如此成功并展示其潜力如此之多。从产品列表页面上的过滤器到购物车，再到最近浏览过的文章列表，这种模式的潜力只受我们对先锋的推动。现在是时候探索我们可以走多远的画布了。

你以前看过画布外的弹出窗口 - 你知道吗，那些从屏幕边缘滑入的侧边栏？到目前为止，它们甚至可以被认为是司空见惯的。最近他们的受欢迎程度爆炸是有原因的：在移动设备中，窗户的概念几乎消失了。目前市场上的大多数设备都无法控制窗口。

相反，我们只有两个主要层可以使用：视口和画布。虽然这些提供了很多潜力，但设计师已经开始反对受约束视口的局限性。画布上的弹出窗口 - 在桌面上节约使用 - 在这种情况下变得非常重要。

由于移动设备上的空间有限，设计人员认为需要打开空间并呈现相关信息，而不会迫使用户丢失上下文或将其位置留在屏幕上。离开画布使我们能够做到这一点。在桌面上，我们很少去画布 - 只是没有必要。在移动设备中，画外画是一个突破性的概念。它创造了设计可能性的新前沿。而且，与绘制任何未开发的领域一样，它为那些愿意承担风险的人提供了宝藏。对于设计师来说，这是创造新事物的难得机会。

早期探险家

当然，第一批超越画布并勇敢面对未知的人将失去我们。像美洲一样，我们只记得那些登陆最着名的人。因此，Facebook是我们的哥伦布。

Facebook开始着手解决它在移动屏幕上发现的一个非常具体的问题。它的导航菜单很长，有很多与用户相关的内容。用户需要能够在不失去时间轴中的位置的情况下探索该导航。如果他们决定不离开，他们应该能够立即回到原来的位置。

Facebook最初的画布外布局与Facebook目前的移动网络导航非常相似。今天，它仍然使用off-canvas作为其消息传递系统以及Android应用程序。（大预览）

常见的导航模式不起作用。菜单太长而无法在整个屏幕上弹出，如果它出现在画布的其他位置，则会将用户拉出上下文。该问题的解决方案是锁定画布并将其拉向右侧 - 显示下方的导航。像这样使用非画布是一个完全新颖的概念。

绘制新领土

它起作用的原因 - 以及为什么它如此自然 - 是因为它的动作非常自然。临时移动某些东西并重定向焦点，同时保持用户之前所做的一瞥，这是物理领域中极为常见的行为。当我们翻到参考部分时，我们将在报纸上占据一席之地。我们会将拇指放在页面上并翻到书中的尾注。当我们尝试在纳税申报表中找到订单项的收据时，我们会将表单显示出来。

这些都是画布外弹出模拟的物理示例：保存您的位置，以便您可以直接回到您正在做的事情。离开画布的弹出窗口是与移动内容交互的完美方式，因为它解决了一个非常明显的问题：焦点。

在移动领域，我们所拥有的只是重点。这使得维护上下文非常困难。我们强制用户上下滚动，我们隐藏和显示内容以执行我们希望用户执行的所有操作。滚动条可以指示用户在页面上的位置，通常不存在，并且回到一个确切的位置通常很难。上下文对于用户的内容心理图很重要。没有它，他们就会迷失方向并从网站上掉下来。

借助非画布弹出窗口，我们在页面上保留上下文，同时呈现大量新信息。Flyout可以保存整个页面的新内容和新内容，而用户根本不会丢失。这是一种极其强大的模式，具有我们甚至尚未开始发现的潜力。

平地综合症

尽管有这些潜力，但我们并不是真的愿意突破画外界限。我们的设计师已经形成了避免实验的不幸倾向。我们非常愿意实施经过验证的模式，但我们不太可能批判性地思考模式为何成功。当然，我们知道画布上的弹出窗口很适合导航，但这并不是一件好事。

Facebook在创建模式时没有解决导航问题。它解决了一个互动问题。它需要一种方式来呈现大量的交互和信息，而不会分散用户的注意力 - 时间轴。我们需要将其视为一种内容策略，而不是将画布外的弹出视为导航模式。我们如何向用户提供更多信息，而不会分散他们的注意力？

Facebook也没有限制弹出导航。它也将它用于消息传递联系人列表。这可能是更好地使用弹出窗口，因为用户非常倾向于快速弹出侧边栏，查看谁在线，并在返回浏览时间线之前向他们发送快速消息。这样的模式不是一成不变的。事实上，他们变得更好的唯一方法是我们不断尝试它们。Facebook彻底改变了我们为移动设备制作内容的方式，很少有人将这种火炬传递给他们。

当心警笛歌

这里有风险。我们不应该仅仅因为它是新颖的或流行的而使用非画布模式。与Web开发中的大多数事情一样，每种方法都有其优点和缺点。画布外弹出不适合各种情况。当您需要提供大量信息或复杂的交互时，最好不要将用户从主要内容中拉出来。

如果您只有几个导航项目或者您提供的补充信息很短，那么该模式可能比方便更具破坏性。请记住，它在保持原始视图的上下文的同时提供了一个新视图 - 人们在打开该弹出窗口时会丢失一些流。如果补充信息是最小的，则使用弹出窗口或下推式交互，并将用户留在屏幕上。

要记住的另一件事是，画布上的弹出窗口需要比其他方法更多的处理能力和浏览器功能。虽然这很好地通过一个好的框架来缓解（参见本文末尾的建议），但这些问题仍然存在。如果您没有为此模式提供良好的后备，那么没有JavaScript支持的旧设备和设备可能会被遗忘。我建议逐步增强 - 即为旧浏览器提供简单的解决方案，同时检测对新功能的支持，并为可以处理它的浏览器提供更优化的解决方案。

填写详细信息

那么，弹出窗口真正有用的是什么？以下是一些突出模式价值的例子。

购物车

当我今年早些时候为Garmin的电子商务网站设计时，我和我的标准“测试用户”（即我的女朋友）聊了聊。我们谈了一些她喜欢和不喜欢移动网站上电子商务的内容。她提出的最大问题是，她经常想检查她放在购物车里的东西，但为了做到这一点，她必须访问购物车页面，这使她远离她目前正在浏览的内容。

这给我带来了一点“A-ha！”的时刻。为什么不使用画布外的弹出窗口来保存所有购物车的信息？用户可以随时快速打开他们的购物车，并浏览内部的内容。他们也可以立即开始退房 - 从结账流程中有效地删除整个步骤。如果您从事电子商务，那么您就会知道结帐过程中的步骤越少，用户放弃购物车的可能性就越小。

Garmin在移动设备中使用弹出窗口而不是单独的购物车页面。无论用户在网站上的哪个位置，用户都可以直接从该弹出窗口进入结账区域。（大预览）

为了向用户介绍这个功能，我设计了购物车弹出窗口，以便在用户向购物车添加内容时弹出。这种即时指令非常有用，而且时机非常完美，因为用户在添加内容之前不需要知道购物车。如果您正在建立一个电子商务网站，那么您可能已经拥有了实现这一目标所需的一切。

当用户将鼠标悬停在购物车图标上或向其添加产品时，许多网站会显示购物车的预览。您可以轻松地将此信息重新用于小屏幕上的弹出按钮。有关具有弹出购物车的响应式网站的示例，请查看Zazzle。

Zazzle有一个用于大屏幕的popover推车和一个用于小屏幕的画布外飞幕。

我们无法访问Garmin桌面网站上页面上的现有购物车信息，因此我们使用渐进式增强功能对各个页面的购物车信息进行“AJAX”。我们的工程团队将购物车信息存储在本地存储中，这样我们就不需要在每次加载页面时都检查它。每当用户执行会导致其更改的操作时，我们都会更新它。

这导致快速且极其实用的推车弹出。用户可以使用常规购物车执行所有操作 - 从他们所在的任何页面更新数量，添加优惠券代码。弹出按钮以直观的方式添加功能，而不会从用户那里拿走任何东西。

产品过滤器

电子商务网站上的弹出窗口的另一个优秀用途是容纳类别页面和产品列表页面的过滤器。许多桌面布局都有大量的过滤器供用户解析和选择产品列表。传统上，在移动设备上处理这些问题非常困难：您可以向用户展示一长串过滤器或显示产品 - 从不同时使用这两种产品。

使用非画布弹出窗口，用户可以弹出过滤器，切换他们想要的过滤器，然后轻松返回到更新的产品列表。他们不会失去他们的位置，他们将获得桌面布局的所有功能。最重要的是，如果显示内容的一小部分，用户将立即获得有关其操作的反馈。当用户切换过滤器时，产品列表将实时更新。

页面历史

当然，幕外弹出不仅限于电子商务。设计Style.com的新移动网站时，我们的目标之一是让用户能够轻松地在时尚系列之间切换，并深入展示展示画廊。切换环境在本网站上非常普遍，用户需要一种方法来轻松跟踪他们一直在查看的所有内容。

开发人员实现了一个画布外的弹出窗口，可以滑出并显示用户在网站上完成的每一件事，按时间顺序显示缩略图。查找先前查看的集合就像滚动列表一样简单。

Style.com使用弹出窗口使用户的观看历史记录持久且易于访问。记录的每篇文章和图像都被记录下来，以便用户可以快速返回。

评论

在发布网站上另一种高效的模式使用是显示评论。越来越多的网站正在关注Medium允许用户直接评论文章中各行和段落的例子。移动版本通常缺少此功能，而Medium则对此有所了解。画布外弹出是这个问题的完美解决方案。单击注释标记将弹出一个窗格，其中包含可见行的注释，用户可以滚动该行的每个注释。当用户折叠侧边栏时，他们就是他们离开的地方。

在我写这篇文章的时候，“纽约时报”宣布了一个新版本的网站，这几乎与评论有关。一个上下文的非画布评论栏在文章的位置上飞出 - 但仅限于桌面布局。用户可以专注于阅读文章本身，当他们对评论感兴趣时，快速检查其他人对他们正在阅读的段落的评价。

纽约时报的新网站有关于评论的画布外宣传片。有趣的是，在移动视图中根本不使用这种模式，它可能更有效。

这个想法可以应用于博客和新闻网站之外。想象一下用脚注阅读科学文章或任何文本。每个链接都可以打开包含相关脚注的弹出按钮。用户将能够快速获得他们所需的信息，而不会丢失页面的上下文。这实际上会改善阅读体验 - 数字设计师梦寐以求的东西。

最后的边疆

上面列出的所有示例都具有共性。用户受到弹出窗口的帮助，但他们的成功并不取决于使用它们。他们可以在没有弹出窗口的情况下访问他们的购物车或他们的观看历史或评论。离开画布绝不是必要的，但它会让生活变得更轻松。用户更有可能留下来购买东西，阅读更多文章和查看更多广告。

我们需要停止自满。仅仅因为弹出窗口对于Facebook的导航非常有效并不能使其成为“导航模式”。让我们批判性地考虑每种模式的作用以及为什么它有效。如果我们这样做，那么我们将处于建立在我们之下的基础上的完美位置。这在移动设备中尤为重要，移动设备的模式不如桌面设备那么成熟 - 而且有充分的理由：移动设计师根本没有那么久。

你会注意到我一直在谈论画布外的弹出窗口。这也有点懒惰。在考虑画布外，我们会自动想到弹出窗口。但是，使用非画布布局可以实现更多功能。无畏的设计师正在等待无数的方法和模式被发现。我们的画布并不完全相同 - 当然，它们共享许多部分，但每个部分都略有不同。我们的画外解决方案也应该有所不同。

作为网页设计师，我们不断走上同样的道路 - 如果我们幸运的话，也许会发现捷径。但地图通常保持不变。我们变得自满，回首那些走在我们前面的人的步伐，穿越了越来越深的道路。我们需要成为探路者。就像Facebook带领我们脱颖而出一样，我们需要探索新的领域。也许就目前而言，我们只需要找到弹出窗口的新用途。也许以后，我们会发现全新的画外概念。也许真正冒险的人会发现一个全新的互动层。

韶关网站建设