一位读者提出了以下问题
我们知道滑出式菜单非常适合移动设备(例如 Facebook、Gmail 等)。但您认为它们是否也适合桌面 Web 应用程序?
好问题。您知道这类问题

当然,我们可以在桌面网站上复制这种设计模式。但我们应该这样做吗?它有意义吗?这种模式的出现仅仅是因为导航可能占用大量空间,而我们在桌面端有充足的空间,但在移动端却不够用吗?这种模式在移动端的普遍使用是否意味着它现在可以安全地迁移到桌面端而不会让任何人感到困惑?
已经有一些项目在尝试这种模式,例如 Sidr、Meny、jPanelMenu 等等。我经常看到人们在 CodePen 上 尝试这种模式。
让我们来进行一项调查!调查在侧边栏中。
我希望像 Facebook 这样的网站能够开始使用类似其移动网站的侧边导航。当我加载 Facebook 时,会被 3 列文本和广告冲击,有时有点难以处理。我更喜欢简洁宽敞的 UI,侧边导航可以帮助清理这些内容。
Facebook 现在确实使用了这种侧边导航
我同意滑出式菜单非常适合移动设备,但不适合桌面设备。首先,在移动设备上,操作系统可以强烈引导开发者采用应用程序抽屉的概念,从而为用户创造了一种期望,这种期望也延续到了 LinkedIn 等网站的网页上,因为它们的应用程序大多是 HTML5 的。
其次,如果要精确地复制抽屉样式,那么我需要在左上角放置用于拉出抽屉的小条。距离大型显示器上眼睛的焦点位置很远。
厚颜无耻地打个广告,但 Jonathan,你可能会喜欢 fbslim.com 上 Facebook 的精简界面。开发的早期阶段……
我认为这是为移动用户体验而发明的,因为触摸板的原因。那么平板电脑或平板电脑 PC 为什么不行呢。
但我觉得当用户可以使用鼠标时,它有点没用(但很时尚)!:D
我认为这项技术可能更适用于导航是网站次要元素的页面,例如滚动网站。
我们还必须考虑到,这些菜单通常放置在角落并用汉堡包图标表示。每个用户都知道汉堡包表示导航吗?
我想说的是,如果您想确保每个人都能轻松浏览您的网站,请利用我们在桌面端可用的充足空间来放置导航,并将滑块保留在移动端。
话虽如此,如果导航不是您网站的重要元素,并且您想通过内容、按钮和其他图像引导用户浏览您的网站,为什么不呢?
每次我想使用菜单时都必须打开它可能会很烦人,但我认为如果可以选择展开或隐藏它,那就太棒了,就像 Photoshop 那样,您可以折叠它或始终将其打开。
这样,屏幕较小的用户或喜欢宽敞界面的用户可以选择,而那些希望避免额外点击和旧版界面的用户可以选择保留它。
我认为这是有道理的,如果以略微不同的意图实施。在移动端,我们由于屏幕空间有限而使用隐藏式导航,但在桌面端,我认为我们应该将其解释为一种创建更简洁、更干净界面的机制。例如,对于 YouTube(如果您已登录并订阅了相当数量的频道),这对我就很有意义。基本上,当您专注于观看视频时,您可能希望使用一些导航元素,但这并不是您当前页面(观看视频)的主要目的。因此,点击(YouTube 上称为“指南”的内容)并获取一个列表以显示您的导航选项,可以保持您页面主要目的的简洁性,同时仍提供该功能。当您使用 YouTube 移动应用程序时,您将获得相同导航元素的真正隐藏式空间使用方式。我相信这是两种方法的绝佳融合,并且具有共同的意图。
我完全同意。我甚至在考虑隐藏电子商务网站上的购物车。这样,只有当您希望查看已添加到其中的商品时,才能打开它。
Pinterest 上就是这样 – http://pinterest.com/
我认为它可以在正确使用时发挥作用。
我喜欢在导航真正作为次要功能(不应经常与其交互)时看到它/使用它。或者当我想让用户真正专注于屏幕上的内容而不是其他任何内容时。
滑出式菜单是解决移动屏幕空间不足的方案。在桌面端没有必要,尽管 Apple 在 Mountain Lion 中引入了这种滑动方式,但当您有多个屏幕时,它会有点令人困惑。
Google+ 在其最新更新中使用了类似的功能,我认为这对他们来说效果很好。我不认为它应该成为常态,但如果使用得当,肯定可以很好地适用于某些网站,尽管 Google 可能只是规则的例外情况之一。如果使用不当,可能会出现严重问题。
我认为这是一个“以上都不是”选项。至少在桌面网站上,这确实取决于具体情况。如果您有一个网站,用户通常使用移动设备进行访问,那么它可能很合适,甚至更好 – 无论平台如何,至少为他们提供类似的用户体验选项。尽管正如 Kelly 所建议的那样,在桌面端始终将其打开(因为您有足够的空间)的选择仍然会更好。
但如果您有很大一部分用户仅通过桌面/笔记本电脑访问并习惯了这种模式。特别是如果,像我的父母和妹妹那样,这是他们唯一的浏览模式,他们会在四处寻找导航工具,或多或少礼貌地想知道它们在哪里,然后放弃,要么再也不回来,要么打电话给我询问如何在网站上浏览。这肯定会让我对设计师说一些粗鲁的话,可能也会对他们说一些粗鲁的话。
就像所有这些事情一样。他们付钱给我们让我们动脑筋和积累经验。目前还没有放之四海而皆准的答案。如果您正在为 mobileBrowserTricks.com.uk 设计,那就放手去做吧。ruralOver80’s-home-dating.net.uk – 也许不行!(对任何一个或两个网站以及任何想要使用我从脑海中提取的任一随机特殊兴趣小组的人表示最大的尊重。)
我认为它们适用于移动应用程序等,但对于桌面网站?不。在我看来,没有多大意义。
一些(大多数?)实现也依赖于 JavaScript,它应该在大多数情况下都能正常工作,但我们都知道并非每个人都启用了它。像导航这样基本的功能应该是简单的,并且始终如一地完美运行。
我认为,如果导航一开始是“弹出”的,并且用户有机会隐藏侧边栏以增加主要区域的可用空间并集中注意力,那么抽屉模式就可以使用。
但我认为在足够大的屏幕上隐藏导航后面的小汉堡包图标是很愚蠢的。
我也想过这个问题。可能显示导航,然后在加载时将其动画化以折叠,但后来我想“这一切有什么意义?”
它触及了设计师喜欢它的核心原因,因为它不显眼、花哨,并且是另一个美化元素,而不是在更大屏幕上真正可用。
我认为……取决于屏幕尺寸。仅此而已 :)
也过于依赖您所面临的布局类型(新闻?图片库?CMS?ERP?)、隐藏式菜单中的上下文(简单的菜单?搜索栏?两者都有?)。
哦,也取决于如何实现;)
尤其是在全背景网站上,这可能很好,但必须正确执行。
当在 Mac 上工作并且您的 Dock 放在侧面时,在尝试访问抽屉式导航时,它可能会弹出,这非常烦人。
我认为,这是一个偏好的问题。
如果您尝试**突出显示内容**,那么没有什么比屏幕外导航更好的了。此外,如果您有一个非常**繁重、不清楚的菜单**,那么将其移到屏幕外是一个好机会——这样您就可以为它获得更多空间。
另一方面,您需要为此付出**使用速度**的代价。固定菜单比必须激活的菜单更容易访问。
但您需要看到:**最终,您已经在为桌面使用屏幕外导航**;我母亲拥有一台小净本,屏幕宽度为 1024px,这与横向 iPad 相同。
因此,如果您校准了媒体查询以使用屏幕外导航来处理横向 iPad,那么您也可以使其适用于净本。
它可以在桌面网站上正常工作,您只需要知道何时以及如何使用它。
Google 在 Hangouts 页面上做了很棒的工作:http://d.pr/i/CMOx
我认为这将是即将到来的桌面电脑触控时代的不错功能。
但使用鼠标操作仍然不方便。如果您考虑一下 G+ 的左侧边栏,就会发现它很烦人。我讨厌那个东西。
bethel.edu 使用它作为搜索区域
此外,新的 squarespace.com 也使用了它
我认为,就像许多其他事情一样……取决于情况。主要是屏幕尺寸和“内容”。
我认为它可以用于任何网站,但重要的是要知道如何以及何时使用它。=D
虽然我说我不认为这是一个好主意,但我刚刚意识到我已经在 Google+ 上愉快地使用它一段时间了。
与大多数事情一样,它完全取决于实现和设计。如果选择经过深思熟虑,而不是临时添加,即使在拥有大量屏幕空间的桌面上也能很好地工作。
我的背景是“形式追随功能”。我们在桌面以及任何其他网站上遵循形式/设计的首要功能是——信息。快速有效地获取它,并在可能的情况下——美观。
“抽屉”菜单在移动设备和小屏幕上表现出色,解决了空间不足的问题。随着新的巨大桌面屏幕尺寸出现,
我还没有看到隐藏信息的必要性,以便在悬停或点击时显示它。是的,对于某些我无需始终查看的次要信息,但是像导航这样的基本元素呢?
当然,它可以在桌面网站上完成。
但为什么呢?
并非所有可以做的事情都应该做。
否则,它会将一个在移动设备等设备上非常有用的功能性“抽屉”效果
变成桌面网站上的一个噱头。
我想这可以行得通
我最近在新的 squarespace 网站上注意到了这一点
您在此处输入要链接的文本…
让我开始思考这个问题。在大多数情况下,我认为这是由那些希望最大程度地减少和简化混乱但可能没有充分考虑用户体验的设计师使用的。
就我个人而言,在宽屏上,我认为这没有必要,阅读导航也是了解网站基本知识的好方法。
但是!我确实认为它对于某种设置面板来说会很棒,例如,您可以更改您的个人资料详细信息并在页面上实时更新它们,这将为更改提供很好的上下文。
该死,现在我得找个时间试试这个。
我相信它仅在桌面网站上有效,前提是用户在其笔记本电脑或电脑上具有触摸屏界面,否则它对我来说就没有意义。
我认为回答这个问题的一个好方法是考虑您是否在桌面软件(如 Photoshop、Excell 或 Keynote)中折叠调色板。我个人喜欢我的调色板一直可见,并且不喜欢 Facebook 的屏幕外菜单。
不过,我喜欢简洁的阅读体验。
在执行此操作时,请记住老年或不太熟悉电脑的用户。只要它默认打开并且不会消失在“啊,它去哪儿了”的时刻:-) 它将为平板电脑和台式机提供一致的感觉。
我不认为在浏览器宽度达到一定值后它还有必要(尽管我不知道这个宽度是多少)。
如果我这样做,我的投票很可能是“在宽度 < x 的响应式设计中它很好”。我认为它是移动设备还是非移动设备都没有关系。
我不这么认为,这是桌面应用程序的正确方法吗?我的意思是,它对 SEO 也更好吗?桌面应用程序的导航应该更标准化、更清晰。
我总体上对滑出式抽屉存在问题。虽然它们确实允许网站更有效地使用小屏幕空间,但它们通常也没有任何指示表明它们可用。截至目前,我不是 iSheep,所以我没有 i-Phone。但是,在 Android 版 Chrome 中,当您在屏幕上左右滑动时,它会切换浏览器内的标签页。因此,当使用我知道具有抽屉功能的网站(通常是因为我想切换标签页)时,我会切换几次标签页才能获得抽屉。就原生应用程序而言,它们也存在一些相同的问题。直到最近,Google 才在 Google 地图中添加了一个小标签指示器,让用户知道“某些东西”在那里。不幸的是,它看起来像一个 GTK 或 Windows 滚动滑块,所以我最初的想法是页面上还有更多内容。所以问题实际上是,
滑出式托盘对移动设备真的好吗?
如果是,为什么?
它们的缺点是什么?
开发社区应该使用哪些视觉提示约定来帮助史密斯奶奶知道该功能可用?
滑动访问动作真的是最好的吗?
我相信这非常适合桌面网站,因为它可以从用户的视野中移除导航,以便他们专注于重要内容,即**内容**。然后,当他们准备好导航时,他们可以打开导航。
投票似乎在 iPhone 上隐藏了,或者我只是不得不滚动来滚动去才能找到它,所以我猜它不适合移动设备。
我倾向于同意那些认为这种技术对于桌面来说没有必要的评论,但我也不喜欢在可能性方面受到限制的想法。这可能是一个争论比试图得出唯一答案更有价值的问题。
好吧,我认为在桌面上使用一个小菜单抽屉不是一个好主意,但我认为它可以通过其他方式实现,例如一个 100% 高度的细左侧栏,并且它在点击时会滑开,或者任何非常动态的东西,例如来自顶部的挂钩和拖动以打开抽屉。
根据我自身在该主题上的经验,我认为导航/菜单抽屉足够动态,可以满足桌面或移动用户的使用需求。以下是我正在从事的一个项目的链接,该项目仅使用滑动侧边菜单——桌面和移动设备上的滑动侧边菜单
我实际上遇到过一个使用屏幕外导航的项目。该设计支持一个标题下方的菜单,但我们需要另一个菜单,其中包含很多链接供已登录的用户使用(在设计获得批准后才发现这一点……:|)。
我们无法更改设计,也没有侧边栏(它只有一列),因此实现滑动侧边菜单实际上非常有意义。而且它运行良好。
考虑到这一点,我将非常棒的 Slidr 库集成到一个 WordPress 插件中,以防其他人需要它:wordpress.org/plugins/wp-offscreen-navigation
“它可以在某些网站上很好用”怎么样?我觉得“它可以在任何网站上很好用”并不适用,但它确实适合某些网站。我认为这取决于内容类型。
我想知道像Teehan and Lax(http://www.teehanlax.com)这样的公司是否有一些关于这种方法效果如何的统计数据?!
坦白说,我认为屏幕外的抽屉导航在台式机上并没有多大意义。整个屏幕向右/左动画并不是那么微妙。如果你不得不一直使用它,它实际上更像是一个痛点。
Pinterest 的做法很好。他们也使用相同的图标。但它不会将屏幕的其余部分滑动到右侧/左侧。YouTube 也做得很好。将其隐藏并切换。
如果屏幕外导航也出现在桌面端,我们可以始终假设我们可以从侧面滚动打开导航,这使得网站更容易浏览,并让你立即感觉到自己“回家”了;)
我最近开发了一个自适应网站(不是响应式!),它在移动设备和平板电脑设备的屏幕分辨率范围内使用这种确切的功能——这些设备越来越接近台式机屏幕的分辨率。
这个概念非常合理——随着这些移动设备在处理能力上赶上台式机,利用屏幕上和屏幕外的 3D/2D 空间是充分利用屏幕可用空间的好方法。
拥有大量屏幕空间的台式机可能无法从移动设备上获得的相同好处中受益,但从根本上说,如果我不需要一直看到它,那么将其隐藏的自由度始终存在于台式机上,并创造了一个非常模块化的界面——在我想看到的地方和时间显示关键信息。
我投票支持在桌面端使用移动导航,并且有许多非常合理的理由。
使用水平顶层导航的问题 #1
这是所有 CMS 用户和设计师首先遇到的第一个关于水平导航菜单的问题> 他们因为太多顶层链接而空间不足,或者字体大小太大。这也是为创建仅当导航项水平溢出时才触发的导航的移动版本带来的问题。只是更多 JavaScript 开发来修复此错误。没有一个分辨率适用于所有网站。
使用水平顶层导航的问题 #2
下拉菜单!无论使用鼠标、触摸还是触控板,下拉菜单都非常难以悬停和导航。用户不断地滑动或误点,现在必须导航到顶层并再次拉下拉菜单,希望它不会发生两次,或者更糟糕的是,在点击他们想要的链接之前发生 3 或 4 次。下拉菜单的另一个大问题是知道何时将其下拉到左侧还是右侧,因此再次需要更多 jQuery 进行编程,这会降低网站的性能,只是为了防止下拉菜单浮出网页右侧而使其无法访问,因此您可以改为将其下拉到左侧,这只会变得杂乱且令人困惑,更容易再次出错并重新开始。
使用水平顶层导航的问题 #3
平板电脑设备!!!这可以说是压垮骆驼的最后一根稻草。首先,触摸手势驱动的导航是未来,它不仅仅是未来,它是现在!50% 的网络流量来自平板电脑和移动设备,台式机和笔记本电脑的销量正在严重下降,那么这对您的水平导航意味着什么?对您和您的网页开发人员来说都是头痛!没有一个完美的屏幕尺寸断点可以适用于所有设备。使用用户代理检测器加载不同的菜单也是一种并非始终有效的黑客手段,因此真正的基于手势的通用导航系统是拥有网站一致导航流程的唯一且最佳方式。
使用水平顶层导航的问题 #4
“”等等,我正在一个父菜单项的子页面上,但现在我无法看到菜单中突出显示的活动页面,因为它隐藏在下拉菜单中!我在哪里?“”
回答:您在这里>(面包屑)!
面包屑是向访问者传达他们身在何处的最佳方式,如果您使用 RDFa 和 schema.org 标记,它还有利于 SEO。这样他们就可以轻松地始终看到如何导航到父页面,它在标题下方页面中看起来并不难看。
使用水平顶层导航的问题 #5
让我们诚实地说,作为一名网页开发人员和设计师,不断地为每个项目编写两个不同的导航菜单无异于一个巨大的麻烦。所有这些都只会减慢网站的速度,并让访问者更加困惑,因为网站所有者仍然停留在 90 年代。我说,如果您想要一个水平顶层导航菜单,请做一些简单的事情,例如网站的 2-3 个主要功能,例如 Google、Twitter、Facebook,以及所有其他大型网站所做的那样,并将您更详细的导航菜单放在它们所在的页面内。有一个 html5 元素叫做 USE IT!!!!! 它是您网页的最佳朋友!
使用水平顶层导航的问题 #6
超级菜单!不要让我开始谈论这场灾难!如果您想增加开发网站的成本,同时减慢网站加载时间和性能,更糟糕的是,完全分散访问者使用网站的注意力,那么,为什么要费心创建网页呢?只需将整个网站都做成导航栏即可!超级菜单的主要问题是它们充满了问题!事实是,这些类型的功能应该保留在网站内容区域本身。
标题中仍然需要更多空间来容纳那个丑陋的水平导航,其中包含网站上的每个链接?创建另一个小的页脚导航菜单,或者更好的是,创建一个站点地图页面。为什么要用一个巨大的标题来杂乱无章地占据网站上的每个页面,而访问者必须从中分散注意力才能到达网站的重要部分:页面!
人们应该习惯菜单按钮是什么,无论是图标还是“菜单”这个词。它易于使用,无限扩展,跨所有设备通用显示,而且它们非常漂亮且有趣。别担心,如果您的访问者还没有学会点击菜单按钮,他们很快就会学会的。他们学会了如何使用鼠标,他们也会学会使用您的菜单按钮。此外,他们意识到它是什么只是时间问题,因为很大一部分网络已经转向摆脱毫无意义的水平导航菜单。
顺便说一句,我喜欢 CSS-Tricks 的新设计!