通过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作为我们的开发语言。

create_project.png

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

interface.png

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

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

连接UI组件

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

connecting.png

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

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.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容