編輯導(dǎo)語(yǔ)：我們經(jīng)常會(huì)遇到手機(jī)震動(dòng)的情況，其實(shí)一些功能的震動(dòng)感覺(jué)也是不一樣的，比如蘋(píng)果手機(jī)的短信震動(dòng)、消息震動(dòng)、充電震動(dòng)等都是有一些變化；本文作者分享了關(guān)于iOS 振動(dòng)設(shè)計(jì)與落地全解析，我們一起來(lái)了解一下。

寫(xiě)文章也像做一款產(chǎn)品一樣，隨著技術(shù)的進(jìn)步、知識(shí)的迭代要進(jìn)行合理的優(yōu)化與更新。

過(guò)去的 2 年里，移動(dòng)設(shè)備的更新迭代讓振動(dòng)反饋有了更多的想象空間，因此本文在舊版文章「觸覺(jué)之美-如何進(jìn)行觸覺(jué)設(shè)計(jì)」的基礎(chǔ)上做了以下修訂。

• 增加了 iPhone 的新 API 內(nèi)容；
• 結(jié)合最近的工作內(nèi)容總結(jié)，將舊版中一筆帶過(guò)的落地實(shí)現(xiàn)模塊展開(kāi)詳細(xì)闡述；
• 將振動(dòng)反饋的用途以更加合理的方式進(jìn)行分類闡述。

希望能夠幫助設(shè)計(jì)師朋友完成振動(dòng)設(shè)計(jì)的思考、設(shè)計(jì)、落地的全流程。

一、我們的觸覺(jué)

“她滑滑的，明亮著，像涂了‘明油’一般，有雞蛋清那樣軟，那樣嫩”，這是朱自清的散文《綠》中對(duì)梅雨潭的一段描寫(xiě)。

“滑”、“軟”、“嫩”是對(duì)觸覺(jué)賦予意蘊(yùn)的獨(dú)特表達(dá)，這些我們一旦聽(tīng)到就會(huì)在腦海里浮現(xiàn)畫(huà)面的描述是來(lái)自于生活中無(wú)數(shù)次觸覺(jué)帶給我們的獨(dú)特體驗(yàn)。

在人體的五種感覺(jué)中，觸覺(jué)與其他感覺(jué)相比與我們身體的接觸面更廣，人體全身上下都是觸覺(jué)信號(hào)的接收器；盡管如此，人類的觸覺(jué)能夠傳遞的信息是有限的，通常只有視覺(jué)信息的 1 %；不過(guò)，觸覺(jué)給人類帶來(lái)的情感體驗(yàn)又是不可或缺的，如果沒(méi)有它的存在，我們?cè)谌粘Ｉ钪信c現(xiàn)實(shí)物體互動(dòng)的過(guò)程將變得索然無(wú)味。

科技產(chǎn)品也是如此，無(wú)論是 VR 體感游戲機(jī)還是日常使用的手機(jī)，通過(guò)振動(dòng)帶來(lái)的觸覺(jué)反饋起到了畫(huà)龍點(diǎn)睛的作用。

二、iPhone 的振動(dòng)模塊

軟件的體驗(yàn)升級(jí)需要依賴硬件的不斷迭代，iPhone 的振動(dòng)體驗(yàn)一直被用戶贊嘆不已，這源自于與蘋(píng)果對(duì)用戶體驗(yàn)的極致追求；即使在大多數(shù)用戶看來(lái)無(wú)關(guān)痛癢的振動(dòng)功能，蘋(píng)果也一直進(jìn)行不斷升級(jí)迭代，提高振動(dòng)模塊的性能，帶來(lái)更舒適的體驗(yàn)。

在 iPhone 振動(dòng)模塊的升級(jí)過(guò)程，蘋(píng)果不斷增大振動(dòng)模塊體積，從轉(zhuǎn)子馬達(dá)到線性馬達(dá)的更新?lián)Q代讓震感越來(lái)越細(xì)膩，如下圖所示。

（上圖內(nèi)硬件圖片來(lái)自知乎用戶「云子可信」）

直到后來(lái)， iPhone 7 / 7 plus 上全新線性馬達(dá) Tapitic Engine 問(wèn)世，iOS 10 的振動(dòng)接口向開(kāi)發(fā)者開(kāi)放；如此高配置的線性馬達(dá)提供的細(xì)膩反饋不但使 iOS 系統(tǒng)更具科技與藝術(shù)的融合之美，而且賦能了大量第三方應(yīng)用使用振動(dòng)反饋來(lái)提高產(chǎn)品體驗(yàn)。

可能有些讀者會(huì)疑惑，全新的 Tapitic Engine 振動(dòng)模式和以往有什么不同之處呢？

我們先回憶一下在以往各種手機(jī)的振動(dòng)給我們帶來(lái)的體驗(yàn)，基本都是嘈雜的聲音加上酸麻的手感，體驗(yàn)非常拙劣；而 Tapitic Engine 實(shí)現(xiàn)了在不發(fā)出聲音的情況下提供更細(xì)膩舒適的振動(dòng)體驗(yàn)，如下圖。

另外振動(dòng)給我們另一個(gè)負(fù)面影響就是其干擾性太強(qiáng)，大多數(shù)其他手機(jī)提供的振動(dòng)并沒(méi)有進(jìn)行時(shí)間和強(qiáng)度的分級(jí)，這帶來(lái)的問(wèn)題是無(wú)論在何種場(chǎng)景下，手機(jī)都會(huì)給我們同樣的振動(dòng)反饋，沒(méi)有進(jìn)行任何場(chǎng)景的細(xì)分；比如對(duì)于危險(xiǎn)操作可能需要時(shí)長(zhǎng)久強(qiáng)度大的反饋，而一些輕量化的提示只需要輕微的振動(dòng)即可。

但是由于硬件的限制，大部分安卓手機(jī)都是一視同仁，而擁有 Tapitic Engine 的 iPhone 則可以定義多種不同的強(qiáng)度，還可以穿插強(qiáng)度使用模擬更多場(chǎng)景，后文會(huì)詳細(xì)介紹相關(guān)應(yīng)用。

三、安卓手機(jī)的振動(dòng)模塊

剛才提到，絕大多數(shù)的安卓機(jī)型不可以對(duì)振動(dòng)的強(qiáng)度進(jìn)行自定義，因此不管在系統(tǒng)軟件還是第三方軟件中，如果場(chǎng)景需要振動(dòng)輔助，基本都是振動(dòng)到手麻的一聲“嗡”就不了了之了。

只有少數(shù)有極客精神的安卓廠商會(huì)在振動(dòng)體驗(yàn)上不遺余力，向蘋(píng)果看齊；但由于大部分第三方應(yīng)用開(kāi)發(fā)者難以針對(duì)各個(gè)安卓機(jī)型不同的硬件振動(dòng)模塊進(jìn)行適配，所以大部分安卓機(jī)型上的第三方 App 如果需要振動(dòng)都是調(diào)用單一強(qiáng)度，仍然未對(duì)振動(dòng)強(qiáng)度做場(chǎng)景細(xì)分，體驗(yàn)依然不盡人意。

四、觸覺(jué)設(shè)計(jì)的用途

盡管觸覺(jué)傳遞的信息遠(yuǎn)遠(yuǎn)少于視覺(jué)和聽(tīng)覺(jué)，但我們通常也不會(huì)將觸覺(jué)作為傳遞信息的主要手段，我們只將其作為視覺(jué)反饋和聽(tīng)覺(jué)反饋的一種補(bǔ)充和配合。

電子設(shè)備的振動(dòng)模塊產(chǎn)生的觸覺(jué)反饋，可以有效提高交互的易感知性，并賦予產(chǎn)品生命力，增強(qiáng)用戶的情感化體驗(yàn)。

一般來(lái)說(shuō)，信息傳達(dá)和模擬現(xiàn)實(shí)是它主要的用途，接來(lái)將一一介紹：

1. 信息傳達(dá)

振動(dòng)反饋所能夠提供的信息是非常少量的，但是在一些特殊場(chǎng)景中，它又存在著不可或缺的作用。

在信息傳達(dá)的用途中，振動(dòng)反饋通常有兩種功能：

• 提示操作的結(jié)果是否發(fā)生；
• 隱喻操作結(jié)果的性質(zhì)。

1）提示操作的結(jié)果是否發(fā)生

在一些特殊的場(chǎng)景中，通過(guò)視覺(jué)和聽(tīng)覺(jué)產(chǎn)生的信息可能不足夠或者無(wú)法及時(shí)傳遞給使用者，此時(shí)就需要通過(guò)振動(dòng)反饋來(lái)傳遞信息，告知操作者操作的結(jié)果是否發(fā)生。

例如在車(chē)載軟件的設(shè)計(jì)中，需要考慮到：操作者無(wú)法將視覺(jué)注意力集中于界面上；道路環(huán)境中存在各種嘈雜的噪音干擾。

基于以上兩點(diǎn)，駕駛者無(wú)法及時(shí)通過(guò)獲取視覺(jué)和聽(tīng)覺(jué)信去了解操作的結(jié)果是否發(fā)生，比如按鈕是否被觸發(fā)，此時(shí)通過(guò)振動(dòng)產(chǎn)生的觸覺(jué)信息就可以彌補(bǔ)視覺(jué)和聽(tīng)覺(jué)信息的不足。

當(dāng)然，振動(dòng)反饋的接受者不一定是操作者，比如手機(jī)來(lái)電和微信新消息的振動(dòng)反饋可以在靜音或過(guò)于嘈雜的環(huán)境中保證接收者能夠獲取來(lái)電提示。

再比如iPhone從底部上滑后不松開(kāi)手指一定時(shí)間后調(diào)出后臺(tái)App進(jìn)程，界面左邊會(huì)出現(xiàn)后臺(tái)App移入的視覺(jué)反饋，同時(shí)會(huì)產(chǎn)生振動(dòng)反饋一同告知用戶進(jìn)程頁(yè)面已經(jīng)觸發(fā)，可以在此時(shí)松開(kāi)手指了。

再比如很多產(chǎn)品的下拉刷新都從之前的文字提示改為了振動(dòng)提示；當(dāng)用戶下拉的距離到達(dá)臨界值并觸發(fā)振動(dòng)后，用戶感受到振動(dòng)后松手就刷新了，而不用再使用“繼續(xù)下拉刷新、釋放刷新”等冗余的文案來(lái)提示用戶，如下圖的下廚房應(yīng)用。

2）隱喻操作結(jié)果的性質(zhì)

在一次振動(dòng)反饋中，振幅和頻率不同的變化會(huì)建立不同的物理隱喻，從而給操作者不同的感受；比如 iOS 中內(nèi)置一個(gè)默認(rèn)的 API 預(yù)設(shè)了 成功、失敗、警告 三種振動(dòng)反饋，分別對(duì)應(yīng)結(jié)果的性質(zhì)。

成功：Success；振幅從低到高，傳遞積極的信號(hào)，隱喻本次操作結(jié)果為成功。案例：人臉識(shí)別成功。

警告：Warning；振幅從高到底，傳遞消極的信號(hào)，隱喻本次操作有風(fēng)險(xiǎn)，需要確認(rèn)。案例：搖動(dòng)以撤銷(xiāo)。

失敗：Error；振幅先變高再變低，隱喻本次操作結(jié)果為失敗。案例：人臉識(shí)別失敗。

由于在 iOS 中這個(gè) API 的廣泛應(yīng)用已經(jīng)讓用戶將操作結(jié)果性質(zhì)與振動(dòng)類型建立的了聯(lián)系，因此很多 iOS 端的游戲中會(huì)直接調(diào)用這個(gè) API 去表現(xiàn)操作結(jié)果的性質(zhì)。

以我近期在玩兒的《光遇》為例，成功觸發(fā)查看關(guān)卡按鈕后會(huì)有「成功：Success」的振動(dòng)反饋，

當(dāng)翅膀的能量耗盡后繼續(xù)點(diǎn)擊飛行按鈕會(huì)有「失敗：Error」 的振動(dòng)反饋。

2. 模擬現(xiàn)實(shí)

人們?nèi)菀讓?duì)自己熟悉的事物產(chǎn)生好感。

在產(chǎn)品設(shè)計(jì)中，我們經(jīng)常使用現(xiàn)實(shí)生活中常見(jiàn)的視覺(jué)形象和聲音進(jìn)行隱喻關(guān)聯(lián)，與用戶建立情感連接；觸覺(jué)也不例外，日常生活中各種各樣的現(xiàn)實(shí)物體都會(huì)給我們帶來(lái)不同的觸覺(jué)感受。

電器按鈕的阻尼感、節(jié)日煙花爆炸傳遞的震感、撥動(dòng)齒輪帶來(lái)的摩擦感等等都是我們與現(xiàn)實(shí)世界之間的觸覺(jué)交互，振動(dòng)反饋可以充分地模擬并給我們帶來(lái)逼真的觸覺(jué)體驗(yàn)。

在微信聊天頁(yè)中，雙擊頭像觸發(fā)拍一拍功能后，伴隨著頭像左右抖動(dòng)會(huì)產(chǎn)生相應(yīng)的振動(dòng)，視覺(jué)和觸覺(jué)的配合讓整個(gè)交互流程更加生動(dòng)。

為了研究不同產(chǎn)品上振動(dòng)帶來(lái)的反饋感受，我體驗(yàn)了很多產(chǎn)品，但論將振動(dòng)反饋運(yùn)用到極致的；不得不提 QQ 的戳一戳功能，它振動(dòng)的時(shí)間節(jié)點(diǎn)、強(qiáng)度與每一幀的動(dòng)畫(huà)效果是匹配的，其設(shè)計(jì)團(tuán)隊(duì)的匠心獨(dú)具可見(jiàn)一斑。

為了直觀地讓大家感受振動(dòng)變化，以戳一戳中的「放大招」為例制作了效果圖給大家展示大概的振動(dòng)強(qiáng)度隨時(shí)間變化過(guò)程。

下圖中，動(dòng)畫(huà)的過(guò)程可以拆解為 大招的能量收集、大招發(fā)射、大招撞墻、屏幕搖晃，分別對(duì)應(yīng)不同的振動(dòng)強(qiáng)度，使得體驗(yàn)極為真實(shí)和令人驚喜。

當(dāng)我們使用 iMessage 發(fā)送短信時(shí)，如果選擇了煙花特效，在短信發(fā)出的一瞬間，全屏幕就會(huì)布滿驟然綻放的煙花。

更令人驚喜的是，線性馬達(dá)在此時(shí)進(jìn)行大大小小的振動(dòng)模擬出煙花的爆裂感，仿佛煙花就是在我們手里綻放一般。

不僅僅是上述案例，通過(guò)振動(dòng)帶來(lái)的觸覺(jué)反饋在應(yīng)用設(shè)計(jì)層面給我們帶來(lái)了巨大的想象空間；槍擊、拋硬幣、鼓點(diǎn)、齒輪等等等等，再加上視覺(jué)和聽(tīng)覺(jué)的配合，更是帶給了用戶身臨其境的體驗(yàn)。

五、設(shè)計(jì)與落地

看完了上文介紹的振動(dòng)反饋的應(yīng)用，大家一定覺(jué)得十分有趣，但是對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)，如何設(shè)計(jì)和落地才是最重要的。

那么接下來(lái)就讓我們看看我們有哪些已知工具可以幫助我們吧！

iOS 提供了許多擁有特定默認(rèn)值的振動(dòng)反饋 API ，每個(gè) API 之間的區(qū)別在于振幅、頻率或間隔時(shí)間，每個(gè) API 中又有不同的類型，每個(gè)類型在振幅、頻率或間隔時(shí)間上又有著微妙的差別，我們可以通過(guò)調(diào)用合適的 API 選擇恰當(dāng)?shù)念愋蛷亩鴿M足不同的場(chǎng)景需要。

在 2019 年 6 月的蘋(píng)果開(kāi)發(fā)者大會(huì)上，iOS 新推出了新的 API ：Core Haptics，它支持開(kāi)發(fā)者自己定義振幅和頻率，從而為用戶帶來(lái)更加多樣化的觸覺(jué)體驗(yàn)。（后文將以默認(rèn)值 API 和自定義 API 區(qū)分兩者。）

因此在考慮為某個(gè)功能的交互添加哪種類型的振動(dòng)反饋時(shí)，我們可以選用默認(rèn)值 API 或自定義 API 。

下面將介紹這兩類 API 并展示如何設(shè)計(jì)和落地：

1. 默認(rèn)值 API

1）默認(rèn)值 API 窮舉

默認(rèn)值 API 為我們提供了許多不需要我們自己去調(diào)整振幅和頻率的振動(dòng)選項(xiàng)，隨著系統(tǒng)的更新，iOS 提供的默認(rèn)值 API 一直在增加，但是每個(gè) API 的適配機(jī)型、適配系統(tǒng)都不是完全一樣的。

我們要根據(jù)覆蓋的系統(tǒng)和機(jī)型的需求選用最合適的哪一款 API ，然后再根據(jù)場(chǎng)景去選用 API 中合適的類型，下面我將窮舉出 iOS 現(xiàn)有的所有提供默認(rèn)值振動(dòng)的 API 。

如果僅僅是將 API 展示出來(lái)，并不能幫助大家感受其中不同振動(dòng)類型的具體感覺(jué)，因此我也將該 API 的特定振動(dòng)等級(jí)在哪個(gè)主流 App 中的哪個(gè)功能中應(yīng)用過(guò)也會(huì)羅列出來(lái)；如果大家想要感受某個(gè) API 中某個(gè)類型的振動(dòng)等級(jí)，打開(kāi)相應(yīng)的 App 體驗(yàn)一下即可。

選擇合適的 API 和類型后將相應(yīng)的 API 名稱和類型的代號(hào)告訴開(kāi)發(fā)就可以實(shí)現(xiàn)無(wú)縫落地了，再也不會(huì)出現(xiàn)讓開(kāi)發(fā)加個(gè)振動(dòng)，結(jié)果開(kāi)發(fā)做出的效果和我們?cè)O(shè)計(jì)師自己想要的完全不一樣的情況。

Vibration 長(zhǎng)振動(dòng)

AudioServicesPlaySystemSound(kSystemSoundID_Vibrate)；

簡(jiǎn)介：歷史最悠久的 API ，高頻率持續(xù) 1s 的振動(dòng)，常用于消息通知。

適配：全部蘋(píng)果手機(jī)機(jī)型和全部系統(tǒng)版本。

案例：微信新消息通知。

3D touch（TapticEngine）

a. Peek 觸感

AudioServicesPlaySystemSound(1519)

b. Pop 觸感

AudioServicesPlaySystemSound(1520)

c.三次連續(xù)短振（三次 Peek 觸感連續(xù)振動(dòng)）

AudioServicesPlaySystemSound(1521)

特點(diǎn)：常用于 3D touch 中，Pop 的震感略強(qiáng)于 Peek。

適配：只支持 iPhone 6s 及以上機(jī)型，如果機(jī)型不支持將不振動(dòng)。

案例：a.長(zhǎng)按或重按控制中心的某個(gè)控制項(xiàng)目；b.微信的情景菜單放大為頁(yè)面；c.暫無(wú)案例。

UIImpactFeedbackGenerator

a.微弱短振-Light（表示較小的界面元素的物理碰撞或互動(dòng)時(shí)）

UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleLight];

[generator prepare];

[generator impactOccurred];

b.中等短振-Medium（表示中等大小的界面元素的物理碰撞或互動(dòng)時(shí)）

UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleMedium];

[generator prepare];

[generator impactOccurred];

c.明顯短振-Heavy（表示較大的界面元素的物理碰撞或互動(dòng)時(shí)）

UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleHeavy];

[generator prepare];

[generator impactOccurred];

特點(diǎn)：常用于下拉刷新和手勢(shì)反饋；

適配：只支持 iPhone 7 及以上機(jī)型且系統(tǒng)需 iOS 10 及以上，如果機(jī)型或系統(tǒng)不支持將不振動(dòng)；

案例：

• 使用iOS 的時(shí)鐘調(diào)節(jié)時(shí)間刻度、iOS 開(kāi)關(guān)控件的開(kāi)啟和關(guān)閉；
• 支付寶我的應(yīng)用編輯頁(yè)中長(zhǎng)按某個(gè)應(yīng)用；
• 支付寶首頁(yè)長(zhǎng)按功能區(qū)觸發(fā)二級(jí)操作。Heavy 與 3D touch 振感中的 Peek 極為接近，使用Peek的案例換用 Heavy 也是可行的；

UINotificationFeedbackGenerator

a.成功-Success（表示一個(gè)任務(wù)或行為的完成）

UINotificationFeedbackGenerator *notificationFeedbackGenerator = [[UINotificationFeedbackGenerator alloc] init]

[notificationFeedbackGenerator notificationOccurred:UINotificationFeedbackTypeSuccess]

b.警告-Warning（表示進(jìn)行一個(gè)任務(wù)或行為時(shí)產(chǎn)生了警告）

UINotificationFeedbackGenerator *notificationFeedbackGenerator = [[UINotificationFeedbackGenerator alloc] init]

[notificationFeedbackGenerator notificationOccurred:UINotificationFeedbackTypeWarning]

c.失?。篍rror（表示一個(gè)任務(wù)或行為的失?。?/p>

UINotificationFeedbackGenerator *notificationFeedbackGenerator = [[UINotificationFeedbackGenerator alloc] init]

[notificationFeedbackGenerator notificationOccurred:UINotificationFeedbackTypeError]

特點(diǎn)：此 API 的三個(gè)類型都是連續(xù)振動(dòng)多次，常應(yīng)用于成功、警告、失敗的場(chǎng)景。

適配：只支持 iPhone 7 或更新款機(jī)型且系統(tǒng)需 iOS 10 或以上，如果機(jī)型或系統(tǒng)不支持將不振動(dòng)。

案例：a.人臉識(shí)別成功；b.搖動(dòng)撤銷(xiāo)；c.人臉識(shí)別失敗、鎖屏后輸入密碼錯(cuò)誤。

UISelectionFeedbackGenerator

UISelectionFeedbackGenerator *selectionFeedbackGenerator = [[UISelectionFeedbackGenerator alloc] init]

[selectionFeedbackGenerator selectionChanged]

特點(diǎn)：常應(yīng)用于選擇的場(chǎng)景。

適配：只支持 iPhone 7 及以上機(jī)型且系統(tǒng)需 iOS 10 或以上，如果機(jī)型不支持將不振動(dòng)。

案例：Chrome 瀏覽器下拉后左右滑動(dòng)選擇選項(xiàng)、iOS 照片 App 或微信里看圖片放大到極限值繼續(xù)放大后回彈時(shí)。

去掉連續(xù)振動(dòng)的類型，全部 API 中單次振動(dòng)的振感從小到大的排序?yàn)椋?/p>

• UISelectionFeedbackGenerator（微弱）
• UIImpactFeedbackGenerator-light（適中）
• UIImpactFeedbackGenerator-medium（適中）
• UIImpactFeedbackGenerator-heavy（強(qiáng)烈）
• 3D touch-peek（強(qiáng)烈）
• 3D touch-poop（強(qiáng)烈）
• Vibration（嘈雜）

大家在使用時(shí)并不要被它們各自的特點(diǎn)局限，特別是當(dāng)使用這些默認(rèn)值振動(dòng)模擬現(xiàn)實(shí)時(shí)，通過(guò)開(kāi)腦洞巧妙地組合使用會(huì)產(chǎn)生意想不到的效果；比如剛才在用途部分提到的 QQ 戳一戳的設(shè)計(jì)就非常別出心裁。

2）落地案例

案例 1 ：登錄頁(yè)提示勾選協(xié)議

當(dāng)我們體驗(yàn)完所有的默認(rèn)振動(dòng) API 后，我們對(duì)于振動(dòng)的反饋的等級(jí)選擇就會(huì)開(kāi)始有一定的判斷力；比如如果要配合網(wǎng)易云音樂(lè)登錄頁(yè)中沒(méi)有勾選協(xié)議就點(diǎn)擊登錄后的這個(gè)提醒動(dòng)畫(huà)，我們選擇哪個(gè) API 最合適呢？

了解了上述 API 并體驗(yàn)相關(guān)的振動(dòng)后，大家可以直觀發(fā)現(xiàn)「UINotificationFeedbackTypeError」最適合這個(gè)操作失敗的場(chǎng)景；大家告知開(kāi)發(fā)使用的 API 為UINotificationFeedback，類型為 Error，開(kāi)發(fā)就可以精確地調(diào)用，高效落地了。

案例 2 ：功能引導(dǎo)

案例 1 中只是調(diào)用了某個(gè) API 中單一的類型，但是有時(shí)我們想要達(dá)到某些效果需要將這些不同的 API 和類型組合成一個(gè)復(fù)雜的振動(dòng)反饋；此時(shí)我們就需要詳細(xì)標(biāo)注了，我們需要標(biāo)注出調(diào)用的 API 以及類型、每個(gè)振動(dòng)之間的間隔時(shí)間。

下面以之前做過(guò)的一個(gè)引導(dǎo)動(dòng)畫(huà)為例向大家展示落地過(guò)程：

項(xiàng)目背景：鯨云音效新增了閃光振動(dòng)功能，用戶開(kāi)啟后在聽(tīng)歌時(shí)手機(jī)閃光燈和振動(dòng)馬達(dá)會(huì)跟隨節(jié)奏閃爍和振動(dòng)；為了在入口處吸引用戶進(jìn)入設(shè)置頁(yè)面體驗(yàn)新功能，需要設(shè)計(jì)一個(gè)引導(dǎo)方式吸引用戶點(diǎn)擊入口。

設(shè)計(jì)表現(xiàn)：配合閃光振動(dòng)的功能屬性，為入口處的鯨云音效的圖標(biāo)設(shè)計(jì)跳舞的動(dòng)畫(huà)，并為圖標(biāo)的每個(gè)節(jié)拍匹配一個(gè)振動(dòng)反饋，增加趣味性、真實(shí)感和感官上的豐富度。

動(dòng)畫(huà)的效果如下圖所示：

振動(dòng)標(biāo)注：標(biāo)注需要我們確定兩個(gè)參數(shù)，分別是「振動(dòng)選用的 API 與類型」和「每次振動(dòng)的間隔時(shí)間」。下面的[ ]內(nèi)的內(nèi)容是代碼層面實(shí)現(xiàn)組合型復(fù)雜振動(dòng)的邏輯。

• 播放 UIImpactFeedbackGenerator-light，等待 0.45s
• 播放 UIImpactFeedbackGenerator-light，等待 0.39
• 播放 UIImpactFeedbackGenerator-light，等待 0.35
• 播放 UIImpactFeedbackGenerator-light，等待 0.7
• 播放 UISelectionFeedbackGenerator，等待上一個(gè)播完
• 播放 UIImpactFeedbackGenerator-light，等待上一個(gè)播完
• 播放UISelectionFeedbackGenerator，等待上一個(gè)播完
• 播放UIImpactFeedbackGenerator-light，等待上一個(gè)播完
• ……

我們以代碼實(shí)現(xiàn)的邏輯進(jìn)行標(biāo)注，可以給到開(kāi)發(fā)工程師如下圖的標(biāo)注形式。（僅供參考，設(shè)計(jì)前多與開(kāi)發(fā)工程師溝通確定標(biāo)注內(nèi)容）

需要注意的是：

• 每?jī)蓚€(gè)振動(dòng)之間必須加間隔時(shí)間，否則這兩個(gè)振動(dòng)就會(huì)同時(shí)振動(dòng)；
• 間隔時(shí)間包括了前一個(gè)振動(dòng)運(yùn)行的時(shí)間。

此時(shí)有的小伙伴可能會(huì)疑惑：設(shè)計(jì)好的振動(dòng)需要如何預(yù)覽呢？如果等到開(kāi)發(fā)同事做出來(lái)之后再體驗(yàn)好不好的話，那樣萬(wàn)一要修改的話，成本豈不是很高？

確實(shí)如此，當(dāng)制作復(fù)雜的振動(dòng)反饋組合時(shí)，設(shè)計(jì)師憑空想象是很難把控不同強(qiáng)度當(dāng)振動(dòng)組合后形成的結(jié)果的；如果沒(méi)有一個(gè)可以實(shí)時(shí)編輯和預(yù)覽的工具，使用默認(rèn)值 API 去設(shè)計(jì)復(fù)雜的的振動(dòng)是很難直觀得去反復(fù)調(diào)試出最佳效果的。

當(dāng)我們確定了震感的設(shè)計(jì)后，在實(shí)現(xiàn)階段有兩種方式，第一是仍然使用之前文中提到的的標(biāo)注方式來(lái)標(biāo)注，然后讓開(kāi)發(fā)按照標(biāo)注編寫(xiě)代碼；第二種是直接用上述的 Piano App 導(dǎo)出代碼給開(kāi)發(fā)同學(xué)使用，但是缺點(diǎn)是開(kāi)發(fā)同學(xué)需要花點(diǎn)時(shí)間引入第三方框架，會(huì)讓?xiě)?yīng)用安裝包體積大概增加 50k。

2. 自定義 API

上述的默認(rèn)值接口調(diào)用方式可以讓我們不必過(guò)多思考就可以選擇出合適的振動(dòng)等級(jí)，但是對(duì)于一些自定義程度要求高的模擬需求就遠(yuǎn)遠(yuǎn)不夠了；這時(shí)我們需要使用 iOS13 提供的新 API -Core Haptics；Core Haptics支持將音頻文件轉(zhuǎn)為振動(dòng)，而且設(shè)計(jì)師可以通過(guò)第三方軟件可視化繪制「振幅」和「頻率」的值，導(dǎo)出haptic格式文件后直接交接給開(kāi)發(fā)工程師使用。

想要繪制出體驗(yàn)優(yōu)質(zhì)的自定義振動(dòng)，我們首先需要了解「振幅」和「頻率」這兩個(gè)物理量與聲音有什么樣的關(guān)系。

物體振動(dòng)產(chǎn)生聲波，聲波到達(dá)我們耳朵中的鼓膜后被我們感受到，變成了可識(shí)別的聲音；物體振動(dòng)的范圍和強(qiáng)度越大，振幅越大，它將影響音量的大?。幻棵胝駝?dòng)的次數(shù)越多，頻率越高，它影響著音調(diào)的高低，人通常能聽(tīng)到頻率 20-20000hz 的聲音。

我們把一段聲波輸入一個(gè)正弦波到示波器，振幅越大，波峰和波谷偏離零位線的距離越遠(yuǎn)。頻率越高，波動(dòng)越密集。

在繪制自定義的振動(dòng)反饋時(shí)，我們也是主要編輯這兩個(gè)參數(shù)來(lái)達(dá)到相應(yīng)的效果。使用軟件 Lofelt Studio 將我們繪制的振動(dòng)導(dǎo)出為文件給到開(kāi)發(fā)直接調(diào)用。

比如我如果在設(shè)計(jì)一款駕駛摩托車(chē)的游戲，有個(gè)場(chǎng)景是摩托車(chē)從近處啟動(dòng)后駛向遠(yuǎn)方，需要設(shè)計(jì)相應(yīng)的振動(dòng)配合畫(huà)面和音效；相應(yīng)的數(shù)值變化是振幅不斷降低，頻率不斷提高，從而模擬出真實(shí)世界的效果。在 Lofelt Studio 中繪制出來(lái)的效果如下。

具體的軟件使用方法就不在此贅述了，有學(xué)習(xí)興趣的小伙伴可以點(diǎn)擊在在文章結(jié)尾處按照指引領(lǐng)取安裝包和使用教程。

雖然這個(gè)自定義 API 已經(jīng)發(fā)布許久，但是應(yīng)用它的 iOS 端 App 或游戲還是比較少的，當(dāng)我們考慮在 App 或游戲中應(yīng)用時(shí)；除了根據(jù)現(xiàn)實(shí)模擬之外，還可以參考一些非 iOS 端平臺(tái)優(yōu)秀的游戲產(chǎn)品是如何設(shè)計(jì)的，如 NS 、 PlayStation 等。

比如以我最近在玩兒的NS平臺(tái)上的《馬里奧賽車(chē) 8 》舉例，它在手柄的振動(dòng)反饋上下足了心思，加速、撞擊、獲得道具等行為都能夠觸發(fā)不同的振動(dòng)反饋，每個(gè)反饋都是根據(jù)現(xiàn)實(shí)進(jìn)行映射。

下面以加速帶助力和起步二者為例，簡(jiǎn)單介紹下其波形特征以及在Lofelt Studio中的繪制效果：

除了在游戲領(lǐng)域，這個(gè)自定義 API 在音視頻類產(chǎn)品上的應(yīng)用也非常廣泛；試想一下，如果我們欣賞一首歌曲的過(guò)程中，不但可以通過(guò)聽(tīng)覺(jué)感受它的旋律，還能通過(guò)觸覺(jué)感受模擬聲源的振動(dòng)，那么這給我們帶來(lái)的多感官豐富體驗(yàn)一定妙不可言。

QQ 音樂(lè)挑選了節(jié)奏感比較強(qiáng)的幾十首歌曲設(shè)置為特色歌單，再針對(duì)這幾十首歌曲針對(duì)性地設(shè)計(jì)振動(dòng)，體驗(yàn)非常細(xì)膩；特別是《發(fā)如雪》開(kāi)頭的雨點(diǎn)落到地面的振動(dòng)模擬，極為細(xì)膩和逼真。

愛(ài)奇藝的蹦迪模式，會(huì)適配一些以音樂(lè)為主題的綜藝，比如《中國(guó)新說(shuō)唱》《樂(lè)隊(duì)的夏天》，在歌手演唱時(shí)會(huì)觸發(fā)振動(dòng)反饋。

六、使用原則

以下 8 條原則是以 iOS 人機(jī)交互規(guī)范為基礎(chǔ)，結(jié)合我的實(shí)踐經(jīng)驗(yàn)總結(jié)而成。

1. 建立清晰的因果關(guān)系

振動(dòng)反饋需要與用戶的特定操作建立清晰的因果關(guān)系，如果操作與振動(dòng)反饋之間的延遲過(guò)長(zhǎng)，就會(huì)讓用戶覺(jué)得非常莫名其妙。

2. 有目的地謹(jǐn)慎使用

雖然振動(dòng)反饋對(duì)于體驗(yàn)的提升有較大的價(jià)值，但是我們還應(yīng)謹(jǐn)慎使用，從而確保它能夠?yàn)槲覀兊漠a(chǎn)品提供持續(xù)性的價(jià)值。

我們可以使用它去為產(chǎn)品增加很多獨(dú)出心裁的設(shè)計(jì)去吸引用戶，也可以僅僅是添加少量去強(qiáng)化一些具有結(jié)果性的交互；但是將它應(yīng)用到太多瑣碎且不重要的交互上就可能適得其反，給用戶造成不必要的負(fù)擔(dān)。

3. 保持一致性

確保振動(dòng)反饋的一致性體驗(yàn)。

某個(gè)特定的振動(dòng)反饋會(huì)讓用戶將它與特定的操作和情緒關(guān)聯(lián)起來(lái)；比如，如果我們使用一個(gè)經(jīng)常用于任務(wù)成功的較為正面積極的振動(dòng)反饋去表達(dá)任務(wù)失敗，用戶就會(huì)非常疑惑和不知所措。

4. 可選擇性

使振動(dòng)反饋設(shè)計(jì)為可選項(xiàng)。

允許用戶關(guān)閉振動(dòng)反饋，確保沒(méi)有它時(shí)產(chǎn)品仍然能夠正常使用。

5. 考慮普適性

確保在我們的產(chǎn)品上充分測(cè)試振動(dòng)反饋；不同的人有不同的偏好和對(duì)振動(dòng)不同的耐受度，所以我們需要去尋找盡可能多的人進(jìn)行測(cè)試。

6. 考慮對(duì)硬件的影響

確保振動(dòng)不會(huì)干擾到其他操作；比如陀螺儀、攝像頭、麥克風(fēng)有可能會(huì)受到振動(dòng)的影響不能正常工作。

7. 可作為其他反饋的補(bǔ)充

振動(dòng)反饋也可以作為其他反饋的補(bǔ)充；尤其在游戲設(shè)計(jì)中，當(dāng)視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)的反饋相輔相成，高還原度地去模擬現(xiàn)實(shí)世界時(shí)，用戶將會(huì)獲得連貫自然的體驗(yàn)。

8. 個(gè)性化場(chǎng)景考慮進(jìn)行定制化

在游戲中，考慮使用定制的振動(dòng)反饋去強(qiáng)化用戶的體驗(yàn)（使用上文提到的自定義 API 實(shí)現(xiàn)）。

除了系統(tǒng)提供的那些自帶振動(dòng)反饋的控件外，我們應(yīng)該為游戲設(shè)計(jì)一些獨(dú)有的、有特色的振動(dòng)反饋；比如，振動(dòng)可以加強(qiáng)物體撞擊時(shí)的真實(shí)感，還可以暗示用戶通過(guò)視覺(jué)不容易察覺(jué)的內(nèi)容，比如敵人逐漸逼近的腳步。

七、觸覺(jué)體驗(yàn)設(shè)計(jì)步驟

在一個(gè)交互流程中，如何判斷是否要加入振動(dòng)反饋，我們可以依據(jù)以下步驟：

1. 明確用戶需求

首先明確用戶的需求，知道用戶在某次任務(wù)中需要達(dá)到什么目的。

2. 梳理交互流程

將用戶的某次任務(wù)流程分解為單個(gè)操作，當(dāng)用戶進(jìn)行了一系列操作后將完成任務(wù)。

3. 明確傳達(dá)信息

明確每一步操作中能夠幫助用戶盡快完成當(dāng)前步驟的重要信息，比如用戶需要獲得什么樣的反饋信息才能開(kāi)始下一步？

4. 選擇傳達(dá)形式

選擇合適的信息傳達(dá)形式，比如是視覺(jué)、聽(tīng)覺(jué)或者是觸覺(jué)；不同的傳達(dá)形式適合的場(chǎng)景不同，傳遞的信息密度也不同。

5. 落地設(shè)計(jì)結(jié)果

確定傳達(dá)形式后，確保設(shè)計(jì)結(jié)果的可用性，避免給用戶造成不必要的干擾。

以每個(gè)App都有的下拉刷新的功能為例，使用上述步驟進(jìn)行設(shè)計(jì)。

1）用戶在使用下拉刷新時(shí)，主要的需求是獲取新的內(nèi)容。

2）在下拉刷新的交互過(guò)程中，用戶的操作步驟為①下拉頁(yè)面；②松開(kāi)手指獲得新內(nèi)容。

3）那么在這個(gè)交互流程中，有哪些反饋信息能夠幫助用戶盡快完成當(dāng)前步驟呢？從①步驟過(guò)渡到②步驟我們需要給予用戶的反饋信息是「下拉頁(yè)面的距離是否已經(jīng)滿足觸發(fā)刷新的需要」。

4）這條反饋信息首先我們能夠想到通過(guò)視覺(jué)、聽(tīng)覺(jué)或觸覺(jué)進(jìn)行傳達(dá)，但是聽(tīng)覺(jué)適應(yīng)的場(chǎng)景具有局限性，因此我們暫不考慮。我們優(yōu)先選擇視覺(jué)反饋，比如通過(guò)文字「下拉刷新」到「松手刷新」的變化提示用戶下拉頁(yè)面的距離已經(jīng)滿足觸發(fā)刷新的需要，但是用戶在下拉刷新的操作通常是非專注性的，視覺(jué)反饋有時(shí)會(huì)被用戶忽略，此時(shí)我們可以增加觸覺(jué)反饋，作為視覺(jué)反饋的補(bǔ)充或直接替代掉它。

5）最后確保觸覺(jué)反饋的強(qiáng)度能夠被用戶獲取且不會(huì)打擾到用戶。

八、結(jié)語(yǔ)

電子產(chǎn)品每一次的硬件迭代總是會(huì)給設(shè)計(jì)師帶來(lái)巨大的想象空間，作為設(shè)計(jì)師，我們需要在技術(shù)日新月異的時(shí)代不斷開(kāi)拓視野，拓展設(shè)計(jì)的邊界。

同時(shí)也是由于技術(shù)的進(jìn)步，可能本文的技術(shù)實(shí)現(xiàn)方案在未來(lái)的某個(gè)時(shí)間就被淘汰和拋棄；所以希望大家對(duì)本文持批判性態(tài)度，對(duì)文章內(nèi)可能的疏漏予以指出，我將及時(shí)更新或更正。

參考資料：

《微交互》作者: 塞弗 (Dan Saffer)

參考文章：

《 iOS 中關(guān)于Taptic-Engine震動(dòng)反饋的深入解析》作者：深藍(lán)_S

鏈接：https://www.jianshu.com/p/d4567dbd7dde

《如何評(píng)價(jià) iPhone 上的振動(dòng)反饋？》中「云子可信」的回答，作者：云子可信

鏈接：https://www.zhihu.com/question/264649851

參考網(wǎng)站：

iOS Human Interface Guidelines

鏈接：https://developer.Apple.com/design/human-interface-guidelines/ios/user-interaction/haptics/

Piano demo on Github

鏈接：https://github.com/saoudrizwan/Piano

本文由 @Ballen成明 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。