便捷的单手操作交互设计.docxVIP

官网 官网 / 创想设计学院 官网： / 官网： / 创想设计学院 便捷的单手操作交互设计 探讨 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 类用法。 手势是如何被利用的 页面切换 在有限的屏幕空间中使用 APP 时，多层级、多页面切换是最频繁的操作，如果仅仅依靠大多数应用左上角的 back 键来返回或是点击后才能切换 tab，使用起来将非常不方便，因此单手操作最常见的应用场景则是利用左右滑手势来穿行于各层级页面间。如下图网易云阅读资讯中心的 tab 切换。在这个手势操作中有两个关键因素影响使用体验：一是滑动过程中页面要跟随手指，这样能让用户形成对产品的控制感和更明确的层级感;二是需要有“路标”作用的页面元素作为指引。 图(1)是网易云阅读和 iOS 设置中的右滑操作示意。网易云阅读中，在页面任何位置轻轻右滑即可返回，iOS 的返回操作手势热区在屏幕边缘。这两者的区别是，云阅读中的返回设计更多是利用用户的下意识行为，操作成本低，但同时增加了误操作的风险。iOS 中用户的操作多是有意识的行为，误操作几率小，同时操作成本也增加了。这两种方式各有利弊，因此在设计中应更具实际场景定义好对手指滑动的感应范围和角度。 图(1)iPhone 和网易云阅读的右滑手势热区 图(2)为网易云阅读和网易新闻的文章正文页，都能通过左滑返回，后滑进入评论页。相比之下用网易新闻显得更自然，初次用网易云阅读的用户会更容易对右滑进入评论页产生迷惑。究其原因，网易新闻在标题栏两边分别放置了“返回”和“跟帖”的页面元素，就像是分叉口的两个路标，让用户对前方的路形成心理预期。相比之下，网易云阅读的返回和评论同处于页面底部的左边，引导性不太明确。 图(2)手势切换时的页面引导 内容呈现维度的切换 下图中 Cal 和数读展示了手势的另一中应用方式。日期的可拆分维度有年、月、季度、周等， 不同的使用场景需要切换时间粒度，Cal 利用手势上下滑动方便地切换周历和日历，利用左右滑切换日期。数读首屏，默认显示文章概要，上滑即可浏览文章详情，由此利用手势的上下左右滑动可以针对文章展开 4 个维度的浏览：概要，详情，上一篇，下一篇。此外，相似的手势运用还是墨迹天气等。 图(3)Cal 的周历、日历切换 图(3)Cal 的周历、日历切换 图(4)数读的文章概要和详情切换 将相关功能隐藏在对内容的手势操作中，扩充屏幕内容展示空间。 智能手机受尺寸限制，对用户而言首屏空间越发宝贵。如果不能在第一时间让用户得到有效信息，APP 的魅力将大打折扣。然而实际设