新葡亰496net Web前端 Native App中「单指滑动」操作的4大设计场景

Native App中「单指滑动」操作的4大设计场景



探讨APP的手势操作前,我想先介绍两篇文章来了解用户是如何使用手机的,以及触控屏是如何来感应我们的操作的。

       曾经我只用“QQ音乐”现在常用的是“网易云音乐”

自从进入了触屏智能手机时代,手势操作成了一种非常重要的人机交互方式。目前有三大主流手机操作系统(iOS,Android,Windows
Phone),虽然各自支持的手势会有些不同,但总的来说有以下几种常见手势:①单击,②双击,③长按,④单指滑动,⑤双指滑动,⑥双指放大,⑦双指缩小,⑧双指旋转,⑨握住手机晃动。如果留心观察就会发现,这些手势中绝大多数都会同时出现在一款软件中——你的手机自带的看图软件。

用户是如何使用手机的

      相信很多人人也是这么被挖进“网易云音乐”的坑的:

你还能不能找到其它的 APP
也能包含所有的手势操作?这探寻过程会很有趣,也是学习知识的一种方法。

Steven Hoober在《How Do Users Really Hold Mobile
Devices?》[1]一文中指出,通过两个月的时间对1333名手机用户在公众场所(街道、机场、汽车站、咖啡馆、火车上、汽车上等)使用习惯的观察得出以下结论:

  场景如下:

好了,切入本文重点。我只选取所有手势中的一种手势操作即「单指滑动」,来说说在什么场景下可以用上单指滑动操作。

①780名用户是通过滑动、点击、打字等来操作屏幕,其他用户则仅仅是用手机来收听、观看、打电话。

“小丽你的歌都好好听!我要你的歌单!”

场景一:切换 Tab

很多 Native APP
在设计导航时都会使用标签式导航,如果导航设计在软件的顶部,那么拇指操作起来就会很困难,而且若
Tab
之间的切换只能靠一个个按钮去点击,那样会很痛苦。这个时候若采用手势滑动的方式来切换
Tab,会很方便。

例如QQ国际版,顶部有三个 Tab,通过滑动手势可快速切换。(如图1)

图片 1

 图1

②49%的用户通过单手操作,36%一手拿着手机一手操作,另有15%双手操作。

“oh好啊 你关注我的 网易云音乐id XXXXX”

场景二:切换层级

Native APP
一般有三个页面:「聚合页」,「列表页」,「内容页」。三个层级页面间可以用手势滑动切换,这样做的好处是不用每次都去点击「返回」按钮或「向上」按钮来返回,直接手势操作,非常方便。

例如「QQ国际版」中,「内容页」可以理解为聊天页面,当从聊天页面返回最近聊天列表时,在聊天页面从左向右滑动,即可快速回到最近聊天列表。(如图2)

图片 2

图2 

③在单手操作用户中,有33%的用户用左手拇指来操作。

~~从此…“QQ音乐”就被打入冷宫了呢~因为“网易云音乐”淘歌实在是,太!爽!了!(强大的内容运营
& 好多音乐大V & 热闹的社交氛围)

场景三:操作功能

对于内容页面上的一些功能,可以直接通过手势去操作,这可以大大提高任务操作流的流畅性。

我印象比较深的是曾经用过的一款软件叫「Any.Do」,这是一款任务管理软件,当你完成任务列表上的一条任务时,可以直接通过手势向右滑动来进行删去任务的操作,很有成就感,操作体验非常好。

在「多看阅读」中也有类似的操作体验,就是当你在阅读书籍的某一页时,可以通过向下滑动的手势随时为喜欢的某一页添加书签,方便下次回看。(如图3)

图片 3

 图3

④用户经常变换操作姿势和手势。

     
但是…尽管所有人把“网易云音乐”吹的飞起,从交互和界面的角度来说,网易云用起来并没有很畅快。(个人拙见)

场景四:呼出功能

在设计一款APP的「内容页」时,一般都会有页面操作,比如「返回」、「分享」什么,这些操作按钮如果直接放在屏幕上,就会挤占内容页的显示区域。对于需要沉浸式阅读的使用场景,这些页面操作并非随时都需要,最好的解决办法就是把这些操作按钮都隐藏起来,等需要的时候再冒出来,这个时候就可以运用手势滑动来呼出功能,非常方便。

当然,对于不需要沉浸式阅读的适用场景,比如上面一开始提到的「QQ国际版」,一般聊天都是非常高效且碎片化的,很多操作应随时都在视线范围内,所以软件底部的这些功能操作按钮就不适合隐藏、用的时候再呼出。

在自己常用的软件中,呼出功能做得比较典型的就是「多看阅读」了,在阅读了一段后,如果想返回书籍列表页,可以由下向上手势滑动呼出底部功能按钮。(如图4)

图片 4

 图4

以上就是总结的 Native App
中「单指滑动」操作的4大设计场景,关于手势操作自己还在学习中,欢迎大家补充和拍砖。

要转载我的文章,请带上作者名称,原文地址的超链接,不允许修改我的标题,如果你无法全部满足上面3个要求,请不要转载,欢迎大家举报。

49%的单手操作用户是以下两种姿势。绿色代表容易点击区域,黄色为拇指伸展可到点击区域,红色区域超出单手可点击范围。

图片 5

触控屏是如何来感知操作的

qq和网易的音乐播放界面

Steven Hoober通过研究在《Common Misconceptions About
Touch》[2]中指出,因为我们的手指是三维立体且柔软的,在操作屏幕的时候,只有手指的部分区域是和屏幕接触的,这部分区域称为接触印迹。而触控屏仅仅感知人们接触印迹的几何中心位置来出发操作,与接触印迹区域大小无关。

界面上看qq音乐更加大气,大图标便于操作;右边的网易云,坚守性冷淡的中规中矩。

除了以上这些因素外,硬件设备的差异,用户使用移动设备时的视线角度都会影响点击操作的精准度。为此Steven
Hoober提出为界面元素分别设计视觉目标和触控目标的建议。如点击文章中的网址链接,我们不需要精准地点击到链接上的字母,而仅仅需要触发它周围的方形区域即可产生跳转到该网站。在不影响视觉效果的基础上,适当放大触控区域可提高操作的精准度。

在交互上qq音乐和网易云非常不同。

另外一个将视觉目标和触控目标分开设计的方法即为我们常说的手势操作,如上文所述手机使用过程中单手和左手操作的用户比例都比较大,好的单手操作手势设计能有效提高使用效率,减少误操作,给用户带来惊喜。为此,笔者在下文中总结了现有APP单手操作中的4类用法。

最常见操作,点击屏幕的操作。他们俩的反馈是不一样的(如图):

手势是如何被利用的

图片 6

1.页面切换

左qq音乐,右网易云音乐

在有限的屏幕空间中使用APP时,多层级、多页面切换是最频繁的操作,如果仅仅依靠大多数应用左上角的back键来返回或是点击后才能切换tab,使用起来将非常不方便,因此单手操作最常见的应用场景则是利用左右滑手势来穿行于各层级页面间。如下图网易云阅读资讯中心的tab切换。在这个手势操作中有两个关键因素影响使用体验:一是滑动过程中页面要跟随手指,这样能让用户形成对产品的控制感和更明确的层级感;二是需要有“路标”作用的页面元素作为指引。

图是网易云阅读和iOS设置中的右滑操作示意。网易云阅读中,在页面任何位置轻轻右滑即可返回,iOS的返回操作手势热区在屏幕边缘。这两者的区别是,云阅读中的返回设计更多是利用用户的下意识行为,操作成本低,但同时增加了误操作的风险。iOS中用户的操作多是有意识的行为,误操作几率小,同时操作成本也增加了。这两种方式各有利弊,因此在设计中应更具实际场景定义好对手指滑动的感应范围和角度。

对于第二常用的滑动手势(这里是右滑),他们的反馈是这样的(如图):

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图