通过Haptic Feedback创建沉浸式用户体验的应用

本文是一篇译文
原文Creating an Immersive User Experience with Haptic Feedback in iOS

创建沉浸式并且有意思的用户体验的应用,需要的不仅仅是一个非常nice的用户界面和直观的空间布局,一个真正沉浸式体验不单单使用到基础的视觉和听觉体验,还需要一个触觉反馈。

note:触觉引擎(Haptic Engine)仅仅在iPhone6s及以上产品中有配置。如果你的设备没有支持触觉引擎,那么你就无法测试最终产品的效果。即使如此我还是建议增加触觉反馈的到你的app里面。

苹果自己实现触觉反馈几乎贯穿了iOS所有的部分,从锁屏的富媒体通知到确认Apple Pay一次成功的交易,甚至到滚动的轮子和滑块。让用户更加确信自己的操作是非常重要的,而使用触觉引擎来传达信息是一种非常伟大的途径,可以去传达你想要用户接受的消息。

我们如此幸运,Apple已经实现了非常具体的反馈模式,我们用起来会非常简单。所以这将是一节非常简短的课程。首先我们先分别学习下几个我们需要用到的类:

UIImpactFeedbackGenerator

"Use impact feedback generators to indicate that an impact has occurred. For example, you might trigger impact feedback when a user interface object collides with something or snaps into place.”
-- Apple’s documentation on UIImpactFeedbackGenerator

UISelectionFeedbackGenerator

“Use selection feedback to communicate movement through a series of discrete values.”
-- Apple’s documentation on UISelectionFeedbackGenerator

UINotificationFeedbackGenerator

“Use notification feedback to communicate that a task or action has succeeded, failed, or produced a warning of some kind.”
-- Apple’s documentation on UINotificationFeedbackGenerator

补充:
iOS 10 引入了一种新的产生触觉反馈的方式,通过使用系统的预定义震动模式,让用户在进行操作时得到不同的震动反馈。这个功能有新增的 `UIFeedbackGenerator` 提供.
它的3个子类`UIImpactFeedbackGenerator` 、 `UISelectionFeedbackGenerator` 和 `UINotificationFeedbackGenerator`.

`UIImpactFeedbackGenerator`预示着按压发生了。比如系统触感强度设置就是为了在你按 Home 键的时候给你一反馈,实际上 iPhone 7 的 Home 键并可以按动。

`UISelectionFeedbackGenerator`预示着选择的变化

`UINotificationFeedbackGenerator`预示着成功、失败和警告。比如 Apple_Pay 支付成功和失败的反馈,这里比较了下三种情况的反馈,应该是在力度上面有所差别。和 Impact 的差别在于,这里的触觉反馈类似左右摇动两下,error好像会振动3下。

开始撸代码

我将要覆盖3中不同的反馈方式。首先,我们创建一个新的工程。从创建一个single-view application开始,起一个你喜欢的工程名字,并使用swift4.0作为我们的开发语言。

通过Haptic Feedback创建沉浸式用户体验的应用_第1张图片
create_project.png

打开我们的工程,第一件事情就是去构建用户界面。我建议你布局5个 Button, 一个用户按压反馈,一个用户选择反馈,还有3个用户通知反馈。你可以按照你自己的意愿来布局或者你只关注代码逻辑的话可以完全忽略这一段。我设计的 stroyBoard 长这样:

通过Haptic Feedback创建沉浸式用户体验的应用_第2张图片
interface.png

另外一点需要注意的是页面布局,但是本节课程这个不是必须的,这是你在开发iOS项目时必须的一项技能。

note:如果你不知道怎么添加约束或者自动布局,那么你可以先去学习另外一篇我们的课程[Introduction to Auto Layout]()

连接UI组件

让我们连接这些 Button 和我们的代码,在"1" Button 的上方,按住 control 键, 点击并拖拽就可以连接 Button 和 代码:

通过Haptic Feedback创建沉浸式用户体验的应用_第3张图片
connecting.png

你这么做的时候,就会弹出一个框,在这里我们选择 ”action“ 而不是 ”outlet“,给你的 action 起一个名字,我给他叫 onePressed 但是不限制你也一样用这个名字。

通过Haptic Feedback创建沉浸式用户体验的应用_第4张图片
connection_settings.png

给另外4个按钮执行同样的操作。之后我们进行下一个步骤。

实现反馈创建

非常完美!我们完成了我们的 app 布局。感谢 Apple, 我们的代码将会非常简洁。让我们开始吧。

我们不需要引入任何东西,我们用到的都属于 UIKit, 我们先创建一个UIImpactFeedbackGenerator:

 let impact = UIImpactFeedbackGenerator() //1
    @IBAction func onePressed(_ sender: Any) {
        impact.impactOccurred(); //2
    }

很简单,对吧?
我们只需要:

  • 创建一个叫 impact 的常量,它是 UIImpactFeedbackGenerator类型
  • 触发触觉反馈

不得不提及的关于UIImpactFeedbackGenerator,你可能已经注意到但你在声明你的 impact 变量的时候,这里有3中选项可以设置。light, medium, 和 heavy。你可以按照你自己的需要来设置它。但是我还是保持我的 impact 是 default 状态。这几种风格唯一的区别就是触觉感受的强烈度。所以确保你在使用它的时候没有用过度。(比如说你设置heavy,每一个你获取到文本内容就会强烈振动一下。这就是 Apple 在 message app 使用 light 的原因)。

cool!运行你的 app 并点击 button 1!可能感觉是一种没什么用的颤动但是 apps 获得了
Apple Design Awards就因为这一个小小的融入。相信我。

接下来我们尝试去设置选择反馈的创建。

 let selection = UISelectionFeedbackGenerator()
    @IBAction func twoPressed(_ sender: Any) {
        selection.selectionChanged()
    }

Sweet!这个是非常简单而且容易去解释的。就像它的名字selection的含义一样,这个在这个app里展示的一小部分。一个iOS 使用UISelectionFeedbackGenerator非常好的例子: 如果你有一个iPhone7,在你在设置中切换一个开关选项的时候或者滚动一个选择器的时候应该可以感受到小的”selection“反馈。

最后一种也是最有趣的一种,并且你和想要在你的app中去实现的就是通知反馈。

  let notification = UINotificationFeedbackGenerator()
    @IBAction func successPressed(_ sender: Any) {
        notification.notificationOccurred(.success)
    }
    
    @IBAction func warningPressed(_ sender: Any) {
         notification.notificationOccurred(.warning)
    }
    
    @IBAction func errorPressed(_ sender: Any) {
         notification.notificationOccurred(.error)
    }

我当然知道你现在的想法:”这个太简单了!感谢 Apple 让这个开发如此简单“。

我也非常同意你的想法。不管怎样,运行你的app! 你可以感受到3种不同的通知当你在点击不同的按钮的时候。一点需要提醒的就是,放触觉和声音同步时非常值得推荐的做法。 Apple 在 Apple Pay就是这样做的,并且说实话感觉非常棒!

总结

总结一下,我们创建了一个小应用使用了 Haptics -一个用户体验的重要方面。告诉我你计划怎样去实现触觉反馈到你自己的应用里面,和一些你关于这个课程的想法。我很乐意听到你们的声音。代码地址complete Xcode project on GitHub.

你可能感兴趣的:(通过Haptic Feedback创建沉浸式用户体验的应用)