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

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

相关推荐

  • UED新刊 | 承——中国院方案组二十周年

    📌编辑| F.我觉得记录或者回忆方案组这件事……如果说有意义的话,它不应该仅仅是哥几个的一段往事,而是可能还带有某种其他的价值,可以为我们的同行展现中国建筑发展当中的一个小的片段。——崔    愷《城市·环境·设计》UED108期“承——中国院方案组二十周年”专辑现已发售更多互动福利详见文末扫描文末二维码即可购买新刊导读1997 年,当时还是建设部建筑设计研究院(下称建设部院)的中国建筑设计院(下称中国院),由时任总建筑师和副院长的崔愷...

    2018-02-07
  • 标签栏设计的心理暗示:高亮与视觉纵深的心理模型

    UI在设计上服从于交互,形式上不拘于一格,视觉纵深也只是其中一种心理模型。
    注:本文面向入门级设计师,大神请飘过~

    2017-05-18
  • 据说这是一个用户体验设计师必须掌握的

      引言:计算出你手机上的内容布局是一件很棘手的事情。桌面设备会给你所有用它工作的空间。但在移动设备上,你只有有限的屏幕空间。用户在滚动屏幕浏览更多内容之前,只可以浏览内容的一部分。 你最终想知道…

    2015-11-22
  • 作为UX设计师,你需要知道的52个专业术语

    “注意用户做什么,而不是他们说什么。”
    ——雅各布 尼尔森“令你反感的客户是你最大的学习动力来源。”
    ——Bill Gates“想成长为设计师?花大部分时间考虑它的运作方式,而不是看起来如何。”
    ——乔希·帕克特

    2017-05-01
  • 交互基本功:如何设计一个好用的搜索框?

    搜索框一种常见的交互控件,用于精准提取海量的信息中的准确内容。本文作者分享了设计一个搜索框的几个要点,希望大家从中可以有所收获。

    2017-05-04
  • 直觉设计:如何让网页更直观、易用【UXRen译#162】

    作者:Peep Laja(ConversionXL的创始人,世界上领先的转换优化专家之一) 翻译:方糖小姐,校审:小四   你的网站越容易使用,那么使用的人越来越多。“容易使用”的至关重要的一部分是直觉。那么直觉设计也就意味着当…

    交互专题 2017-08-07
  • 在设计过程中,设计师如何输出一个更落地的动效呢?

    优秀的动效设计更能让用户从中感到惊喜,让用户感受到产品的温度和调性。

    2017-05-05
  • 如何成功运用扁平化设计与色彩趋势

    经验分类: 经验/观点 / 自译外文 原作者: Carrie Cousins  翻译:蒋灿 我们在Designmodo上已经聊了很多有关扁平化设计趋势的内容。 之前瞎说了很多,也给大家展示了大量不错的示例,还开发了一套免费的用户界面以…

    2014-09-14
  • 交互设计与服务设计视角下,谁才是用户,什么又是产品?

    服务设计,是2017-2018比较火热的一个专业了,相比于交互设计或工业设计,服务设计更关注与利益相关者之间的关系。今年的Aalto New Media 专业的申请中,有明确要求需要根据两篇文章的读后感写一篇Essay(1),其中一篇是“How to Fix Facebook—Before It Fixes Us(2)”,深入阅读之后,有一个明确的观点想和大家分享一下。之前从交互式设计角度或者用户研究角度对于 Facebook 的分析文...

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

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

    2018-04-14