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

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

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

移动触摸手势图标

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

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

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

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

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

25学堂今天还要跟大家分享一个比较有创新的APP交互新词-手势流

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

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

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

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

1.点击搜索框;

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

3.点击开始。

移动手势流分析案例

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

 

移动手势流分析案例2

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

移动手势流分析案例3

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

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

 

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

移动手势流分析案例4

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

 

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

每天更新,
全站高品质素材免费下载!