恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
9种方法设计选择菜单栏
0.0°
2018-05-16 原创文章 经验/观点 举报 12475 42 34 2

文章主要总结和分享手机App选择菜单栏的9中设计方法

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

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

Image title

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

- 文本

- 图标

- 图片


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

- 全屏/浮动列表展示

- 全屏/浮动卡片展示


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

- 从点击处展开

- 全屏展示

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

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


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


全屏选择菜单页面

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

1. 全屏卡片

2. 全屏卡片+标签

3. 全屏标签页

4. 全屏列表页



1.全屏卡片

Image title

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


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

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

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



2. 全屏卡片+标签

Image title


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

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

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



3. 全屏标签

Image title

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


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

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

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



4. 全屏列表

Image title

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


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

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

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


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


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

1. 浮动卡片

2. 浮动小列表

3. 浮动大列表

4. 浮动列表卡片

5. 沉浸式列表


1. 浮动卡片

Image title

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


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

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

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



2. 浮动小列表

Image title

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


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

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

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



3. 浮动大列表

Image title

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


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

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

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



4. 浮动列表卡片

Image title

上图为浮动列表卡片示例


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

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

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

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



5. 沉浸式列表

Image title

上图为沉浸式列表举例


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

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

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



总结

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


ps:如果觉得文章对你有帮助的话,请点赞哦~





更新:2018-05-16

收藏

42人已收藏

一戈何处

一条有梦想的咸鱼

  • 13

    作品

  • 33

    粉丝

  • 12

    关注

  • TV端如何做好反馈?
  • 电视端设计入门,焦点知识不可少
  • 智能电视-语音查找影片设计
  • 浅谈电视端卡片设计

    猜你喜欢

      2018-05-16 原创文章 经验/观点 举报 12475 42 34 2

      9种方法设计选择菜单栏

      0.0°

      你确定要举报9种方法设计选择菜单栏

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年05月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      34
      42
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录