G's Vision

Less But Better.

如何设计应用手势?

导读:

Marcos Alonso 是苹果人机界面设计师,在 2018 年苹果开发者大会上 Marcos 就应用如何响应手势进行了分享,对设计点击、轻扫手势,提供持续反馈以及处理多个手势提供了有效建议。



界面的流畅源自与设备的交互操作,屏幕上的触摸如何变成应用中的手势?如何设计这些手势并捕捉所有要传达的意图?本文将从点击、轻扫之类的核心手势设计入手,介绍一些在设计手势时需要遵守的交互原则,多手势的处理以及如何将其与你的应用相融合。

如何设计点击?


你或许以为点击无需设计,但这个行为有许多需要注意的细节。以「计算器」这个应用为例,首先要记住的是按钮在被点击时应该立即高亮,显示按正在工作以及系统对手势作出了反应,不过只有将手指移开的时候我们才能确认完成了这次点击。


接下来要记住的是在点击区域之外再创建一个边界,这个额外的边界让点击更舒服并可避免触控时的意外取消。用户在按下按钮时可能会改变想法,所以用户将手指移出点击区域并抬起时,应该取消点击操作。同样,如果将手指移回到按钮上,按钮应该再次高亮,并完成点击操作。

如何设计轻扫?


轻扫是 iOS 的核心手势之一,用于滚动、拖拽、翻页等多个动作。无论你用它做什么或者如何称呼它,手指操作的核心原则总该保持一致。在这个例子中,我们使用轻扫将照片拖拽至右侧。


交互始于点触图片进行拖拽的那一刻,但是触摸必须移动一段距离才能确认轻扫这个手势,我们以此区别轻扫于其他手势。这段距离称作迟滞距离(Hysteresis),在 iOS 中通常是 10pt,所以当触摸达到这个距离时,轻扫开始生效,这也是决定轻扫方向的好时机。


现在轻扫已被检测,这是该手势的起始位置,之后触摸和图片应该一起移动。我们应该关注相对位置,而不是将图片的中心作为拖拽点。在拖拽的过程中,我们也应该追踪触摸的位置及速度,所以当拖拽结束时,我们不是使用终止位置,而是触摸的历史记录来确保图片流畅地运动。


触摸和内容应该一起移动,一对一追踪非常重要。当轻扫或拖拽时,内容应该与手势密切结合。这是 iOS 的原则之一,也是你滚动页面时感觉自然直观的原因。它易于辨认和预期,所以当触摸和内容停止一对一追踪时,我们会立即注意到。在滚动中,它也可以表明我们已触达了屏幕边缘。


一对一追踪并不局限于触摸屏,例如 Apple TV 的操控式界面就是绕此概念进行设计的。因此,即便触摸没有直接操纵内容,保持手势与界面直接相连能让你控制动作,并让交互变得直观自然。

提供持续反馈


提供持续反馈是设计手势的另一个核心原则。这并不只局限于轻扫或者拖拽,而是适用于所有交互操作。回顾下 iPhone X 上的闪光灯按钮,按钮尺寸基于按下压力发生改变,时刻确认操作并表明系统对手势进行响应,让我知道再使点劲儿就会打开闪光灯了。


另一个持续反馈的优秀案例是 Apple TV 的聚焦引擎(Focus engine),Siri Remote 遥控器上的移动会持续不断地在电视屏幕上显示,告知用户选中的项目,项目改变的时刻,以及接下来的选择方向。


手势操作时的界面响应对于创建流畅的体验非常重要。因此,当实现手势操作时,你应该避免那些只能在手势结束时进行检测的方法,例如 UISwipeGestureRecognizer。使用 UITouches,或者其他能提供所有手势信息的手势识别方法,不仅是检测位置,还有速度、压力、触摸尺寸等信息。

响应多个手势


绝大多数的情况下,你的界面需要对多个手势进行响应。随着应用中递增的手势操作,复杂性以及支持的手势数量也在不断增加。例如,几乎所有使用滚动视图的界面都要支持点击、轻扫之类的其他操作。


再比如说,我可以滚动联系人列表,通过 3D Touch 来预览某个项目。假如在显示反馈前,不得不等待最终的手势,那么将不可避免的引入延迟。因为在等待的过程中,界面不会感觉时时响应。所以,我们应该在动作开始时检测所有可能的手势,一旦明确意图,取消响应其他手势。回到这个案例,我按压了一个联系人,但决定改为滚动,这时我取消了3D Touch 这个动作并转化成了滚动手势。


有时引入延迟无法避免。例如,每次在界面中使用双击时,其它的点击操作就会被延后,因为系统必须等待点击完成才能确定是单击还是双击。在该案例中,因为我双击缩放了照片,所以应用菜单的显示就被延迟了半秒。因此设计应用手势时,你应该了解这些情况并努力避免所有可能的延迟。

小结

以上就是 Marcos 就应用手势设计提出的四点主要内容:

  • 设计点击、轻扫手势

  • 内容与触摸一起移动

  • 提供持续的交互反馈

  • 并行检测多个手势

希望本文对你有所启发。 


评论

热度(1)