给应用加入手势操作需要注意的那些事儿.pdfVIP

给应用加入手势操作需要注意的那些事儿 给你的手势提供明确易懂的视觉反馈 在一个点击或者手势做完之后给予用户 觉上的反馈 ，会让用户有自己动作即将达到自己预期效果 的满足感。但是 ，当用户面对一个新的应用和相应新的手势之时 ， 觉反馈就不仅仅只为了确认用 户动作而存在了 ，更承担着明确告诉用户这样的手势会带来什么效果的重任。 反面例子 ：墨客是一款第三方微博客户端 ，用户在墨客的主界面某一条微博的区域内完成从左到右 的滑动手势之后 ，会显示上图左侧的效果 ，该条微博的区域会整体向右移动 ，并留出一定的灰色 空白 ，见上图 ；反之从右向左滑动也会有微博区域向左移动并留出灰色空白的情况发生。如第一次 下载并使用这款应用 ，用户将无从知晓到底自己的这一手势将要触发怎样的效果。这样的 觉反馈 便丧失了初衷。 正面例子 ：同样是一款第三方微博客户端 ，同样是某一条微博的区域内完成相同手势 ，Fuubo 这款 应用带来的 觉反馈就要相对明确 ，完成手势之后会有灰色半圆出现 ，并且半圆中含有转发或评论 的小图标 ，给了用户明确的信息他的手势即将带来什么。 总结 ：为手势的 觉反馈添加文字或图标信息 ；文字或图标信息要明确易懂。 为你的手势准备过渡效果 过渡效果为手势增加了可见的质感 ，提供给用户可以注意到的变化过程。与此同时 ，过渡效果还为 用户提供了撤销自己手势的机会。 正面例子 ：上图是爱范儿的 iO S 版客户端 ，用户在主界面中切换的时候 ，可以看到在进行向右滑动 的同时 ，将要返回到的界面的左半部分逐渐显露 ，这个过程中 ，用户如果想要撤销 ，可以将滑动的 手指向相反方向滑回 ，见上图。这样成功地通过过渡效果为用户争取了时间 ，用户可以去决定到底 是否要进行这一手势操作。 反面例子 ：还是同一款应用 ，在点进某一篇文章后 ，文章正文和评论页面之间的切换却不见了过渡 动画的踪影 ，手势完成之后 ，硬梆梆的感觉让用户反感。 总结 ： 为手势增加过渡动画效果 ； 通过过渡效果为用户提供撤销手势的选择。 替换标准手势 学会接近用户期望 一旦用户适应了某种东西 ，那么设计者很难再去改变用户的习惯。对于手势来说 ，有一些手势已经 成了广大智能手机用户的标准手势 ，比如在ipho ne手机中的短信或者邮件页面 ，向右滑动这一手势 会呼出删除的选项 ，还比如在阅读类应用中向右滑动这一手势可以返回到上级界面。这些标准手势 意味着用户在接触新应用和新应用带来的新手势的时候 ，会有和原来一样的期望产生。 正面例子 ：Clear 这款应用中 ，任务项区域内向右滑动就可以将该项任务标记完成 ，并且该项任务会 自动划上横线后下移到最低端。这样的标记完成功效和标准手势中删除的功效非常相近 ，不会给用 户适应这一新手势带来什么成本 ，用户也会觉得并没有违背自身的期望 ，感觉舒适自然。 反面例子 ：Fuubo 这款应用中 ，当用户进入微博正文的页面后 ，习惯性地向右滑动 ，心中期待的是 返回到主界面 ，但真正发生的却是你进入了这条微博的上一条的正文界面。这样做会让用户产生挫 败感和不适应 ，之后他没准还会在下次的使用中再次重蹈覆辙 ，对你的应用的好感会逐步降低。 总结 ：用和标准手势相近的手势进行替换。 不要让你的手势触发区域远离拇指热区 下拉和左右滑动是用户使用频率最高的几个手势 ，但作为设计者 ，从哪开始拉 ，从哪开始滑却是一 个值得去注意的问题 ，尤其在当下手机屏幕尺寸不断增加的背景下 ，我们可爱的拇指的易触及区域 正在由原来的百分之三十左右逐渐减少。如同设计者需要将点击目标放在拇指热区中一样 ，手势触 发区域也应如此。 反面例子 ：上图中左侧的 Fuubo 的下拉返回触发区域位于屏幕最上方的红色区域内 ，区域较小且最 关键的是位置过于靠上 ，远离了拇指热区。 正面例子 ：上图中右侧的随享的下拉返回触发热区相对区域较大 ，且可以在屏幕中部的位置进行 触发 ，这一部分是用户拇指喜欢的位置。 总结 ：手势触发区域放在拇指热区中。 保持手势在全局的通用程度 不要让用户在你的应用中适应了你创造的手势后 ，却又在你的应用中碰壁。 如果用户喜爱你的手势 ，觉得你的手势达到了方便快捷的目的 ，并耗费学习成本掌握并适应了你的 手势 ，那么便意味着你成功了一半。另一半便是留住你的用户 ，留住他喜爱你所创造的手势的心。 正面例子 ：Fubbo 这款应用的下拉返回的手势完全做到全局通用。 反面例子 ：新浪官方微博客户端的向右滑动返回的手势早已深入人心 ，被用户所接受并习惯 ，但这 个手势并不是全局通用 ，在点击链接之后想要返回的时候失效了 ，在点开大图之后想要返回的