20130418早读课：给应用加入手势操作需要注意的五件事

反面例子： 墨客是一款第三方微博客户端，用户在墨客的主界面某一条微博的区域内完成从左到右的滑动手势之后，会显示上图左侧的效果，该条微博的区域会整体向右移动，并留出一定的灰色空白，见上图；反之从右向左滑动也会有微博区域向左移动并留出灰色空白的情况发生。如第一次下载并使用这款应用，用户将无从知晓到底自己的这一手势将要触发怎样的效果。这样的视觉反馈便丧失了初衷。

正面例子：同样是一款第三方微博客户端，同样是某一条微博的区域内完成相同手势， Fuubo 这款应用带来的视觉反馈就要相对明确，完成手势之后会有灰色半圆出现，并且半圆中含有转发或评论的小图标，给了用户明确的信息他的手势即将带来什么。

总结：为手势的视觉反馈添加文字或图标信息；文字或图标信息要明确易懂。

正面例子：上图是爱范儿的 iOS 版客户端，用户在主界面中切换的时候，可以看到在进行向右滑动的同时，将要返回到的界面的左半部分逐渐显露，这个过程中，用户如果想要撤销，可以将滑动的手指向相反方向滑回，见上图。这样成功地通过过渡效果为用户争取了时间，用户可以去决定到底是否要进行这一手势操作。

反面例子：还是同一款应用，在点进某一篇文章后，文章正文和评论页面之间的切换却不见了过渡动画的踪影，手势完成之后，硬梆梆的感觉让用户反感。

总结：

• 为手势增加过渡动画效果；
• 通过过渡效果为用户提供撤销手势的选择。

正面例子：Clear 这款应用中，任务项区域内向右滑动就可以将该项任务标记完成，并且该项任务会自动划上横线后下移到最低端。这样的标记完成功效和标准手势中删除的功效非常相近，不会给用户适应这一新手势带来什么成本，用户也会觉得并没有违背自身的期望，感觉舒适自然。

反面例子：Fuubo 这款应用中，当用户进入微博正文的页面后，习惯性地向右滑动，心中期待的是返回到主界面，但真正发生的却是你进入了这条微博的上一条的正文界面。这样做会让用户产生挫败感和不适应，之后他没准还会在下次的使用中再次重蹈覆辙，对你的应用的好感会逐步降低。

总结：用和标准手势相近的手势进行替换。

反面例子：上图中左侧的 Fuubo 的下拉返回触发区域位于屏幕最上方的红色区域内，区域较小且最关键的是位置过于靠上，远离了拇指热区。

正面例子：上图中右侧的随享的下拉返回触发热区相对区域较大，且可以在屏幕中部的位置进行触发，这一部分是用户拇指喜欢的位置。

总结：手势触发区域放在拇指热区中。

正面例子：Fubbo 这款应用的 下拉返回的手势完全做到全局通用。

反面例子：新浪官方微博客户端的向右滑动返回的手势早已深入人心，被用户所接受并习惯，但这个手势并不是全局通用，在点击链接之后想要返回的时候失效了，在点开大图之后想要返回的时候失效了。另一个例子是 Fuubo 这款应用所创造的微博正文页面左右滑动从而上下翻微博的手势，在主界面的微博正文里有效，在个人页面的微博正文里却行不通。

总结：保持关键手势全局通用。

延伸阅读： 20121220早读课：移动平台的产品设计世界

                       20121123早读课：交互的创新，对手势设计的思考

Via： GeekPark