教你掌握產(chǎn)品的「觸覺(jué)設(shè)計(jì)」
發(fā)布時(shí)間:2022-01-26 10:26 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 5887


我們的觸覺(jué)


「她滑滑的,明亮著,像涂了‘明油’一般,有雞蛋清那樣軟,那樣嫩」,這是朱自清的散文《綠》中對(duì)梅雨潭的一段描寫。「滑」、「軟」、「嫩」是對(duì)觸覺(jué)賦予意蘊(yùn)的獨(dú)特表達(dá),這些我們一旦聽(tīng)到就會(huì)在腦海里浮現(xiàn)畫面,這樣的描述是來(lái)自于生活中無(wú)數(shù)次觸覺(jué)帶給我們的獨(dú)特體驗(yàn)。

在人體的五種感覺(jué)中,觸覺(jué)與其他感覺(jué)相比與我們身體的接觸面更廣,人體全身上下都是觸覺(jué)信號(hào)的接收器。盡管如此,人類的觸覺(jué)能夠傳遞的信息是有限的,通常觸覺(jué)傳遞的信息只有視覺(jué)信息的 1 %。不過(guò),觸覺(jué)給人類帶來(lái)的情感體驗(yàn)又是不可或缺的,如果沒(méi)有它的存在,我們?cè)谌粘I钪信c現(xiàn)實(shí)物體互動(dòng)的過(guò)程將變得索然無(wú)味?萍籍a(chǎn)品也是如此,無(wú)論是 VR 體感游戲機(jī)還是日常使用的手機(jī),通過(guò)振動(dòng)帶來(lái)的觸覺(jué)反饋起到了畫龍點(diǎn)睛的作用。


什么是觸覺(jué)反饋


觸覺(jué)反饋,通常是通過(guò)硬件的振動(dòng)來(lái)模擬人的真實(shí)觸覺(jué)感受,通常應(yīng)用于用戶隨身攜帶的手持、穿戴、觸摸等設(shè)備上,現(xiàn)在也開(kāi)始大規(guī)模應(yīng)用于體感游戲、4D 視頻內(nèi)容、機(jī)器人、醫(yī)療等領(lǐng)域,可以補(bǔ)充視覺(jué)和音頻反饋的不足,增強(qiáng)互動(dòng)效果,提升用戶體驗(yàn)。

根據(jù)觸覺(jué)技術(shù)領(lǐng)域的創(chuàng)新公司意美森的用戶反饋和調(diào)查顯示,用戶在使用帶觸覺(jué)體驗(yàn)的游戲后,給予了游戲更多的正面評(píng)價(jià),并且活躍和分享意愿明顯提高。隨著硬件廠商對(duì)用戶體驗(yàn)的愈發(fā)重視,觸覺(jué)設(shè)計(jì)在產(chǎn)品設(shè)計(jì)中得到更多應(yīng)用。接下來(lái)會(huì)向大家介紹移動(dòng)  App  產(chǎn)品是如何配合硬件設(shè)計(jì)出優(yōu)質(zhì)的觸覺(jué)體驗(yàn)。


iPhone 的振動(dòng)模塊


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

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

用一篇超全面的干貨,幫你掌握產(chǎn)品的「觸覺(jué)設(shè)計(jì)」

△ 上圖內(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)用,調(diào)用此功能的第三方應(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),如下圖。

用一篇超全面的干貨,幫你掌握產(chǎn)品的「觸覺(jué)設(shè)計(jì)」

另外振動(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)度、不同次數(shù)和時(shí)間,還可以穿插強(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)到手麻的一聲「嗡」就不了了之了,手機(jī)如果在桌子上這種劣質(zhì)的振動(dòng)甚至能把手機(jī)震得掉到地上。只有少數(shù)有極客精神的安卓廠商會(huì)在振動(dòng)體驗(yàn)上不遺余力,向蘋果看齊,但由于大部分第三方應(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)。

1. 交互反饋

更敏感的反饋方式

我們?cè)谑褂秒娮釉O(shè)備時(shí)獲得反饋的三種形式:視覺(jué)反饋,聽(tīng)覺(jué)反饋,觸覺(jué)反饋。觸覺(jué)比視覺(jué)和聽(tīng)覺(jué)的傳達(dá)更迅速被用戶感知,由于以人體為介質(zhì),觸覺(jué)反饋會(huì)為對(duì)表皮以及對(duì)肌肉中感受器進(jìn)行刺激,因此其要比視覺(jué)與聽(tīng)覺(jué)更加敏感和強(qiáng)烈。

我們可以將這種特性應(yīng)用到相應(yīng)的產(chǎn)品設(shè)計(jì)中,比如很多產(chǎn)品的下拉刷新都從之前的文字提示改為了振動(dòng)提示,可以使用戶更快速地獲得反饋。當(dāng)用戶下拉的距離到達(dá)臨界值并觸發(fā)振動(dòng)后,用戶感受到振動(dòng)后松手就刷新了,而不用再使用「繼續(xù)下拉刷新、釋放刷新」等冗余的文案來(lái)提示用戶,如下圖的下廚房應(yīng)用。

用一篇超全面的干貨,幫你掌握產(chǎn)品的「觸覺(jué)設(shè)計(jì)」

強(qiáng)化物理動(dòng)作

蘋果手機(jī)從 iPhone 6s 升級(jí)到 iPhone 7 最大的變化之一就是經(jīng)典的 Home 鍵從可以按下去的實(shí)體鍵變?yōu)榱颂摂M鍵。剛開(kāi)始很多果粉還擔(dān)心可能產(chǎn)生的體驗(yàn)下降問(wèn)題,但是經(jīng)過(guò)使用后才發(fā)現(xiàn)虛擬按鍵加上升級(jí)的線性馬達(dá)提供的震感,逼真地模擬了真實(shí)的按壓觸感,乃至很多用戶反饋說(shuō)使用了 iPhone 7 很久時(shí)間都還以為 Home 鍵仍然是可以按壓的實(shí)體鍵。

振動(dòng)反饋還可以給輸入法應(yīng)用帶來(lái)真實(shí)的敲擊感,來(lái)自馬薩諸塞大學(xué)的一份研究顯示,虛擬鍵盤如果加入振動(dòng)反饋,可以提升用戶輸入時(shí)的準(zhǔn)確度。

彌補(bǔ)異常情況下的反饋

由于網(wǎng)絡(luò)延遲,用戶進(jìn)行某些操作后可能需要等待一段時(shí)間才能收到反饋,如果時(shí)間過(guò)久,用戶會(huì)懷疑是自己操作不當(dāng),但如果加入振動(dòng)反饋,會(huì)在其他反饋信息出現(xiàn)前打消用戶的顧慮。

如下圖,知乎的鼓掌功能。用戶點(diǎn)擊鼓掌后,通?蛻舳藭(huì)請(qǐng)求服務(wù)端的數(shù)據(jù)然后顯示已點(diǎn)贊的狀態(tài),這個(gè)過(guò)程會(huì)受到用戶網(wǎng)絡(luò)狀況的影響。如果網(wǎng)絡(luò)狀況較差,用戶不能及時(shí)從屏幕獲取視覺(jué)變化的反饋,就會(huì)懷疑自己是不是沒(méi)有點(diǎn)擊到正確的熱區(qū)或者操作不當(dāng),因此用戶可能進(jìn)行重復(fù)點(diǎn)擊從而影響體驗(yàn)。但若加入振動(dòng)反饋,用戶在點(diǎn)擊鼓掌后,首先一定會(huì)收到振動(dòng)反饋,因?yàn)檎駝?dòng)反饋不會(huì)受到網(wǎng)絡(luò)的影響也不會(huì)延遲,之后即使視覺(jué)反饋有些許延遲也不會(huì)讓用戶懷疑是自己點(diǎn)擊失誤了。

用一篇超全面的干貨,幫你掌握產(chǎn)品的「觸覺(jué)設(shè)計(jì)」

2. 情感化設(shè)計(jì)

人們?nèi)菀讓?duì)自己熟悉的事物產(chǎn)生好感。在產(chǎn)品設(shè)計(jì)中,我們經(jīng)常使用日常生活中常見(jiàn)的視覺(jué)形象和聲音進(jìn)行隱喻關(guān)聯(lián),與用戶建立情感聯(lián)結(jié)。觸覺(jué)也不例外,日常生活中各種各樣的現(xiàn)實(shí)物體都會(huì)給我們帶來(lái)不同的觸覺(jué)感受。電器按鈕的阻尼感、節(jié)日煙花爆炸傳遞的震感、撥動(dòng)齒輪帶來(lái)的摩擦感等等都是我們與現(xiàn)實(shí)世界之間的觸覺(jué)交互。iPhone 的線性馬達(dá)提供的不同等級(jí)的振動(dòng)反饋可以充分地模擬并給我們帶來(lái)逼真的觸覺(jué)體驗(yàn)。

下面就向大家介紹一些將觸覺(jué)設(shè)計(jì)用于情感化設(shè)計(jì)中的一些精選案例。

單一強(qiáng)度

前文給大家提到,iPhone 手機(jī)自 iPhone 7 開(kāi)始開(kāi)放了振動(dòng)接口,可供第三方應(yīng)用開(kāi)發(fā)者調(diào)用,其中有三種強(qiáng)度可供選擇,分別是 Light、Medium 和 Heavy 。單一強(qiáng)度指的是,某個(gè)功能只使用了其中一個(gè)振動(dòng)強(qiáng)度來(lái)設(shè)計(jì)。

如下圖的荔枝的私人 FM 功能,當(dāng)我們撥動(dòng)齒輪時(shí),振動(dòng)模塊就會(huì)伴隨著我們撥動(dòng)的手指產(chǎn)生強(qiáng)度為 Medium 的振動(dòng)反饋,模擬現(xiàn)實(shí)生活中的真實(shí)體驗(yàn)。

用一篇超全面的干貨,幫你掌握產(chǎn)品的「觸覺(jué)設(shè)計(jì)」

多強(qiáng)度組合

多強(qiáng)度組合指的是,某個(gè)功能使用了 Light、Medium 和 Heavy 三種強(qiáng)度進(jìn)行組合使用,從而模擬出變化的振動(dòng)效果。它比單一強(qiáng)度的體驗(yàn)更加豐富,而且通過(guò)設(shè)計(jì)者巧妙的構(gòu)思出來(lái)的不同的組合形式,它可以模擬出各種獨(dú)出心裁的表現(xiàn)效果。

為了研究不同產(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)畫效果是匹配的,其設(shè)計(jì)團(tuán)隊(duì)的匠心獨(dú)具,可見(jiàn)一斑。為了直觀地讓大家感受振動(dòng)變化,以戳一戳中的「放大招」為例制作了效果圖給大家展示大概的振動(dòng)強(qiáng)度隨時(shí)間變化過(guò)程。下圖中,動(dòng)畫的過(guò)程可以拆解為 大招的能量收集、大招發(fā)射、大招撞墻、屏幕搖晃,分別對(duì)應(yīng)不同的振動(dòng)強(qiáng)度,使得體驗(yàn)極為真實(shí)和令人驚喜。

用一篇超全面的干貨,幫你掌握產(chǎn)品的「觸覺(jué)設(shè)計(jì)」

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

用一篇超全面的干貨,幫你掌握產(chǎn)品的「觸覺(jué)設(shè)計(jì)」

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

適配問(wèn)題

由于之前提到過(guò)的安卓機(jī)型割裂嚴(yán)重,有些旗艦安卓機(jī)型的振動(dòng)模塊體驗(yàn)優(yōu)質(zhì),但是大部分安卓手機(jī)的振動(dòng)還是差強(qiáng)人意,因此大部分第三方應(yīng)用開(kāi)發(fā)者難以針對(duì)各個(gè)安卓機(jī)型不同的硬件振動(dòng)模塊進(jìn)行適配,所以大部分安卓機(jī)型上的 App 如果需要振動(dòng)都是調(diào)用最原始的振動(dòng)模式,這種模式的體驗(yàn)感很差,與 iPhone 的 Tapitic Engine 分級(jí)振動(dòng)體驗(yàn)不可同日而語(yǔ),因此即使某個(gè)場(chǎng)景需要振動(dòng)滿足情感化需求,一般情況下在安卓端也是不會(huì)加入的,比如荔枝 FM 的私人 FM 功能中的振動(dòng)、QQ 的戳一戳中的振動(dòng)都只在 iOS 端做了適配,安卓端是沒(méi)有的。


如何設(shè)計(jì)


1. iOS

在日常體驗(yàn) App 產(chǎn)品時(shí),我們可能會(huì)發(fā)現(xiàn),在同樣的 iPhone 機(jī)型上,有的 App 中某個(gè)功能的振動(dòng)反饋細(xì)膩舒適,但有的 App 的振動(dòng)反饋的強(qiáng)度很不合時(shí)宜且體驗(yàn)感差。這里可能存在設(shè)計(jì)師與開(kāi)發(fā)人員的溝通問(wèn)題,設(shè)計(jì)師并沒(méi)有先主動(dòng)搜集資料去了解 iPhone 的振動(dòng)有多種強(qiáng)度選擇,只是簡(jiǎn)單地讓開(kāi)發(fā)人員將某個(gè)功能加入振動(dòng)反饋,于是開(kāi)發(fā)人員任意選擇了一個(gè)振動(dòng)強(qiáng)度就草草上線。最終,導(dǎo)致設(shè)計(jì)出來(lái)的振動(dòng)反而降低了體驗(yàn)。優(yōu)秀的設(shè)計(jì)需要平穩(wěn)的落地,在我們決定要為某個(gè)功能設(shè)計(jì)振動(dòng)后,我們要完成以下步驟。

  • 選擇振動(dòng)強(qiáng)度;
  • 確定振動(dòng)次數(shù);
  • 如果振動(dòng)多次,確定每?jī)纱沃g的間隔時(shí)間;
  • 確定是否循環(huán)。

如果設(shè)計(jì)的振動(dòng)是多強(qiáng)度組合,最好將上述參數(shù)確定后以可視化的形式(如表格)交接給開(kāi)發(fā)人員,方便其理解。由于部分開(kāi)發(fā)人員可能并未深入了解 iOS 的振動(dòng)模塊的調(diào)用實(shí)現(xiàn)方式,因此為了各位設(shè)計(jì)師朋友能夠更加暢快地與開(kāi)發(fā)溝通,我在文章后面附上了 iOS 調(diào)用振動(dòng)的相關(guān)代碼,大家可以將相關(guān)代碼直接發(fā)給發(fā)給開(kāi)發(fā)人員供參考使用。我在附錄列舉了三種震動(dòng)方式,其中的「 UIImpactFeedbackGenerator 震感」就是上文提到的可以自定義三種強(qiáng)度的方式,推薦大家使用,附錄里還列舉了每種振動(dòng)方式的支持機(jī)型和系統(tǒng)、優(yōu)缺點(diǎn)和我的個(gè)人建議。

2. 安卓

由于安卓自定義系統(tǒng)過(guò)多,且硬件之間差異過(guò)大,第三方應(yīng)用開(kāi)發(fā)者難以額外花費(fèi)時(shí)間和精力去適配不同安卓手機(jī)硬件,因此通常只使用默認(rèn)的振動(dòng)調(diào)用方法。因此在與開(kāi)發(fā)工程師交接時(shí),一般我們只需要做后三步。

  • 確定振動(dòng)次數(shù);
  • 確定每?jī)纱沃g的間隔時(shí)間;
  • 確定是否循環(huán)。


結(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í)更新或更正。在這里也感謝公司的 iOS 開(kāi)發(fā)小伙伴的支持,犧牲休息時(shí)間與我一起檢驗(yàn)各種實(shí)現(xiàn)方案帶來(lái)的不同震感,提高本文的嚴(yán)謹(jǐn)性。

(附) iOS 振動(dòng)調(diào)用代碼

1. UIImpactFeedbackGenerator 震感

用一篇超全面的干貨,幫你掌握產(chǎn)品的「觸覺(jué)設(shè)計(jì)」

代碼

微弱短振-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];
2. 長(zhǎng)振動(dòng)震感

用一篇超全面的干貨,幫你掌握產(chǎn)品的「觸覺(jué)設(shè)計(jì)」

代碼

AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
3. 3D touch震感

用一篇超全面的干貨,幫你掌握產(chǎn)品的「觸覺(jué)設(shè)計(jì)」

代碼

Peek 觸感

AudioServicesPlaySystemSound(1519);

Pop 觸感(比 Peek 震感強(qiáng),且比「UIImpactFeedbackGenerator震感」中的 Heavy 還強(qiáng)烈)

AudioServicesPlaySystemSound(1520);

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

AudioServicesPlaySystemSound(1521);
iOS應(yīng)用開(kāi)發(fā)入門教程
我要自學(xué)網(wǎng)商城 ¥70 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC