实践音频触感设计

敬请探索如何在 iPhone 上提供丰富的 app 体验，如动画、声音和触感等。学习在 Core Haptics 框架内设计多模式体验的关键概念。我们将带您了解我们的示例应用 HapticRicochet，探索如何将触感和声音反馈的设计与关键互动时刻协调起来，并展示如何创造令人愉悦的神奇体验。为了充分了解本节内容，我们建议先观看 WWDC19 的“通过 Core Haptics 扩展感官体验”，并查看 HapticBounce 示例项目 (需要 Xcode、iPhone 8 或更新版本，并需要了解 Swift 的基本信息)。熟悉 Core Haptics 会有帮助，但并非强制要求。

资源

相关视频

下载

嗨我是卡米尔穆塞特我是Apple设计团队的设计师这一节我会向你示范一些实际步骤和设计考量让你在App添加音频和触觉反馈一直以来对于设计师或工程师来说为用户提供丰富的App体验都是一项相当大的挑战当中包括动画、声音和触觉利用iPhone上的Core Haptics 我们现在更容易创建视觉、声音和触感像真的神奇时刻为了解释和练习这些技能我会使用一个iOS App 这个App源自之前一个名为“触觉回弹”的代码示例项目这个App添加了一些功能让它更像一个迷你游戏并提供一个画布让你设计图像声音和触觉带给你全面的体验新的示例项目称为“触觉跳弹”

这个项目关于一个像真的球在iPhone画面上来回滚动这取决于iPhone倾侧的方向球在手机画面之内滚动和弹跳并产生音频和触觉反馈就像现实世界中那样当你轻点这个球… 它便会变大当你再次轻点球的外层会添加一个防护罩随着每次撞击防护罩会受到破坏和耗损最终球会爆裂和消失

我们还在背景添加了纹理让你通过轻点背景上任何一点启用或关闭纹理这一节我会集中讨论两个机制：添加保护罩和启用滚动纹理在进一步讲解之前让我们回顾一下议程我会先讲解一下主要的音频和触觉设计原则这些原则适用于Apple 接下来我会简单介绍Core Haptics 这是一个支持多模式反馈的框架

这一节主要的部分会探讨使用Xcode的“触觉跳弹”项目看看我们如何添加、设计和改善保护罩和滚动纹理的回馈体验设计多模式体验具有相当挑战性但如果做得好我们的用户体验也会大大提升这是个神奇、令人愉快和恰到好处的体验其中一个例子是 iOS 中的“手电筒”按钮它结合了视觉动画、声音和触觉反馈提供清晰、精准和简洁的完整体验这是一个迭代和创造性的过程当中涉及设计和工程成果通常这是触觉体验而不是听觉感受但为了在这里向你示范我们将这些触觉体验转化为声效让你在这段视频中通过声音去感受为了让你得到神奇和令人愉悦的App体验以下是指导项目的三个原则我们团队觉得很有效希望对你也有帮助当中包括因果关系和谐和实用

有用的反馈可以让我们清楚看见原因关键在于让反馈的来源或原因显得清晰和明显最简单的获取反馈方式便是让球撞击手机的边框每次撞击会产生相应的声音和触觉效果类似地触觉滚动纹理只会出现于背景图像显示的时候这种感官体验由网格产生我们的第二个原则是和谐若要提升我们的感官体验连贯性和一致性很重要结合起来才可以创建一种特定的体验这种体验应该与外观和声音保持一致一个小的球无论感觉起来或听起来都比较轻而一个大的球听起来或感觉起来也比较重好像它有真实的重量我们的第三个原则是实用这关于为你的App体验提供明确的价值添加反馈需要言之有物否则便会变得过度和令人不快因应重要时刻为你的App设定触觉和音频反馈例如球的体积增长接下来让我们重温一下Core Haptics Core Haptics是在 iPhone和iOS应用的科技让你设计App内的定制触觉和音频反馈这是一个功能强大的 API 围绕四个基本元素：引擎、播放器模式和事件让我们简要地重温一下引擎是最高级别的元素那是我们与手机连接的实体执行器然后是播放器用于回放控制如开始、停止和暂停还有模式和事件模式是指一段时间内事件的集合事件是用于特定体验的构建基块事件有许多类型最常见的是短暂和连续的事件以下是一个具体示例示范何为由事件组成的模式我正在使用快速浏览可视化器以便在MacOS上查看触觉模式这详列于“an.ahap”档案 “AHAP”代表Apple触觉音频模式让我们再看一遍在Finder中选取“an.ahap”档案然后按下键盘上的空格键

让我们详细看看模式包含的项目显示为蓝色的第一个事件是瞬态事件显示为橙色的第二个事件是连续事件

该模式使用JSON语法瞬态事件由此代码创建

这总结了我们对Core Haptics的概述如果你想认识多一点可以查看在线文档这一节的实际例子会集中探讨加载、更改和播放模式以下将会讨论Xcode和触觉跳弹从触觉跳弹启动文件夹打开项目确保你可以在iPhone上编译和运行该项目模拟器不适用于触觉反馈你需要一部实体iPhone 8 或更新机型才得到触感体验确认电话没有调至静音并且调高音量我们会使用观看控制器档案以及.ahap、.wav 和 .png 涵盖数据文件确保你熟悉这个游戏和它所有的互动功能你可以轻点球轻点背景并随意倾侧手机再来让我们看看保护罩是怎样变出来的我会使用和谐原理来解释保护罩时刻并看看设计细节在图像方面我们有一个动画持续时间为五百毫秒在右上角看起来像这样

在触觉方面我们要突出状态的更新变化在音频方面我们想要传达能量的增强以及具有强大保护力的结束状态

在这个例子我们创建了两个不同的涵盖数据传达不同的品质我们会看看哪个更有效用于保护罩体验但首先让我们看看如何加载和播放保护罩的反馈

以功能而言代码分为两部分我们首先初始化构建基块然后是播放和执行保护罩变换的函数

在“initializeShieldHaptics”这个函数我首先会从“ShieldTransient”档案创建一个模式然后使用该模式创建一个保护罩播放器

此时反馈已准备就绪

这个保护罩函数会被调用当变换功能准备执行触觉和音频反馈的播放是通过在保护罩播放器上调用“startPlayer” 这个函数很好用我们在项目中会经常用到然后播放视觉动画

现在让我们看看 “ShieldTransient”涵盖数据它定义了我们对于触觉和音频反馈的体验触觉体验应该是这样的而音频听起来像这样我喜欢这个声音让这个球更有活力也增加了保护性让我们再听一遍问题是触觉和声音两者并不协调触觉体验由三个短暂元素组成… 而音频是连续的和渐进的两种感觉并不协调让我们看看另一个涵盖数据这称为“ShieldContinuous” 它会产生一个连续增强的触觉体验以及摇摆不定和渐弱的音频这次我也感觉到和听到触觉和音频不太配合但我喜欢这种触觉体验感觉这是个不错的变换表达出添加了一个保护罩让我们再听听这个触觉反馈我打算使用连续的触觉模式配合第一个涵盖数据的声音

我会使用这两个涵盖数据并从第一个模式选取我喜欢的音频并在第二个连续的触觉模式中使用它

看看我在这个例子如何做

首先我在文本编辑器打开“ShieldContinuous.ahap”档案然后滚动到档案末端在这个事件中你会看到我们指定的音频档与触觉体验一起播放

它使用的是 “EventType AudioCustom” 加上文件名作为音频档案你可以指定和调整音量通过使用参数值

要使用所选音频我将档案参考从“ShieldB.wav” 改为“ShieldA.wav”

经修改后涵盖数据会如下所示触觉... 和音频是连贯的两者互相支持和加强让我们来听听综合音频和触觉的反馈最后要修改的是使用我刚刚创建的最后涵盖数据回到“InitializeShieldHaptics”函数这次我们不使用“ShieldTransient” 而是指定和加载 “ShieldContinuous”档案

现在大功告成了现在便可以在设备上编译和运行我们得到一个感觉和谐的保护罩变换感觉真不错触觉、音频和视觉体验都互相配合为这个球添加了一个保护罩接下来我会重温一下如何在App上添加滚动纹理

开始时 “触觉跳弹”没有滚动纹理只是与墙壁碰撞当我轻点背景就会出现圆点纹理我得到了额外的触觉反馈感觉到球滚来滚去接下来我们会遇到两个问题让我们一起解决其中一个是技术问题另一个关于体验设计

在“initializeTextureHaptics”函数中首先我从纹理ahap文件中创建一个图案之后我使用该模式创建一个保护罩播放器函数“updateTexturePlayer” 会出现在所有执行纹理的视频帧我们用它来更新触觉的强度根据球的速度让我们看看结果我留意到一个问题就是纹理在几秒后消失了我知道为什么会这样有一个简单的方法可以解决这个问题问题是“.ahap”档案中的纹理只有两秒的触觉内容有个方法可以改善这个问题可以让它持续地播放模式播放器的进阶变量提供了额外的功能例如暂停、恢复和其他回调函数在“触觉跳弹”中我会用高级的模式播放器来执行循环功能让我们来看看这个变化我首先改变纹理播放器的宣告修改为 “CHHapticAdvancedPatternPlayer！” 类型然后我会使用相同的纹理档案但这次会创建一个高级播放器我现在可以在上面启动循环播放而其余代码保持不变让我们看看结果这次滚动纹理循环播放没有明显的停顿或跳接我要解决的第二个问题是关于纹理的外观和感觉我们看到这里的触觉模式涵盖数据非常密集在两秒内有近一百项条目这里的图像背景纹理非常粗糙只有几个圆点我想改善这个体验如果圆点图案更密集感觉会更真实

我会更改源档案背景图像会用这个档案的完善版本如果我运行这个App 将会使用更密集的新纹理让我们来看看

如果你遇到任何问题我们已将这个项目的最终版本放在“HapticRicochet-Final”文件夹以供浏览当中包含我们这一节作出的所有改动现在你可以在iPhone上编译和感受以上体验由你自由发挥设计自己的触觉体验我邀请你探索一下游戏中其他变换体验并尝试设计你自己的全新的触觉和声音反馈回顾一下我介绍了音频和触觉体验的设计原则让你可以在App上设计出色的多模式体验我们重温了Core Haptics的基础知识如何在iOS添加定制反馈的API 我示范了如何在“触觉跳弹”项目应用以上原则并集中讨论保护罩和滚动纹理机制如果你想获得更多信息和资源可参阅Human Interface Guidelines 开发者指南最后你可以重温 WWDC 2019视频当中包括Core Haptics的发布信息谢谢观看 [打击乐]

8:05 - Shield

// Initialize shield.
func initializeShieldHaptics() {
    // Create a pattern from the shield asset.
    let pattern = createPatternFromAHAP("ShieldTransient")!
        
    // Create a player from the shield pattern.
    shieldPlayer = try? engine.makePlayer(with: pattern)
}

/ Play shield transformation.
func shield() {
    // …
    // start player for haptics and audio.
    startPlayer(shieldPlayer)
        
    // Play shield animation
    isAnimating = true
    sphereView.layer.add(shieldAnimation, forKey: "Width")
    // …
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

实践音频触感设计

资源

相关视频

WWDC22

WWDC21

WWDC19