移动端交互-下拉菜单、单选、多选

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

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

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

移动端交互-下拉菜单、单选、多选

iOS系统日历

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

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

移动端交互-下拉菜单、单选、多选

Google日历

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

3. 下拉菜单

移动端交互-下拉菜单、单选、多选

Google日历叠叠乐

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

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

移动端交互-下拉菜单、单选、多选

不记得在哪看到的,用这个图意思一下……

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

5. 选择内容平铺出来

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

废话:这些看上去很常见普通的交互,碰到案例的时候有时一时竟然想不起来。所以最近为了提高交互技能点,打算总结一些常见的交互方法。

 

原文来自:简书

作者初三_RR

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

(0)
CatherineCatherine
上一篇 2017-06-01 11:31
下一篇 2017-06-01

相关推荐

  • 同一个人的微博,首页连续出现48条是怎样的体验?

    如果你是微博的轻度用户,可能偶尔觉得刷出来的内容有些不对劲;而如果你是微博的重度用户,那你很可能觉得微博的 timeline 有时候刷的很不爽。

    2017-05-14
  • 关于增强移动端交互设计的7条小建议

    本文转译自TubikStudio,内容有删减如果你要问某个产品的移动端交互设计好不好?很简单,如果用户能够很轻松愉快的使用以至于没有感受到它的存在,这就表示这款产品的设计是专业的、成功的。另一方面,如果整套交互中存在不合理的地方,用户一定会注意到他们,并且引发吐槽。移动应用的设计,需要清晰易用,可以随时随地进行有效使用。设计师的认识是创建一个直观的界面,指导用户们,帮助他们顺利操作使用。1、降低学习成本每个产品经理或者交互设计师,都想创...

    2018-02-17
  • 浅谈“效率导向”的交互设计

    作者: 欢童鞋 周二下午,送妈妈上车后,去奈雪点了杯奶盖,坐在面对门口的位置,看着络绎不绝的人流队伍,除了感叹生意好以及好奇心使然查阅奈雪的开店背景之外,不由的思考“效率”在这里的重要性,店员需要高效为…

    交互专题 2017-12-05
  • 双11干货!写给运营视觉设计师的交互小技巧

    58UXD – 马世光:双十一就要来了,本文为你分享两套运营设计利器。运营视觉设计师不同于UI和交互设计师,运营视觉设计师的工作要求他们更加注重视觉丰富性的表现,难免会淡化交互逻辑层面的思考,优秀的体验需要视觉与交互兼顾,今天我就为运营视觉同胞get两点交互小技巧,方便我们的产出既能视觉爆炸也能体验棒棒!

    2017-11-01
  • 顾振宇:Ubiquitous Fun-交互设计的享乐主义未来——上海交通大学创新设计论坛-体验和交互设计分论坛

    演讲题目 Ubiquitous Fun-交互设计的享乐主义未来 在可预见的未来,随着用户数据的积累和人工智能的发展,产品“可用性”问题会逐渐淡出我们的讨论主题,同时,人们对物质的需求总是非常有限的,因此“实用性”价值空间…

    2017-01-03
  • 交互设计--需求分析的20条法则

    来源:UI新动态对商业用户来说,他们后面是成百上千个供货商,前面是成千上万个消费顾客。怎样利用软件管理错综复杂的供货商和消费顾客,如何做好精细到一个小小调料包的进、销、调、存的商品流通工作,这些都是商…

    2017-08-02
  • 如何运用预置的内容和默认设置,创造更好的用户体验

    首先出现的数值和设置内容就是默认项。它们的作用似乎微乎其微,但默认项(和它们的设计者)掌握着强大的力量——替用户做决策。本文中,我们会讨论如何运用预置的内容和默认设置,创造更好的用户体验。只有不到5%的用户会修改默认设置用户会假设你已经掌握了他们所有的偏好

    2017-05-02
  • 想成为云计算交互设计师,该具备哪些能力?

    最近有不少设计师会跟我聊到,做云计算的交互设计 与其他设计师有什么区别吗?我其实也不知道怎么回答,能够记起的最后一次 TC 类的项目已经是两三年前在学校的时候了,工作以后一直在做云计算的产品,没有太深入体验做其他的产品,我真的还不太能说出有什么区别。

    2017-08-28
  • 手机“携号转网”磕绊多,用户体验太遭罪,手机跳槽为何这么难?

    轻点下图  纵横带您“听新闻”携号转网来自新闻纵横00:0005:59工业和信息化部在2010年和2013年,分两批在天津、海南和江西、湖北、云南五个省市,试点手机号码“携号转网”业务。但是到今年初,仍然有试点省份的用户反映,办理过程不如预期的顺利,质疑运营商故意设置障碍。记者调查发现,“携号转网”业务在不同的省份试点效果存在差异,主管部门坦承,有运营商为了挽留用户“搞小动作”,但试点工作整体向前推进,一些技术问题逐步解决。湖北武汉的白...

    2018-04-10
  • 2016必掌握的交互设计趋势

    设计趋势是什么样的,出于各种原因,很多设计趋势在演进中逐渐消失,有的则甚正蜕变成为主流。作为一个专注于网页和平面设计的设计机构,我们对所有相关的技术和设计趋势都极度敏感。通过多位设计师们对2015的总结…

    2016-01-10