网站面包屑导航图标(三个小条用来指示菜单链接)是目前网络上最具争议的技术之一。有人告诉设计师,所有人都讨厌它。客户,我们告诉所有人,也讨厌它。那为什么到处都是呢?
汉堡包图标易于缩放,可完美地放置在像素网格中。它最初是一个列表图标,已经被压成其当前角色,但是由于菜单只是选项列表,因此以这种方式使用列表项在语义上是正确的。
围绕该主题进行了大量的辩论,A / B测试,博客评论和用户研究,但这些研究几乎始终专注于应用程序设计。在网页设计中使用汉堡包图标时,它表示一个严重得多的问题。
网站面包屑导航图标出现问题
有很多设计师质疑汉堡包图标本身的价值。即使在苹果采用它之前就以这种方式使用它,也经常将其视为iOS风格的图标。

实际上,关于汉堡包图标是否可以用作菜单指示,有大量相互矛盾的证据。一些设计师认为,图标很容易被年轻的人群识别,而另一些设计师则认为,年龄较大的人群如果具备网络知识就可以识别它。我们真正可以从这一证据中得出的唯一结论是,可用性测试已被证明是不确定的,并行测试通常会返回相互矛盾的结果。
普遍接受的是,用户不会将汉堡包图标识别为单个链接-可能是因为它被设计为看起来像一组链接,而不是单个链接。支持的方法是在汉堡图标周围加上边框或为其提供背景,以使其看起来更像按钮(敢于说,更像拟),将带来更多点击。

网站面包屑导航图标出现更多问题
除了图标本身的设计之外,使用汉堡包图标的方法还存在很多问题。
首先,也许也是最重要的是,汉堡包图标为您的导航添加了额外的功能;现在只需单击一次即可到达特定页面,而现在只需两次。网页设计师的经验法则一直是最多单击三下(尽可能),到目前为止,汉堡图标技术并不能解决导航问题,而只是将一个问题换成另一个。当然,这不仅是汉堡包图标的问题,还是任何以这种方式进行布局的导航的问题。您可以使用“菜单”一词代替汉堡包图标,并且会遇到相同的障碍,不同之处在于,不能以其他任何方式使用汉堡包图标。

汉堡包技术也隐藏了它的内容。从UX的角度来看,用户不必为了发现自己可以采取的措施而采取措施。当这些选项不在您面前时,就很容易忘记“在Twitter上共享”或“转到Checkout”。用户根本不会去寻找他们不知道存在的链接。
最后,汉堡图标技术隐藏了您网站的当前状态以及用户在其中的位置。菜单中的按下状态向用户提供汉堡图标技术难以理解的上下文信息。

网站面包屑导航图标做得好吗?
考虑到汉堡图标普遍受到憎恨并导致一系列问题,为什么在各处都使用它?
根据我的经验,当然在某些人口统计中,汉堡包图标最近达到了易于识别的地步。在互联网上,驳斥往往已经超过一岁甚至一年的研究的时间很长。
实际上,链接图标比链接图标或共享图标更易于识别,后者的确定形式尚未出现。汉堡包图标在任何数量的不同设计中都是一致的。

最重要的是,汉堡包图标可以完成它打算做的事情:它为我们节省了大量的屏幕房地产。如果客户向您提供必须添加到菜单中的大量物品列表,则将它们移出屏幕并链接到它们是一种粗略但有效的方式,可为客户还希望的内容腾出空间。
我想说的是,汉堡图标比其他解决方案更好地解决了问题,但这不是事实。相反,我要说的是,汉堡包图标比其他解决方案更能解决该问题。
问题的根源
之所以会使用汉堡包图标,是因为设计师(或更常见的是客户)并未完全致力于移动优先方法。他们想要一个“常规”站点,但被挤到孙女的电话上。
汉堡图标的反对者倾向于将其替换为“菜单”一词,因为这样做完全没有意义。汉堡图标无论是否喜欢,现在都已获得其含义,但是用户了解按钮的用途并不能解决最大的问题,即隐藏导航,隐藏用户的选择是一种可怕的自我行为-破坏。
简而言之,汉堡包标志是我们集体无法全心全意采用移动优先方法的所有方面的症状。

更好的解决方案
为了解决汉堡包问题,我们必须接受众所周知的Web无法正常工作。移动网络的兴起不仅意味着减少我们使用的列数并删除一些较重的图像文件,还远远不止这些。
移动网络与旧网络的使用方式不同。移动网络存在于专用应用程序的上下文中,用户期望以类似的方式体验Web。
Facebook的应用程序著名地将其汉堡包图标替换为标签栏,结果实现了更高的转化率。但是,Facebook所做的事情比交换菜单设计要重要得多。最近,他们发布了Messenger应用程序,最重要的是他们已经拥有一个功能完善且受欢迎的应用程序,可以将消息传递与之集成。通过将每个应用程序的角色集中在Facebook上,Facebook划分了其功能,他们开发了两个简单的应用程序,而不是一个复杂的应用程序。减少的功能导致减少的菜单选项集,并且减少了对汉堡菜单的需求。
优秀的应用程序具有高度的专注性,并且通过这种严格的用户测试,它们已经比Web经受了更严格的测试。要创建应用风格的体验,我们需要简化我们的网站,再次简化,然后再简化一点。如有必要,将您的体系结构分解为可管理的,很小的站点,几乎是微型站点。当我们为用户提供一组简单的选项时,就不会出现复杂菜单的问题。
杭州网站建设汉堡包图标就像是在伤口上拍创可贴一样:将它打补丁,但在下面仍然有些破损。
只有当我们完全采用移动优先的方法并将其不仅应用于我们的设计,而且应用于我们的内容和信息架构时,我们才会将汉堡菜单赋予历史。
特色图片/缩略图, 通过Mononc'Paul 使用汉堡包图片