如何解决汉堡图标(三道杠)问题 打开你的眼界!

所属分类: 平面设计 / 平面其它 阅读数: 1177
收藏 0 赞 0 分享

本教程向大家介绍如何汉堡图标(三道杠)问题,绝对能打开你的眼界。是设计师不可错过的一个教程,推荐过来,希望大家喜欢

 汉堡图标,也就是三条小横线,一直以来被用于表示指向菜单的链接,是当今网页中最具争议的技巧之一。据说设计师们都讨厌它;客户们也恨之入骨。那为什么它却无所不在?

汉堡图标可以轻易缩放,它可以精确吻合像素网格。它原本是表达列表的图标,被强行冠上了如今的角色,但既然菜单就是一列选项,这样使用它从含以上来说是正确的。

在这个课题上,有数不尽的争论、A/B型测试、博客宣泄、用户研究,但这些研究几乎都在关注app设计。当汉堡图标用于网页设计时,它表现出了更大的问题。

id="toc_0">汉堡图标的问题

有很多设计师质疑汉堡图标本身的价值。它频繁作为iOS风格图标出现,虽然在Apple采用它之前,就已经被这么用了。

>World-of-swiss

 >Hugeinc

事实上,关于它是不是可用的菜单图标,有大量相互矛盾的证据。有些设计师主张,年轻人能轻松认出这个图标,其他人则表示年纪大的若有上网经历,也可以辨认出来。这项证据中,我们只能得出唯一一个结论,可用性测试结果是不确定的,相似的测试常常得出相互矛盾的结果。

大家普遍接受一点,用户不会把汉堡图标当作单一链接,很可能是因为它被设计成一组链接,而非单个链接的样子。支撑它的是环绕周围的边框,或是一块背景色,使它看起来更像一个按钮,我敢说,再拟物一些可以增加点击量。

Futureinsightslive

 汉堡图标还有更多问题

除却图标本身不说,使用它的方式也充斥着问题。

首先,可能也是最明显的,汉堡图标给导航增加了额外的操作;原本一次点击就可以到达具体页面,现在需要两次。根据网页设计师的经验,3次点击要能抵达(任何地方),目前为止,导航问题并没有解决,汉堡图标这种技巧,只是把一个问题变成了另一个问题。

当然,这不仅仅是汉堡图标的问题,它也是所有这种风格导航的问题。你可以用"菜单"两字代替汉堡图标,阻碍仍然存在,区别只是汉堡图标没法用在其他地方。

>Middle-earth.thehobbit

 >Jam3

汉堡图标同时也隐藏了它的内容。从用户体验的观点来看,用户不应该为了解自己能做什么,而做出任何动作。"分享到Twitter"或"付款"这些操作若不是近在眼前,太容易被用户忽略。用户根本不会去找他们不知道的链接。

最后,汉堡图标隐藏了网站的当前状态,还有用户所在的位置。菜单中的按下状态为用户提供了前后关联信息,而汉堡图标则使它变得隐晦。

>London-se

 id="toc_2">汉堡图标能做好什么?

鉴于汉堡图标被普遍厌恶,还导致一连串问题,为何它还随处可见呢?

以我的经验,原因当然在特定的年龄层里,汉堡图标近年来已经深得辨识度的精髓。驳斥它的研究往往是一年前或更早的,而一年对于互联网来说可是很长时间。

事实上,链接图标远比"链接"或"分享"更易辨识,但决定性的形式尚未显现出来。而汉堡图标却在各种不同设计中都保持了统一。

最重要的是,汉堡图标保持了它的初衷:它为我们节省了大量宝贵的屏幕空间资源。假如客户给你多如牛毛的东西,都要加到菜单中,那么把它们移除屏幕并给出链接,就是简单粗暴却非常有效的办法,可以为客户同样想要的内容腾出空间。

我得说汉堡图标在这个问题上,比其他解决方案都好,但也不尽然。还是应该说,汉堡图标没有其他解决方案那么糟糕。

id="toc_3">问题的根源

汉堡图标得到采用,还是因为设计师(更多时候是客户)没有完全遵循移动优先的设计方法。他们想要一个"常规"站点,却把它硬塞进外孙女的手机中。

汉堡图标的反对者往往用"菜单"二字代替它,他们这么做完全不得要领。不论是否形似,汉堡图标如今已经达到了它的含义,但用户理解这个按钮是干什么的,并没有解决最大的问题,它隐藏了导航,隐藏了用户的选择,这是相当严重的自残。

简单说,汉堡图标是一种象征,象征着我们在一心一意全方位拥抱移动优先的道路上,集体失败了。

>Ponomusic

 >Mccollcenter

 更好的解决办法

为了解决汉堡图标的问题,我们得接受一个现实,我们以往所知的网页已经不再管用了。移动网页的崛起,远非减少几栏、去掉一些沉重的图片文件这么简单。

不同于旧时代的网页,移动网页采用了一种不同的方式。移动网页生在专注于app的环境中,用户希望传统网页也有类似的时尚体验。

很著名的例子,Facebook的app将他们的汉堡图标改成了标签栏,结果显示转化率得到了提升。然而Facebook除了更换菜单设计,还做了意义重大得多的事情。近来他们发布了Messenger,了不起的地方在于,他们已经有了功能完善受人欢迎的app,他们本可以将信息功能整合进去。Facebook却拆分了这些功能,使每个app专注于自己的角色,便得到了两个简单的app,而非一个复杂的app。缩减功能导致了菜单项的减少,就不那么需要汉堡菜单了。

优秀的app都极为专注,他们通过远比网页严苛的用户测试进化。要打造app一样的体验,我们得简化网站,再简化,然后再多简化一点点。如果有必要,将建筑结构打散成可管理的小片,近似于迷你站点。当我们为用户展现一组简单的选择,复杂菜单的问题再也不会出现了。

使用汉堡图标就像在伤口上扎绷带:虽然把它包起来了,下面的伤口仍在。

我们只有完全拥抱移动优先的方式,不仅将它用于设计,也用于我们的内容和信息结构,汉堡菜单才会成为历史。

教程结束,以上就是解决汉堡图标的问题详细介绍,希望这篇教程对设计师朋友有一定的帮助。感谢大家的观看!

更多精彩内容其他人还在看

平面设计中色彩搭配技巧与理论分析

在做平面设计的时候,颜色搭配很重要,该怎么掌握色彩搭配技巧呢?下面我们就绕着「色相」这一变量展开,主要和大家一起分享有关色彩研究的专业术语、以及心理现象,需要的朋友可以参考下
收藏 0 赞 0 分享

LOGO设计中的常见误区和LOGO设计思路及流程全面解析

本教程将为大家全面解析LOGO设计中的常见误区和LOGO设计思路及流程,主要介绍LOGO设计中的一些常见套路和设计思路以及一些方法,理清思路,LOGO设计没有你想象的那么难
收藏 0 赞 0 分享

每个年轻平面设计师都需要知道的10件事

每个年轻平面设计师都需要知道的10件事分享给那些刚入门的新手设计师, 这10件事包括别让设计成为黑匣子,融入团队,提早获得反馈,负责到底等
收藏 0 赞 0 分享

淘宝活动页面设计思路 从0开始全面解析

淘宝活动页面设计思路,从0开始全面解析分享给脚本之家的各位平面设计学习者,内容主要分为什么样的页面算得上是活动页面,量身定制适合自己店铺的活动页面和案例解析三大部分
收藏 0 赞 0 分享

一个好的用户界面设计应该注意的75个原则

一个好的用户界面设计应该注意的75个原则分享给脚本之家的各位平面设计学习者,这些用户界面设计原则主要是1. 使用单栏布局代替多栏布局,2. 使用礼品诱惑代替生硬的推销,3. 合并重复的功能避免分散等等
收藏 0 赞 0 分享

可能毁了你内容的7个必知设计错误

一些设计错误可能会破坏你的内容,导致用户放弃继续停留在你的网站,或失去对你提供有用信息的信任感。如果你不及时修正可能很难恢复他们对你的信任,下面为大家介绍可能毁了你内容的7个必知设计错误,来看看吧
收藏 0 赞 0 分享

6种独特的网页导航设计模式分享

如果你的网站是更加偏向实验性的小网站,有趣而好玩的导航模式,反而更适宜于用户探索。不同的导航模式对于网站的影响不尽相同,针对不同的内容、不同的用户,你需要仔细挑选导航模式,下面为大家分享6种独特的网页导航设计模式,来看看吧
收藏 0 赞 0 分享

交互设计师如何说服产品经理取消底部的导航栏?

最近设计了一款产品,我将线框图给交互设计师,后来交互给我的原型与我之前给他的线框图差别很大,交互说从用户体验的角度应该这么设计,并坚持自己的想法,所以今天想要大家介绍交互设计师如何说服产品经理取消底部的导航栏方法,来看看吧
收藏 0 赞 0 分享

设计师必看:2017年设计师最应该掌握的设计方法

学习新事物永远都不晚,尤其是在设计领域。时时学习、进步,你将成为设计领域下一颗闪耀的新星。下面为大家介绍2017年设计师最应该掌握的设计方法,来看看吧
收藏 0 赞 0 分享

如何进行个性化设计呢?25个经典案例解析个性化设计的奥秘

如何进行个性化设计呢?Aarron Walter便掌握了这门艺术,他在Smashing杂志中谈论了个性化设计如何与用户和消费者产生持续联系,他强烈建议设计师“把个性融入设计的核心内涵中”,并分享了适用于产品和品牌的个性化设计技巧
收藏 0 赞 0 分享
查看更多