在iOS Apps 中设计一个基于手势的导航系统

手势式导航已经成为现代iOS应用设计的基石,能够使流体,直觉互动几乎感觉物理。 通过减少对可见按钮和菜单的依赖,手势释放了屏幕房地产,创造了更具有浸润力的用户体验。 苹果公司的UIKit提供了一套强大的手势识别器,但设计有效的导航系统需要周密的规划、对人机界面指南的理解和严格的测试。 文章探讨了如何构建一个手势驱动的导航系统,这个系统是可发现的、可响应的和可访问的。

以手势为基础的导航问题

触摸手势将自然人类运动映射到数字动作。 刷新手势可以反射将物理物体推到一边的行为; 缩放的抽搐感觉像是伸展或压缩表面。 这种调整会减少认知负荷, 并成为导航的第二性。 在iOS应用中, 手势导航可以取代传统的导航条、 标签条和后按键, 从而导致更清洁的界面, 关注内容。 然而, 设计不完善的手势可以让用户失望。 将创新和常规之间的正确平衡切换为关键。

iOS 导航中的核心手势

苹果的Human Interface Guidelines(HIG)定义了用户期望在应用间一致工作的标准手势。 利用这些熟悉的互动帮助用户感受家庭。

刷新

刷新手势也许是导航最灵活的。 刷新左侧或右侧可以转换到视图之间( 如在图片库中), 显示侧边菜单( 在许多基于导航的应用程序中从左边缘刷新) , 或者丢弃屏幕( 在 UINavigation 控制器中刷回) 。 方向性: 垂直刷新常用于滚动或丢弃模式 。

磁带

简单的水龙头是选择的基础。在导航上下文中,水龙头可以更深入地进入一个等级(例如,在表格视图中敲一行),也可以触发一个动作,如打开底板。双水龙头在导航中不太常见,但可以在内容上缩放。

键

平心图主要用于在地图、图像和文档上进行缩放。在导航中,剪切还可以在概览模式和细节模式之间切换(例如,缩放到网格视图 ) 。

长按

长的按键(或对早期设备的强制触碰)会显示背景菜单,预览,或者快速动作而不导航。例如,长的按键预览可以显示回复选项,而不打开完整的对话.

边缘刷新

从屏幕边缘(左边缘向后移动,右边缘向iPad上偷看/流行)是系统级的手势,应用程序应该尊重,除非有强大的理由来覆盖它。避免与系统手势冲突,防止用户混淆。

手势导航设计原则

成功的手势导航不仅仅是附加识别器,这需要一种整体设计方法。

发现

手势是看不见的。 用户必须被教化或直观地理解它们。 使用视觉提示( 如: 微妙箭头、 拖曳指示器、 或第一次发射时的教程) 。 一致的模式 — — 总是用左手擦拭来返回 — — 帮助用户快速学习 。

一致性

遵循平台常规。 用户期望右键刷在导航堆栈中表示“ 返回 ” 。 如果您使用右键刷在其它东西上, 请提供清晰的上下文。 在您的应用程序中, 请保持手势一致 。

反馈

每个手势必须提供即时、清晰的反馈。视觉反馈(在手势的同时激发一个视图)、随机反馈(使用UIImpactFeedBackGenerator或UIInfindationFeedBackGenerator)和音频提示(在适当的时候)证实手势被认可。没有反馈,用户可能反复刷新,从而造成令人沮丧的经历。

无障碍

并非所有用户都能精确地进行手势。 提供导航的替代方法: 按钮、 键盘快捷键( 键盘上的iPad)、 VoiceOver 自定义动作以及切换控制支持。 确保手势不是执行关键动作的唯一方式 。

避免冲突

当多个手势识别器被附加在同一视图(或父视图)上时,可能会出现冲突。例如,一个将卡片删除的刷卡可能会与刷卡片在卡片内滚动时发生冲突。使用像这样的代表方法谨慎地将手势排序,或者设置手势识别器依赖性。

业绩

手势处理必须是流体的. 重型动画或同步计算会导致手势滞后或结巴. 使用 及其内置的手势识别器进行标准平板; 对于自定义手势,保持手势处理方法的轻量级,并考虑使用 进行平滑动画.

在iOS中执行手势识别器

iOS 提供了一组 下的具体的手势识别器。 这里介绍如何实施共同的导航模式。

基本设置

说明手势识别器,设定其目标和动作,配置属性(方向,音符数量等),并附在视图中。

let swipeBack = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipeBack))
swipeBack.direction = .right
view.addGestureRecognizer(swipeBack)

高级配置

对于更细颗粒的控制,请使用代理协议。例如,只有在用户的手指从左边缘(向后刷)开始时,才允许刷牌手势:

func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
 guard let swipe = gestureRecognizer as? UISwipeGestureRecognizer else { return false }
 let location = swipe.location(in: view)
 return location.x < 30
}

同时处理手腕

当滚动视图或收藏视图被涉及时,您可能需要允许手势一起工作。使用 返回 ,用于兼容手势,并 设定优先级。

自定义过渡

对于完全手势驱动的导航, 配对手势识别器, 并带有自定义视图控制器的转换。 例如, 执行一个跟用户手指相似的交互式弹出转换, 类似于默认的 iOS 背手势。 这涉及到使用 [[FLT: 9] , 并将其与导航控制器代表的泛或刷手势连接起来 。

设计带有手势的菜单导航( 实例)

许多现代iOS应用程序使用从左侧滑入的汉堡菜单。基于手势的选项可以是从尖端刷新显示侧面板(就像iPad的分割视图)。要构建此选项:

  1. 在主内容视图中附加一个边缘泛手势识别器(带有边缘:.left).
  2. 手势开始时,在左边增加一个菜单屏幕外视图;在改变时,按比例更新其x位置;在结束时,根据速度/位置,将它完全打开或关闭.
  3. 为无法刷新的用户提供按钮 。
  4. 使用交互式动画,允许反转中位数.

这种模式可以扩展至底页,右侧面板,或可刷标签.

测试和精练手势导航

彻底测试是不可谈判的. 手势识别器可以在不同的设备上出乎意料地表现,有分裂屏幕,或者当系统手势(如家用指示器,应用交换器)被卷入时.

工具和方法

  • Xcode调试器: 使用视图调试面板可视化手势识别器状态(可能,开始,改变,结束,取消,失败).
  • 可访问性检查器: 验证VoiceOver用户可以访问每个动作.
  • 用户测试:[] 观察真实用户进行手势;注意犹豫,意外触发,或重复尝试.
  • 性能监测:[] 使用核心动画仪器进行手势执行时的检查帧率.

常见的陷阱

  • 意外触发器: 当用户试图选择一行时,返回的刷子可能会被误解。通过要求最小拖曳距离或特定起始边来减轻。
  • 系统格冲突:[] 在带有Face ID的iPhone上,家用指示器刷卡可以与底端的手势冲突. 使用 ] 属性允许您先手势,但总是提供倒置.
  • 穷困的发现: 如果用户不知道有手势存在,他们就会被卡住。使用登机、持续提示或适应性UI,在超时后显示按钮。

无障碍和包容性设计

手势导航不得排除有运动障碍的用户。

  • 替代控制: 每个手势触发动作都应该通过按钮或键盘快捷键提供. 例如,刷音到删除也可以是显示删除按钮的长压.
  • VoiceOver:使用]将手势动作暴露为命名动作,例如,“回转”可以在旋转器中成为自定义动作。
  • 降温运动: 尊重]设置;在请求时用简单的淡化过渡替换parallax或滑入菜单.
  • 触摸住宿: 注意辅助触摸住宿,改变手势行为——绝不假设触点是准确的.

结论

在iOS应用中设计一个基于手势的导航系统是创建一种有接触力的现代用户界面的有力方式。 通过理解手势识别器的基本原理,坚持苹果的设计原则,优先使用无障碍,可以构建出自然而无功的导航。 从系统标准手势开始,只有在真正改进经验时,才会添加自定义手势,并且总是用不同的用户基础进行测试。 手势导航完成后,便会消失在背景中,让用户专注于内容和任务。

欲进一步阅读,请参考苹果公司的人文界面指南[,UIKit手势识别器文档,以及WWDC 2018的优秀文章[[] 设计流体相互作用[。关于无障碍最佳做法,见Apple的无障碍HIG。