文件名 如何下載使用 文件大小 下載來源
軟件及使用教程81.94MB 登錄下載

寫文章也像做一款產品一樣,隨著技術的進步、知識的迭代要進行合理的優化與更新。過去的 2 年里,移動設備的更新迭代讓振動反饋有了更多的想象空間,因此本文在舊版文章的基礎上做了以下修訂。

  • 增加了 iPhone 的新 API 內容;
  • 結合最近的工作內容總結,將舊版中一筆帶過的落地實現模塊展開詳細闡述;
  • 將振動反饋的用途以更加合理的方式進行分類闡述。希望能夠幫助設計師朋友完成振動設計的思考、設計、落地的全流程。

舊版文章:

我們的觸覺

“她滑滑的,明亮著,像涂了‘明油’一般,有雞蛋清那樣軟,那樣嫩”,這是朱自清的散文《綠》中對梅雨潭的一段描寫。“滑”、“軟”、“嫩”是對觸覺賦予意蘊的獨特表達,這些我們一旦聽到就會在腦海里浮現畫面的描述是來自于生活中無數次觸覺帶給我們的獨特體驗。

在人體的五種感覺中,觸覺與其他感覺相比與我們身體的接觸面更廣,人體全身上下都是觸覺信號的接收器。盡管如此,人類的觸覺能夠傳遞的信息是有限的,通常只有視覺信息的 1 %。不過,觸覺給人類帶來的情感體驗又是不可或缺的,如果沒有它的存在,我們在日常生活中與現實物體互動的過程將變得索然無味。科技產品也是如此,無論是 VR 體感游戲機還是日常使用的手機,通過振動帶來的觸覺反饋起到了畫龍點睛的作用。

iPhone 的振動模塊

軟件的體驗升級需要依賴硬件的不斷迭代。iPhone 的振動體驗一直被用戶贊嘆不已,這源自于與蘋果對用戶體驗的極致追求,即使在大多數用戶看來無關痛癢的振動功能,蘋果也一直進行不斷升級迭代,提高振動模塊的性能,帶來更舒適的體驗。

在 iPhone 振動模塊的升級過程,蘋果不斷增大振動模塊體積,從轉子馬達到線性馬達的更新換代讓震感越來越細膩,如下圖所示。

萬字干貨!「iOS 振動」設計與落地全方位解析

△ 上圖內硬件圖片來自知乎用戶「云子可信」

直到后來,iPhone 7 / 7 plus 上全新線性馬達 Tapitic Engine 問世,iOS 10 的振動接口向開發者開放,如此高配置的線性馬達提供的細膩反饋不但使 iOS 系統更具科技與藝術的融合之美,而且賦能了大量第三方應用使用振動反饋來提高產品體驗。

可能有些讀者會疑惑,全新的 Tapitic Engine 振動模式和以往有什么不同之處呢?我們先回憶一下在以往各種手機的振動給我們帶來的體驗,基本都是嘈雜的聲音加上酸麻的手感,體驗非常拙劣,而 Tapitic Engine 實現了在不發出聲音的情況下提供更細膩舒適的振動體驗,如下圖。

萬字干貨!「iOS 振動」設計與落地全方位解析

另外振動給我們另一個負面影響就是其干擾性太強,大多數其他手機提供的振動并沒有進行時間和強度的分級,這帶來的問題是無論在何種場景下,手機都會給我們同樣的振動反饋,沒有進行任何場景的細分。比如對于危險操作可能需要時長久強度大的反饋,而一些輕量化的提示只需要輕微的振動即可,但是由于硬件的限制,大部分安卓手機都是一視同仁,而擁有 Tapitic Engine 的 iPhone 則可以定義多種不同的強度,還可以穿插強度使用模擬更多場景,后文會詳細介紹相關應用。

安卓手機的振動模塊

剛才提到,絕大多數的安卓機型不可以對振動的強度進行自定義,因此不管在系統軟件還是第三方軟件中,如果場景需要振動輔助,基本都是振動到手麻的一聲“嗡”就不了了之了。只有少數有極客精神的安卓廠商會在振動體驗上不遺余力,向蘋果看齊,但由于大部分第三方應用開發者難以針對各個安卓機型不同的硬件振動模塊進行適配,所以大部分安卓機型上的第三方 App 如果需要振動都是調用單一強度,仍然未對振動強度做場景細分,體驗依然不盡人意。

觸覺設計的用途

盡管觸覺傳遞的信息遠遠少于視覺和聽覺,但我們通常也不會將觸覺作為傳遞信息的主要手段,我們只將其作為視覺反饋和聽覺反饋的一種補充和配合。電子設備的振動模塊產生的觸覺反饋,可以有效提高交互的易感知性,并賦予產品生命力,增強用戶的情感化體驗。一般來說,信息傳達和模擬現實是它主要的用途,接下來將一一介紹。

1. 信息傳達

振動反饋所能夠提供的信息是非常少量的,但是在一些特殊場景中,它又存在著不可或缺的作用。在信息傳達的用途中,振動反饋通常有兩種功能:提示操作的結果是否發生;隱喻操作結果的性質。

提示操作的結果是否發生

在一些特殊的場景中,通過視覺和聽覺產生的信息可能不足夠或者無法及時傳遞給使用者,此時就需要通過振動反饋來傳遞信息,告知操作者操作的結果是否發生。

例如在車載軟件的設計中,需要考慮到:1.操作者無法將視覺注意力集中于界面上;2.道路環境中存在各種嘈雜的噪音干擾。基于以上兩點,駕駛者無法及時通過獲取視覺和聽覺信息去了解操作的結果是否發生,比如按鈕是否被觸發。此時通過振動產生的觸覺信息就可以彌補視覺和聽覺信息的不足。

萬字干貨!「iOS 振動」設計與落地全方位解析

當然,振動反饋的接受者不一定是操作者,比如手機來電和微信新消息的振動反饋可以在靜音或過于嘈雜的環境中保證接收者能夠獲取來電提示。

再比如 iPhone 從底部上滑后不松開手指一定時間后調出后臺 App 進程,界面左邊會出現后臺 App 移入的視覺反饋,同時會產生振動反饋一同告知用戶進程頁面已經觸發,可以在此時松開手指了。

萬字干貨!「iOS 振動」設計與落地全方位解析

再比如很多產品的下拉刷新都從之前的文字提示改為了振動提示。當用戶下拉的距離到達臨界值并觸發振動后,用戶感受到振動后松手就刷新了,而不用再使用“繼續下拉刷新、釋放刷新”等冗余的文案來提示用戶,如下圖的下廚房應用。

萬字干貨!「iOS 振動」設計與落地全方位解析

隱喻操作結果的性質

在一次振動反饋中,振幅和頻率不同的變化會建立不同的物理隱喻,從而給操作者不同的感受。比如 iOS 中內置一個默認的 API 預設了 成功、失敗、警告 三種振動反饋,分別對應結果的性質。

成功:Success。振幅從低到高,傳遞積極的信號,隱喻本次操作結果為成功。案例:人臉識別成功。

萬字干貨!「iOS 振動」設計與落地全方位解析

警告:Warning。振幅從高到底,傳遞消極的信號,隱喻本次操作有風險,需要確認。案例:搖動以撤銷。

萬字干貨!「iOS 振動」設計與落地全方位解析

失敗:Error。振幅先變高再變低,隱喻本次操作結果為失敗。案例:人臉識別失敗。

萬字干貨!「iOS 振動」設計與落地全方位解析

由于在 iOS 中這個 API 的廣泛應用已經讓用戶將操作結果性質與振動類型建立了聯系,因此很多 iOS 端的游戲中會直接調用這個 API 去表現操作結果的性質。以我近期在玩兒的《光遇》為例,成功觸發查看關卡按鈕后會有「成功:Success」的振動反饋,

萬字干貨!「iOS 振動」設計與落地全方位解析

當翅膀的能量耗盡后繼續點擊飛行按鈕會有「失敗:Error」 的振動反饋。

萬字干貨!「iOS 振動」設計與落地全方位解析

2. 模擬現實

人們容易對自己熟悉的事物產生好感。在產品設計中,我們經常使用現實生活中常見的視覺形象和聲音進行隱喻關聯,與用戶建立情感連接。觸覺也不例外,日常生活中各種各樣的現實物體都會給我們帶來不同的觸覺感受。電器按鈕的阻尼感、節日煙花爆炸傳遞的震感、撥動齒輪帶來的摩擦感等等都是我們與現實世界之間的觸覺交互。振動反饋可以充分地模擬并給我們帶來逼真的觸覺體驗。

在微信聊天頁中,雙擊頭像觸發拍一拍功能后,伴隨著頭像左右抖動會產生相應的振動,視覺和觸覺的配合讓整個交互流程更加生動。

萬字干貨!「iOS 振動」設計與落地全方位解析

為了研究不同產品上振動帶來的反饋感受,我體驗了很多產品,但論將振動反饋運用到極致的,不得不提 QQ 的戳一戳功能,它振動的時間節點、強度與每一幀的動畫效果是匹配的,其設計團隊的匠心獨具可見一斑。為了直觀地讓大家感受振動變化,以戳一戳中的「放大招」為例制作了效果圖給大家展示大概的振動強度隨時間變化過程。下圖中,動畫的過程可以拆解為大招的能量收集、大招發射、大招撞墻、屏幕搖晃,分別對應不同的振動強度,使得體驗極為真實和令人驚喜。

萬字干貨!「iOS 振動」設計與落地全方位解析

當我們使用 iMessage 發送短信時,如果選擇了煙花特效,在短信發出的一瞬間,全屏幕就會布滿驟然綻放的煙花。更令人驚喜的是,線性馬達在此時進行大大小小的振動模擬出煙花的爆裂感,仿佛煙花就是在我們手里綻放一般。

萬字干貨!「iOS 振動」設計與落地全方位解析

不僅僅是上述案例,通過振動帶來的觸覺反饋在應用設計層面給我們帶來了巨大的想象空間。槍擊,拋硬幣,鼓點,齒輪,等等等等,再加上視覺和聽覺的配合,更是帶給了用戶身臨其境的體驗。

設計與落地

看完了上文介紹的振動反饋的應用,大家一定覺得十分有趣,但是對于我們設計師來說,如何設計和落地才是最重要的。那么接下來就讓我們看看我們有哪些已知工具可以幫助我們吧!

iOS 提供了許多擁有特定默認值的振動反饋 API,每個 API 之間的區別在于振幅、頻率或間隔時間,每個 API 中又有不同的類型,每個類型在振幅、頻率或間隔時間上又有著微妙的差別,我們可以通過調用合適的 API 選擇恰當的類型從而滿足不同的場景需要。在 2019 年 6 月的蘋果開發者大會上,iOS 新推出了新的 API:Core Haptics,它支持開發者自己定義振幅和頻率,從而為用戶帶來更加多樣化的觸覺體驗。(后文將以默認值 API 和自定義 API 區分兩者。)

因此在考慮為某個功能的交互添加哪種類型的振動反饋時,我們可以選用默認值 API 或自定義 API。下面將介紹這兩類 API 并展示如何設計和落地。

1. 默認值 API

默認值 API 窮舉

默認值 API 為我們提供了許多不需要我們自己去調整振幅和頻率的振動選項。隨著系統的更新,iOS 提供的默認值 API 一直在增加,但是每個 API 的適配機型、適配系統都不是完全一樣的。我們要根據覆蓋的系統和機型的需求選用最合適的那一款 API,然后再根據場景去選用 API 中合適的類型。下面我將窮舉出 iOS 現有的所有提供默認值振動的 API。如果僅僅是將 API 展示出來,并不能幫助大家感受其中不同振動類型的具體感覺,因此我也將該 API 的特定振動等級在哪個主流 App 中的哪個功能中應用過也會羅列出來,如果大家想要感受某個 API 中某個類型的振動等級,打開相應的 App 體驗一下即可。選擇合適的 API 和類型后將相應的 API 名稱和類型的代號告訴開發就可以實現無縫落地了,再也不會出現讓開發加個振動,結果開發做出的效果和我們設計師自己想要的完全不一樣的情況。

  • Vibration 長振動

AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);

簡介:歷史最悠久的 API,高頻率持續 1s 的振動,常用于消息通知;

適配:全部蘋果手機機型和全部系統版本;

案例:微信新消息通知。

萬字干貨!「iOS 振動」設計與落地全方位解析

  • 3D touch(TapticEngine)

Peek 觸感:AudioServicesPlaySystemSound(1519);

Pop 觸感:AudioServicesPlaySystemSound(1520);

三次連續短振(三次 Peek 觸感連續振動):AudioServicesPlaySystemSound(1521);

特點:常用于 3D touch 中,Pop 的震感略強于 Peek;

適配:只支持 iPhone 6s 及以上機型,如果機型不支持將不振動;

案例:長按或重按控制中心的某個控制項目;微信的情景菜單放大為頁面;暫無案例。

萬字干貨!「iOS 振動」設計與落地全方位解析

  • UIImpactFeedbackGenerator

微弱短振-Light(表示較小的界面元素的物理碰撞或互動時)

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

[generator prepare];

[generator impactOccurred];

中等短振-Medium(表示中等大小的界面元素的物理碰撞或互動時)

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

[generator prepare];

[generator impactOccurred];

明顯短振-Heavy(表示較大的界面元素的物理碰撞或互動時)

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

[generator prepare];

[generator impactOccurred];

特點:常用于下拉刷新和手勢反饋;

適配:只支持 iPhone 7 及以上機型且系統需 iOS 10 及以上,如果機型或系統不支持將不振動;

案例:使用 iOS 的時鐘調節時間刻度、iOS 開關控件的開啟和關閉;支付寶我的應用編輯頁中長按某個應用;支付寶首頁長按功能區觸發二級操作。Heavy 與 3D touch 振感中的 Peek 極為接近,使用 Peek 的案例換用 Heavy 也是可行的;

萬字干貨!「iOS 振動」設計與落地全方位解析

  • UINotificationFeedbackGenerator

成功-Success(表示一個任務或行為的完成)

UINotificationFeedbackGenerator *notificationFeedbackGenerator = [[UINotificationFeedbackGenerator alloc] init];

[notificationFeedbackGenerator notificationOccurred:UINotificationFeedbackTypeSuccess];

警告-Warning(表示進行一個任務或行為時產生了警告)

UINotificationFeedbackGenerator *notificationFeedbackGenerator = [[UINotificationFeedbackGenerator alloc] init];

[notificationFeedbackGenerator notificationOccurred:UINotificationFeedbackTypeWarning];

失敗:Error(表示一個任務或行為的失敗)

UINotificationFeedbackGenerator *notificationFeedbackGenerator = [[UINotificationFeedbackGenerator alloc] init];

[notificationFeedbackGenerator notificationOccurred:UINotificationFeedbackTypeError];

特點:此 API 的三個類型都是連續振動多次,常應用于成功、警告、失敗的場景;

適配:只支持 iPhone 7 或更新款機型且系統需 iOS 10 或以上,如果機型或系統不支持將不振動;

案例:人臉識別成功;搖動撤銷;人臉識別失敗、鎖屏后輸入密碼錯誤。

萬字干貨!「iOS 振動」設計與落地全方位解析

  • UISelectionFeedbackGenerator
UISelectionFeedbackGenerator *selectionFeedbackGenerator = [[UISelectionFeedbackGenerator alloc] init];

[selectionFeedbackGenerator selectionChanged];

特點:常應用于選擇的場景;

適配:只支持 iPhone 7 及以上機型且系統需 iOS 10 或以上,如果機型不支持將不振動;

案例:Chrome 瀏覽器下拉后左右滑動選擇選項、iOS 照片 App 或微信里看圖片放大到極限值繼續放大后回彈時;

萬字干貨!「iOS 振動」設計與落地全方位解析

去掉連續振動的類型,全部 API 中單次振動的振感從小到大的排序為:

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

大家在使用時并不要被它們各自的特點局限,特別是當使用這些默認值振動模擬現實時,通過開腦洞巧妙地組合使用會產生意想不到的效果,比如剛才在用途部分提到的 QQ 戳一戳的設計就非常別出心裁。

落地案例

  • 案例 1:登錄頁提示勾選協議

當我們體驗完所有的默認振動 API 后,我們對于振動的反饋的等級選擇就會開始有一定的判斷力。比如如果要配合網易云音樂登錄頁中沒有勾選協議就點擊登錄后的這個提醒動畫,我們選擇哪個 API 最合適呢?

萬字干貨!「iOS 振動」設計與落地全方位解析

了解了上述 API 并體驗相關的振動后,大家可以直觀發現「UINotificationFeedbackTypeError」最適合這個操作失敗的場景。大家告知開發使用的 API 為 UINotificationFeedback,類型為 Error,開發就可以精確地調用,高效落地了。

  • 案例 2:功能引導

案例 1 中只是調用了某個 API 中單一的類型,但是有時我們想要達到某些效果需要將這些不同的 API 和類型組合成一個復雜的振動反饋,此時我們就需要詳細標注了,我們需要標注出調用的 API 以及類型、每個振動之間的間隔時間。下面以之前做過的一個引導動畫為例向大家展示落地過程。

項目背景:鯨云音效新增了閃光振動功能,用戶開啟后在聽歌時手機閃光燈和振動馬達會跟隨節奏閃爍和振動。為了在入口處吸引用戶進入設置頁面體驗新功能,需要設計一個引導方式吸引用戶點擊入口。

設計表現:配合閃光振動的功能屬性,為入口處的鯨云音效的圖標設計跳舞的動畫,并為圖標的每個節拍匹配一個振動反饋,增加趣味性、真實感和感官上的豐富度。動畫的效果如下圖所示。

萬字干貨!「iOS 振動」設計與落地全方位解析

振動標注:標注需要我們確定兩個參數,分別是「振動選用的 API 與類型」和「每次振動的間隔時間」。下面的[ ]內的內容是代碼層面實現組合型復雜振動的邏輯。

[播放 UIImpactFeedbackGenerator-light,

等待 0.45s,

播放 UIImpactFeedbackGenerator-light,

等待 0.39,

播放 UIImpactFeedbackGenerator-light,

等待 0.35,

播放 UIImpactFeedbackGenerator-light,

等待 0.7,

播放 UISelectionFeedbackGenerator,

等待上一個播完,

播放 UIImpactFeedbackGenerator-light,

等待上一個播完,

播放 UISelectionFeedbackGenerator,

等待上一個播完,

播放 UIImpactFeedbackGenerator-light,

等待上一個播完,

......]

我們以代碼實現的邏輯進行標注,可以給到開發工程師如下圖的標注形式。(僅供參考,設計前多與開發工程師溝通確定標注內容)

萬字干貨!「iOS 振動」設計與落地全方位解析

需要注意的是:每兩個振動之間必須加間隔時間,否則這兩個振動就會同時振動;間隔時間包括了前一個振動運行的時間。

此時有的小伙伴可能會疑惑:設計好的振動需要如何預覽呢?如果等到開發同事做出來之后再體驗好不好的話,那樣萬一要修改的話,成本豈不是很高?

確實如此,當制作復雜的振動反饋組合時,設計師憑空想象是很難把控不同強度當振動組合后形成的結果的,如果沒有一個可以實時編輯和預覽的工具,使用默認值 API 去設計復雜的的振動是很難直觀得去反復調試出最佳效果的。還好這個問題是有解決方案的,Github 上有一位博主通過將 iOS 振動默認值接口整合成了一個 demo App,名字叫 Piano,在 Github 上的地址是 https://github.com/saoudrizwan/Piano ,demo 的安裝過程比較復雜,安裝包、安裝和使用教程大家可以在文章結尾處按指引領取。安裝完成后,大家就可以直觀地設置振動等級和間隔時間,并且可以實時預覽震感了。

萬字干貨!「iOS 振動」設計與落地全方位解析

當我們確定了震感的設計后,在實現階段有兩種方式,第一是仍然使用之前文中提到的標注方式來標注,然后讓開發按照標注編寫代碼。第二種是直接用上述的 Piano App 導出代碼給開發同學使用,但是缺點是開發同學需要花點時間引入第三方框架,會讓應用安裝包體積大概增加 50k。兩種方式大家自己選擇。

2. 自定義 API

上述的默認值接口調用方式可以讓我們不必過多思考就可以選擇出合適的振動等級,但是對于一些自定義程度要求高的模擬需求就遠遠不夠了。這時我們需要使用 iOS13 提供的新 API -Core Haptics。Core Haptics 支持將音頻文件轉為振動,而且設計師可以通過第三方軟件可視化繪制「振幅」和「頻率」的值,導出 haptic 格式文件后直接交接給開發工程師使用。

想要繪制出體驗優質的自定義振動,我們首先需要了解「振幅」和「頻率」這兩個物理量與聲音有什么樣的關系。

物體振動產生聲波,聲波到達我們耳朵中的鼓膜后被我們感受到,變成了可識別的聲音。物體振動的范圍和強度越大,振幅越大,它將影響音量的大小。每秒振動的次數越多,頻率越高,它影響著音調的高低,人通常能聽到頻率 20-20000hz 的聲音。

我們把一段聲波輸入一個正弦波到示波器,振幅越大,波峰和波谷偏離零位線的距離越遠。頻率越高,波動越密集。

萬字干貨!「iOS 振動」設計與落地全方位解析

在繪制自定義的振動反饋時,我們也是主要編輯這兩個參數來達到相應的效果。使用軟件 Lofelt Studio 將我們繪制的振動導出為文件給到開發直接調用。

比如我如果在設計一款駕駛摩托車的游戲,有個場景是摩托車從近處啟動后駛向遠方,需要設計相應的振動配合畫面和音效。相應的數值變化是振幅不斷降低,頻率不斷提高,從而模擬出真實世界的效果。在 Lofelt Studio 中繪制出來的效果如下。

萬字干貨!「iOS 振動」設計與落地全方位解析

具體的軟件使用方法就不在此贅述了,有學習興趣的小伙伴可以點擊在文章結尾處按照指引領取安裝包和使用教程。

雖然這個自定義 API 已經發布許久,但是應用它的 iOS 端 App 或游戲還是比較少的,當我們考慮在 App 或游戲中應用時,除了根據現實模擬之外,還可以參考一些非 iOS 端平臺優秀的游戲產品是如何設計的,如 NS、PlayStation 等。比如以我最近在玩兒的 NS 平臺上的《馬里奧賽車 8》舉例,它在手柄的振動反饋上下足了心思,加速、撞擊、獲得道具等行為都能夠觸發不同的振動反饋,每個反饋都是根據現實進行映射。下面以加速帶助力和起步二者為例,簡單介紹下其波形特征以及在 Lofelt Studio 中的繪制效果。

萬字干貨!「iOS 振動」設計與落地全方位解析

萬字干貨!「iOS 振動」設計與落地全方位解析

除了在游戲領域,這個自定義 API 在音視頻類產品上的應用也非常廣泛。試想一下,如果我們欣賞一首歌曲的過程中,不但可以通過聽覺感受它的旋律,還能通過觸覺感受模擬聲源的振動,那么這給我們帶來的多感官豐富體驗一定妙不可言。

QQ 音樂挑選了節奏感比較強的幾十首歌曲設置為特色歌單,再針對這幾十首歌曲針對性地設計振動,體驗非常細膩。特別是《發如雪》開頭的雨點落到地面的振動模擬,極為細膩和逼真。

萬字干貨!「iOS 振動」設計與落地全方位解析

愛奇藝的蹦迪模式,會適配一些以音樂為主題的綜藝,比如《中國新說唱》《樂隊的夏天》,在歌手演唱時會觸發振動反饋。

萬字干貨!「iOS 振動」設計與落地全方位解析

使用原則

以下 8 條原則是以 iOS 人機交互規范為基礎,結合我的實踐經驗總結而成。

1. 建立清晰的因果關系

振動反饋需要與用戶的特定操作建立清晰的因果關系。如果操作與振動反饋之間的延遲過長,就會讓用戶覺得非常莫名其妙。

2. 有目的地謹慎使用

雖然振動反饋對于體驗的提升有較大的價值,但是我們還應謹慎使用,從而確保它能夠為我們的產品提供持續性的價值。我們可以使用它去為產品增加很多獨出心裁的設計去吸引用戶,也可以僅僅是添加少量去強化一些具有結果性的交互,但是將它應用到太多瑣碎且不重要的交互上就可能適得其反,給用戶造成不必要的負擔。

3. 保持一致性

確保振動反饋的一致性體驗。某個特定的振動反饋會讓用戶將它與特定的操作和情緒關聯起來。比如,如果我們使用一個經常用于任務成功的較為正面積極的振動反饋去表達任務失敗,用戶就會非常疑惑和不知所措。

4. 可選擇性

使振動反饋設計為可選項。允許用戶關閉振動反饋,確保沒有它時產品仍然能夠正常使用。

5. 考慮普適性

確保在我們的產品上充分測試振動反饋。不同的人有不同的偏好和對振動不同的耐受度,所以我們需要去尋找盡可能多的人進行測試。

6. 考慮對硬件的影響

確保振動不會干擾到其他操作。比如陀螺儀、攝像頭、麥克風有可能會受到振動的影響不能正常工作。

7. 可作為其他反饋的補充

振動反饋也可以作為其他反饋的補充。尤其在游戲設計中,當視覺、聽覺、觸覺的反饋相輔相成,高還原度地去模擬現實世界時,用戶將會獲得連貫自然的體驗。

8. 個性化場景考慮進行定制化

在游戲中,考慮使用定制的振動反饋去強化用戶的體驗(使用上文提到的自定義 API 實現)。除了系統提供的那些自帶振動反饋的控件外,我們應該為游戲設計一些獨有的、有特色的振動反饋。比如,振動可以加強物體撞擊時的真實感,還可以暗示用戶通過視覺不容易察覺的內容,比如敵人逐漸逼近的腳步。

觸覺體驗設計步驟

在一個交互流程中,如何判斷是否要加入振動反饋,我們可借鑒以下幾點。

萬字干貨!「iOS 振動」設計與落地全方位解析

1. 明確用戶需求

首先明確用戶的需求,知道用戶在某次任務中需要達到什么目的。

2. 梳理交互流程

將用戶的某次任務流程分解為單個操作,當用戶進行了一系列操作后將完成任務。

3. 明確傳達信息

明確每一步操作中能夠幫助用戶盡快完成當前步驟的重要信息。比如用戶需要獲得什么樣的反饋信息才能開始下一步?

4. 選擇傳達形式

選擇合適的信息傳達形式,比如是視覺、聽覺或者是觸覺。不同的傳達形式適合的場景不同,傳遞的信息密度也不同。

5. 落地設計結果

確定傳達形式后,確保設計結果的可用性,避免給用戶造成不必要的干擾。

以每個 App 都有的下拉刷新的功能為例,使用上述步驟進行設計。

  • 用戶在使用下拉刷新時,主要的需求是獲取新的內容。
  • 在下拉刷新的交互過程中,用戶的操作步驟為:下拉頁面;松開手指獲得新內容。
  • 那么在這個交互流程中,有哪些反饋信息能夠幫助用戶盡快完成當前步驟呢?從①步驟過渡到②步驟我們需要給予用戶的反饋信息是「下拉頁面的距離是否已經滿足觸發刷新的需要」。
  • 這條反饋信息首先我們能夠想到通過視覺、聽覺或觸覺進行傳達,但是聽覺適應的場景具有局限性,因此我們暫不考慮。我們優先選擇視覺反饋,比如通過文字「下拉刷新」到「松手刷新」的變化提示用戶下拉頁面的距離已經滿足觸發刷新的需要,但是用戶在下拉刷新的操作通常是非專注性的,視覺反饋有時會被用戶忽略,此時我們可以增加觸覺反饋,作為視覺反饋的補充或直接替代掉它。
  • 最后確保觸覺反饋的強度能夠被用戶獲取且不會打擾到用戶。

結語

電子產品每一次的硬件迭代總是會給設計師帶來巨大的想象空間,作為設計師,我們需要在技術日新月異的時代不斷開拓視野,拓展設計的邊界。同時也是由于技術的進步,可能本文的技術實現方案在未來的某個時間就被淘汰和拋棄,所以希望大家對本文持批判性態度,對文章內可能的疏漏予以指出,我將及時更新或更正。

參考資料:

歡迎關注作者微信公眾號:「設成于思」

萬字干貨!「iOS 振動」設計與落地全方位解析

文件名 如何下載使用 文件大小 下載來源
軟件及使用教程81.94MB 登錄下載
收藏 164
點贊 24

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。