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使用时最常用、触发频率最高的功能,提高使用效率。但哪些功能优先级比较高,是否容易误操作,误操作后果如何是需要慎重考虑的问题。如优酷的上下滑调节音量功能的优先级是否如此之高,在某些场合是否会令用户误操作而尴尬,这些都是需要结合使用场景去仔细斟酌的。

时间: 2024-08-18 10:41:45

APP设计中便捷的单手操作的相关文章

App设计中4类便捷的单手操作

探讨APP的手势操作前,我想先介绍两篇文章来了解用户是如何使用手机的,以及触控屏是如何感应我们的操作的. 用户是如何使用手机的 Steven Hoober在<How Do Users Really Hold Mobile Devices?>[1]一文中指出,通过两个月的时间对1333名手机用户在公众场所(街道.机场.汽车站.咖啡馆.火车上.汽车上等)使用习惯的观察得出以下结论: ①780名用户是通过滑动.点击.打字等来操作屏幕,其他用户则仅仅是用手机来收听.观看.打电话. ②49%的用户通过单

在App设计中怎样优雅的运用字体

  我有个小小的心得可以分享给你--好的字体等于成熟的设计.直至几年前,网页设计师们都还没有对字体表现出足够的关注.如今这个领域已日趋成熟--字体繁荣发展,成为一股巨大的设计潮流. 好的字体在文本的易读性上起了决定作用,却不止于此,它也传递出设计师分享的意图.它是整个用户体验的重要部分.从另一方面讲,缺乏好的字体,是整个产品不专业的表现.文字是主要界面的基础元素--如果它设计得很糟,为何还要深入下去? 本地应用第一年在iOS和Android平台上的发展,简直惨不忍睹.似乎大多设计师和开发者根本没

2016年最值得关注的移动端APP设计趋势

  不论移动端网页和APP之间有着怎样的争论,移动端APP的快速发展都是不争的事实,各种客户端的开发和接入已经成为常态.用户对于自己喜欢的品牌和服务,总期待官方能推出客户端,也正是在这种期待和需求之下,催生出越来越多的APP. 事实上,有APP分析机构的研究表明,用户每天耗费在手机和平板上的平均时长为158分钟,其中127分钟是耗费在各类APP中,而仅有31分钟是花费在浏览网页之上.且不去深究这个数字是否适用于不同的国家和地区,但是总体的趋势大家都看的很明白.用户的需求越来越多,如果开发者和厂商

深聊界面设计中的动画原理

  这篇文章是关于变速过渡效果的,看似简单,但真正想让动画自然流畅,还需要深入了解动画的基本原理.今天我们将会逐步学习:基本概念.探讨加速减速,拆解缓冲曲线,最终学会运用到界面设计中. 你认为这两个球在做什么? 绿球弹跳很明显,但是红球在怎样运动?当然,它像绿球一样上下运动,落下和弹起所用的时间和绿球一样.然而,红球感觉很机械,而绿球让人感觉它确实在弹跳.为什么我们会有这种感受上的差异呢? 答案是变速过渡效果(Easing). 1. 时间和空间位移 (Timing and Spacing) 首先

APP设计的肢体语言

  如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言. 引言:如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言. 在如今玲琅满目的App中,如何脱颖而出?设计师要考虑的,不光是产品如何更合理的展现结构与功能,更重要的是思考自己的App是否能做到简便易懂的同时,又给用户新颖感?此时,有限的屏幕空间紧靠文字的提示是不够的,App需要更多的新鲜血液--"动效设计".动效设计可以拓展空间内容,简化引导流程,降低

2015年的移动APP设计趋势

  App Store和Google Play里的app多如牛毛.很难说未来的趋势是什么,不过显然我们可以轻易选出当下的5种趋势并加以分析.今天@十萬個為什麽 同学简单归纳了当下的5种移动APP设计趋势,来涨姿势吧. 看看时下的app中的颜色.创意和简单朴素,我们能从中学到一些设计移动app的技巧. App中的色彩 公认的,色彩始终是设计的一部分.不过,近来很多app将色彩当作设计的基础使用,而不只是点缀.色彩可以营造氛围,极大地影响了app的整体体验.当你把一个色彩缤纷的app和一个几乎纯白的

大屏iPhone带来了App设计的三种改变

大屏iPhone带来了App设计的三种改变 时间:2014-09-20 19:55 来源:雷锋网 作者:Twig理想试验田 很长一段时间内,智能手机产业区分都很明显.Apple坚守小屏幕不改变,与此同时Google的安卓手机却越来越大.但是随着4.7英寸的iPhone6和5.5英寸的iPhone6 Plus的发布,这种分别消失了.大时代全面降临. 对于那些之前做得很出色的开发者来说,接下来的工作并不是简单地把现有的小界面扩展到大屏幕上.在与行内优秀的UI设计师交谈中,很明确的一点是由于屏幕区域已

十大令人振奋的移动端APP设计趋势

  从移动端兴起,主流设计风格定型,再到Uber.Vine等现象级APP的崛起,移动端的APP设计直到现在才渐入佳境.促成这一切的影响因素很多,比如社会发展趋势的变化.共享经济的大热.新技术的积累,等等等等.这些事物的出现需要时间积累,这也是为什么这些应用到现在才火起来. 同样的,今年我们要关注的是定型了的巨屏手机和逐渐沉淀下来的可穿戴设备. 随着日常生活中所涉及到的移动端应用的增加,用户在这些东西上的所耗费的精神和脑力也越来越多.查看邮件.预订酒店.叫外卖都有赖于各种应用,而诸如Airbnb和

高手的私人笔记之APP设计流程全科普

  今天这篇译文全程满满当当的都是干货,包含超多的实用经验,比如让元素在各个尺寸中保持边界清晰的技巧,切片的专业方法,命名规则等,绝对值得每个UI设计师收藏起来! 从低分辨率开始 我通常都从非Retina显示的1x文档尺寸开始. iPad的app分辨率是用1024×768,安卓则是mdpi 或 dp (density-independent pixels)常规设备适配尺寸.如果是Mac的应用,那就通常从1280×768开始(13英寸MacBook Pro横向分辨率以及11英寸MacBook Ai