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

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

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

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

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

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


震動觸感產生的原理


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

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

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

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

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

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

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

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

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


觸感設計時設計師需要知道的設計選項


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

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


觸感交互的兩種產生方式


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

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

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

2. 軟件自主產生的震動

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


設計師應該聚焦的問題


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

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

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

1. 點擊

按鈕點擊是我們遇到最頻繁的交互,在給點按類操作加入震動反饋時,一定要注意我們之前強調過選擇適當的功能加入震動反饋,這里分為兩種情況。

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

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

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

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

2. 長按

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

3. 滑動

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

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

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

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

4. 提醒操作

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


總結


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

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