Design JP vol2 (Motion Design & Animation)
65
インタラクションデザインの 調整のコツと、 それにまつわる コミュニケーションの仕⽅ Design-JP #2 2017.5.10 @yukio_andoh 1
-
Upload
yukio-andoh -
Category
Technology
-
view
4.828 -
download
0
Transcript of Design JP vol2 (Motion Design & Animation)
インタラクションデザインの 調整のコツと、 それにまつわる コミュニケーションの仕⽅
Design-JP #2
2017.5.10 @yukio_andoh
1
2安藤幸央（あんどうゆきお）@yukio_andoh
本⽇のインタラクションデザイン3
＋≒モーション、アニメーション
≠ 相互作用 (Inter + Action)
本⽇のインタラクションデザイン4
＋Motionディレクション／テスト／コツ
Communicationと対話／⾔葉／コツ
Motion & Animation
5
アニメーションとは？7
Norman McLaren
アニメーションは動くものを 描くのではなく 描かれたものを動かす芸術です
アニメーションは装飾ではなく機能である
Pasquale DʼSilva（アニメーター）
“
8
なぜアニメーションさせるのか？9
●画⾯や要素が切り替わったことを知らせる ●変化をより把握しやすいものにする ●⼩さなものにも注意を促す注⽬してもらう ●動きによって楽しみを感じてもらう ●正しい情報構造の理解を⼿助けする
フリクション = 意図的違和感10
Bad Friction / フローがスタックしてしまうこと Unseen Friction / フローをジャンプすること Boundary Friction / タッチポイント間を継ぐこと Intentional Friction / あらかじめ事前に防ぐこと Learning Friction / 学んでわかりやすくなること External Friction / 条件や規制をふまえること
なぜアニメーションさせるのか？11
アニメーションとは？12
＋ 時間 と 位置や形の変化時間 と ⾊や透明度の変化
※透明処理は、処理負荷が⾼く、不⾃然に遅くなりがち
瞬間
履歴 同時性
速度
⼀時的
13
持続遷移 変化
繰返し
軌跡 転換 リズム
蓄積
密度
予測
14
15
16
実際のUIアニメーションは 300ms〜400ms（最少で150ms）
触ってから動くのが素早すぎると、 ⾃分が操作して動かした実感がしない 触った直後は指で隠れているかもしれない
⽌まったと認識するには、 時間がかかる。0秒では無い
実際のアニメーションの前後も重要
17
次に起こることが予想 できるのが良い。反応が速すぎるのも 良くない。不安になる
18240fps ハイスピードカメラでの分解して確認！
19
RemoteTestKit がオススメ 15fps
ディズニーのアニメーションの法則20
■ スクオッシュ(潰し)とストレッチ(伸ばし) ■ アンチシペーション(予備動作) ■ ステージング(舞台演出) ■ ストレート・アヘッド・アクション(逐次描き)と ポーズ・トゥ・ポーズ(原画による設計) ■ フォロースルーとオーバーラッピングアクション (あと追いの⼯夫) ■ スロー・インとスロー・アウト(両端づめ) ■ アーク(運動曲線) ■ 副次アクション ■ タイミング ■ 誇張 ■ 実質感のある絵 ■ アピール（訴える⼒）
21
ディズニーアニメーション ⽣命を吹き込む魔法 ― The Illusion of Life
23
24
25
気に⼊ったアニメーションのサンプルを蓄えておく
https://sparanoid.com/lab/path-menu/# https://uimovement.com
26
実際のUIアニメーションは 300ms〜400ms（最少で150ms）
触ってから動くのが素早すぎると、 ⾃分が操作して動かした実感がしない 触った直後は指で隠れているかもしれない
⽌まったと認識するには、 時間がかかる。0秒では無い
実際のアニメーションの前後も重要
27
動き過ぎ、酔ってしまうような UI Motion ?!
VS.
28
29
30
Communication
Design x Tech.
31
×32
×var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();33
×34
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
○35
○36
○37
○38
×○39
×40
○41
○Futura42
○Futura43
44
コミュニケーションとは、お互いの別々の体験がひとつの共有財産となるまで、その体験を貸し借りするプロセスのことを⾔う。
ジョン・デューイ（哲学者）
“
45
46
47
48
ディレクター： そこもっとス〜っといって スカっと動かないかな〜 いい具合にやってよ〜
※フィクションです
「拡⼤する」「展開する」みたいな ⼀般的すぎ、解釈があいまいな⾔葉 は使わない。必ず補⾜を加える。
■すいすい 滞ることなく移動したり、物事が進⾏する様⼦。 タッチパネルなど、操作に体する反応が素早く、遅延なく画⾯が変化する様。
■すかっ じゃまになるものがなく、壮快な様⼦ 指やマウスで操作し始めてからの動き始め、⽴ち上がりが素早く、引っかかりが無い様。
■すこん 軽めのもの同⼠が、勢い良く当たったり、はまったりする様⼦ [類語] すぽん 移動後の⾏き先があらかじめ予想でき、その予想先にぴったりと、素早くはまる様。
■すっ ⾳もなく物が移動する様⼦。 反応や抵抗が少ない状態で、移動させることが可能なこと、また移動距離は短め。 49
■ずっしり ⾮常に重たいものの、重さが伝わる様⼦。 ⼤きめの部品や、素材を動かす際の反応のし始めや移動などが遅く重たさを感じる様。
■すっぱり 鋭い刃物で、直線的にものを切断する様⼦。転じて、潔く未練無く物事を処理する様⼦。 今まで表⽰されていたものが必要なくなった場合、奇麗に画⾯から消えてなくなったりする様⼦。
■すっぽり ものが完全にはまりこむ様⼦。またそれによって完全に覆われる様⼦。 ⼤きめの部品に⼩さめの部品がはまり込み、⼤きめの部品で覆われる様⼦。
■すとん ものが急に落ちる様⼦。 画⾯の上⽅から、下⽅に向かって、勢いづいて部品が移動する様。 50
51※ツールによって、easing の名前が異なる場合あり
52
「動き」の ひらめき
⼈に伝えられるくらい ⼗分に「動き」がこなれている段階
「動き」の批評をするのが適切な段階 （早すぎても、遅すぎても良く無い）
その時点の「動き」を提⽰して 実装に進めるくらいの段階
「動き」を実装された プロダクト
「動き」の試作／検討
調整
ディレクション ディレクション×○
53
⽐較検討する 単体では判断できないことも⽐べると解る
短い時間で素早く動くもの、ゆったり動くものなど。 作った本⼈は思⼊れが強く⻑くしがち。客観的に！
54
55
+動画実際に作ってみると、 誤差やもたつきは必ず有る →何度も調整
56
複数機種向けに開発する場合
対応する⼀番古い、⼀番遅い機種を最初に調整し、⾼性能になるに従いリッチで滑らかな体験に！
アニメーションとは？57
John Lasseter (Pixar)
アートは技術に挑戦し 技術はアートに インスピレーション与える
オススメのツール紹介58
Keynote Kite ComposerProcessing
ツールの将来？59
React+Sketch.app via. AirBnB
60
61
62
Google I/O 2017
63May
17May
18May
19
Thank You
@yukio_andoh
64
Break Time0 Minutes
65
