看看画布外菜单设计模式

Trevin Shirey著
~ 8分钟阅读
Trevin是WebFX的业务开发高级总监。他参与过450多个营销活动，20多年来一直在建设网站。他的作品被《搜索引擎土地》、《今日美国》、《快公司》和《公司》推荐。

这就是画布外菜单的工作原理:用户单击图标或执行某种操作(例如在触屏设备上从左向右滑动)，从而导致垂直导航菜单滑入屏幕从画布．现场演示Off-canvas 这画布外演示是否是设计模式在起作用的好例子在网站上表示画布外菜单可用性的一个流行图标称为navicon．

导航图标看起来像一组堆叠的三条线: Navicon 这个图标也被称为“汉堡菜单图标”，因为，嗯，它有点像汉堡包的轮廓。你不一定需要使用导航图标作为画布外菜单的触发器;你也可以使用一个标有“菜单”之类常规术语的按钮。这甚至可能是一个更好的选择;网络出版公司Exis的A/B测试结果显示，互联网用户仍然不熟悉导航图标。 Navicon替代顺便说一下，画外菜单的另一种说法是导航的抽屉里，但后者专门与Android开发相关。它们的工作原理是一样的。

何时使用Off-Canvas菜单设计模式

一般来说，对于需要显示大量传统顶部水平导航栏无法容纳的链接的响应式网站来说，画布外菜单设计模式是一个很好的选择。为了探讨这一点，让我们来讨论一些off-canvas菜单是很好的选择的情况。

有许多链接的菜单

对我来说，顶部的水平导航栏仍然是最熟悉的网站导航菜单类型。

这是互联网用户所习惯的，尤其是我们这些没有使用移动触摸屏设备长大的人。但有些网站需要更多的空间，超出其布局所允许的宽度。在这种情况下，可以实现一个off-canvas菜单作为问题的解决方案。

下面，您可以看到时间网站的画布外菜单: 时代杂志的幕后菜单因为这个网站的菜单有很多链接，所以off-canvas菜单是一个很好的选择。菜单的内容非常丰富，甚至需要自己的滚动条。

分类菜单

在网站布局的左边或右边的垂直导航菜单是一种很好的方式，可以将链接组织成类别，因为用户可以快速地看到所有可用的链接。

这是一个垂直导航菜单的类别，可以在Zappos，供参考: 垂直导航菜单的例子Zappos 的垂直导航菜单与下拉菜单设计模式这是设计菜单的另一种方法。下拉菜单不允许我们在一个视图或操作中访问所有链接。因此，如果用户不确定某个链接可能在哪个目录下，他将不得不在几个类别中滚动，直到找到他要找的那个: 下拉菜单的视觉效果在这个假设的场景中，用户需要执行四个操作才能找到目标链接垂直导航布局非常适合按类别组织链接的菜单。