iOS和Android规范解析——手势

作者: 沐风与体验设计 | 来源:发表于2017-11-21 17:27 被阅读132次

    随着iPhone X将Home键去掉,手势在交互导航中的作用更加重要了。今天我们来研究一下Google Material Design规范和iOS人机设计规范中对于手势的介绍。

    Material Design Guidelines

    手势导航让用户可以使用划动手势在同级或者上下级页面之间切换。支持的手势包括:按住水平拖动、按住上下拖动。

    手势一般建议用在如下情况:

    自然排序的关系,比如表示日历里连续天数的多个页面;

    包含较少下一级页面的页面;

    包含类似内容类型的页面。

    比如下面这个例子:

    在这个例子中,用户按住页面的同时向下拖动,�将这个页面收起,从而回到上一级页面。

    iOS Human Interface Guidelines

    在iOS系统中,边缘划动手势�起到了全局操作的作用。其中,从屏幕左边缘向右划动,可以返回上一级页面;在iPhone X之前的手机,从底部边缘向上划动,可以划出控制栏;从顶部边缘向下划动,可以划出消息/控制中心浮层。用户通过从底部边缘划动的操作,可以呼出系统级的控制页面,或者返回上一级页面。

    需要额外说明的一点是:对于H5页面,如果从屏幕左边缘向右滑动,会直接退出H5页面,不论你当前处在H5这个系统里的哪一级页面中。所以当我们在设计H5页面时一定要注意,尽量防止用户因为使用返回手势而退出了H5页,导致流失率的上升。

    对于iPhone X而言,由于这款机型取消了经典的苹果手机的home键,苹果给出了使用手势替代原来点击home键的操作:从屏幕底部向上划动,可以退出当前应用(相当于单击home键);从屏幕底部上划后停留,则进入多任务状态(相当于双击home键)。

    其实安卓手机在多年前,就出现了没有home键的机型,而安卓系统是提供了虚拟按键,来代替home键的功能。苹果的设计,则是使用手势来替代原来的点击home键,操作上十分流畅,且不容易误操作,因此是一个伟大的创新。

    �另外,对于底部边缘这种系统级的手势的运用,有一点需要注意:当我们在设计比较沉浸的应用时,比如游戏,有可能会需要使用定制这些屏幕边缘划动的手势,也就是当用户进行了从屏幕边缘划动的操作时,不执行系统的控制面板或者返回上一级页面等操作,而是执行游戏里需要的操作。在这种情况下,苹果的规范建议:

    第一次进行屏幕边缘划动时,执行应用自身的设计;

    第二次进行屏幕边缘划动时,执行系统级的设计,即出现系统的控制面板或者返回返回上一级页面等操作。

    另外,在iOS系统里,如果是iPad设备,则还有一个系统级手势:四个手指向中心捏拢,以返回到桌面。这个手势是天然适应于iPad的大屏幕的,也是手势能表现执行的操作效果这个理念很好的例子。

    今天介绍了安卓和iOS系统里,关于使用手势来进行导航操作的部分。其中,安卓系统中,可以通过按住页面并向下拖动,关闭一个二级页面,回到一级页面。另外在安卓系统中,用户随时都可以使用底部的虚拟按键返回上一级页面;而iOS中可以在任何二级、三级...页面中通过从屏幕左边缘向右划动返回上一级页面。相比较而言,iOS的做法会更容易操作一些。

    知识运用

    1. 微信安卓版,使用了iOS规范中的返回手势,即从屏幕左边缘向右划动则返回上一级页面。请分析一下这是否是一个好设计?

    2. 你遇到过哪些设计的比较好的手势操作?举例说明。

    交互小殿堂_格兰芬多

    交互小殿堂第二期开张啦!第二期的知识星球,我们有了更响亮的名字“交互小殿堂_格兰芬多”。使用这个名字,是希望大家可以更好的互动,并且就像格兰芬多学院精神那样,大胆探索交互的奥秘,不怕困难,勇往直前。下面我来详细介绍一下知识星球的用法。设置了6个主题,帮助你系统学习交互:

    - 场景思维(3周)

    - 心理模型(1周)

    - 流程设计(5周)

    - 正确使用控件(15周)

    - 测试方案(3周)

    - 用研(2周)

    以上这些专题,将每周固定发布在我的小密圈“交互小殿堂_格兰芬多”。

    同时,为了让大家更好地掌握每周的专题,安排每周的计划如下:

    - 周一在小密圈“交互小殿堂”独家发布一篇主文,介绍本周主题;

    - 周二至周五解答圈友们关于本周主题的问题;

    - 周六分享优秀交互设计案例,并带领大家解析设计亮点;

    - 周日公布文末问题的答案。

    6个专题结束后,会为大家提供7个需求,供大家实战,锻炼之前学到的技能。

    具体的安排如下:

    第一周,给出需求说明和重点提示;

    第一周剩下的几天以及第二周,大家根据需求进行交互方案设计;

    第三周集中点评大家的方案,给出建议。

    真的能学到东西吗?

    其实在开始交互小殿堂第一期之前,怀疑过自己是否能hold住,犹豫过是否真的能为圈友带来价值,直到。。。大概是7月份,当时的小密圈发生了一次“服务器升级”事件,导致小密圈有两周无法使用,结果圈友们在微信群里的呼声真的让我暖到心底:

    出于隐私考虑,以上头像和昵称均已隐去

    这给了我极大的信心和鼓励!让我意识到这个交互小殿堂这个圈子的确能帮助大家学习到交互知识。要知道,在这个互联网时代,我可不想自砸招牌啊,哟喂。

    加入圈子方法

    说了这么多,相信你也有自己的判断啦。如果想加入,请使用下面的方法:

    点击链接加入https://t.xiaomiquan.com/Z7ieYfM

    另外,多人同行,有优惠哦:

    两人一起报名,享9折优惠;

    三人一起报名,享8折优惠;

    四人一起报名,享7折优惠;

    五人及五人以上一起报名,享6折优惠;

    需要优惠的朋友请加我QQ联系:605130227

    相关文章

      网友评论

        本文标题:iOS和Android规范解析——手势

        本文链接:https://www.haomeiwen.com/subject/ervwvxtx.html