APP推广合作
联系“鸟哥笔记小乔”
这些不同类型的菜单图标和用法,我做了个总结分析!
2021-09-01

大家好,我是Clippp。今天为大家分享的是「菜单导航」。一个简单的汉堡菜单就可以包括多种不同的样式,可能有的样式甚至没有官方的名称,但因为样式的差异在功能上这些菜单也会出现差异性。


我们可以通过分析这些样式,来思考不同的样式代表着怎样的设计含义和设计目的,不能因为简单常见而忽视了功能的内核。

1.汉堡菜单

鸟哥笔记,产品设计,Clippp,功能设计,导航栏,标签栏,布局,设计


关键词:横条、多个菜单选项


这个图标的样式简洁易懂,通常位于网页和App的上下角,用来告知用户这个按钮之外还有更多内容可以探索。


当产品有多个菜单选项时,考虑使用汉堡图标来显示,但尽可能避免在桌面视图中使用。

2.垂直三点式菜单

鸟哥笔记,产品设计,Clippp,功能设计,导航栏,标签栏,布局,设计


关键词:垂直、内嵌菜单


通常位于屏幕或窗口的右上角或顶部,是用于打开带有附加选项的图标,打开的内容往往是一个较小的内嵌菜单而不是整个全新的页面。

3.水平三点式菜单

鸟哥笔记,产品设计,Clippp,功能设计,导航栏,标签栏,布局,设计


关键词:水平、内嵌菜单、web


水平三点式菜单同样常位于屏幕或窗口的右上角,用于打开菜单或显示相关项的操作。


因为图标样式是水平的,所以更容易在web上或者在表格等水平方向中使用。

4.九宫格菜单 

鸟哥笔记,产品设计,Clippp,功能设计,导航栏,标签栏,布局,设计


关键词:子分类、子功能


九宫格菜单通常用于打开同一产品中包含不同子产品或子功能,可以在它们之间快速切换,此图标常位于产品主页的右上角。

5.过滤式菜单

鸟哥笔记,产品设计,Clippp,功能设计,导航栏,标签栏,布局,设计


关键词:过滤、排序


过滤式菜单由三行不同长度的线段水平叠放而成,是最广泛使用的过滤符号。可以将过滤式菜单与“排序方式”选项结合使用,或者与全局过滤器结合使用。

6.汉堡菜单变体

鸟哥笔记,产品设计,Clippp,功能设计,导航栏,标签栏,布局,设计


关键词:样式特殊、时尚感更强


作为汉堡图标的替代品,与显示列表菜单的目的相同吗,但是这些样式我们平常见的可能会比较少,更常用在充满现代感、时尚感和艺术感的网站上。


鸟哥笔记,产品设计,Clippp,功能设计,导航栏,标签栏,布局,设计

最后

不同的样式可能代表着截然不同的设计目的,常思考这些小而精的细节,是保证产品体验提升的关键。


参考:uxplanet.org/choose-correct-menu-icon-for-your-navigation-7ffc22df80a

-END-

Clippp
分享到朋友圈
收藏
收藏
评分
评论

综合评分:

我的评分

参与评论(0)

评论规则

暂无评论,快来抢沙发吧~
登录后参与评论
发布评论

鸟哥笔记限定畅饮吸管杯600ml
超大容量,让你爱上喝水
2000羽毛
立即兑换
【新品】办公/外出两用静音充电小电扇
办公桌必备小电扇!
2000羽毛
立即兑换
超级nice便签砖
超级超级超级奈斯!
1000羽毛
立即兑换
Clippp
Clippp
每周定期分享关于产品、交互、UI视觉上的设计思考。有原创文章,有精选视频,欢迎来撩~
确认要消耗 0羽毛购买
这些不同类型的菜单图标和用法,我做了个总结分析!吗?
考虑一下
很遗憾,羽毛不足
我知道了

为了促进广大用户对鸟哥笔记网站的干货文章做出更加客观、真实、优质的评论,为其他读者在学习干货时提供参考,特地制定本评论规则。

一、什么样的评论内容会被通过

15字以上的、基于文章内容的优质评论。

二、什么样的评论内容不会被通过

1、15字以下的评论;
2、“已阅”,“1”,“11”,”666”,“学习”,“学习了”等明显划水的内容;
3、重复评论,即在多篇文章下面发布同样的内容;
4、带广告性质的内容(含网址、电话、微信等);
5、评论内容与本文无关的;
6、带诋毁,辱骂,色情,赌博、暴力等不符合社会主义核心价值观的内容,及一切法律法规不允许的内容。

最后,你的评论在审核通过的同时,还可以获得5羽毛的奖励,羽毛可在 "羽毛精选" 兑换各类小礼品哦~

我知道了
恭喜你~答对了
+5羽毛
下一次认真读哦
成功推荐给其他人
+ 10羽毛
评论成功且进入审核!审核通过后,您将获得10羽毛的奖励。分享本文章给好友阅读最高再得15羽毛~
(羽毛可至 "羽毛精选" 兑换礼品)
好友微信扫一扫
复制链接