9种方法设计选择菜单栏经验/观点

选择菜单栏是指用户可以通过菜单栏来选择需要进行的操作或者是选择需要查看的内容的页面,页面分类全屏选择菜单页面和浮动页面两大类,需要根据具体的使用场景选择合适的设计方式。

下图是一些选择菜单栏的常见方式:

对于选择菜单栏来说主要包含以下元素

-文本

-图标

-图片

展示方式主要有以下2种情况

-全屏/浮动列表展示

-全屏/浮动卡片展示

它主要的交互方式有以下4种情况

-从点击处展开

-全屏展示

-底部/顶部/右侧往屏幕中间滑动

-浮在页面底部,滑动查看和选择

了解了主要特性,那么来看一下这些选择菜单栏是如何设计的-.-

全屏选择菜单页面

全屏选择菜单栏分为以下几种常见情况:

1.全屏卡片

2.全屏卡片+标签

3.全屏标签页

4.全屏列表页

上图的全屏卡片为应用ONEisall和MONO上的选择菜单栏设计

-何时使用:需要使用图片或者是卡片元素展示分类特性的,并且视觉冲击力较强的页面,展示分类内容至少一屏;

-展示形式:整体为卡片展示,可以是照片这种卡片,也可能是采用内容分割的卡片;

-交互方式:点出后出现全屏页面,有关闭键关闭此页面,或点击返回键返回;

-何时使用:需要展示分类有两个层级,如轻芒杂志中的「兴趣-游戏/电影/健身」等;

-展示形式:整体为卡片+标签的形式展示,也可以是一级标题+二级标题来展示;

-交互方式:点出后出现全屏页面,有关闭键关闭此页面;可以横向展示分类列表,亦可以纵向展示;

3.全屏标签

上图的常见的全屏标签选择菜单栏设计

-何时使用:分类较多,分类名较短,并且只需要展示分类名即可的页面;

-展示形式:全屏展示所有标签,点击选中标签,有单选标签和多选标签的区别;

-交互方式:点出后出现全屏页面,有关闭键关闭此页面。对于单选标签,点击标签则进入到相应的页面,多选的则需要用户关闭;

4.全屏列表

以上是开眼APP的置顶菜单选项页面,列表展示方式,右边可移动操作

-何时使用:分类较多,列表中需要展示图片、两个层级的文本,列表中包含除点击之外的其他操作;

-展示形式:图片+文本纵向展示;

-交互方式:点出后出现全屏页面,有关闭键关闭此页面;纵向展示内容,上下滑动可查看其他内容;

以上的是全屏菜单选择页面的一些设计方式,接下来主要是将浮动选择菜单栏页面的设计方式。

浮动选择菜单栏页面分为以下几种常见情况:

1.浮动卡片

2.浮动小列表

3.浮动大列表

4.浮动列表卡片

5.沉浸式列表

上面是爱范儿的选择tab菜单设计,其实这种设计很新颖,将所有内容呈现在tab中,很清晰明了

-何时使用:展示内容比较少,并且需要将分类特性展示给用户的;

-展示形式:卡片展示分类内容,卡片内容为实时的当前页面截图;

-交互方式:点击相应按钮,在底部出现分类卡片,左右滑动选择分类页面;

上图主要是应用中的一些小浮动列表的案例

-何时使用:选项较少,并且需要弹出选项对当前干扰比较小的情况下,一般使用弹出;

-展示形式:整体为卡片展示,卡片中列表展示icon+文本;

-交互方式:从点击处弹出,点击其他区域列表消失;

上图为音乐和音频列APP的选择音频列表

-何时使用:在内容比较多,并且文本相对较长时使用,如果内容长度超过最高高度,则可以通过「滑动」查看更多内容;此列表常用于音频列表;

-展示形式:从底部弹出的展示列表,最后一行显示「关闭/取消」按钮,点击关闭;

-交互方式:点击从底部弹出,可上下滑动查看内容;

上图为浮动列表卡片示例

浮动列表卡片种类较多,卡片有矩形、圆形和异性(主要为App图片)

-何时使用:内容需要突出分类入口/功能入口特性;

-展示形式:多为分格展示内容,每个格子展示响应的入口;

-交互方式:顶部/底部弹出/弹出后显示功能入口或分类入口,点击进入;

上图为沉浸式列表举例

-何时使用:用于内容较多,且操作复杂的界面,可能一个列表中包含的操作有多种;

-展示形式:纵向排版,icon+文本、文本+开关、纯文本等;

-交互方式:从左边弹出,或者是从左边连接着前一个页面滑出两种方式;

总结

对于选择菜单列表来说,它们有各自的使用条件和限制,需要根据使用场景来判断是否使用哪一种展示方式。例如对于音频列表来说更多使用的是浮动大列表;而对于点某处后需要弹出很少的选择分类,则可以使用浮动小列表;而列表中需要比较复杂的操作的,包括开关、跳转、退出等操作的,建议使用全屏页面或者使用沉浸式列表的方式。使用的时候需要多思考。

THE END
1.缤纷美食,尽在菜单——菜单设计攻略表格的下拉菜单怎么弄亲爱的美食爱好者们,你是否曾为了一顿美味的晚餐而纠结不已?是否曾为找不到一家好餐厅而苦恼?我将为大家分享一份菜单设计的攻略,让你轻松打造出令人垂涎三尺的美食菜单。 菜单设计原则 1、简洁明了:菜单的设计应该简洁明了,让顾客一眼就能看到主要菜品,避免使用过于花哨的装饰和字体,以免分散顾客的注意力。 https://www.coffee.cn/xican/post/356462.html
2.可能比门头设计还重要的事——菜单设计四、菜单平面设计 社群入口:餐饮创业新兵连 工作微信:kangjian3369 公众号:小生意人康健,下图这么牛的内容,社群里还有1000条 关于门头的重要性,我们已经对之前的服务案例,用完整的方法论进行了比较深入的阐述。 这一讲我们来聊一个新话题——菜单设计。 https://zhuanlan.zhihu.com/p/488344120
3.餐厅菜单设计流程和方法餐厅菜单设计流程和方法 人气:1701 视频大小:172kb 文件格式:doc所属类目:前厅管理 4吃吃币点击下载下载APP观看 温馨提示:本资源只支持下载, 不支持在线预览如何设计好菜单呢?本文《餐厅菜单设计流程和方法》将通过以下几部分,来介绍如何设计餐厅菜单和餐厅菜谱设计流程. http://www.6eat.com/managerSource/detail?id=2981
4.高阶选择菜单设计的四个妙招,实用技巧教程!但这些并不意味着你应该在界面设计中避免使用它们,选择菜单之所以容易产生诸多问题,反而是因为设计师并没有在合适的情况下以合适的方法加以运用。 到底是什么让设计有好有坏? 好的设计无非就是让最合适的交互方式出现在了最合适的地方,就比如当你让用户做出填写选择的同时,也提供了恰当的操作界面,而记住,“恰当”的https://www.uishe.cn/153350.html
5.酒店菜单ppt设计模板教案怎么写?酒店菜单ppt设计模板制作方法酒店菜单ppt设计模板制作方法 本文介绍了如何根据酒店菜单PPT设计模板制作一份完美的酒店菜单PPT,包括选择模板、添加品牌元素、添加菜品、布局和排版等方面。 酒店菜单PPT设计模板是酒店展示自己特色美食的重要工具,如何制作一份专业、精美的酒店菜单PPT是每个酒店都需要思考的问题。本文将为大家介绍如何根据酒店菜单PPThttp://www.pptjia.com/Powerpoint/sheji/120238.html
6.小菜单,大学问,菜单背后都蕴含着哪些经济学和美学知识?在2011-2012年,上海的餐饮企业走在前列,一个菜单的诞生要经历拍摄、打印、排版、装订等过程,行业典范也不再拘泥于大董,设计师对菜单设计的理解也越来越深。 从2011年开始,北京的菜单首次迎来百家争鸣,小南国竹签式的菜单样式让人眼前一亮,菜单的设计越来越考究、独特,轻薄柔软的质地开始取代传统的大部头菜单。 https://www.iyiou.com/news/2019022893623
7.Creo2.0二次开发技术在空气压缩机三维参数化设计中的应用另一种是与其他参数相关的非驱动参数,称为全局参数。参数化程序设计采用的是第一种设计参数,以驱动三维模型的再生,建立设计参数和三维模型的尺寸变量的关联关系可以利用Creo的relation功能创建关系式实现。 2.1 菜单栏菜单设计 Croe系统的菜单主要包括菜单栏菜单和菜单管理器菜单。在Creo/Toolkit中,用户可以创建新的菜单https://articles.e-works.net.cn/cad/article137125.htm
8.平面设计学习方法有哪些五、印刷工艺:印刷种类/印刷设备种类/常识/纸张开度/四色印刷/专色印刷/网点线数/角度/纸张克重/出血/套印/拼版的操作方法与注意事项:印后工艺:烫金/覆膜/上光UV/胶/膜切知识。印刷流程:设计样稿/CMYK成稿/校对/菲林/印刷。介绍实际工作中的喷绘工艺知识、喷绘写真制作流程、电脑喷绘质量的主要因素以及实际工作中影https://www.yjbys.com/edu/pingmiansheji/415135.html
9.VB程序设计辽宁科技学院掌握用户自定义对话框的使用方法;掌握菜单设计方法。 了解通用对话框控件的设计方法。 2、教学内容 第一节对话框 知识要点:了解对话框的种类;理解预定义对话框;掌握激活通用对话框控件的方法有Action属性的设置和使用Show方法两种 第二节菜单设计 知识要点:了解菜单编辑器;理解通过菜单编辑器的设计建立菜单;掌握菜单功能https://www.icourse163.org/spoc/course/-1454433169
10.现代设计方法与应用教学课件作者房亚东习题答案.docx现代设计方法与应用 教学课件 作者 房亚东 习题答案.docx,第1章 1-1试述设计的含义,产品设计具有哪些特征? 答:设计有广义、狭义之分,狭义的设计是指完成满足用户功能需求的图纸和技术文档制定过程,目前大多数产品的设计皆属于此。我国曾在若干重大工程实践中行之有效https://max.book118.com/html/2019/0705/5144311203002102.shtm
11.Windows7菜单(设计基础知识)此设计指南是为 Windows 7 创建的,尚未针对较新版本的 Windows 进行更新。 大部分指南原则上仍然适用,但演示和示例并不反映我们 当前的设计指南。 菜单是当前上下文中可供用户使用的命令或选项的分层列表。 下拉菜单是鼠标单击或悬停时按需显示的菜单。 它们通常隐藏在视图中,因此是节省屏幕空间的有效方法。 子菜单或https://msdn.microsoft.com/en-us/library/dn742392.aspx
12.第三阶段实战(三)——菜单管理功能设计与实现管理系统菜单模块设计菜单管理页面的加载过程,其时序分析如图 2.2 服务端实现 2.2.1 Controller 实现 业务描述与设计实现 基于菜单管理的请求业务,在 PageController 中添加 doMenuUI 方法,用于返回菜 单列表页面。 关键代码设计与实现 第一步:在 PageController 中定义返回菜单列表的方法。代码如下: https://blog.csdn.net/weixin_52856068/article/details/112095375
13.外卖满减&折扣玩法大全(万字长文,先mark再看)一款商品如果被上成折扣后,就不会在下面的菜单分类中出现了,所以我们的选择需要慎重,很多商家把热销商品上完折扣后,会发现下面的菜单分类变得冷冷清清了,仅只有几款低销量产品供用户凑满减。所以为了避免满减成为鸡肋,我们折扣有以下两种设计方法: 1全单品折扣:折扣商品控制在15个左右(具体要看店铺sku数量)。1-2https://www.meipian.cn/367gacjd