移动端下拉菜单交互

通常在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

相关推荐

  • 用户体验要素(上)

    我们天天挂在嘴边的用户体验为什么如此重要?到底什么才是用户体验?在繁忙的生活中,从你起床关闭闹钟到洗脸刷牙再到坐车去公司上班,在这个过程中,和你关联的东西,闹钟、牙刷、牙膏、公交车、地铁等,如果这一系列的事物都没有注重用户体验,早上起床闹钟响了没起来,急急忙忙去坐地铁到公司上班,地铁标识不清晰,你坐反了,很晚到公司,接着被领导大骂一通,灰扑扑的坐到座位上,然而你这一天才刚刚开始,这么糟心的早上让你一天都不顺利。如果没有好的用户体验,你每...

    2018-04-25
  • 在网页设计中如何少让用户费脑筋,保持操作流畅

    除了引导用户,还要减少他们的认知流程,以保持流畅状态。千万别把计算这种事情丢给用户,让计算机来处理。

    2017-05-23
  • 有哪些常见的移动端UX设计误区需要规避?

    我们手机里面装满了各种各样的APP。安装这些应用,我们的初衷是让我们的生活更加便捷。但是当这些应用无法满足用户的需求的时候,用户自然而然会离开,并寻求更好的解决方案。一个成功的应用包含有诸多元素,而其中的用户体验设计 则起到了决定性的作用。在残酷的竞争中,用户体验 往往是决定成败的核心。

    2017-05-22
  • 蘑菇街App改版设计总结

    新版app在短短的一个多月内,完成了从方向调整到开发上线的全过程,而设计在其中仅仅只占一周多,这也是互联网公司面临的共性难题。为了配合产品小步快跑的策略,我们采用敏捷设计的方法:快速地进行竞品分析,根据低保真原型一边进行业务细化和方案讨论,一边进行视觉风格的设计。

    2017-05-12
  • 阿里干货!如何使用通用研究思维做用户研究?

    在开始讲述之前,先提两个业内用研人士经常会被问到的问题,①为什么要做用研?②用研能为业务做些什么呢?为了回答这两个问题,我将自己从事分析行业多年的战略规划法、业务分析法、用户研究方法等贯通起来,形成了以下的一些方式方法,即通用思维在用户研究中的应用。方法无边界,融会贯通将使方法更加行之有效,希望以下内容能给大家一些启发和思考。

    2017-05-29
  • 用户体验交付中心,最美不过回家路

    众意,坚持为中国高品质整装奋斗不歇!长按识别二维码即可预约体验爆款福利已经在向你挥手了戳阅读原文,报名预约抢豪礼!

    2018-03-12
  • 【用户体验.春节特辑】一本相册(总第269期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第269期我的发小蔡廷是我们这座江南古镇的一位”达人”,这并非他有什么才气,而是他的行为举止与这座千年古镇淳朴温和的民风相违和。天气刚有点热他便剃了个秃瓢,赤裸着上身,永远穿着条军裤,再热也不换装。腹部有两条贯腹的伤疤,象两条粗大赤红的蜈蚣僵卧其上。他从不拉帮结派,依附于任何人,不欺行霸市,不欺凌老弱,但是蛮不讲理。他...

    2018-02-20
  • 交互设计用户心理学

      交互设计是个跨学科专业,其中,心理学便是其中很重要的一个部分。所以,如果你不想继续仅凭直觉和死记硬背高大上的理论原则来从事交互设计,如果你想成为优秀的交互设计师,学习一定的心理学将是很有帮助也是…

    2015-06-13
  • 用户体验和可用性之间的联系和差异,你都知道吗

    可用性涉及到产品的有效性,效率和满意度,用户可以尽可能简单那地完成某些任务。另一方面,用户体验涉及到用户和网站互动上更为广泛的领域中的方方面面。作者|Amy Smith源自|优设网最近几年来,用户体验设计逐步成为了目前设计圈中广泛认同的重要设计环节。而“可用性”这一词也作为改善用户体验设计的重要度量而发挥着无与伦比的作用。于是乎,除了“用户体验设计师”这一职位,在欧美的产品和设计团队当中还诞生了“可用性工程师”这样的专业职位。另一方面,...

    2018-03-06
  • 鱼和熊掌——关于产品更注重功能还是更关注体验?

    “你从来不会因为产品功能而赢得用户,但他们会因体验慕名而来——关于快速使用最小可行化产品MVP(注:国内通称为‘试错’)快速进入市场指南”——by Lee Dale 基于这样一个背景,你需要重新考虑你的产品设计——摒弃罗列功…

    2015-07-18