別讓用戶摸黑操作!大廠高手總結的振動場景設計指南

該項目深入解析應用程序中的振動反饋標準和對體驗的提升效果,通過「標準化組件開發+場景化數據驗證」雙軌機制,提供可復用的企業級觸感體驗解決思路。

更多振動設計干貨:

背景

說到振動的應用,首先映入大家腦海可能是一些游戲產品。在游戲產品中,從雨滴落下的微妙觸感到武器射擊的真實后坐力,觸感反饋極大地提升了互動的沉浸感。

近年來,隨著觸感反饋技術在用戶體驗中的價值日益凸顯,振動的應用已從游戲領域的沉浸式場景延伸至移動應用生態。

主流廠商持續升級振動硬件與 API 能力,為開發者開辟了多維感官體驗的創新空間。在 OTA 類應用程序中,在合適的觸點增加振動反饋被驗證能有效增強用戶操作感知。毋庸置疑,振動在應用程序中的應用,也是一個體驗提升的機會點。

為系統化釋放這一潛力,攜程在集團內啟動了振動標準化項目,旨在全局地提升振動體驗:確保振動效果的一致性與精準匹配應用時機。該項目由設計團隊牽頭,聯合多職能協同推進,通過雙軌并行的任務線落地:

  1. 標準化組件線:設計規范團隊與組件技術團隊合作,通過規范化/組件化的思路。建立可復用的振動組件庫,實現跨業務線的敏捷調用,確保振動效果一致。
  2. 場景化驗證線:各業務線基于真實用戶旅程探索觸點部署,通過數據反饋沉淀最佳實踐,最終達到精準匹配應用時機。

一、振動效果的一致性

我們要正確的應用振動,首先要理解振動的含義。

正如在界面設計中,不同的顏色會被用來表達不同的含義,不同的振動也能傳達不同的含義, 比如:一個短而輕的瞬時振動,往往用來表示某個操作已生效或到達臨界點, 當我們在 iOS 系統中進行一些勾選和開關操作時,會觸發這一類振動反饋;一個振幅從低到高的 2 次短振則能傳遞出積極信息,則可以用來表達操作結果為成功,一個典型的案例是在 App Store 進行面容 ID 識別成功時。

別讓用戶摸黑操作!大廠高手總結的振動場景設計指南

基于振動的不同含義,我們從蘋果人際設計指南中摘取了 5 個有最多應用可能的振動模式,并對他們分別進行了更直觀的命名,分別是:

  1. 基礎操作反饋:一種配合操作的瞬時振動,用來表達某個操作已生效或到達臨界點。
  2. 成功提示:振幅從低到高,傳遞積極信息,用來表達本次操作結果為成功。
  3. 警告提示:振幅從高到低,傳遞消極信息,用來表達本次操作觸發了一個負向警告。
  4. 錯誤提示:振幅先升高后降低,頻率急促,用來表達本次操作發生錯誤,結果為失敗。
  5. 新消息提示:一種配合新消息推送的持續性振動,用來表達用戶收到新消息。

別讓用戶摸黑操作!大廠高手總結的振動場景設計指南

在實現方面,iOS 系統中可以快捷的調用這些標準模式。而 Android 并沒有同樣的振動模式可用,那如何打通技術棧之間的壁壘,是設計和開發團隊面對的又一挑戰。

為了解決這一問題,我們需要進一步理解振動的組成元素是什么?

一個振動通常包含以下四個元素:

  1. 強度:表示振動的力度強弱。
  2. 時長:表示振動的持續時間。
  3. 銳度:表示振動的波形,不同波形的振動可以是柔和的或清脆的。
  4. 間隔時長:當一個振動模式由多個振動組成,還需要設計振動之間的間隔時長。

別讓用戶摸黑操作!大廠高手總結的振動場景設計指南

理解了振動的組成元素,我們通過調試,就可以將抽象的振動落成參數化的文檔,從而在跨技術棧中實現相同的振動模式。

別讓用戶摸黑操作!大廠高手總結的振動場景設計指南

既然振動可以總結為通用的模式和參數,則可以實現進一步的振動組件化,設計師只需要在常規交互說明中補充正確含義的振動模式名稱,研發側就可以直接調用對應名稱的振動組件,完成一個振動需求的上線,充分保證了全流程振動效果的規范化和一致性。

別讓用戶摸黑操作!大廠高手總結的振動場景設計指南

二、振動的應用時機

知道了如何使用標準的振動效果之后,我們開始探索如何用對振動時機。

通過對行業競品案例的分析歸納,我們將振動的應用方向分為 3 類,并在每個方向推進相應觸點的落地來驗證效果:

  1. 激勵互動行為
  2. 協助精準控制
  3. 操作結果反饋

第一個應用方向是激勵互動行為,我們率先嘗試在用戶進行收藏 / 點贊時,去增加一個點擊操作振動反饋,在用戶取消點贊 / 收藏時則不觸發。我們期望通過這種有趣的反饋,可以激發用戶產生更多的互動次數。

別讓用戶摸黑操作!大廠高手總結的振動場景設計指南

第二個應用方向是協助精準控制,我們在一些視覺反饋效果不夠明確的點位,例如下拉刷新到達臨界點 / 日歷的選擇日期生效時,增加振動反饋,通過振動精準的反饋時機,來增強用戶對操作生效的感知。

別讓用戶摸黑操作!大廠高手總結的振動場景設計指南

第三個應用方向是作為一種更豐富的操作結果反饋,我們在流程中的重要節點,例如支付成功或填寫頁提交報錯時,增加振動反饋,來進一步增強用戶對操作結果的感知。

別讓用戶摸黑操作!大廠高手總結的振動場景設計指南

針對核心場景,我們也進行了數據的回收。我們發現在激勵互動行為的觸點有較明顯的數據提升。

至此,對于用對振動時機,我們也有了初步的應用指導。

振動的應用從完整的流程考慮,應滿足時機恰當,頻率合適,同類場景方案統一。

我們建議在完整的流程中,可以優先考慮在以下點位增加振動,正向互動點位,視覺反饋有限的點位,和重要操作結果點位。

別讓用戶摸黑操作!大廠高手總結的振動場景設計指南

跳出屏幕,跳出常規的視覺反饋,我們設計師還有更多的領域可以探索。

而此次項目我們也沉淀了一個新領域的標準化是如何實現的,我們通過理解語義,明確規則,形成標準流程;接著我們通過探索場景,數據驗證,總結實踐指導。

希望我們的經驗能為設計師在更多領域進行企業級體驗升級的落地提供思路。

歡迎關注作者微信公眾號:「TripDesign」

別讓用戶摸黑操作!大廠高手總結的振動場景設計指南

收藏 1
點贊 28

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