您现在的位置:首页 > 设计> 汉堡图标能否成为Menu的代名词?

汉堡图标能否成为Menu的代名词?

当网页和APP中很常见的Menu键被赋予了汉堡图标这样形象生动的名字后,似乎让这个小小的按钮变得有生命力起来。

2014年08月

设计

当网页和APP中很常见的Menu键被赋予了汉堡图标这样形象生动的名字后,似乎让这个小小的按钮变得有生命力起来。

汉堡图标其实在我们的浏览中完全不陌生,一直以来都是Menu键的专属图标,三条简短的小横线,却让设计师们使用至今。尽管也不乏许多设计师和客户对它意见颇多,但不可否认的是,只要用户一看到它,就马上能分别出这才是Menu链接的源头。

以下是AnyForWeb为大家搜集的一些汉堡图标设计,供大家欣赏参考。

1.第一个案例中的汉堡图标使用了半透明的阴影背景设计。如果缺少了这部分阴影,汉堡图标会显得比较单调,而且不太容易受到关注,甚至可能会被用户遗漏忽略。因此,也正是这些阴影引导着用户继续浏览页面。

2.选择一种暗沉的颜色、一种鲜艳的颜色是国外大背景网页设计的惯用手法,汉堡图标与网站按钮选用了同一种桃红色,俏皮的色彩让用户忍不住想要点击。从这个案例中可以学到,如果网页的整体色彩比较沉闷并且单一,一些小按钮和小零件用同一种颜色来搭配也不失为一个“偷懒”的好方法。

3.这个网站使用了侧边导航的设计,在一般情况下,汉堡图标的作用正是显示隐藏着的导航栏,这这个网站的创新点在于既拥有导航,又拥有汉堡图标,而这样的设计还是要视具体情况而定。这个案例如果缺少了侧边导航,将汉堡图标直接放在左上角,会让网站整体看起来空荡荡,有了导航栏反而更加饱满。

4.普通的汉堡图标会放在网页的左上角或右上角,而这个案例却将汉堡图标放在了右上靠中间的位置。虽然整个页面看起来还是比较空旷宽敞的,但是设计师似乎更热衷于将网页中的元素和内容舒适的集中在一个区域内。

5.Papertelevision的网站就相对传统的将表示导航菜单的汉堡图标置于网页右上角。虽然网页借用汉堡图标把菜单隐藏起来,但是仍然在顶部勾勒出了导航栏的形状区域,只是加深了图标下阴影的颜色。

6.这个案例中的汉堡图标采用了幽灵按钮的设计手法。为了不影响画面本身的感觉,简单的线框设计也许是最合适不过了。

7.加粗后的汉堡图标其实也没有什么特别之处,但却和网站整体的风格格外搭调。这个案例给了我们另一种灵感和启示,就算只是一个小小的汉堡图标,也需要与网站整体融洽的结合在一起。

8.这是一个APP中的两个页面,两个不同页面中的汉堡图标也呈现出了两种不同的状态。左边的图片是导航未展开时的状态,图标为横向;右边的图片是导航展开后的状态,图标转换成纵向。虽然只是这样很细微的一丝差别,但也确实能让用户感受到一种信息反馈的交互体验。

9.谁说汉堡图标只能放在角落里,下面这个APP案例就把菜单键直接设置成主角。汉堡图标在页面顶部中间的位置确实少见,但不可否认的确会令人眼前一亮。

10.在汉堡图标旁加入一些标记性的小圆点其实看起来会更加有一种项目Menu的感觉,就好像只是在汉堡中加了一些番茄片,但你会觉得它更有料。

有的设计师会抱怨汉堡图标的用途永远都只仅限于Menu,原因也许只是因为汉堡在大家心目中的印象实在太深刻了。

本文版权归伽然公司旗下AnyForWeb所有,转载请注明出处。

AnyForWeb定期通过伽然旗下对外知识与技能分享机构--伽然书院,发布Web相关趋势评论文章,涉及视觉、界面、交互等领域,了解更多动态请关注伽然书院公众号!

订阅

欢迎订阅Anyforweb UED
欢迎订阅Anyforweb UED

栏目推荐

栏目推荐
2017年全球网站设计趋势全预测

AnyForWeb为大家带来全新2017年全球网…

栏目推荐
从客户角度看web设计

本文讲述了一个设计师在做设计时的众多…

栏目推荐
网页会把你当成孩子一样给你讲故事

有情节的事物总能让人们更容易的记住,…

栏目推荐
不用担心网页逻辑太过凌乱,网格布局卷土…

网格布局的网页设计并不算什么颠覆式创…

栏目推荐
扔掉黄金比例,网页布局还能这样做!

曾经有人说过,“布局虽然只是内容的表…

栏目推荐
AnyForWeb分享:图文搭配,网页…

从过去到现在,设计师们总是对方位性的…

栏目推荐
用户体验设计PK战!脸书vs人人

脸书和人人对各自的用户群体都有着很大…

AnyFroWebUED  

版权所有 © 2009-2016  沪ICP备14026814号-10

 

 

返回

很抱歉!

您现在还没有开通阅读权限,如有疑问,请联系我们。

联系电话:021-52047186

返回