移动端下拉菜单交互

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

相关推荐

  • 小而美的过场-视觉设计

    有些网站无论在内容,可用性,设计或者功能等方面胜人一筹,其取胜之道在于交互和动效的细节上。在这里通过各种模型和大家分享一些案例,并分析为什么这些简单的方式能产生让人难忘的效果。   我们常常会用Pho…

    2014-09-20
  • 真诚的用户体验设计

    不知道身为「用户体验设计师(UX Designer)」的诸位是否也有过和我一样的困惑:初入行时兴冲冲觉得自己就是那个为一切产品用户体验问题负责的「真命天子」,积极主动去搜集反馈访谈用户,可当真正卷起袖子打算为解决这些「体验问题」大干一场的时候,却发现有些无从下手。

    2017-05-26
  • 这3种移动端登录的交互方式,孰优孰劣?

    登录注册的界面看起来很简单,在交互上却有很多值得思考的地方。现在我们选以下三种较有代表性的登录方式来比较和小结一下。

    2017-05-26
  • 你以为的交互,其实都有所出入

    任何职业的学习都是没有尽头的,只有越学越多,才能提高你的竞争力。多学各种知识才是王道。

    2017-05-21
  • BRD、MRD 和 PRD 之间的区别与联系有哪些

    今天看到一篇讲述产品设计中几种文档的文章(一个老外的blog,Michael on Product Management & Marketing),感觉很好,结合工作的实际整理一下。按照那篇文章的思路,从产品的抽象到具体主要产出的文档有BRD…

    交互设计WiKi 2015-11-09
  • 用户体验的十大原则

    设计师并没有创造体验,他们只是创造体验的媒介,两者之间非常不一样。因为体验是主观的,所以它并不能按照实物产品的方式被设计出来。然而,这并不意味着我们不能设计用户赖以体验我们产品或服务的框架。如果这个框架是足够坚固的,那好的体验就会接踵而至。

    2017-05-28
  • Axure RP 8.0安装教程

    Axure RP 8.0Win版/64位下载地址:https://pan.baidu.com/s/13eqSe3IeqvnyqjBYxIEqZA密码:2gkwAxure RP简介:Axure RP是一个专业的快速原型设计工具。使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。适用系统:win7,win8,win10安装有问题或需要远程安装请联系:...

    2018-04-30
  • loading做成什么样子,我才会等!

    文/Seven 来源/数英网 毫无疑问,每个人都不喜欢等待。尤其是在浏览自己喜欢的页面或电影时,对着千篇一律、毫无新意的加载页面,简直枯燥乏味无聊极了! 实际上,有研究表明,普通用户能够忍受的最长的加载页面的…

    2016-04-21
  • 设计师如何使用用户研究优化A/B测试

    作者:Jennifer Cardello; 编译:霍诗雨@ 点融黑帮   一、A/B 分类测试 A/B分类测试使得网站可以通过比较同一网页的不同设计,来决定其中哪些设计将产生最好的结果。在A/B测试中用到的指标是微观和宏观的转化率。 …

    交互专题 2017-08-07
  • 用户体验要素,商品介绍,它们两竟发生了这种关系!

    有人去电影院是为了看电影,而有些人……上次我们讲到,网络课程的课程介绍的工作流程问题。广泛来说可以是网购中任何商品或服务的介绍的撰写或制作过程,这个工作流程和用户体验要素十分相似 ▼这一次我们来探讨用户体验要素具体对商品介绍的指导作用,先来看看一下详细的用户体验要素 ▼关于上图的模型,在《用户体验要素》一书中有详细的阐述,这里只讲与本文内容有关的部分。先来看到这个模型的右上方,有功能型和信息型两种分类。基于我当时的工作任务是商品介绍,那...

    2018-03-20