移动端下拉菜单交互

通常在PC上常出现的下拉菜单,在移动端上都是用什么交互来实现的?将最近项目里碰到的情况总结一下。

1. 层级设计,以iOS为代表

-9-9-90-

iOS系统日历
  • 是目前最常见的一种做法,外露设置名称和默认设置项,将全部设置内容放在下一层。
  • 节约垂直空间,不干扰当前界面其他内容。可以很好兼容单选、多选等多种情况。作为一个完整的界面,可以容纳的内容比较多。
  • 但增加一个层级,就意味着有进入和返回两步操作。尤其是返回大多在界面左上角,随着手机屏幕越来越大,采用这种方式又没有手势右滑返回还是挺难用的。

我一直觉得,将层级设计用的风生水起的就是微信。基本上一级的四个tab都是层级的世界。

2. 弹窗设计,以Android为代表

-7-7-70-

Google日历
  • 选择项作为临时弹窗出现在界面中,单选的话,点一下弹框自动消失,多选的话点击完成消失。
  • 弹窗是一个在移动端上容易受鄙视的交互,但实际使用下来,google把它做得挺美挺实用的。 当只有较少如个位数的设置项时,实际操作体验比层级式的好很多,会很同意“一个弹框能搞定的事实在不需要再新起一个层级”。但这个交互目前看很少人采用,Android的设计语言规范比起iOS还是弱势了许多。
  • 但当内容一旦多起来,这个小弹框就会有点不堪重负,还会出现弹窗上需要再弹窗的尴尬局面。

3. 下拉菜单

-8-8-80-

Google日历叠叠乐
  • 就是类似PC的下拉菜单,这样少见的设计,被发现于刚刚说google那个弹框上又有弹框的情况下。但再一次实际使用效果没想象中差,如果忽略它叠叠乐的感觉,和在移动端点击菜单的弹出菜单差不多。
  • 但总的来说,还是一个奇怪的操作。

4. 嵌入式自动伸缩(这个名字不好起)

-6-6-60-

这个设计叫滚筒
  • 选项在当前层级界面展现,把其他内容往下挤,完成选择后自动收起。
  • 也是一个避免了进入新层级的交互。iOS里的时间选择器经常会用这种方法出现。
  • 坏处是对当前界面影响较大,进出场界面大幅变动。同时嵌入式给人不稳定不安全的感觉,好像一不小心碰了别处这些选项就消失了。尤其是选项较多还需要上下滑动的情况。我觉得这种方式使用于选择项很少,且当前层级内容本身也简洁的情况。

5. 选择内容平铺出来

  • 好处当然是所需操作最少,只需要勾选一个操作,坏处也很明显,太占地儿。一般情况下很少见,除非本身这些选项就是核心内容的情况,比如调研问卷。最常见于选择性别时的男女选项。
  • 没有截图

文/初三_RR(简书作者)
原文链接:http://www.jianshu.com/p/50438669330b#

以上是原作者在实际案例中碰到的移动端下拉菜单交互方式,欢迎大家在文章、woshiue微信、@imaue微博中讨论~

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/13388/

(0)
TinadminTinadmin
上一篇 2016-03-17
下一篇 2016-03-23

相关推荐

  • 2016天猫双11背后的品牌故事:全民剁手“All in one”

    2016 双11,“All in 1” 主标识,意为“精彩不止一点”。让我们随着阿里小编一起了解2016天猫双11背后的品牌故事。All in 1!将全平台、全品牌、全球融合到一点,迸发出更精彩的世界!

    2017-05-17
  • Day 5 | 关于 [交互设计] 的一些思考

    你知道坚持做一件事的动力是什么吗?除去喜欢,那应该就是大家的反馈与交流。我不会分享干货,也没有能力分享干货,只是觉得有一个平台能够表达自己的思考与想法,并能够和大家交流,这样成长很快不是吗?坚持了几天写完个人思考的文章后,收到很多回复,特别感动的就是收到特别认真的回复hhh,比如:有人问了我一句:交互设计是做什么的呀?其实这个时候自己脑子里飘过很多词,什么用户体验,用户研究啊,UX,UED啊,使用流程啊,人机交互啊,操作逻辑啊等等,就是...

    2018-04-26
  • 分享:神级广告,100人同时交换名片~

    100人如何同时交换名片?

    IxD案例 2016-06-16
  • 不仅要漂亮:看图像如何引导用户体验!

    俗话说得好,“一图胜千言”。图片不仅要漂亮,还要够意思!

    2017-05-08
  • 从逻辑层、感官层与知觉层,讲述体验设计的表和里

    什么是合格靠谱的体验设计?在逻辑层讲一个通顺的故事。什么是触动人心的体验设计?在感官层唤起人的体感记忆。什么是经典不衰的体验设计?在知觉层建立起认同和反思。你的设计逻辑性和方法运用很强大,很擅长做工具型的产品设计,但在设计的创新性和情感体验上还需要进一步加强。任何游戏化的设计都必须认识到:外在奖励会显著降低玩家的内在动机。游戏化的经验很简单:不要盲目地将外在动机附着在内在动机上。

    2017-05-13
  • 不可思议!VR虚拟现实的第一个盈利领域竟是A 片

    [alert_info] 据预测,虚拟现实色情产业到 2025 年将达到 10 亿美元。去买个虚拟现实头盔来看黄片吧。 网友评论: 太污了 我没法看下去了…… [/alert_info] 现在的虚拟现实产业就像打了鸡血一样。当你带上虚拟现实头…

    2016-01-24
  • 交互译文—清晰度,可读性和可理解性:让用户阅读你的文章

    所谓成本是指:阅读你的文字所带来的长时间、理解内容带来的困惑、混乱的排版所带来的负面情绪等。
    所谓收益是指:阅读你的文字能让我获得的信息内容和质量,以及获得的积极情绪。

    2017-05-31
  • 【用户体验】和路通X1真实详细评测——智能车时代的钥匙

    点击蓝字关注这个神奇的公众号~中国移动和路通智能后视镜的项目已经开展了一段时间,这期间收到了多位客户的体验反馈,今天,小编整理了一些产品体验测评分享给大家,从使用者的角度,让大家对中移动智能后视镜有更加深刻的了解!用户体验和路通X1真实详细评测——智能车时代的钥匙很荣幸从天津蜂享信息技术有限公司,购买了一台和路通X1智能后视镜,并进行装车体验。感谢中国移动对智能出行的重视与执着。目前智能后视镜的市场方兴未艾,市场上智能后视镜产品如雨后春...

    2018-02-05
  • 别再浪费时间了!如何从细节上真正节省用户的时间

    本文转自:优设网 原文翻译:阿布 我们的用户是很珍惜时间的,我们也不应该随意浪费。在每个项目中都问自己两个问题:“我们是在消耗用户的时间来节省自己的时间吗?”“在这里要如何节省用户的时间?”在西方社会中,…

    交互设计 2014-10-20
  • Axure网页Banner大集合、Banner模板、京东Banner...完整版rp源文件下载

    网页Banner大集合,banner模板、天猫banner、拉勾banner、严选banner...已发布在产品大牛http://www.pmdaniu.com/rp/detail/54529只需完成以下2个任务,即可免费拿到完整版RP源文件:1、打开上方链接地址:在该页面中点赞、下载、转存、好评;2、长按下方二维码,并关注“亮亮原型”微信公众号;最后:将完成的任务截图,发送至QQ邮箱:653390398@qq.com邮件标题请使用“网...

    2018-04-02