App设计体系之手势

1、定义

手与屏幕的交互称为交互手势

目前，手机app的交互手势，（除开游戏以外）一般单指双指即可解决手机上的交互，这里拿使用频率较高的手势进行说明

2、单指

2.1 单击

单击是最主要也是最常用的交互手势，在大多数场景中，优先考虑使用单击手势解决交互问题。

2.2 双击

双击图片，以双击点为中心放大图片到一定倍率，再次双击图片，图片缩小回原倍率。

2.3 右滑

在微博首页，左滑进入”我的故事”界面，虽然左滑逐渐应用在更多的场景下，但对于用户来说仍然是小众手势，较为隐晦，需要加上使用引导说明，最好像微博一样，在首页左上角有功能入口，而左滑是功能的多一种选择；为什么微博会在此处加上左滑交互手势呢？从界面上我们可以看到导航上有“关注”和“热门”两个选项卡，左右滑动切换选项卡，这为右滑进入“我的故事”页面起到隐喻作用，对于用户而言，左右滑动切换成本更低。

2.4 左滑

iOS系统的微信，左滑列表，出现操作按钮。

2.5 上滑/上拉

上滑浏览界面，当需要加载新数据时，上拉刷新加载。

2.6 下滑/下拉

大多数下滑是先上滑浏览界面，需要浏览前面内容时下滑浏览，当内容位于界面顶部时，下滑变为下拉，最为常见的下拉交互方式有3种，分别是：下拉刷新、下拉新页面，、下拉快捷入口。

a 下拉刷新是下拉交互中最常见的一种操作，用手指拖住屏幕往下拉后松开即可刷新；

b 下拉快捷入口在执行下拉的手势时，页面会滑出一段距离，并保持开启状态，直到我们执行关闭操作时才会消失。在微信的首页下拉显示小程序入口。

c 下拉新页面是在下拉刷新的基础上，加大手指拖动屏幕的距离，App 会进入特定的二楼界面，如微信的视频动态；

2.7 长按

Android系统的微信，长按列表，出现操作按钮。和前面左滑手势所提到的功能是一致的，但交互不一样，这就是iOS和Android之间的差异性。

3、双指

3.1 收缩和伸展

在前面“双击”中提到了双击图片缩放图片倍率，同样，也可以通过双指缩放图片倍率，相比双击，双指操作更能随心控制缩放倍率

3.2 转向旋转

场景：调整图片角度和旋转方向

小结：

操作后和返回操作前使用的交互手势应保持一致或对应，

对应：上滑浏览页面新内容，那回到已浏览内容就要下滑；

一致：双击放大图片，同样双击，回到原倍率图片；

当所有手势不适用或有冲突，使用最基础的手势--单击 。

以上只是手机上较为常用的手势，如今VR等技术正蓬勃发展，应用在此技术上的交互手势和智能手机时代与众不同，我们应跟进潮流，切勿被抛弃了。