选择菜单栏是指用户可以通过菜单栏来选择需要进行的操作或者是选择需要查看的内容的页面，页面分类 全屏选择菜单页面 和 浮动页面 两大类，需要根据具体的使用场景选择合适的设计方式。
下图是一些选择菜单栏的常见方式：
对于选择菜单栏来说主要包含以下元素
- 文本
- 图标
- 图片
展示方式主要有以下2种情况
- 全屏／浮动列表展示
- 全屏／浮动卡片展示
它主要的交互方式有以下4种情况
- 从点击处展开
- 全屏展示
- 底部／顶部／右侧往屏幕中间滑动
- 浮在页面底部，滑动查看和选择
了解了主要特性，那么来看一下这些选择菜单栏是如何设计的-.-
| 全屏选择菜单页面
全屏选择菜单栏分为以下几种常见情况：
1. 全屏卡片
2. 全屏卡片+标签
3. 全屏标签页
4. 全屏列表页
1.全屏卡片
上图的全屏卡片为应用 ONE is all 和MONO上的选择菜单栏设计
- 何时使用：需要使用图片或者是卡片元素展示分类特性的，并且视觉冲击力较强的页面，展示分类内容至少一屏；
- 展示形式：整体为卡片展示，可以是照片这种卡片，也可能是采用内容分割的卡片；
- 交互方式：点出后出现全屏页面，有关闭键关闭此页面，或点击返回键返回；
2. 全屏卡片+标签
- 何时使用：需要展示分类有两个层级，如轻芒杂志中的「兴趣-游戏／电影／健身」等;
- 展示形式：整体为卡片+标签的形式展示，也可以是一级标题+二级标题来展示;
- 交互方式：点出后出现全屏页面，有关闭键关闭此页面；可以横向展示分类列表，亦可以纵向展示;
3. 全屏标签
- 何时使用：分类较多，分类名较短，并且只需要展示分类名即可的页面；
- 展示形式：全屏展示所有标签，点击选中标签，有单选标签和多选标签的区别；
- 交互方式：点出后出现全屏页面，有关闭键关闭此页面。对于单选标签，点击标签则进入到相应的页面，多选的则需要用户关闭；
4. 全屏列表
- 何时使用：分类较多，列表中需要展示图片、两个层级的文本，列表中包含除点击之外的其他操作；
- 展示形式：图片+文本纵向展示；
- 交互方式：点出后出现全屏页面，有关闭键关闭此页面；纵向展示内容，上下滑动可查看其他内容；
以上的是全屏菜单选择页面的一些设计方式，接下来主要是将浮动选择菜单栏页面的设计方式。
| 浮动选择菜单栏页面
常见分类：
1. 浮动卡片
2. 浮动小列表
3. 浮动大列表
4. 浮动列表卡片
5. 沉浸式列表
1. 浮动卡片
上面是 爱范儿 的选择tab菜单设计，其实这种设计很新颖，将所有内容呈现在tab中，很清晰明了
- 何时使用：展示内容比较少，并且需要将分类特性展示给用户的；
- 展示形式：卡片展示分类内容，卡片内容为实时的当前页面截图；
- 交互方式：点击相应按钮，在底部出现分类卡片，左右滑动选择分类页面；
2. 浮动小列表
上图主要是应用中的一些小浮动列表的案例
- 何时使用：选项较少，并且需要弹出选项对当前干扰比较小的情况下，一般使用弹出；
- 展示形式：整体为卡片展示，卡片中列表展示 icon+文本；
- 交互方式：从点击处弹出，点击其他区域列表消失；
3. 浮动大列表
上图为音乐和音频列APP的选择音频列表
- 何时使用：在内容比较多，并且文本相对较长时使用，如果内容长度超过最高高度，则可以通过「滑动」查看更多内容；此列表常用于音频列表；
- 展示形式：从底部弹出的展示列表，最后一行显示「关闭／取消」按钮，点击关闭；
- 交互方式：点击从底部弹出，可上下滑动查看内容；
4. 浮动列表卡片
上图为浮动列表卡片示例
浮动列表卡片种类较多，卡片有矩形、圆形和异性（主要为App图片）
- 何时使用：内容需要突出分类入口／功能入口特性；
- 展示形式：多为分格展示内容，每个格子展示响应的入口；
- 交互方式：顶部／底部弹出／弹出后显示功能入口或分类入口，点击进入；
5. 沉浸式列表
上图为沉浸式列表举例
- 何时使用：用于内容较多，且操作复杂的界面，可能一个列表中包含的操作有多种；
- 展示形式： 纵向排版，icon+文本、文本+开关、纯文本等；
- 交互方式：从左边弹出，或者是从左边连接着前一个页面滑出两种方式；
| 总结
对于选择菜单列表来说，它们有各自的使用条件和限制，需要根据使用场景来判断是否使用哪一种展示方式。例如对于音频列表来说更多使用的是浮动大列表；而对于点某处后需要弹出很少的选择分类，则可以使用浮动小列表；而列表中需要比较复杂的操作的，包括开关、跳转、退出等操作的，建议使用全屏页面或者使用沉浸式列表的方式。使用的时候需要多思考。
今天的分享就到这里啦，如果您喜欢就长按扫描下方二维码关注我吧
- - End - -
更多精选文章
电视端设计入门，焦点知识全面了解一下
浅谈电视端的卡片设计
火遍设计界的2.5D插画到底是何方神圣？
这篇文章，帮你彻底搞懂微交互
纪念碑谷灵感之源 - 荷兰艺术家M·C·埃舍尔作品欣赏
