APP设计中便捷的单手操作

APP设计中便捷的单手操作博文banner1

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

用户是如何使用手机的

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

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

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

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

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

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

APP设计中便捷的单手操作

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

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

APP设计中便捷的单手操作

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

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

手势是如何被利用的

1.页面切换

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

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

APP设计中便捷的单手操作

图(1)iPhone和网易云阅读的右滑手势热区

图(2)为网易云阅读和网易新闻的文章正文页,都能通过左滑返回,后滑进入评论页。相比之下用网易新闻显得更自然,初次用网易云阅读的用户会更容易对右滑进入评论页产生迷惑。究其原因,网易新闻在标题栏两边分别放置了“返回”和“跟帖”的页面元素,就像是分叉口的两个路标,让用户对前方的路形成心理预期。相比之下,网易云阅读的返回和评论同处于页面底部的左边,引导性不太明确。

APP设计中便捷的单手操作

图(2)手势切换时的页面引导

2.内容呈现维度的切换

下图中Cal和数读展示了手势的另一中应用方式。日期的可拆分维度有年、月、季度、周等,不同的使用场景需要切换时间粒度,Cal利用手势上下滑动方便地切换周历和日历,利用左右滑切换日期。数读首屏,默认显示文章概要,上滑即可浏览文章详情,由此利用手势的上下左右滑动可以针对文章展开4个维度的浏览:概要,详情,上一篇,下一篇。此外,相似的手势运用还是墨迹天气等。

APP设计中便捷的单手操作

图(3)Cal的周历、日历切换

APP设计中便捷的单手操作

图(4)数读的文章概要和详情切换

3.将相关功能隐藏在对内容的手势操作中,扩充屏幕内容展示空间。

智能手机受尺寸限制,对用户而言首屏空间越发宝贵。如果不能在第一时间让用户得到有效信息,APP的魅力将大打折扣。然而实际设计时往往功能众多,若放在首屏,页面将会是功能按钮的堆砌,占用了有效信息的展示空间,若不放在首屏,有可能层级太深,让用户找不到方向。资讯阅读软件Digg和追剧神奇TeeVee则采用了如图(5)和图(6)所示的操作方式。Digg通过右滑手势后,可对该资讯模块进行赞、添加书签、分享等操作。TeeVee中,左滑是最常见的删除操作,右滑可查看更详细的剧目更新信息和提醒设置。这种直接操作内容的自然人机交互方式,不仅符合用户的感知习惯,也能很好地节约屏幕空间,创造沉浸式的阅读体验,这点和Windows UI设计理念非常契合。只要对新手用户做好引导,之后的操作就非常得心应手。

APP设计中便捷的单手操作

图(5)Digg将添加标签等内容相关操作隐藏在左滑手势之后

APP设计中便捷的单手操作

图(6)TeeVee的手势操作

除此之外iOS自带的邮件、信息,和小清新壁纸应用拾光都有类似手势应用。

4.提炼重要功能,利用手势呼出操作

iOS的多指触控自不必说,可是需要额外的记忆成本[3]。上文提到过,在使用时最常用的手势是滑动和点击,运用得当也可以达到惊艳的效果。刷新浪微博时大家最常用的操作莫过于看和写,新浪微博将写微博的操作放在了左上角很明显的位置,但是单手难以操作,而Fuubo通过点按屏幕底部的首页键然后顺势上滑,即可触发写微博的操作,更简洁快速。如图(7)是新浪微博和Fuubo的界面功能布局对比。

APP设计中便捷的单手操作

图(7)新浪微博和Fuubo的写微博功能呼出方式

在优酷的播放界面任何地方左右滑动可控制播放进度,上下滑动控制音量,将手指从界面众多功能中解放出来。

APP设计中便捷的单手操作

图(8)优酷的手势运用

除此之外,Clear,Any.Do等to do应用利用下拉手势直接调出最常用的编辑新条目功能;易信双击呼出语音;多看阅读下拉书籍正文直接添加书签;Readmill在文章阅读时上下滑直接调节亮度;Solar利用上下滑手势查看不同时间点的天气。以上这些应用的共同特征都是利用简单的上下滑和点击手势呼出APP使用时最常用、触发频率最高的功能,提高使用效率。但哪些功能优先级比较高,是否容易误操作,误操作后果如何是需要慎重考虑的问题。如优酷的上下滑调节音量功能的优先级是否如此之高,在某些场合是否会令用户误操作而尴尬,这些都是需要结合使用场景去仔细斟酌的。

以上就是总结的APP设计中便捷的单手操作手势运用,关于手势界面操作还在不断学习中,欢迎大家补充和拍砖。

[1]Steven Hoober. How Do Users Really Hold Mobile Devices?.http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

[2] Steven Hoober. Common Misconceptions About Touch.http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php

[3] 易发现的手势操作.http://www.chinaz.com/manage/2012/0608/256316.shtml

文章作者:vivi

转自:http://uedc.163.com/11389.html

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/153/

(0)
iouedioued
上一篇 2014-09-06 00:31
下一篇 2014-09-08 11:40

相关推荐

  • 几乎是最完美的用户体验模型—CUBI

    【导读】我们都希望能做出引人注目的创意项目——能解决业务问题,同时通过有意义、有价值的体验吸引用户的项目。然而,紧缩的预算以及紧张的时间安排,都给创造真正新颖的设计、确定设计流程中的遗漏,以及充分考虑…

    交互设计 2015-04-24
  • 【交互设计】怎么让引导页不再是无用小透明?

    前言在接触一款新应用的时候用户常常会看到一些引导页,但在操作的时候直接当透明的就快速滑过或跳过了,这种时候,大家一定会有“这些引导好无用啊”的无力感,目前甚至有着“如果一个产品需要引导,说明该产品缺乏友…

    2017-08-04
  • UI设计师工作必备的七个设计神器

    今天推荐的这7个神器,有经典款也有新人版,不过大致贯穿了UI设计的整个工作流程,从排版、配色、切图到标注、预览,都有对应的良心神器推荐 ,非常适合刚入门的UI设计师,当然,有两款谷歌刚出的神器,也值得老手们来瞧一瞧。

    2017-05-31
  • 抽丝剥茧做设计:结构化思维初体验

    我们面对熟悉的问题能迎刃而解,陌生的问题却无从下手。原因是什么?其实是大脑对熟悉问题有已存在的解决结构,而对陌生问题,需要抽丝剥茧重新建立。结构化思维带你快刀斩乱麻,只需四步,建立清晰结构,完美解决未知问题。结构化思维是指一个人在面对工作任务或者难题时能从多个侧面进行思考,深刻分析导致问题出现的原因,系统制定行动方案,并采取恰当的手段使工作高效地开展,取得高绩效。(引自百度百科)

    2017-04-28
  • 不好意思,简历有了它,你就领跑于820万毕业生

    又临近一年毕业季找工作成为了应届生们的头等大事但今年的就业形势依旧不容乐观来自教育部的数据2018年全国高校毕业生预计上升至820万人再创近10年毕业生人数新高▲教育部官网截图▲中商产业研究院数据显示:2010-2017年的毕业生人数按照2%-5%的同比增长率逐年增长,近7年间累计毕业生人数达到5706万人。年年都是“史上zui难就业季”并且每年的毕业生人数始终呈增长态势800多万的应届毕业生让“你竟是一个大学生”变成“你只是一个大学生...

    2018-03-27
  • 分屏式设计正在逐渐流行,常见的玩法有哪些?

    不论如何,内容为王,而形式服从于内容,谨慎选择。

    2017-05-06
  • 门诊的用户体验,决定患者的选择

    口腔之声每晚8:00与您一起看口腔汇聚国内外口腔专家3000个视频随便您看世界华人牙医聚集地促进行业交流的价值门诊的用户体验,决定患者的选择现今的口腔医疗市场竞争,呈现出来的形态,公立医院的患者,到处挤满了人,号挂的满满的,而民营口腔医疗机构,又是大肆的营销活动,这家公益宣传,那家优惠活动,这家明星站台,那家老外看诊!的的确确呈现出同一个国家,面对两个市场的景象,当然每一个口腔医疗机构,或者说每一个家口腔,都有服务不同的患者层级。最近经...

    2018-05-06
  • 用户体验方法论的演变

    用户体验工作流程令人困惑,即使对大多数设计师而言也是如此。最初Donald A. Norman创造了用户体验设计的概念:“我发明了这个词,因为我认为人机交互和可用性太窄了。我想涵盖该系统的所有方面,包括工业设计图形,交互界面,面对面交互和使用手册。从那时起,这个词被广泛传播,以至于它开始失去意义。”而到2016年,Don Norman开始谈及对于这个词的误解有多严重。在彻底了解现代用户体验之前,我们需要回顾20世纪90年代以来设计和开发...

    2018-03-07
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • 用户体验(UX)专家是如何进行设计评审?

    设计评审是一种可用性测查工具,通常由一个评审员审查设计方案中的可用性问题。本文摘自https://www.nngroup.com/articles/ux-expert-reviews/原文标题:UX Expert Reviews原文作者:Aurora Harley什么是“设计评审”?定义:设计评审是一种可用性测查工具,通常由一个评审员审查设计方案中的可用性问题。“设计评审”一词颇为广义,涉及数种可用性测查方法,且每一种的运用因人(评审员...

    2018-04-19