Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

UX MILK All Night 2020 (Yukio Andoh)

The art of increasing the resolution of eyes, hands and movement in UX design.

  • Als Erste(r) kommentieren

UX MILK All Night 2020 (Yukio Andoh)

  1. 1. UX UX MILK All Night 2020 2020.9.13 @yukio_andoh 1
  2. 2. QR YouTube 2
  3. 3. 3 @yukio_andoh
  4. 4. 210 1.0 60pixel /
  5. 5. 11
  6. 6. 12
  7. 7. Retina Display
  8. 8. 320x480
  9. 9. 1242 x 2688 1125 x 2436
  10. 10. Via. Wikimedia
  11. 11. Dear Mark You have to try this Spritz app on your new smart watch. It helps you read entire emails more quickly than on your phone or the computer. The best part is the more you read the faster you get. This is going to be a real time.
  12. 12. 1 Via. Spritz
  13. 13. 2 Via. Spritz
  14. 14. via. Rafa Sánchez
  15. 15.   25       
  16. 16. optical adjustment
  17. 17. Via. dropbox.com
  18. 18. Evernote
  19. 19. 45 ( )
  20. 20. ( )
  21. 21. via. www.amazon.co.jp/dp/B07JW8F82G
  22. 22. 35,000 /1
  23. 23. 2 1
  24. 24. 56
  25. 25. 57
  26. 26. 58
  27. 27. 59
  28. 28. 60 x 2 3
  29. 29. 2 1
  30. 30. 62 SNS
  31. 31. 63
  32. 32. via. Netflix
  33. 33. 66
  34. 34. UI 67 " " " " "
  35. 35. Dynamic Stimulation of Visual Cortex Produces Form Vision in Sighted and Blind Humans
  36. 36. 瞬間 履歴 同時性 速度 ⼀時的 69 持続遷移 変化 繰返し 軌跡 転換 リズム 蓄積 密度 予測
  37. 37. 70 実際のUIアニメーションは 300ms〜400ms(最少で150ms) 触ってから動くのが素早すぎると、 ⾃分が操作して動かした実感がしない 触った直後は指で隠れているかもしれない ⽌まったと認識するには、 時間がかかる。0秒では無い 50ms 100ms
  38. 38. 71 実際のUIアニメーションは 300ms〜400ms(最少で150ms) 触ってから動くのが素早すぎると、 ⾃分が操作して動かした実感がしない 触った直後は指で隠れているかもしれない ⽌まったと認識するには、 時間がかかる。0秒では無い 50ms 100ms
  39. 39. 72 実際のUIアニメーションは 300ms〜400ms(最少で150ms) 触ってから動くのが素早すぎると、 ⾃分が操作して動かした実感がしない 触った直後は指で隠れているかもしれない ⽌まったと認識するには、 時間がかかる。0秒では無い 50ms 100ms
  40. 40. 73 実際のUIアニメーションは 300ms〜400ms(最少で150ms) 触ってから動くのが素早すぎると、 ⾃分が操作して動かした実感がしない 触った直後は指で隠れているかもしれない ⽌まったと認識するには、 時間がかかる。0秒では無い 50ms 100ms
  41. 41. 75
  42. 42. 76
  43. 43. =
  44. 44. via. The Slow Mo Guys
  45. 45. 79
  46. 46. 85
  47. 47. 86
  48. 48. 87 ディレクター: そこもっとス〜っといって スカっと動かないかな〜 いい具合にやってよ〜 「拡⼤する」「展開する」みたいな ⼀般的すぎ、解釈があいまいな⾔葉 は使わない。必ず数値的な補⾜を加える。
  49. 49. ■すいすい 滞ることなく移動したり、物事が進⾏する様⼦。 タッチパネルなど、操作に体する反応が素早く、遅延なく画⾯が変化する様。 ■すかっ じゃまになるものがなく、壮快な様⼦ 指やマウスで操作し始めてからの動き始め、⽴ち上がりが素早く、引っかかりが無い様。 ■すこん 軽めのもの同⼠が、勢い良く当たったり、はまったりする様⼦ [類語] すぽん 移動後の⾏き先があらかじめ予想でき、その予想先にぴったりと、素早くはまる様。 ■すっ ⾳もなく物が移動する様⼦。 反応や抵抗が少ない状態で、移動させることが可能なこと、また移動距離は短め。 88
  50. 50. ■ずっしり ⾮常に重たいものの、重さが伝わる様⼦。 ⼤きめの部品や、素材を動かす際の反応のし始めや移動などが遅く重たさを感じる様。 ■すっぱり 鋭い刃物で、直線的にものを切断する様⼦。転じて、潔く未練無く物事を処理する様⼦。 今まで表⽰されていたものが必要なくなった場合、奇麗に画⾯から消えてなくなったりする 様⼦。 ■すっぽり ものが完全にはまりこむ様⼦。またそれによって完全に覆われる様⼦。 ⼤きめの部品に⼩さめの部品がはまり込み、⼤きめの部品で覆われる様⼦。 ■すとん ものが急に落ちる様⼦。 画⾯の上⽅から、下⽅に向かって、勢いづいて部品が移動する様。 89
  51. 51. 90 ※ツールによって、easing の名前が異なる場合あり
  52. 52. ディズニーのアニメーションの法則 92 ■ スクオッシュ(潰し)とストレッチ(伸ばし) ■ アンチシペーション(予備動作) ■ ステージング(舞台演出) ■ ストレート・アヘッド・アクション(逐次描き)と  ポーズ・トゥ・ポーズ(原画による設計) ■ フォロースルーとオーバーラッピングアクション   (あと追いの⼯夫) ■ スロー・インとスロー・アウト(両端づめ) ■ アーク(運動曲線) ■ 副次アクション ■ タイミング ■ 誇張 ■ 実質感のある絵 ■ アピール(訴える⼒)
  53. 53. 93 ⽐較検討する 単体では判断できないことも⽐べると解る 短い時間で素早く動くもの、ゆったり動くものなど。 作った本⼈は思⼊れが強く⻑くしがち。客観的に!
  54. 54. 94
  55. 55. 95 +動画 実際に作ってみると、 誤差やもたつきは必ず 有る →何度も調整
  56. 56. 96 「動き」の ひらめき ⼈に伝えられるくらい ⼗分に「動き」がこなれている段階 「動き」の批評をするのが適切な段階 (早すぎても、遅すぎても良く無い) その時点の「動き」を提⽰して 実装に進めるくらいの段階 「動き」を実装された プロダクト 「動き」の試作/検討 調整 ディレクション ディレクション ×
  57. 57. 97 「動き」の ひらめき ⼈に伝えられるくらい ⼗分に「動き」がこなれている段階 「動き」の批評をするのが適切な段階 (早すぎても、遅すぎても良く無い) その時点の「動き」を提⽰して 実装に進めるくらいの段階 「動き」を実装された プロダクト 「動き」の試作/検討 調整 ディレクション ディレクション ×
  58. 58. 98 「動き」の ひらめき ⼈に伝えられるくらい ⼗分に「動き」がこなれている段階 「動き」の批評をするのが適切な段階 (早すぎても、遅すぎても良く無い) その時点の「動き」を提⽰して 実装に進めるくらいの段階 「動き」を実装された プロダクト 「動き」の試作/検討 調整 ディレクション ディレクション ×
  59. 59. 99 「動き」の ひらめき ⼈に伝えられるくらい ⼗分に「動き」がこなれている段階 「動き」の批評をするのが適切な段階 (早すぎても、遅すぎても良く無い) その時点の「動き」を提⽰して 実装に進めるくらいの段階 「動き」を実装された プロダクト 「動き」の試作/検討 調整 ディレクション ディレクション ×
  60. 60. 100 「動き」の ひらめき ⼈に伝えられるくらい ⼗分に「動き」がこなれている段階 「動き」の批評をするのが適切な段階 (早すぎても、遅すぎても良く無い) その時点の「動き」を提⽰して 実装に進めるくらいの段階 「動き」を実装された プロダクト 「動き」の試作/検討 調整 ディレクション ディレクション ×
  61. 61. 101 「動き」の ひらめき ⼈に伝えられるくらい ⼗分に「動き」がこなれている段階 「動き」の批評をするのが適切な段階 (早すぎても、遅すぎても良く無い) その時点の「動き」を提⽰して 実装に進めるくらいの段階 「動き」を実装された プロダクト 「動き」の試作/検討 調整 ディレクション ディレクション ×
  62. 62. 102 「動き」の ひらめき ⼈に伝えられるくらい ⼗分に「動き」がこなれている段階 「動き」の批評をするのが適切な段階 (早すぎても、遅すぎても良く無い) その時点の「動き」を提⽰して 実装に進めるくらいの段階 「動き」を実装された プロダクト 「動き」の試作/検討 調整 ディレクション ディレクション ×
  63. 63. 103 「動き」の ひらめき ⼈に伝えられるくらい ⼗分に「動き」がこなれている段階 「動き」の批評をするのが適切な段階 (早すぎても、遅すぎても良く無い) その時点の「動き」を提⽰して 実装に進めるくらいの段階 「動き」を実装された プロダクト 「動き」の試作/検討 調整 ディレクション ディレクション ×
  64. 64. 104 「動き」の ひらめき ⼈に伝えられるくらい ⼗分に「動き」がこなれている段階 「動き」の批評をするのが適切な段階 (早すぎても、遅すぎても良く無い) その時点の「動き」を提⽰して 実装に進めるくらいの段階 「動き」を実装された プロダクト 「動き」の試作/検討 調整 ディレクション ディレクション ×
  65. 65. 105 「動き」の ひらめき ⼈に伝えられるくらい ⼗分に「動き」がこなれている段階 「動き」の批評をするのが適切な段階 (早すぎても、遅すぎても良く無い) その時点の「動き」を提⽰して 実装に進めるくらいの段階 「動き」を実装された プロダクト 「動き」の試作/検討 調整 ディレクション ディレクション ×
  66. 66. 106
  67. 67. Thank You @yukio_andoh 107
  68. 68. Q&A @yukio_andoh 111 https://app.sli.do/event/rwkojp2a
  69. 69. 112 https://vimeo.com/93206523
  70. 70. 113 ディズニーアニメーション ⽣命を吹き込む魔法 ― The Illusion of Life
  71. 71. 114
  72. 72. 115
  73. 73. 116 気に⼊ったアニメーションのサンプルを蓄えておく https://sparanoid.com/lab/path-menu/# https://uimovement.com
  74. 74. 117 複数機種向けに 開発する場合 対応する⼀番古い、 ⼀番遅い機種を最初 に調整し、⾼性能に なるに従いリッチで 滑らかな体験に!
  75. 75. オススメのツール紹介 118 Keynote Kite ComposerProcessing
  76. 76. Thank You @yukio_andoh 119

    Als Erste(r) kommentieren

  • syuichitsuji

    Sep. 14, 2020

The art of increasing the resolution of eyes, hands and movement in UX design.

Aufrufe

Aufrufe insgesamt

582

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

102

Befehle

Downloads

10

Geteilt

0

Kommentare

0

Likes

1

×