編輯導語:我們經常會遇到手機震動的情況,其實一些功能的震動感覺也是不一樣的,比如蘋果手機的簡訊震動、消息震動、充電震動等都是有一些變化;本文作者分享了關於iOS 振動設計與落地全解析,我們一起來了解一下。
寫文章也像做一款產品一樣,隨著技術的進步、知識的迭代要進行合理的優化與更新。
過去的 2 年裡,行動裝置的更新迭代讓振動反饋有了更多的想像空間,因此本文在舊版文章「觸覺之美-如何進行觸覺設計」的基礎上做了以下修訂。
增加了 iPhone 的新 API 內容;結合最近的工作內容總結,將舊版中一筆帶過的落地實現模塊展開詳細闡述;將振動反饋的用途以更加合理的方式進行分類闡述。
希望能夠幫助設計師朋友完成振動設計的思考、設計、落地的全流程。
一、我們的觸覺
「她滑滑的,明亮著,像塗了『明油』一般,有雞蛋清那樣軟,那樣嫩」,這是朱自清的散文《綠》中對梅雨潭的一段描寫。
「滑」、「軟」、「嫩」是對觸覺賦予意蘊的獨特表達,這些我們一旦聽到就會在腦海裡浮現畫面的描述是來自於生活中無數次觸覺帶給我們的獨特體驗。
在人體的五種感覺中,觸覺與其他感覺相比與我們身體的接觸面更廣,人體全身上下都是觸覺信號的接收器;儘管如此,人類的觸覺能夠傳遞的信息是有限的,通常只有視覺信息的 1 %;不過,觸覺給人類帶來的情感體驗又是不可或缺的,如果沒有它的存在,我們在日常生活中與現實物體互動的過程將變得索然無味。
科技產品也是如此,無論是 VR 體感遊戲機還是日常使用的手機,通過振動帶來的觸覺反饋起到了畫龍點睛的作用。
二、iPhone 的振動模塊
軟體的體驗升級需要依賴硬體的不斷迭代,iPhone 的振動體驗一直被用戶讚嘆不已,這源自於與蘋果對用戶體驗的極致追求;即使在大多數用戶看來無關痛癢的振動功能,蘋果也一直進行不斷升級迭代,提高振動模塊的性能,帶來更舒適的體驗。
在 iPhone 振動模塊的升級過程,蘋果不斷增大振動模塊體積,從轉子馬達到線性馬達的更新換代讓震感越來越細膩,如下圖所示。
(上圖內硬體圖片來自知乎用戶「雲子可信」)
直到後來, iPhone 7 / 7 plus 上全新線性馬達 Tapitic Engine 問世,iOS 10 的振動接口向開發者開放;如此高配置的線性馬達提供的細膩反饋不但使 iOS 系統更具科技與藝術的融合之美,而且賦能了大量第三方應用使用振動反饋來提高產品體驗。
可能有些讀者會疑惑,全新的 Tapitic Engine 振動模式和以往有什麼不同之處呢?
我們先回憶一下在以往各種手機的振動給我們帶來的體驗,基本都是嘈雜的聲音加上酸麻的手感,體驗非常拙劣;而 Tapitic Engine 實現了在不發出聲音的情況下提供更細膩舒適的振動體驗,如下圖。
另外振動給我們另一個負面影響就是其幹擾性太強,大多數其他手機提供的振動並沒有進行時間和強度的分級,這帶來的問題是無論在何種場景下,手機都會給我們同樣的振動反饋,沒有進行任何場景的細分;比如對於危險操作可能需要時長久強度大的反饋,而一些輕量化的提示只需要輕微的振動即可。
但是由於硬體的限制,大部分安卓手機都是一視同仁,而擁有 Tapitic Engine 的 iPhone 則可以定義多種不同的強度,還可以穿插強度使用模擬更多場景,後文會詳細介紹相關應用。
三、安卓手機的振動模塊
剛才提到,絕大多數的安卓機型不可以對振動的強度進行自定義,因此不管在系統軟體還是第三方軟體中,如果場景需要振動輔助,基本都是振動到手麻的一聲「嗡」就不了了之了。
只有少數有極客精神的安卓廠商會在振動體驗上不遺餘力,向蘋果看齊;但由於大部分第三方應用開發者難以針對各個安卓機型不同的硬體振動模塊進行適配,所以大部分安卓機型上的第三方 App 如果需要振動都是調用單一強度,仍然未對振動強度做場景細分,體驗依然不盡人意。
四、觸覺設計的用途
儘管觸覺傳遞的信息遠遠少於視覺和聽覺,但我們通常也不會將觸覺作為傳遞信息的主要手段,我們只將其作為視覺反饋和聽覺反饋的一種補充和配合。
電子設備的振動模塊產生的觸覺反饋,可以有效提高交互的易感知性,並賦予產品生命力,增強用戶的情感化體驗。
一般來說,信息傳達和模擬現實是它主要的用途,接來將一一介紹:
1. 信息傳達
振動反饋所能夠提供的信息是非常少量的,但是在一些特殊場景中,它又存在著不可或缺的作用。
在信息傳達的用途中,振動反饋通常有兩種功能:
1)提示操作的結果是否發生
在一些特殊的場景中,通過視覺和聽覺產生的信息可能不足夠或者無法及時傳遞給使用者,此時就需要通過振動反饋來傳遞信息,告知操作者操作的結果是否發生。
例如在車載軟體的設計中,需要考慮到:操作者無法將視覺注意力集中於界面上;道路環境中存在各種嘈雜的噪音幹擾。
基於以上兩點,駕駛者無法及時通過獲取視覺和聽覺信去了解操作的結果是否發生,比如按鈕是否被觸發,此時通過振動產生的觸覺信息就可以彌補視覺和聽覺信息的不足。
當然,振動反饋的接受者不一定是操作者,比如手機來電和微信新消息的振動反饋可以在靜音或過於嘈雜的環境中保證接收者能夠獲取來電提示。
再比如iPhone從底部上滑後不鬆開手指一定時間後調出後臺App進程,界面左邊會出現後臺App移入的視覺反饋,同時會產生振動反饋一同告知用戶進程頁面已經觸發,可以在此時鬆開手指了。
再比如很多產品的下拉刷新都從之前的文字提示改為了振動提示;當用戶下拉的距離到達臨界值並觸發振動後,用戶感受到振動後鬆手就刷新了,而不用再使用「繼續下拉刷新、釋放刷新」等冗餘的文案來提示用戶,如下圖的下廚房應用。
2)隱喻操作結果的性質
在一次振動反饋中,振幅和頻率不同的變化會建立不同的物理隱喻,從而給操作者不同的感受;比如 iOS 中內置一個默認的 API 預設了 成功、失敗、警告 三種振動反饋,分別對應結果的性質。
成功:Success;振幅從低到高,傳遞積極的信號,隱喻本次操作結果為成功。案例:人臉識別成功。
警告:Warning;振幅從高到底,傳遞消極的信號,隱喻本次操作有風險,需要確認。案例:搖動以撤銷。
失敗:Error;振幅先變高再變低,隱喻本次操作結果為失敗。案例:人臉識別失敗。
由於在 iOS 中這個 API 的廣泛應用已經讓用戶將操作結果性質與振動類型建立的了聯繫,因此很多 iOS 端的遊戲中會直接調用這個 API 去表現操作結果的性質。
以我近期在玩兒的《光遇》為例,成功觸發查看關卡按鈕後會有「成功:Success」的振動反饋,
2. 模擬現實
人們容易對自己熟悉的事物產生好感。
在產品設計中,我們經常使用現實生活中常見的視覺形象和聲音進行隱喻關聯,與用戶建立情感連接;觸覺也不例外,日常生活中各種各樣的現實物體都會給我們帶來不同的觸覺感受。
電器按鈕的阻尼感、節日煙花爆炸傳遞的震感、撥動齒輪帶來的摩擦感等等都是我們與現實世界之間的觸覺交互,振動反饋可以充分地模擬並給我們帶來逼真的觸覺體驗。
在微信聊天頁中,雙擊頭像觸發拍一拍功能後,伴隨著頭像左右抖動會產生相應的振動,視覺和觸覺的配合讓整個交互流程更加生動。
為了研究不同產品上振動帶來的反饋感受,我體驗了很多產品,但論將振動反饋運用到極致的;不得不提 QQ 的戳一戳功能,它振動的時間節點、強度與每一幀的動畫效果是匹配的,其設計團隊的匠心獨具可見一斑。
為了直觀地讓大家感受振動變化,以戳一戳中的「放大招」為例製作了效果圖給大家展示大概的振動強度隨時間變化過程。
下圖中,動畫的過程可以拆解為 大招的能量收集、大招發射、大招撞牆、屏幕搖晃,分別對應不同的振動強度,使得體驗極為真實和令人驚喜。
當我們使用 iMessage 發送簡訊時,如果選擇了煙花特效,在簡訊發出的一瞬間,全屏幕就會布滿驟然綻放的煙花。
更令人驚喜的是,線性馬達在此時進行大大小小的振動模擬出煙花的爆裂感,仿佛煙花就是在我們手裡綻放一般。
不僅僅是上述案例,通過振動帶來的觸覺反饋在應用設計層面給我們帶來了巨大的想像空間;槍擊、拋硬幣、鼓點、齒輪等等等等,再加上視覺和聽覺的配合,更是帶給了用戶身臨其境的體驗。
五、設計與落地
看完了上文介紹的振動反饋的應用,大家一定覺得十分有趣,但是對於我們設計師來說,如何設計和落地才是最重要的。
那麼接下來就讓我們看看我們有哪些已知工具可以幫助我們吧!
iOS 提供了許多擁有特定默認值的振動反饋 API ,每個 API 之間的區別在于振幅、頻率或間隔時間,每個 API 中又有不同的類型,每個類型在振幅、頻率或間隔時間上又有著微妙的差別,我們可以通過調用合適的 API 選擇恰當的類型從而滿足不同的場景需要。
在 2019 年 6 月的蘋果開發者大會上,iOS 新推出了新的 API :Core Haptics,它支持開發者自己定義振幅和頻率,從而為用戶帶來更加多樣化的觸覺體驗。(後文將以默認值 API 和自定義 API 區分兩者。)
因此在考慮為某個功能的交互添加哪種類型的振動反饋時,我們可以選用默認值 API 或自定義 API 。
下面將介紹這兩類 API 並展示如何設計和落地:
1. 默認值 API
1)默認值 API 窮舉
默認值 API 為我們提供了許多不需要我們自己去調整振幅和頻率的振動選項,隨著系統的更新,iOS 提供的默認值 API 一直在增加,但是每個 API 的適配機型、適配系統都不是完全一樣的。
我們要根據覆蓋的系統和機型的需求選用最合適的哪一款 API ,然後再根據場景去選用 API 中合適的類型,下面我將窮舉出 iOS 現有的所有提供默認值振動的 API 。
如果僅僅是將 API 展示出來,並不能幫助大家感受其中不同振動類型的具體感覺,因此我也將該 API 的特定振動等級在哪個主流 App 中的哪個功能中應用過也會羅列出來;如果大家想要感受某個 API 中某個類型的振動等級,打開相應的 App 體驗一下即可。
選擇合適的 API 和類型後將相應的 API 名稱和類型的代號告訴開發就可以實現無縫落地了,再也不會出現讓開發加個振動,結果開發做出的效果和我們設計師自己想要的完全不一樣的情況。
Vibration 長振動
AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
簡介:歷史最悠久的 API ,高頻率持續 1s 的振動,常用於消息通知。
適配:全部蘋果手機機型和全部系統版本。
案例:微信新消息通知。
3D touch(TapticEngine)
a. Peek 觸感
AudioServicesPlaySystemSound(1519)
b. Pop 觸感
AudioServicesPlaySystemSound(1520)
c.三次連續短振(三次 Peek 觸感連續振動)
AudioServicesPlaySystemSound(1521)
特點:常用於 3D touch 中,Pop 的震感略強於 Peek。
適配:只支持 iPhone 6s 及以上機型,如果機型不支持將不振動。
案例:a.長按或重按控制中心的某個控制項目;b.微信的情景菜單放大為頁面;c.暫無案例。
UIImpactFeedbackGenerator
a.微弱短振-Light(表示較小的界面元素的物理碰撞或互動時)
UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleLight];
[generator prepare];
[generator impactOccurred];
b.中等短振-Medium(表示中等大小的界面元素的物理碰撞或互動時)
UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleMedium];
[generator prepare];
[generator impactOccurred];
c.明顯短振-Heavy(表示較大的界面元素的物理碰撞或互動時)
UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleHeavy];
[generator prepare];
[generator impactOccurred];
特點:常用於下拉刷新和手勢反饋;
適配:只支持 iPhone 7 及以上機型且系統需 iOS 10 及以上,如果機型或系統不支持將不振動;
案例:
使用iOS 的時鐘調節時間刻度、iOS 開關控制項的開啟和關閉;支付寶我的應用編輯頁中長按某個應用;支付寶首頁長按功能區觸發二級操作。Heavy 與 3D touch 振感中的 Peek 極為接近,使用Peek的案例換用 Heavy 也是可行的;
UINotificationFeedbackGenerator
a.成功-Success(表示一個任務或行為的完成)
UINotificationFeedbackGenerator *notificationFeedbackGenerator = [[UINotificationFeedbackGenerator alloc] init]
[notificationFeedbackGenerator notificationOccurred:UINotificationFeedbackTypeSuccess]
b.警告-Warning(表示進行一個任務或行為時產生了警告)
UINotificationFeedbackGenerator *notificationFeedbackGenerator = [[UINotificationFeedbackGenerator alloc] init]
[notificationFeedbackGenerator notificationOccurred:UINotificationFeedbackTypeWarning]
c.失敗:Error(表示一個任務或行為的失敗)
UINotificationFeedbackGenerator *notificationFeedbackGenerator = [[UINotificationFeedbackGenerator alloc] init]
[notificationFeedbackGenerator notificationOccurred:UINotificationFeedbackTypeError]
特點:此 API 的三個類型都是連續振動多次,常應用於成功、警告、失敗的場景。
適配:只支持 iPhone 7 或更新款機型且系統需 iOS 10 或以上,如果機型或系統不支持將不振動。
案例:a.人臉識別成功;b.搖動撤銷;c.人臉識別失敗、鎖屏後輸入密碼錯誤。
UISelectionFeedbackGenerator
UISelectionFeedbackGenerator *selectionFeedbackGenerator = [[UISelectionFeedbackGenerator alloc] init]
[selectionFeedbackGenerator selectionChanged]
特點:常應用於選擇的場景。
適配:只支持 iPhone 7 及以上機型且系統需 iOS 10 或以上,如果機型不支持將不振動。
案例:Chrome 瀏覽器下拉後左右滑動選擇選項、iOS 照片 App 或微信裡看圖片放大到極限值繼續放大後回彈時。
去掉連續振動的類型,全部 API 中單次振動的振感從小到大的排序為:
UISelectionFeedbackGenerator(微弱)UIImpactFeedbackGenerator-light(適中)UIImpactFeedbackGenerator-medium(適中)UIImpactFeedbackGenerator-heavy(強烈)3D touch-peek(強烈)3D touch-poop(強烈)Vibration(嘈雜)
大家在使用時並不要被它們各自的特點局限,特別是當使用這些默認值振動模擬現實時,通過開腦洞巧妙地組合使用會產生意想不到的效果;比如剛才在用途部分提到的 QQ 戳一戳的設計就非常別出心裁。
2)落地案例
案例 1 :登錄頁提示勾選協議
當我們體驗完所有的默認振動 API 後,我們對于振動的反饋的等級選擇就會開始有一定的判斷力;比如如果要配合網易雲音樂登錄頁中沒有勾選協議就點擊登錄後的這個提醒動畫,我們選擇哪個 API 最合適呢?
了解了上述 API 並體驗相關的振動後,大家可以直觀發現「UINotificationFeedbackTypeError」最適合這個操作失敗的場景;大家告知開發使用的 API 為UINotificationFeedback,類型為 Error,開發就可以精確地調用,高效落地了。
案例 2 :功能引導
案例 1 中只是調用了某個 API 中單一的類型,但是有時我們想要達到某些效果需要將這些不同的 API 和類型組合成一個複雜的振動反饋;此時我們就需要詳細標註了,我們需要標註出調用的 API 以及類型、每個振動之間的間隔時間。
下面以之前做過的一個引導動畫為例向大家展示落地過程:
項目背景:鯨雲音效新增了閃光振動功能,用戶開啟後在聽歌時手機閃光燈和振動馬達會跟隨節奏閃爍和振動;為了在入口處吸引用戶進入設置頁面體驗新功能,需要設計一個引導方式吸引用戶點擊入口。
設計表現:配合閃光振動的功能屬性,為入口處的鯨雲音效的圖標設計跳舞的動畫,並為圖標的每個節拍匹配一個振動反饋,增加趣味性、真實感和感官上的豐富度。
動畫的效果如下圖所示:
振動標註:標註需要我們確定兩個參數,分別是「振動選用的 API 與類型」和「每次振動的間隔時間」。下面的[ ]內的內容是代碼層面實現組合型複雜振動的邏輯。
播放 UIImpactFeedbackGenerator-light,等待 0.45s播放 UIImpactFeedbackGenerator-light,等待 0.39播放 UIImpactFeedbackGenerator-light,等待 0.35播放 UIImpactFeedbackGenerator-light,等待 0.7播放 UISelectionFeedbackGenerator,等待上一個播完播放 UIImpactFeedbackGenerator-light,等待上一個播完播放UISelectionFeedbackGenerator,等待上一個播完播放UIImpactFeedbackGenerator-light,等待上一個播完……
我們以代碼實現的邏輯進行標註,可以給到開發工程師如下圖的標註形式。(僅供參考,設計前多與開發工程師溝通確定標註內容)
需要注意的是:
每兩個振動之間必須加間隔時間,否則這兩個振動就會同時振動;間隔時間包括了前一個振動運行的時間。
此時有的小夥伴可能會疑惑:設計好的振動需要如何預覽呢?如果等到開發同事做出來之後再體驗好不好的話,那樣萬一要修改的話,成本豈不是很高?
確實如此,當製作複雜的振動反饋組合時,設計師憑空想像是很難把控不同強度當振動組合後形成的結果的;如果沒有一個可以實時編輯和預覽的工具,使用默認值 API 去設計複雜的的振動是很難直觀得去反覆調試出最佳效果的。
當我們確定了震感的設計後,在實現階段有兩種方式,第一是仍然使用之前文中提到的的標註方式來標註,然後讓開發按照標註編寫代碼;第二種是直接用上述的 Piano App 導出代碼給開發同學使用,但是缺點是開發同學需要花點時間引入第三方框架,會讓應用安裝包體積大概增加 50k。
2. 自定義 API
上述的默認值接口調用方式可以讓我們不必過多思考就可以選擇出合適的振動等級,但是對於一些自定義程度要求高的模擬需求就遠遠不夠了;這時我們需要使用 iOS13 提供的新 API -Core Haptics;Core Haptics支持將音頻文件轉為振動,而且設計師可以通過第三方軟體可視化繪製「振幅」和「頻率」的值,導出haptic格式文件後直接交接給開發工程師使用。
想要繪製出體驗優質的自定義振動,我們首先需要了解「振幅」和「頻率」這兩個物理量與聲音有什麼樣的關係。
物體振動產生聲波,聲波到達我們耳朵中的鼓膜後被我們感受到,變成了可識別的聲音;物體振動的範圍和強度越大,振幅越大,它將影響音量的大小;每秒振動的次數越多,頻率越高,它影響著音調的高低,人通常能聽到頻率 20-20000hz 的聲音。
我們把一段聲波輸入一個正弦波到示波器,振幅越大,波峰和波谷偏離零位線的距離越遠。頻率越高,波動越密集。
在繪製自定義的振動反饋時,我們也是主要編輯這兩個參數來達到相應的效果。使用軟體 Lofelt Studio 將我們繪製的振動導出為文件給到開發直接調用。
比如我如果在設計一款駕駛摩託車的遊戲,有個場景是摩託車從近處啟動後駛向遠方,需要設計相應的振動配合畫面和音效;相應的數值變化是振幅不斷降低,頻率不斷提高,從而模擬出真實世界的效果。在 Lofelt Studio 中繪製出來的效果如下。
具體的軟體使用方法就不在此贅述了,有學習興趣的小夥伴可以點擊在在文章結尾處按照指引領取安裝包和使用教程。
雖然這個自定義 API 已經發布許久,但是應用它的 iOS 端 App 或遊戲還是比較少的,當我們考慮在 App 或遊戲中應用時;除了根據現實模擬之外,還可以參考一些非 iOS 端平臺優秀的遊戲產品是如何設計的,如 NS 、 PlayStation 等。
比如以我最近在玩兒的NS平臺上的《馬裡奧賽車 8 》舉例,它在手柄的振動反饋上下足了心思,加速、撞擊、獲得道具等行為都能夠觸發不同的振動反饋,每個反饋都是根據現實進行映射。
下面以加速帶助力和起步二者為例,簡單介紹下其波形特徵以及在Lofelt Studio中的繪製效果:
除了在遊戲領域,這個自定義 API 在音視頻類產品上的應用也非常廣泛;試想一下,如果我們欣賞一首歌曲的過程中,不但可以通過聽覺感受它的旋律,還能通過觸覺感受模擬聲源的振動,那麼這給我們帶來的多感官豐富體驗一定妙不可言。
QQ 音樂挑選了節奏感比較強的幾十首歌曲設置為特色歌單,再針對這幾十首歌曲針對性地設計振動,體驗非常細膩;特別是《發如雪》開頭的雨點落到地面的振動模擬,極為細膩和逼真。
愛奇藝的蹦迪模式,會適配一些以音樂為主題的綜藝,比如《中國新說唱》《樂隊的夏天》,在歌手演唱時會觸發振動反饋。
六、使用原則
以下 8 條原則是以 iOS 人機互動規範為基礎,結合我的實踐經驗總結而成。
1. 建立清晰的因果關係
振動反饋需要與用戶的特定操作建立清晰的因果關係,如果操作與振動反饋之間的延遲過長,就會讓用戶覺得非常莫名其妙。
2. 有目的地謹慎使用
雖然振動反饋對於體驗的提升有較大的價值,但是我們還應謹慎使用,從而確保它能夠為我們的產品提供持續性的價值。
我們可以使用它去為產品增加很多獨出心裁的設計去吸引用戶,也可以僅僅是添加少量去強化一些具有結果性的交互;但是將它應用到太多瑣碎且不重要的交互上就可能適得其反,給用戶造成不必要的負擔。
3. 保持一致性
確保振動反饋的一致性體驗。
某個特定的振動反饋會讓用戶將它與特定的操作和情緒關聯起來;比如,如果我們使用一個經常用於任務成功的較為正面積極的振動反饋去表達任務失敗,用戶就會非常疑惑和不知所措。
4. 可選擇性
使振動反饋設計為可選項。
允許用戶關閉振動反饋,確保沒有它時產品仍然能夠正常使用。
5. 考慮普適性
確保在我們的產品上充分測試振動反饋;不同的人有不同的偏好和對振動不同的耐受度,所以我們需要去尋找儘可能多的人進行測試。
6. 考慮對硬體的影響
確保振動不會干擾到其他操作;比如陀螺儀、攝像頭、麥克風有可能會受到振動的影響不能正常工作。
7. 可作為其他反饋的補充
振動反饋也可以作為其他反饋的補充;尤其在遊戲設計中,當視覺、聽覺、觸覺的反饋相輔相成,高還原度地去模擬現實世界時,用戶將會獲得連貫自然的體驗。
8. 個性化場景考慮進行定製化
在遊戲中,考慮使用定製的振動反饋去強化用戶的體驗(使用上文提到的自定義 API 實現)。
除了系統提供的那些自帶振動反饋的控制項外,我們應該為遊戲設計一些獨有的、有特色的振動反饋;比如,振動可以加強物體撞擊時的真實感,還可以暗示用戶通過視覺不容易察覺的內容,比如敵人逐漸逼近的腳步。
七、觸覺體驗設計步驟
在一個交互流程中,如何判斷是否要加入振動反饋,我們可以依據以下步驟:
1. 明確用戶需求
首先明確用戶的需求,知道用戶在某次任務中需要達到什麼目的。
2. 梳理交互流程
將用戶的某次任務流程分解為單個操作,當用戶進行了一系列操作後將完成任務。
3. 明確傳達信息
明確每一步操作中能夠幫助用戶儘快完成當前步驟的重要信息,比如用戶需要獲得什麼樣的反饋信息才能開始下一步?
4. 選擇傳達形式
選擇合適的信息傳達形式,比如是視覺、聽覺或者是觸覺;不同的傳達形式適合的場景不同,傳遞的信息密度也不同。
5. 落地設計結果
確定傳達形式後,確保設計結果的可用性,避免給用戶造成不必要的幹擾。
以每個App都有的下拉刷新的功能為例,使用上述步驟進行設計。
1)用戶在使用下拉刷新時,主要的需求是獲取新的內容。
2)在下拉刷新的交互過程中,用戶的操作步驟為①下拉頁面;②鬆開手指獲得新內容。
3)那麼在這個交互流程中,有哪些反饋信息能夠幫助用戶儘快完成當前步驟呢?從①步驟過渡到②步驟我們需要給予用戶的反饋信息是「下拉頁面的距離是否已經滿足觸發刷新的需要」。
4)這條反饋信息首先我們能夠想到通過視覺、聽覺或觸覺進行傳達,但是聽覺適應的場景具有局限性,因此我們暫不考慮。我們優先選擇視覺反饋,比如通過文字「下拉刷新」到「鬆手刷新」的變化提示用戶下拉頁面的距離已經滿足觸發刷新的需要,但是用戶在下拉刷新的操作通常是非專注性的,視覺反饋有時會被用戶忽略,此時我們可以增加觸覺反饋,作為視覺反饋的補充或直接替代掉它。
5)最後確保觸覺反饋的強度能夠被用戶獲取且不會打擾到用戶。
八、結語
電子產品每一次的硬體迭代總是會給設計師帶來巨大的想像空間,作為設計師,我們需要在技術日新月異的時代不斷開拓視野,拓展設計的邊界。
同時也是由於技術的進步,可能本文的技術實現方案在未來的某個時間就被淘汰和拋棄;所以希望大家對本文持批判性態度,對文章內可能的疏漏予以指出,我將及時更新或更正。
參考資料:
《微交互》作者: 塞弗 (Dan Saffer)
《 iOS 中關於Taptic-Engine震動反饋的深入解析》作者:深藍_S
連結:https://www.jianshu.com/p/d4567dbd7dde
《如何評價 iPhone 上的振動反饋?》中「雲子可信」的回答,作者:雲子可信
連結:https://www.zhihu.com/question/264649851
參考網站:
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成明 原創發布於人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基於CC0協議。