Material Design ガイドにある「Animation - Responsive interaction」を紹介します。このエントリーは「Material Design Advent Calendar 2014」12月6日の記事です。
Material Design Advent Calendar 2014 - Adventar
Responsive interaction
応答の相互作用はユーザーとの信頼関係を構築します。ユーザーは美しく論理的で動きが予想できるアプリと対話するとき、ユーザーは満足感を生じます。相互作用は決して思慮深く、ランダム、意図的、優柔、気まぐれであってはなりません。こうしたアプリケーションに触れた場合は、どうなるのか?その後は?と気になります。
User input
Material Designでは、アプリケーションはユーザー入力に対して要望と応答性です:
- タッチ、音声、マウスとキーボードすべて重要な入力方法です
- UI要素がある形で表示されますが、それらは画面(コンピュータまたはデバイスの画面)の中に配置されます。見た目の効果とかクリックしたときの反応で、すぐに確認できるときにはギャップを埋めるのに役立ちます。
応答の相互作用は、明白な方法でユーザーに情報を伝えることでアプリの利便性を高めます。
Surface reaction
入力イベント(音声用のマイク、タッチ用の指のパッド、または適切なフィールドにキーボードをおした時)を受信すると、システムは接触点における瞬間的/視覚的な確認を提供します。この応答を表現する1つの方法は、インクメタファを介し被覆紙のすべてのシートで動的な表示を行います。
この接触を表現するコアな視覚メカニズムがTouch Rippleです。これは始まりおよび継続的なタッチイベント、音声の振幅、またはタッチの解釈圧力などの動的な側面を表現します。
Best Practices
入力は特定のポイント(指の接触点または音声用のマイクのアイコン)で発生します。この時点から、視覚的な放射状に変化を作ります。
Touch ripple: press and release
Material response
インクのような表面上の作用に加え Material 自体にも反応することができます。触れたときMaterialは活性状態を示し持ち上げることができます。ユーザーは新しく Material を生成またはtouch上で既存のMaterial を変換するか、直接ドラッグか、それらをスワイプすることにより Material を操作することができます。
Point of origin
新しい Material はユーザ操作の結果として生成された場合入力の点から発信すべきです。
タッチポイントから表示されることにより、Material は視覚的にタッチポイントと要素を結びつけます。
画面の中心から表示されると Material と入力との関係は壊します。
Lift on touch
カードまたは分離可能な要素が活性化されると、カードがアクティブ状態を示すために持ち上がる必要があります。
Assign Elevation to Your Views
Radial action
すべてのユーザーが開始したアクションは起点を持っています。システムに入り込む場合、場所に対する意図を伝えます。タッチスクリーンや音声や指でユーザー入力からの強い視覚的な接続を作成することによって、ユーザーが開始したイベントへの明瞭さを与えます。画面上の状態変化は、アクションのリップルを作成、接触は増加の点までの距離としてトリガになります。
- 入力は起点を持っています。タッチした接触点やマイクアイコンの音声、個々のキーを通してキーボードなどで発生し入力します。
- アクションは、視覚的に、それぞれの入力に接続する必要があります。近いアクションがアクションのリップル(動きが触ったところから発生する)を作成し遠くに伸びていきます。