移动APP交互创新设计技巧:手势流的运用

手势操作如今在APP交互当中越来越重要啦,已经开始取代直接去触碰实体或虚拟按键,轻轻松松挥舞双手便可以实现各种复杂的动作等。比如上下拉、左右滑等。但

手势操作如今在APP交互当中越来越重要啦,已经开始取代直接去触碰实体或虚拟按键,轻轻松松挥舞双手便可以实现各种复杂的动作等。比如上下拉、左右滑等。

但是移动手势操作不能滥用,具体场景具体使用合适的手势操作。

 

那什么是优秀的手势操作呢?

优秀的手势操作是那些可以让用户明确知晓如何使用,并且用户能知道在它是否可用的手势。iOS 的锁屏界面就是个很好的例子。iOS 锁屏界面里只有滑动滑块才能解锁,而在别的界面里这样的解锁滑块不存在,所以我们完全不会想到去滑动 。

使用浅性引导的设计会让用户自然而然得学会如何使用手势操作,并且能有美妙的感受。

锁屏界面里的相机设计的就是利用了浅性引导,点击相机后屏幕会向上跳动,这样的设计会直接引导用户去按住相机上拉。上拉进入相机的动作同时会让用户感觉下拉后会回到锁屏界面。更奇妙的是事实果真如此,在锁屏界面里进入相机后我们真的可以再任意一个界面中下拉回到锁屏界面。这种上拉进相机、下拉回锁屏界面的对称设计符合用户的想象,直接给用户带来了愉悦的感受。

除了锁屏界面,第三方应用中也可以加入浅性引导。比如当我们点开新浪微博中的一条微博后原界面会向左滑动切出新的界面(推动效果),这样会让人感觉自己右滑动应该会返回前一个界面,左右对称的动画效果加上浅性引导会减轻用户的心里压力,而且这样的引导是在用户操作的同时进行的,用户无需回想这个应用的手势便可以方便的使用。

网站模版网(www.genban.org)今天还要跟大家分享一个比较有创新的APP交互新词-手势流

下面我们来举例说明下什么是APP手势流?

在大部分的移动应用中,完成一项任务通常都需要很多次点击。但是由于可发现性的问题,设计师似乎总是有意避开使用各种手势。然而,最近Ralph Thomas设计的一个有关手势流的交互原型让我重新燃起了对移动手势操作的热情。

Ralph的设计在于用独特的方式来减少常用操作的点击数,接下来让我们通过常用应用进行分析说明,以iOS自带的地图应用为例, 用户最常用的一个操作就是导航。

在目前的设计中,完成这样一个操作至少需要三次点击:

1.点击搜索框;

2.点击选择你的目的地(如果在推荐列表中);

3.点击开始。

 

可以使用Material Design中的浮动按钮来优化此流程,点击搜索按钮会展示推荐的目的地,然后通过再次点击选择地点。虽然有些操作变得更简单(例如,导航回家或是到最近去过的地点),但是直接搜索却需要多些工作(两次点击,比原来增加了一次)。

 

 

使用手势流的设计能够减少这些基本操作的点击数,从而增强交互体验。你只需按下浮动的搜索按钮然后保持手指不离开屏幕继续往上移动,直到目的地的按钮。例如,移动到“家”然后松开手指,地图就会马上进入导航模式,带你回家。相比之前的三次点击,你只需要一个手势流的操作。

 

需要注意的是,之前描述的点击方法仍然有效。

手势流操作可以作为重要或是常用操作的快捷方法。因为手势毕竟是缺乏视觉识别的,所以最好的方式就是作为明显但是操作较慢的点击流程的额外补充。

 

同样的手势流操作也可用于触发搜索。你只需按下浮动按钮然后向左拖动至搜索框。相比之前需要两次点击的操作,这样简单的手势就能调出更为详细的搜索列表,系统键盘也同时弹出便于输入搜索。

 

再深入一点,手势流甚至还可以为附加的选项提供交互的空间。首先移动到目的地,保持手指不放开继续向侧面移动,你就可以选择到目的地的方式:自驾、公共交通、步行或是骑行。继续移动到你的选择上然后将手指移开屏幕就可以执行操作了。这样附加选项的设计可以作为手势流的扩展,不过你一旦采用了,又减少了一次点击,从四次点击变成了一个手势流的操作。

 

今天就先跟大家分享到这里。很高兴见到这样手势流的设计,它能优化移动交互流程,减少哪些复杂的点击操作。另外也告诉我们移动APP交互设计值得我们去深挖的地方还是很多的。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

25学堂今天跟大家分享12张精美的移动模型素材分享,这12张素材你可以应用在你的移动APP项目当中或者是APP官网设计当中,顿时让你的作品高大上!下面的这12张移
如今再来看扁平化APP设计,还是那么的简洁漂亮!最重要的是扁平化的移动APPUI界面简单实用,对移动设计师来说,...最近,25学堂将会推出很多漂亮的移动APP应用模板(框
有创造性的APPUI设计往往可以大幅度提升用户体验的。那么好的移动APP设计干货和APP设计规范也是新手们的渴求的干粮。25学堂秉着分享和共同学习的原则,收集了
移动APP项目名称:易配货APP 2.0移动APP项目背景:易配货是传化物流产业集团为货主与司机打造的物流信息交易平台,基于诚信会员体系和移动互联技术,为会员
iOS切图神器,我想大家都不会很陌生啦,Cutterman也是目前移动端设计人员用的比较多的一款切图工具。还有25学堂之前推荐的在线切图工具和PS切图插件推荐等。
今天25学堂的小编跟大家分享一个国外优秀的图标字体酷站,也是一个在线编辑的SVG图标素材的酷站-SmartIcons.coSmartIcons 网站是一个提供了1500+个顶级图标和内建多种