Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Haptic Feedback による効果的なマイクロインタラクション

D10c346cbd9d9f10b37fee2fee007ee1?s=47 Keisuke Tada
August 31, 2018

Haptic Feedback による効果的なマイクロインタラクション

iOSDC Japan 2018
2018/08/31 18:00〜 Track D

詳しく説明した記事 → https://note.mu/tdksk/n/nb4498e59dcad

D10c346cbd9d9f10b37fee2fee007ee1?s=128

Keisuke Tada

August 31, 2018
Tweet

Transcript

  1. Haptic Feedback による 効果的なマイクロインタラクション Keisuke Tada

  2. 多田 圭佑 ホリデー株式会社 デザイナー w )PMJEBZͱ͍͏αʔϏεͷϓϩμΫτશൠΛ୲౰ w ͠͹Β͘J04։ൃ͕ϝΠϯ

  3. None
  4. Haptic Feedback 触覚

  5. None
  6. 話すこと w )BQUJD'FFECBDL͸ಋೖ΋؆୯ͰޮՌൈ܈ w ͕ɺ࢖͍Ͳ͜Ζ͕Θ͔Βͳ͍ͱಋೖͰ͖ͳ͍ w ɹޮՌతͳ࢖͍Ͳ͜ΖΛ͝঺հ͠·͢ʂ C

  7. Haptic Feedback とは

  8. None
  9. というのは半分冗談ですが…

  10. 一見地味だが非常に有効 w ݶΒΕͨ໘ੵͷεΫϦʔϯͰͷ
 ࢹ֮ϑΟʔυόοΫ͚ͩͰ͸Ͳ͏ͯ͠΋ݶք͕͋Δ w ৮֮͸ݱ࣮ੈքͰ೔ৗతʹཔΓʹ͍ͯ͠Δײ֮ w ࢹ֮ʴ৮֮Ͱ఻ΘΓ΍͍͢ϑΟʔυόοΫΛ࣮ݱͰ͖Δ

  11. 導入が簡単 w 6*తʹ؆୯ w ৮֮Λ௥Ճ͢Δ͚ͩ w طଘͷࢹ֮తͳ6*ͱׯব͠ͳ͍ w ࣮૷͕؆୯ w

    ਺ߦॻ͚ͩ͘
  12. ただし

  13. ⚠ 乱用しないこと (Human Interface Guideline より意訳)

  14. 乱用しないために w )*(͔ΒֶͿ w ΨΠυϥΠϯ΍ߟ͑ํΛ஌Δ w ࣄྫ͔ΒֶͿ w ࣄྫ͔ΒҰஈந৅Խͯ͠ଊ͑Δ͜ͱͰԠ༻Ͱ͖Δ

  15. Haptic Feedback 基礎知識

  16. Notification Impact Selection

  17. Notification Impact Selection Success Warning Failure https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/feedback/

  18. Notification Impact Selection Light Medium Heavy https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/feedback/

  19. Notification Selection Impact Selection https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/feedback/

  20. Haptic Feedback の原則 (1/2) w ཚ༻͠ͳ͍ w ϢʔβͷΞΫγϣϯʹର͢ΔϨεϙϯεͱͯ͠࢖͏ w ϑΟʔυόοΫͷछྨΛউखʹ࠶ఆٛ͠ͳ͍

    w ࢹ֮ޮՌͱ߹ΘͤΔ (Human Interface Guideline より)
  21. Haptic Feedback の原則 (2/2) w )BQUJD'FFECBDL͚ͩʹཔΒͳ͍ w ࢹ֮తͳϑΟʔυόοΫ͕ӅΕ͍ͯΔ࣌ʹ࢖͏ w ࣄલʹ5BQUJD&OHJOFΛ४උ͢Δ

    w Իͱಉظ͢Δ (Human Interface Guideline より)
  22. Haptic Feedback 定番パターン &応用例

  23. 成功・失敗時 ①

  24. None
  25. None
  26. None
  27. 応用

  28. 応用

  29. 入力が受け付けられた時 ②

  30. None
  31. 応用

  32. ①と②の使い分け w ॏ͍ΞΫγϣϯˠ①੒ޭɾࣦഊ࣌ʹϑΟʔυόοΫ w ॏཁ౓͕ߴ͍৔߹ɺࣦഊ͠΍͍͢৔߹ɺFUD w ͍ܰΞΫγϣϯˠ②ೖྗड෇࣌ʹϑΟʔυόοΫ w ස౓͕ߴ͍৔߹ɺॲཧ͕ܰ͘ݟ͑Δ৔߹ɺͳͲ

  33. 連続的な値の変化時 ③

  34. None
  35. None
  36. 応用

  37. トリガーの閾値を超えた時 ④

  38. None
  39. None
  40. None
  41. 応用

  42. 応用

  43. まとめ ①੒ޭɾࣦഊ࣌ ②ೖྗ͕ड͚෇͚ΒΕͨ࣌ ③࿈ଓతͳ஋ͷมԽ࣌ ④τϦΨʔͷᮢ஋Λ௒͑ͨ࣌

  44. まとめ w )BQUJD'FFECBDL͸ޮՌൈ܈ w ಋೖ͸ͱͯ΋؆୯ w ࢖͍Ͳ͜Ζ΋ʢΘ͔Ε͹ʣ؆୯ w ɹऔΓೖΕ͍ͯͳ͍ਓ͸ࠓ͙͢औΓೖΕͯΈ·͠ΐ͏ʂ C

  45. おまけ Haptic Feedback 実装

  46. 基本はこれだけ

  47. 遅延を防ぐ w 5BQUJD&OHJOFΛࣄલʹ४උ͠ͳ͍ͱɺ)BQUJD'FFECBDL ͕஗ΕΔՄೳੑ͕͋Δ w ४උ͢ΔͨΊͷϝιουΛద੾ͳλΠϛϯάͰݺͿ w ૣ͗ͯ͢஗͗ͯ͢΋ͩΊʢ਺ඵؒͰΞΠυϧঢ়ଶʹͳΔʣ w ʢͨͩɺܦݧଇͰ͸ؾʹͳΔΑ͏ͳ஗Ԇ͕ൃੜ͢Δ͜ͱ͸΄΅

    ͳ͍ʣ
  48. ... ... ...

  49. None