APP设计中便捷的单手操作

标签: 交互设计 | 发表时间:2013-12-16 17:20 | 作者:vivi
出处:http://uedc.163.com

APP 设计中便捷的单手操作

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

用户是如何使用手机的

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

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

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

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

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

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

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

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

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

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

手势是如何被利用的

1.页面切换

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

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

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

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

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

2.内容呈现维度的切换

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

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

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

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

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

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

图(6)TeeVee的手势操作

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

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

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

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

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

图(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

相关 [app 设计] 推荐:

论Web App、Hybrid App、Native App设计差异

- - 百度MUX
目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App. 一、Web App、Hybrid App、Native App 纵向对比. 首先,我们来看看什么是 Web App、Hybrid App、 Native App. Web App 指采用Html5语言写出的App,不需要下载安装.

iOS APP体验设计

- wuwu - 彩程团队BLOG
iOS APP体验设计不像互联网的体验设计那样,有一堆的方法论和可以“借鉴”的案例. 目前除了苹果的和前Palm的外,没有找到更好的设计哲学和方法论. 事实上,即便认真地研读了HIG和Zen of Palm,甚至是Oolon Colluphid的哲学巨作你也无法严格按照Guideline设计出一款出色的APP.

Web app设计浅谈

- Jason - 网易用户体验设计中心博客
HTML5技术的强势发展,为互联网带来的最大改变就是: web从“已死”的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中. Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主.

iOS App体验设计

- 志飞 - 36氪
编者按:本文来自成都彩程设计的CTO肖轶翔「@yxshawn」,关注「iOS,人机交互,UED,音乐人,多媒体,哲学,科幻,电子,迷幻」. 他在文中对iOS 应用和普通网站设计进行了对比,并提出了自己的设计理念. iOS APP体验设计不像互联网的体验设计那样,有一堆的方法论和可以“借鉴”的案例. 目前除了苹果的和前Palm的外,没有找到更好的设计哲学和方法论.

The Daily——APP设计初探

- flogliu - www.blueui.net
第一个数字新闻出版物拥有大量原创的正版内容,每天发行,一切只为iPad. 由记者和设计师组成的顶级新闻搜集团队,使TheDaily覆盖全球:突发新闻,体育,流行文化,娱乐,应用程序,游戏,技术,意见,名人八卦等等. The Daily电子报纸的订阅服务为媒体公司解决了商业模式的难题,但现在媒体公司必须创造优秀的内容,不仅要吸引用户付费,而且要吸引用户一直付费使用其服务.

Web app设计浅谈

- 章明 - 互联网的那点事
HTML5技术的强势发展,为互联网带来的最大改变就是: web从“已死”的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中. Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主.

iOS App体验设计

- fyits0 - 东西
编者按:本文来自成都彩程设计的CTO肖轶翔「@yxshawn」,关注「iOS,人机交互,UED,音乐人,多媒体,哲学,科幻,电子,迷幻」. 他在文中对iOS 应用和普通网站设计进行了对比,并提出了自己的设计理念. iOS APP体验设计不像互联网的体验设计那样,有一堆的方法论和可以“借鉴”的案例. 目前除了苹果的和前Palm的外,没有找到更好的设计哲学和方法论.

《APP开发》APP规范实例-详细的UI设计方法

- - 人人都是产品经理
对了一个APP开发初手来说,可能心里有很多的疑惑:屏幕设计为多宽,宽度是不是应该设置为百分比;按钮大小多大,怎么排列,文字字体用多大的?什么字体显示好看?图标多大,怎么用色?界面怎么布局?等等很多的问题,这篇文章就是专门为你们准备的. 互联网从业者必备微信公众号:woshipm,如果你已经关注了,证明你已经很牛逼了.