经验分享：APP设计中便捷的单手操作
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
经验分享：APP设计中便捷的单手操作
vivi：探讨APP的手势操作前，我想先介绍两篇文章来了解用户是如何使用手机的，以及触控屏是如何感应我们的操作的。
用户是如何使用手机的
Steven Hoober在《How Do Users Really Hold Mobile Devices?》[1]一文中指出，通过两个月的时间对1333名手机用户在公众场所（街道、机场、汽车站、咖啡馆、火车上、汽车上等）使用习惯的观察得出以下结论：
相关推荐：
①780名用户是通过滑动、点击、打字等来操作屏幕，其他用户则仅仅是用手机来收听、观看、打电话。
②49%的用户通过单手操作，36%一手拿着手机一手操作，另有15%双手操作。
③在单手操作用户中，有33%的用户用左手拇指来操作。
④用户经常变换操作姿势和手势。
49%的单手操作用户是以下两种姿势（左手用户相反）。绿色代表容易点击区域，黄色为拇指伸展可到点击区域，红色区域超出单手可点击范围。
触控屏是如何来感知操作的
Steven Hoober通过研究在《Common Misconceptions About Touch》中指出，因为我们的手指是三维立体且柔软的，在操作屏幕的时候，只有手指的部分区域是和屏幕接触的，这部分区域称为接触印迹。而触控屏仅仅感知人们接触印迹的几何中心位置来出发操作，与接触印迹区域大小无关。
除了以上这些因素外，硬件设备的差异，用户使用移动设备时的视线角度都会影响点击操作的精准度（更多详细介绍可在文章后所附原文链接查看）。
为此StevenHoober提出为界面元素分别设计视觉目标和触控目标（即我们常说的热区）的建议。如点击文章中的网址链接（视觉目标），我们不需要精准地点击到链接上的字母，而仅仅需要触发它周围的方形区域（触控目标）即可产生跳转到该网站。在不影响视觉效果的基础上，适当放大触控区域可提高操作的精准度。
另外一个将视觉目标和触控目标分开设计的方法即为我们常说的手势操作，如上文所述手机使用过程中单手和左手操作的用户比例都比较大，好的单手操作手势设计能有效提高使用效率，减少误操作，给用户带来惊喜。为此，笔者在下文中总结了现有APP单手操作中的4类用法。
手势是如何被利用的
一、页面切换
在有限的屏幕空间中使用APP时，多层级、多页面切换是最频繁的操作，如果仅仅依靠大多数应用左上角的back键来返回或是点击后才能切换tab，使用起来将非常不方便，因此单手操作最常见的应用场景则是利用左右滑手势来穿行于各层级页面间。
如下图网易云阅读资讯中心的tab切换。在这个手势操作中有两个关键因素影响使用体验：一是滑动过程中页面要跟随手指，这样能让用户形成对产品的控制感和更明确的层级感；二是需要有“路标”作用的页面元素作为指引。
图（1）是网易云阅读和iOS设置中的右滑操作示意。网易云阅读中，在页面任何位置轻轻右滑即可返回，iOS的返回操作手势热区在屏幕边缘。这两者的区别是，云阅读中的返回设计更多是利用用户的下意识行为，操作成本低，但同时增加了误操作的风险。iOS中用户的操作多是有意识的行为，误操作几率小，同时操作成本也增加了。这两种方式各有利弊，因此在设计中应更具实际场景定义好对手指滑动的感应范围和角度。
图（1）iPhone和网易云阅读的右滑手势热区
图（2）手势切换时的页面引导
二、内容呈现维度的切换
下图中Cal和数读展示了手势的另一中应用方式。日期的可拆分维度有年、月、季度、周等，不同的使用场景需要切换时间粒度，Cal利用手势上下滑动方便地切换周历和日历，利用左右滑切换日期。数读首屏，默认显示文章概要，上滑即可浏览文章详情，由此利用手势的上下左右滑动可以针对文章展开4个维度的浏览：概要，详情，上一篇，下一篇。此外，相似的手势运用还是墨迹天气等。
图（3）Cal的周历、日历切换
图（4）数读的文章概要和详情切换
三、将相关功能隐藏在对内容的手势操作中，扩充屏幕内容展示空间。
智能手机受尺寸限制，对用户而言首屏空间越发宝贵。如果不能在第一时间让用户得到有效信息，APP的魅力将大打折扣。
然而实际设计时往往功能众多，若放在首屏，页面将会是功能按钮的堆砌，占用了有效信息的展示空间，若不放在首屏，有可能层级太深，让用户找不到方向。资讯阅读软件Digg和追剧神奇TeeVee则采用了如图（5）和图（6）所示的操作方式。
Digg通过右滑手势后，可对该资讯模块进行赞、添加书签、分享等操作。TeeVee中，左滑是最常见的删除操作，右滑可查看更详细的剧目更新信息和提醒设置。这种直接操作内容的自然人机交互方式，不仅符合用户的感知习惯，也能很好地节约屏幕空间，创造沉浸式的阅读体验，这点和Windows UI的设计理念非常契合。只要对新手用户做好引导，之后的操作就非常得心应手。
图（5）Digg将添加标签等内容相关操作隐藏在左滑手势之后
图（6）TeeVee的手势操作
除此之外iOS自带的邮件、信息，和小清新壁纸应用拾光都有类似手势应用。
四、提炼重要功能，利用手势呼出操作
iOS的多指触控自不必说，可是需要额外的记忆成本。上文提到过，在使用时最常用的手势是滑动和点击，运用得当也可以达到惊艳的效果。刷新浪微博时大家最常用的操作莫过于看和写，新浪微博将写微博的操作放在了左上角很明显的位置，但是单手难以操作，而Fuubo通过点按屏幕底部的首页键然后顺势上滑，即可触发写微博的操作，更简洁快速。如图（7）是新浪微博和Fuubo的界面功能布局对比。
图（7）新浪微博和Fuubo的写微博功能呼出方式
在优酷的播放界面任何地方左右滑动可控制播放进度，上下滑动控制音量，将手指从界面众多功能中解放出来。
图（8）优酷的手势运用
除此之外，Clear，Any.Do等to do应用利用下拉手势直接调出最常用的编辑新条目功能；易信双击呼出语音；多看阅读下拉书籍正文直接添加书签；Readmill在文章阅读时上下滑直接调节亮度；Solar利用上下滑手势查看不同时间点的天气。
以上这些应用的共同特征都是利用简单的上下滑和点击手势呼出APP使用时最常用、触发频率最高的功能，提高使用效率。但哪些功能优先级比较高，是否容易误操作，误操作后果如何是需要慎重考虑的问题。如优酷的上下滑调节音量功能的优先级是否如此之高，在某些场合是否会令用户误操作而尴尬，这些都是需要结合使用场景去仔细斟酌的。
以上就是总结的APP设计中便捷的单手操作手势运用，关于手势界面操作还在不断学习中，欢迎大家补充和拍砖。
原文地址：
作者：vivi
================关于优设网================
“优设网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南。
设计微博：拥有粉丝量61万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注【EMUI 3.1单手模式】单手操作更便捷!-华为EMUI
【EMUI 3.1单手模式】单手操作更便捷!
如今手机屏幕也越来越大,大屏幕的单手操作令许多人头疼,小手够不着怎么破!华为EMUI 3.1在单手键盘的基础上,增加了单手屏幕功能,使小手能够兼顾全局.那么,EMUI3.1单手模式在哪?如何开启和使用?下面小E就给大家分享华为P8单手屏幕模式的开启及使用教程. 开启......
如今手机屏幕也越来越大，大屏幕的单手操作令许多人头疼，小手够不着怎么破！华为EMUI 3.1在单手键盘的基础上，增加了单手屏幕功能，使小手能够兼顾全局。那么，EMUI3.1单手模式在哪？如何开启和使用？下面小E就给大家分享华为P8单手屏幕模式的开启及使用教程。
开启单手屏幕第一步：【设置】—【全部设置】—【智能辅助】—【单手操作】—【单手屏幕】第二步：点击“单手屏幕”打开后，大家将会看到动态画面演示。（在虚拟导航栏区域内左右滑动，可调整全屏界面左右布局，方便使用）唤醒单手屏幕在导航键上从中间向左（右）滑动，即可快速进入单手屏幕模式界面。关闭单手屏幕，任意点击小屏幕外的黑色部分或者反方向滑动，即可关闭单手屏幕模式，返回全屏模式，方便实用。EMUI 3.1创 新 科 技 带 来 智 美 生 活
1.微信之窗遵循行业规范，任何转载的稿件都会明确标注作者和来源；
2.本文内容来自“华为EMUI”微信公众号，文章版权归华为EMUI公众号所有。后使用快捷导航没有帐号？
4C单手模式如何操作——详细教程
&渐入佳境&
来自：浏览器
最新回复 6&天前
本帖最后由 hello夏洛 于
15:38 编辑
4c12_副本_副本.jpg (98.37 KB, 下载次数: 0)
14:57 上传
& & 虽说4C是5.0英寸的屏，不过对于一些手相对小得人而已还是蛮大的了，既然4C给了我们单手模式，那就要把它用起来。楼主今天就告诉大家，单手操作到底怎么用吧。
& & 所谓的手机单手模式，也就是针对大屏手机而言的，由于大屏手机屏幕过大，当只用一只手操作时，就会有一些按键很难触碰得到，而且也容易发生意外，手机掉坏了就心疼了！！
所以，单手模式就是让屏幕上的按键面积缩小，让你可以只用一只手就可以流畅地操作，避免发生手机掉落的事故，造成损失！
首先我们从全部设置里找到智能辅助，然后进入到单手操作的设置选项里。开启单手操作。
1_副本.jpg (35.84 KB, 下载次数: 0)
15:37 上传
在它的单手操作里主要提供了单手键盘，具体功能如下：
3.jpg (11.98 KB, 下载次数: 0)
15:38 上传
不开启单手操作时
7.jpg (20.67 KB, 下载次数: 0)
15:39 上传
开启单手操作时，键盘是可以左右切换的。
5_副本.jpg (39.82 KB, 下载次数: 1)
15:36 上传
当你只方便一手操作手机时，这个小功能就派上用场了。
width:100%">
&花粉版主&
来自：浏览器
感谢亲的分享了，辛苦了，很不错，很实用哈~~
width:100%">
&自成一派&
来自：浏览器
width:100%">
&略有小成&
来自：浏览器
是这样操作的呀可是转换不了呀
width:100%">
&略有小成&
来自：浏览器
是不是那个程序设置的不对呀
width:100%">
&略有小成&
来自：浏览器
没什么用，，感觉还没得不单手舒服！
width:100%">
&略有小成&
来自：荣耀畅玩4C
感谢楼主分享！
width:100%">
&新学乍练&
发表于 6&天前
来自：浏览器
width:100%">
好基友勋章
花粉好机友，注册时间大于99天
关注华为花粉俱乐部微信公众平台——“华为花粉俱乐部”
在职斑竹的身份勋章，感谢斑竹的辛勤劳动
1000万花粉
纪念花粉俱乐部注册花粉数超过1000万
大富翁勋章
达到1万花瓣后可申请获得大富翁勋章
1月7日前可申请自动获得，1月7日后参与其它相关活动获得。
冬季的颐和园家乡的雪津冬记南浔雪景
花粉客户端
Make it Possible
Make your device special
华为云服务
Huawei cloud services
音乐播放器
Huawei Music
Huawei Vmall
没有最新动态
关注花粉俱乐部
联系我们：
|关注花粉俱乐部：
Copyright (C)
华为软件技术有限公司 版权所有 保留一切权利