研究觸覺回饋 & FeedbackGenerator

Steven_唐
彼得潘的 Swift iOS App 開發教室
10 min readSep 2, 2022

--

透過Simon Sinek的黃金圈理論來研究觸覺回饋

本篇文章主要是研究觸覺回饋與FeedbackGenerator。本來是想要寫為震動回饋的,經過查詢Cambridge辭典查詢後就先稱觸覺回饋。(有些部分還是會稱為震動比較順)

自己對於觸覺回饋有著很大的興趣,認為這方面的運用有不錯的發展潛力,使用者可以透過觸覺回饋與裝置之間的互動更為豐富,做到聲音與圖像做不到的提示與功能,可以像是取代某些提示框等等。試想如果一支手機完全沒有震動回饋的提示,那感覺就像是在拿著一塊冷冰冰磚頭然後一直用手指搓著它(就像是在用ibon)。

另外前陣子剛好閱讀了Simon Sinek的『為什麼』系列,想試著透過黃金圈理論應用在這次研究的主題,希望藉由這次寫作使自己更能理解黃金圈的精髓。

為什麼手機要有震動?

在早期傳統手機上就開始有震動這項功能,可以提供聲音或畫面以外的方式提醒使用者,也能與上述兩者混用增強提醒的回饋感。舉例來說像是開啟靜音情況下有人來電時透過震動提示使用者,或是響起鈴聲的同時開啟震動功能以增強回饋感。而鬧鐘響起時也可以透過震動增強對使用者的提示。

印象中以前有些小遊戲有提供震動效果。【游戏咖啡馆】诺基亚空间大战的“隐藏的地上关卡” — YouTube

Nokia 的空間大戰(小時後就是用這支手機玩的!),被子彈打到會給予震動回饋。

如何產生震動?

早期手機的震動器為滾子馬達,後來因體積較大、耗電較高與震動頻率不平均就被淘汰了。

最早有內建震動馬達的手機應該是Motorola StarTAC

摩托羅拉StarTAC — 維基百科,自由嘅百科全書 (wikipedia.org)

後來線性馬達取代了滾子馬達。線性馬達顧名思義就是在固定方向產生震動,大致上可以分為橫向左右震動與前後震動。而沒有上下震動的原因是會受到地心引力的干擾。

蘋果爸爸研發的Taptic Engine

怎麼運用震動?

先看看Apple、Android以及三星對於觸覺回饋運用的規範與建議。

Android haptics — Material Design

Haptics refers to the sensation delivered to users through a touch UI. Haptics can enhance the overall user experience by conveying and reinforcing information. They are frequently combined with audio and visual elements to complement interactions

Android haptics — Material Design

Android Material Design介紹如何適當地運用觸覺回饋,不過好像沒有提到應用的場景。

Haptic | Samsung Developers

Haptics make touch interactions more intuitive and pleasant by providing tactile feedback.

Crisp and refined haptic feedback helps users avoid overstimulation and creates a gentle clicking sensation when touching the screen.

Haptic | Samsung Developers

三星官方文件介紹著重於應用場景。(可能是使用android系統,因此可能就不寫那些基本的規範了)

Human Interface Guidelines — Design — Apple Developer

Playing haptics can engage people’s sense of touch and bring their familiarity with the physical world into your app or game.

Apple Developer(舊資料)

Apple Human Interface Guideline提供觸覺回饋基本的應用規範與應用場景,基本的UI元件與三星一樣都有預設的觸覺回饋。此外,Apple還提供更多元的回饋提示,像是不同的回饋力道柔軟、尖銳、輕、中、重,以及系統預設的通知回饋

Playing haptics — Patterns — Human Interface Guidelines — Design — Apple Developer

為了親自體驗這些回饋帶來的感受,自己寫了個簡單的Demo來玩玩。(最近重溫『攻敵必救』這部電影,然後就取名為Earthquake~)

GithubEarthquake_Demo: 研究觸覺回饋 & FeedbackGenerator (github.com)

系統通知

系統通知是使用UINotificationFeedbackGenerator來呼叫功能,共有success(左上)、錯誤(右上)、警告(左下)三種可選擇。

UINotificationFeedbackGenerator().notificationOccurred(.success)

右下為UISelectionFeedbackGenerator。

UISelectionFeedbackGenerator().selectionChanged()

清晰度(柔與尖銳)

UIImpactFeedbackGenerator其實已經包含五種回饋力道。這裡依照HIG的介紹將柔軟與尖銳放在同一頁,方便比較兩者之間的差異。

@IBAction func rigidAction(_ sender: Any) {let feedbackGenerator = UIImpactFeedbackGenerator(style: .rigid)feedbackGenerator.impactOccurred()}

回饋力道

由上至下分別為弱、中、強

從上述文件看起來相較於Android,Apple似乎更為重視觸覺回饋的應用,其研發的Taptic Enging 也可以創造出較多元的回饋效果。

iPhone好用的觸覺回饋運用

有幾個受到啟發的應用,這邊舉幾個經常會用到的例子

長按編輯App

長按App icon約0.5秒後會震動一下(力道為尖銳)並彈出編輯該App的選單,接著長按不放約1秒後會再震動一次(力道為柔軟)並進入編輯整個頁面的模式,將一個長按動作可以藉由震動分為兩個階段。

FaceID & TouchID

Face ID y Touch ID — Bluumi, crea apps iOS y Android

使用FaceID或TouchID解鎖或付款成功時有輕微震動提醒解鎖成功。另外一個印象比較深刻的是第一次使用TouchID時需要手指觸碰幾次Home鍵才可以設定完成,每次的觸碰都會給予輕微的震動回饋,表示這一小階段的指紋設定完成了。

上滑切換

在主頁面手指上滑到某個程度時會有震動回饋提示,代表可以放開手指進行切換的操作。如果沒有震動的回饋提示,此時系統會快速地將主頁面帶回到第一頁。這項設計是自己目前最喜歡的一項,藉由是否觸發回饋來決定接下來將要觸發的功能。

實際例子

前陣子接觸了一個跟股票類型的專案,在使用長按拖曳股票曲線圖時,發現有時要快速準確指定到某個點看價格時不是很方便。舉例來說想要看某一點的價格(如紅匡處),可能會因為每個點之間的間隔太小,導致不容易準確且快速地指定到位。

長壓拖曳滑動(以iPhone內建的股票App示範)

此時腦袋靈光一閃,思考或許可以透過震動回饋產生類似於滑鼠中間滾輪滾動時會有的頓挫感,使得可以比較精準地指定到想要的位置上。這裡使用Slider做了一個簡單的模擬情境。

Github:Steven-Tang-rong/Slider_demo: 研究觸覺回饋 & FeedbackGenerator (github.com)

Demo介紹

最下面的slider沒有震動回饋以方便比較
按下『震動強度』可調整兩個Slider的回饋強度

滑動第一個Slider可調整上方測試文字的大小,共切分成七個等級。第二個Slider單純為0到100,每次變更數值都會產生震動回饋。第三個Slider沒有震動,可以用來跟上面有震動回饋的Slider做比較,個人覺得有震動回饋可以比較精準且較快的指定到想要的數字。

另外可以透過變更回饋強度來測試哪種回饋較為舒適。依造HIG的建議Slider這種小型的物件應該比較適合輕的回饋,這在使用第一個Slider的確很合適。

不過在使用第二個Slider稍微快速移動時,感覺整個手感有點不舒適,後來將回饋強度改為柔軟後,整個回饋的感覺就舒適多了。

結語

目前對於如何運用震動回饋強度中與重還不是很清楚,在iPhone系統內建的操作回饋上大部分都是輕、柔與尖銳居多,目前發現有運用到中與重回饋部分是在解鎖畫面的手電筒按鈕。但不了解的是只有在解鎖畫面的手電筒按鈕才有重回饋,解鎖後的手電筒按鈕就沒有任何震動回饋了。

後來仔細想想可能是考慮到在解鎖畫面較容易誤觸到手電筒的功能,造成不必要的電量浪費。因此必須透過兩次中與重的震動回饋後才能開啟手電筒。(這種感覺也像是在使用真的手電筒的感覺)

另外,對觸覺回饋有興趣的開發者or設計師可以到Developer下載官方的範例。

(要用實機跑專案,模擬器跑會crash)

--

--