Animation - Responsive Interaction
本ドキュメントは学習のため、Material Design Specificationを独自に翻訳したものです。本家ではないことが分かるように白黒反転をしています。

レスポンシブ・インタラクション

レスポンシブ・インタラクションはユーザーに信頼感を与えユーザーを魅了します。 ユーザーがアプリケーションを利用する場合に、美しく完璧にそして論理的に事象が発生すれば、ユーザーは満足感や快適さを感じるでしょう。 そのアニメーションは無作為ではなく理路整然としていて徐々に変化することで、ユーザーを失望させることはありません。 レスポンシブ・インタラクションはユーザーのより深い探索心をくすぐります。あれやこれを触ったらどうなるでしょうか。

マテリアルデザインでは、アプリケーションはレスポンシブであり、ユーザーからの入力に飢えています。
  • タップ、ボイス、マウス、キーボードはどれも重要な入力方法です。
  • UI要素はそれが触れそうでも実際にはガラスの下に存在します(ディスプレイやスクリーンの下にあるという意味です)。 そのギャップを解消するために見た目と動きは大きな役割を果たします。例えば入力に対して即座に反応したり、操作を示唆したりといった具合にです。
レスポンシブ・インタラクションによってアプリケーションを、ユーザーからのリクエストに応じて情報伝達するだけのものから、より分かりやすい方法でユーザーとコミュニケーションが取れるものに昇華させることができます。

サーフェス・リアクション
マテリアル・レスポンス
放射状のアクション

サーフェス・リアクション

入力イベントを受け付けると、アプリケーションはすぐに入力を受けた場所に見た目の変化を提供します。 タップした指の下や、ボイス入力のためのマイク、またキーボードを押したことに対する適切な返答などです。 この確認応答を表現する1つの方法はインクメタファーを参考としていて、要素を覆うように動的な表現を行います。

これらを表現するための主な手法はタップの波紋(Touch Ripple)です。 これを用いてタップの始まりや継続を表現したり、音声の振幅やタップの強弱を表現します。

ベストプラクティス

入力は指の触れた地点や音声入力のマイクアイコンなど、特定の地点で発生します。その地点から放射状に見た目の変化を起こします。
タップの波紋(触れたとき、離れたとき)
タップの波紋(ドラッグイン、ドラッグアウト)

マテリアル・レスポンス

インクのようなサーフェスアクションに加え、要素自身もインタラクションに振る舞うことができます。 タップやクリックされた際にそれがアクティブであることを示すために、要素自身を持ち上げます。 ユーザーはタップやクリックで新しい要素を作ったり既存のものを変形することができ、ドラッグやフリックで要素を直接操作することができます。

ベストプラクティス

起点

ユーザー操作によって新しい要素が生成される場合、動きの起点はその入力のあった場所にすべきです。
Do.
要素はタップされた地点から現れ、要素とタップ地点が見た目上で結びついています。
Don't.
要素は画面中央から現れ、これは入力と要素の出現の関係性を壊しています。

持ち上げ

カードや独立した要素がアクティブになる場合、それ自身がアクティブであることを示すために少し持ち上げます。

放射状のアクション

全てのユーザーアクションには発生地点が存在します。 その点を通してユーザーはアプリケーションに意図を伝えます。 そのアクションがタップや音声入力などなんであれ、ユーザーアクションと強く関連していて分かりやすい見た目の変化を与えることで、明確さを与えましょう。 タップ地点から広がるように、入力地点からの距離に合わせて画面上の変化を徐々に行います。

入力にも発生地点が存在します。 タップは指の触れた地点で発生し、音声はマイクアイコンを通し入力され、各キーを通して文字が入力されます。

アクションは見た目上、入力地点と関連づけられるべきです。 その地点に近いアクションは、遠いアクションよりも早く発生し、この発生順序によりアクションの波紋(ripple of actions)を作り出します。