提高交互技能点,一些常见移动端交互方法

“在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/30777/

(0)
CatherineCatherine
上一篇 2017-05-30 03:40
下一篇 2017-05-30 05:38

相关推荐

  • WEB用户体验

    点击标题下「智业人」可快速关注摘要:随着软件行业的迅速发展,各种软件产品更是形形色色,用户不再满足软件对其所需要的功能实现,更追求一种使用过程中的心里感受,因此用户体验足够好的才能走向最前端。用户体验的定义有很多,用一种比较简单的说法就是“用户对访问网站的感受”。本文主要从用户体验角度出发,从网站的构建到数据渲染完毕的过程提高用户体验。关键字:加载速度、动画、用户体验、布局一个好的网站离不开对用户体验的追求。因为良好的用户体验才能增加用...

    2018-02-03
  • 19.怎样绘制用户体验的地图 | 打造产品思维30讲

    19.怎样绘制用户体验地图来自时间前哨00:0015:06这一节讲用户体验地图和用户故事。用户体验地图就是通过画一张图,用一种讲故事的方式,从一个特定用户的角度出发,记录下他与产品或者服务进行接触、进入、互动的完整过程。开始做产品经理的人容易犯的错误,就是用管理员的视角来规划产品。我经常看到这种全局型的产品设计图,复杂、全面、没重点,这肯定是错的。我一般会告诉这种产品经理,请按照一个用户使用的路径,把这个产品设计图再画一遍。从一开始用户...

    2018-03-20
  • Axure案例-联想输入提示,Axure中继器的使用

    点击右面下载:axure-case-https://www.iamue.com 不多说了,源文件分享,使用Axure打开编辑可以查看原理。 日安 转载的童鞋带上:木卫艾欧网-交互学堂》 Axure案例-联想输入提示,Axure中继器的使用 

    IxD案例 2015-02-04
  • [sketch组件库] iOS 10 GUI for sketch

    今天给大家推荐的是 iOS 10 GUI 交互规范组件 for sketch ,大小有93M,需要下载 Sketch 源文件。

    2016-09-13
  • 经验分享丨赶集App中秋节的皮肤设计

    随着移动互联网的迅猛发展,同一款产品,使用移动端的用户远超PC端,为了更好的提升APP的用户体验,情感化设计也得到了越来越多的关注,通过它来唤起用户共鸣,带给用户愉悦的心情。

    2017-04-30
  • 从单线走向双线,第三代用户体验即将到来?

    双十一在即,加之今年的新零售狂潮,零售业从线上到线下可以说纷纷摩拳擦掌。京东天猫剑指双十一已是老生常谈,值得注意的是,今年的双十一迎来了更多样化的全民购物盛事,比如飞凡推出的“2017飞凡狂逛节”。据了解,与京东天猫等电商大促有所区别的是,“2017飞凡狂逛节”重点是线下逛,与众多剁手党网上拼杀对比,着实令人耳目一新。新零售改革加速,用户体验核心发生质变可喜的是,我们看到零售业巨头和创业者们都在深挖线下。比如今年爆红的无人便利店和无人货...

    2018-02-03
  • 2016年度13篇最佳UI/UX参考文章【UXRen译#161】

    作者:Grace Jia(UI/UX Researcher & Analyst)  |  翻译:代代子,校审:Chen Jing   本文收集了2016年度最受推荐的设计文章,内容涉及(1)UI/UX设计的原则、书籍和工具(2)如何做出更好设计的方法和建议(3…

    交互专题 2017-08-07
  • 【10min学交互设计精髓】做产品要有风度(9)

    图片来源于网络小伙伴萌,有一周没见了,有没有想我呀~~快来看看今天咱们讨论些什么,有任何想法和建议都可以给我留言哦。我们常常谈起情商,人与人的相处方式。作为pm,有没有想过产品和人的相处方式呢?这个课题…

    2017-08-01
  • 朋友圈被天猫双11邀请函刷屏了?我们和它的创作者们聊了聊

    从2008年开始,每年临近11月11日,全国——现在可能是全球——的剁手党们都在等着看马云爸爸和天猫又能玩出什么新花样。今年除了史无前例的整整49张品牌海报以及4个版本的“主题大片”之外,天猫的小伙伴们居然连一封小小…

    2016-10-25
  • 关于用户体验&交互设计的视频分享【日常思考0001】

    (。・∀・)ノ゙嗨这里是Chiki的深夜抽风小记录,做个日常思(bing)考(zheng)收集。公众号取名“Design for What"是希望以后自己做设计的时候可以多思考设计是为什么Find your passion,and let it kill you那么开始今天的开场首秀!今晚本想磕磕榛子垫垫肚子就……就开始做事来着,结果不小心打开平板……看了会视频(明明是好久……都是借口😭)不过视频不错分享给大家👇视频在这:截了有点不一样...

    2018-04-14