怎么做出讓人欲罷不能的觸覺設(shè)計?
發(fā)布時間:2022-01-25 11:01 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

不知道當(dāng)年多少人拿到 iPhone 7 的第一刻,就被那「神奇的虛擬 Home 鍵」深深吸引住了,可能很多人至今都好奇它到底是如何實現(xiàn)如同真實物理按鍵觸感的?

如果你手中正好還有 iPhone X 前代的手機,并且還是不解其中是如何做到這樣的體驗?那我們不妨拿出手機來實驗一下:把手機設(shè)置里「聲音與觸感」中的「Siri 與搜索」暫時關(guān)閉,然后按下 Home 鍵不要松手,那么您會發(fā)現(xiàn)手機剛剛發(fā)生了一次特別短暫的震動,然后我們松手會發(fā)現(xiàn)手機進(jìn)行了第二次震動,只要我們慢慢體會,就會發(fā)現(xiàn)第二次震動要比第一次震動的強度有種「稍稍輕一點」的感覺。

因此總結(jié)出 iPhone「神奇的虛擬 Home 按鍵」的交互過程是:當(dāng)我們的手指放在 Home 按鍵上,壓力傳感器會感受我們手指對 Home 鍵的壓力,當(dāng)手指繼續(xù)施壓,壓力值達(dá)到的額定判斷數(shù)值后,手機會觸發(fā)第一次較「重」的震動,去產(chǎn)生模擬按下按鍵的錯覺,松手后會觸發(fā)第二次較「輕」的震動,模擬物理按鍵松手的回彈感。日常生活中我們快速地下按與松手,整個過程會很像真實世界中按下按鍵的感覺,這就是觸覺設(shè)計所改變產(chǎn)品交互方式的一個直觀體驗,Macbook 上的觸摸板也是用到了這種類似的震動交互模擬原理。

讓體驗提高一個維度!如何做出讓人欲罷不能的觸覺設(shè)計?

觸覺交互相比視覺和聽覺交互設(shè)計更不易被我們察覺,并且其中蘊含著很多設(shè)計原理,在進(jìn)行設(shè)計時如果掌握了這些技巧,在適當(dāng)情景添加合適的震動反饋到產(chǎn)品中,就會大大提升對用戶的交互體驗,從細(xì)節(jié)上讓用戶得到新奇感,吸引用戶并讓用戶對產(chǎn)品上癮。


震動觸感產(chǎn)生的原理


在給軟件加入觸感交互設(shè)計后,會給用戶帶來一種從 3D 電影跳到 4D 電影的全新體驗,我們也有必要簡單了解一下這其中的電子元器件「線性馬達(dá)」是什么原理,以及為什么還有好多安卓手機沒有做到 iPhone 這種細(xì)致的震動體驗?

震動是由馬達(dá)所產(chǎn)生的,馬達(dá)這個東西就算大家沒見過也應(yīng)該耳熟。男同學(xué)小時候玩過的「四驅(qū)賽車」拆開殼子后,就會看見里面有個明顯的小馬達(dá),這就是用來模擬汽車引擎驅(qū)動小賽車用的馬達(dá),它就屬于一種非線性馬達(dá),也叫轉(zhuǎn)子馬達(dá)。

非線性馬達(dá)中,其「線性」二字不是衡量隨時間改變震動大小的關(guān)系,這和我們理解非線性動畫不是一個概念,它是對馬達(dá)震動方向的衡量,所以非線性馬達(dá)所代表的含義是震動沒有震動方向的。

早期的 iPhone3Gs 到 iPhone5 上用的都是類似的非線性馬達(dá),因為其馬達(dá)沒有震動方向和一些物理因素,震動的可控性比較低,造成的用戶體驗也不盡人意,當(dāng)時震動的作用也只是電話靜音后代替電話鈴的一個提示方案。

讓體驗提高一個維度!如何做出讓人欲罷不能的觸覺設(shè)計?

直到 iPhone 6 上蘋果才在手機上使用線性馬達(dá),有了震動方向。有方向,就有了軸向問題,一般手機上的線性馬達(dá)都是 X 軸線性馬達(dá),也就是手機是左右進(jìn)行震動的,有的手機用的是 Z 軸馬達(dá),比如三星的一部分手機,其震動體驗要與 X 軸馬達(dá)有一定區(qū)別。隨著技術(shù)上的提升,到了 iPhone 7 騰出了耳機孔的位置后,才能使 iPhone 裝下足夠大,震感足夠強的 Taptic Engine 線性馬達(dá),到此也為設(shè)計師對軟件觸覺設(shè)計提供了基本的硬件條件。

讓體驗提高一個維度!如何做出讓人欲罷不能的觸覺設(shè)計?

為什么很多 Android 機型上無法做到這樣的體驗?隨著筆者的研究,發(fā)現(xiàn)很多安卓手機的馬達(dá)一般問題主要有三種:

  • 因為技術(shù)或成本控制的原因還停留在非線性馬達(dá);
  • 線性馬達(dá)尺寸不夠大導(dǎo)致無法獲得足夠強的震動觸感;
  • 對震動的強度沒有進(jìn)行分級處理意見,及未對開發(fā)者提供震動強度控制的代碼接口。


觸感設(shè)計時設(shè)計師需要知道的設(shè)計選項


筆者查閱蘋果開發(fā)者文檔,官方給出了幾種震動分級的可選參數(shù),作為設(shè)計師我們只需要知道如何在觸覺設(shè)計時準(zhǔn)確地向程序員表達(dá)需求即可,因此對于代碼實現(xiàn)細(xì)節(jié)就不在此文中進(jìn)行詳解了。在 iOS 生態(tài)中,震動的級別可以分為:長震、強短振、中短振、弱短振四種級別的常用震動,我們在設(shè)計時還需要考慮連續(xù)震動間隔時間、與震動同時發(fā)出的音效、動畫效果等這常見的三個元素的設(shè)計。

讓體驗提高一個維度!如何做出讓人欲罷不能的觸覺設(shè)計?


觸感交互的兩種產(chǎn)生方式


1. 操作交互時觸發(fā)的震動

在 iOS 的計時器中,我們?nèi)セ瑒訑?shù)字調(diào)節(jié)時間,會有清晰的震動+聲音反饋,伴隨著非線性動畫,讓整個細(xì)節(jié)交互體驗非常完美,而這其中的震動觸發(fā)是隨著我們手指滑動屏幕產(chǎn)生的。還有一種就是類似于更多指南針應(yīng)用,我們通過轉(zhuǎn)動手機,控制方向,在指南針每當(dāng)觸到 30 度角就會發(fā)生一次震動。還有一個相關(guān)例子,我們在 Mac 上利用 Pages 處理文檔時去調(diào)整圖片位置,當(dāng)圖片移動到居中位置的時候,觸摸板也會發(fā)生一次震動,去提醒你圖片完成了居中操作。后兩個案例有一個相同的設(shè)計邏輯,就是我們設(shè)計控制上相對不易的操作功能時,就可以通過加入聲音和震動進(jìn)行對操作結(jié)果進(jìn)行反饋出發(fā)設(shè)計,讓用戶得到更合理的反饋。

讓體驗提高一個維度!如何做出讓人欲罷不能的觸覺設(shè)計?

2. 軟件自主產(chǎn)生的震動

最常見的就是消息提示的配合震動,讓我印象深刻的一次經(jīng)歷是當(dāng)我清早還躺在床上,聽到了一聲提示,睡眼惺忪沒太聽清是哪個軟件的提示音,但因為手機放在床上,震動讓床面也跟著短促的震了三下,讓我立即就知道了這是我的「提醒事項」在告訴我,該起來干活了。我們在提升軟件交互設(shè)計時要同時考慮這兩類需要震動的情境,震動的使用場景多伴隨著聲音和動畫。


設(shè)計師應(yīng)該聚焦的問題


在什么情境?對什么事件?加入怎樣的觸覺?想讓用戶獲得什么體驗?

首先需要說明,大部分的震動伴隨著相應(yīng)的聲音效果,這種聯(lián)動式設(shè)計才是最好的方案,其次現(xiàn)階段不要過多地加入震動設(shè)計,震動馬達(dá)對手機有一定的功耗需求。

對于什么情境的問題,我們需要簡單梳理一下,我們常見的交互有:短按 (點擊)、長按、滑動三大手勢組成,我們將這三類一一進(jìn)行分析,同時提醒操作也是需要注意的一點。

1. 點擊

按鈕點擊是我們遇到最頻繁的交互,在給點按類操作加入震動反饋時,一定要注意我們之前強調(diào)過選擇適當(dāng)?shù)墓δ芗尤胝饎臃答,這里分為兩種情況。

首先點贊、關(guān)注等情況就是可以首先考慮的,當(dāng)用戶在點贊、關(guān)注時獲得震動反饋,用戶心理上就會感到這幾個功能比其他按鈕有更好玩的體驗,這樣去引導(dǎo)用戶的心理,會讓他們對更多平臺內(nèi)容進(jìn)行點贊,提升平臺用戶的活躍度。這里第一個邏輯就是,如果我們想提高某功能用戶的頻率,讓它更有新奇好玩的體驗,我們就可以將動畫、震動、聲音三者結(jié)合,放到這個功能上。

其次類似發(fā)送按鈕、添加圖片按鈕、復(fù)選框等這類常用的功能也可以考慮加入震動反饋,這類功能加入震動反饋目的不是為了提高用戶對這些功能的使用頻率,而是為了使該功能反饋的反饋更加清晰明確,讓用戶獲得在顯示物理世界中相似的體驗,增加用戶對產(chǎn)品的喜愛程度。

其余的點按操作,我們一定要分清該功能的重要優(yōu)先級,如果是不重要的功能,我們頻繁地加入震動后造成太多反饋,過多的震動設(shè)計就像看多了 4D 電影一樣,反而會讓用戶膩煩。

讓體驗提高一個維度!如何做出讓人欲罷不能的觸覺設(shè)計?

2. 長按

蘋果最近已經(jīng)在 iPhone XR 機型上已經(jīng)取消對 3D Touch 的支持,而通過長按實現(xiàn)類似原本在 3D Touch 上的功能,因此我們可以向蘋果學(xué)習(xí)。如果某些功能設(shè)計時需要用戶長按調(diào)出,那么這些功能就會比較隱蔽或者是該功能的優(yōu)先級不高,那么考慮多在此類功能中加入震動反饋,讓用戶更明確長按后進(jìn)入了一個新的功能,避免誤操作等。對于長按顯示二級菜單、長按進(jìn)入刪除等功能時比較建議加入震動反饋。

3. 滑動

面對大部分的普通的頁面滑動瀏覽,我們一般不需要加入震動反饋,但如果是在一個有「格子」的列表上進(jìn)行滑動,就比較建議考慮加入震動反饋了。廣義的列表是指滑動頁面中的內(nèi)容是分塊的。比如 iOS 系統(tǒng)自帶的計時器功能,上下滑動調(diào)整時間時,每滑動一段距離就代表松手后會選定一個數(shù)字,每個數(shù)字單獨成為一行,滑動時按照每行觸發(fā)一次短震并同時觸發(fā)聲音特效,當(dāng)用戶快速滑動時,震動的頻率也會隨著滑動速度增加,這樣會更加符合我們物理世界,如同機械齒輪一次次地轉(zhuǎn)動,大大增加用戶交互的舒適度,讓用戶在滑動選擇、瀏覽時候也能增加交互準(zhǔn)確性。

因此我建議對用戶日期、時間選擇、微博內(nèi)容列表、新聞列表、功能選擇列表等,都也可以嘗試加入震動與聲音反饋效果,用戶會獲得如同物理世界一樣更加舒適的體驗。

關(guān)于手勢或繪畫,在完成某個手勢操作觸發(fā)功能時,加入反饋也會讓用戶更明確已完成操作并成功觸發(fā),從觸感上也更明確自己完成了操作,對于這種不明確的操作,我們更需注意加入觸感反饋和聲音反饋。

讓體驗提高一個維度!如何做出讓人欲罷不能的觸覺設(shè)計?

4. 提醒操作

關(guān)于軟件內(nèi)的各種消息和聲音提醒,也應(yīng)該加入有軟件特色的震動,比如先進(jìn)行長震再短震一次的組合震動代表一次消息,類似這樣的各種組合震動設(shè)計會讓用戶在有消息時除了聲音,觸覺上也能知道它是來自于哪個軟件的。


總結(jié)


雖然蘋果在 iPhone6s 上就加入了線性馬達(dá)與 3D Touch,開啟了觸覺設(shè)計的新篇章,但如今 2020 年了還有很多軟件沒有適配細(xì)節(jié)處加入震動觸覺反饋設(shè)計,很多安卓機型對震動馬達(dá)的支持導(dǎo)致其交互功能的局限。我們一直都在把目光聚焦于視覺上的設(shè)計、動效,當(dāng)一個軟件在商業(yè)、邏輯、設(shè)計、動效、震動、聽覺這些要素上全方位做到了及格線,才是一個成功的軟件交互設(shè)計的基礎(chǔ)。希望我們未來能夠不斷在細(xì)節(jié)處打磨,對產(chǎn)品細(xì)節(jié)處的觸感設(shè)計進(jìn)行實驗,讓用戶獲得更好的產(chǎn)品使用體驗。

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