汉堡菜单的使用注意事项

本文主要翻译自“Don't Make These Mobile Menu Mistakes”

汉堡三线图标(又称抽屉)

“三条杠”的汉堡菜单图标是现在相当常用的导航方式。现在主要流行的使用方式有两种,一种是path的打开侧边栏,如下图。

    

另一种是新浪微博的菜单。

那么在使用汉堡图标时要注意些什么呢

要:告诉你的用户从哪里开始

Buckle向新用户标识出了菜单按键,并很好的吸引了他们的注意力。尽管用户不知道按钮后面是什么,但他们知道这是继续体验的一个好的开始,之后他们会发现汉堡菜单通向了分类导航。

不要:让汉堡菜单和logo混淆

下面几个的汉堡菜单看起来像是logo

不要:大量留白

下图中的图片会吸引人的视线注意,落单靠右的汉堡菜单非常不起眼

要:将汉堡图标和其他导航按钮放在一起

归组
常用的:将汉堡菜单和搜索放在一起

放置汉堡按钮时要注意一些习惯用法。

e-bag将汉堡按钮放在最右上角,但在惯例里用户会在这个位置寻找登录和注册。

                               

将汉堡按钮放在搜索框左边更好,因为一般在左边展开菜单

要:标识你的按钮

在可行的情况下标识你的按钮



直接标注menu

最后,原文写于2013年,因此关于一些习俗、惯例方面的设计并不完全适用于现在的设计。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 47,032评论 22 665
  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 26,499评论 2 237
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,331评论 4 61
  • 身上这三穴能让皮肤水嫩光滑! 随着年龄的增长和压力加大, 皮肤失去光泽,干燥粗糙, 除了食疗和护肤品之外, 不妨常...
    陈艺文_有爱阅读 1,670评论 0 1
  • 很巧今天在看季羡林先生的《季羡林谈人生》里面刚好提到关于隔膜。“我们平常所谓的‘隔膜’是指情意不相通,彼此不了解。...
    流氓文氓阅读 3,089评论 0 0