移动端下拉菜单交互

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

相关推荐

  • 作品集 | 交互设计大师的成长轨迹

    致奋斗的你:又是一年花开时,中公教育优就业送走一批批优质学员的同事,又迎来了一群渴望高薪就业,改变现状的U学员。优就业学员在朝九晚九的学习作息中、六大福利的助学保障中、高配的教学设备下、高标准的食宿环境下学习IT技能......相信中公教育的学员一定可以学有所成,实现高薪就业目标!下面,就随小U妹一起来看看近一期学员“小试牛刀”的作品吧:UI交互设计作品01、UI动效展示(部分)UI动效作品展示·《小球飞》UI动效作品展示·《大憨熊》0...

    2018-04-12
  • 如何应对「为什么用这个颜色/字体/按钮」的问题?

    作为一名设计师,被质疑简直是家常便饭。相信你们在日常工作中,一定被人问过:“对于这个点,你为什么这样做而不是那样?为什么选这个颜色而不是那个?”之类的问题。其实,这也是面试中的必问问题。乍看起来,确实有点难回答。但每一个问题,其实都有他的思考路线图。今天笔者就来谈谈,如何通过交互的四个维度来入手,巧妙地破解这个问题。你为什么要设计一个白色的登录按钮?为什么选这个字体?

    2017-05-15
  • app反馈信息的交互设计

    请戳“小白的交互设计”,关注我,么么哒。反馈的作用是帮助用户理解系统行为,合理的反馈就像两个用普通话交流的人之间的对话,互相可以轻易地理解,而糟糕的反馈就像是一个用普通话,一个用粤语的两个人之间的对话…

    2017-08-02
  • APP动效交互|切换动画设计

    功能性的动画微妙,清晰,逻辑清楚,能够减轻用户认知负担,建立更好的人机交互体验。而且,它还可以赋予界面生命力。

    2016-07-14
  • Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。

      摘要:Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。通过它,设备可以感知用户点击力度,再根据力度的不同调出相应的不同功能,让用户和设备能够进行更好的…

    2015-03-18
  • 饿了么UED开源设计框架提供下载设计组件、资源、交互文档

    推广:五丰 美仑达 赣南脐橙 【国家地理标志产品】供港央企品质保障,原产地直采,进口专业分选设备,品质始终如一,脆嫩香甜,味美多汁 #交互学堂##资源分享#这次开源的设计框架名为:Element Element,一套为开发…

    2016-11-03
  • 基于用户体验的性能测试:模拟个别的用户延迟(续)

    本周免费下载杂志:《保健与生活》共计12本,请点击下行红色文字链接获取下载地址杂志推荐《保健与生活》3.       在TestStudio中生成时间延迟使用Rational TestStudio的VuC语言,有很多方法可以生成时间延迟。对于如何使用Think_avg及相关的命令和参数来实现,Rational的文档和培训资料已经做了详细的说明,这里不做深入讨论,只做简要介绍。这个方法只有在Think_avg命令不在计时器(Timer)里...

    2018-02-01
  • 交互设计篇|经历一个产品从0到1我都学会了什么

    好的设计不仅能满足用户需求、提升易用性,还能弥补技术上的短板。在经过一个产品从0到1的实现后,对这一点感受的尤其深刻。下面列出几个我产品设计中的教训和收获。图书馆打印插队如果不给出理由则此行为被接受的概率为60%;如果给出一个理解则此行为被接受的概率为94%;甚至在解释原因时只提供“因为”而无实质原因的情况下,此行为被接受的概率竟然为“93%”。足见,“人就是单纯地喜欢做事有个理由”。那么,产品与用户“交流”时,就需要有个“理由”让用户看到自己行为操作与产品回应之间的解释,从而顺应操作规则从而更好的使用产品。

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

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

    2017-05-22
  • 逐渐兴起的对话式设计,你了解多少?

    对话式交互将逐渐改变人类的生活和习惯,未来的生活是怎样的正是我们所兴奋和期待的:)我以为使机器能与人沟通的关键是发展更好的对话系统。但我这想法并不对。成功的对话需要共通的知识和经验。它需要对四周环境、前后脉络、导致目前情况的历史背景以及当事人众多不同的目标和动机等都要有所领悟。现在我认为这正是当今科技的根本局限,这种局限阻碍了机器全面、拟人化地与人互动。人与人之间要建立共通的了解本来就很难,那我们如何寄望于机器建立这种关系?——唐纳德·A·诺曼

    2017-05-19