albatrosary's blog

Azure と Angular と Wercker CI とか

Material Design Advent Calendar 6日目:Animation - Responsive interaction

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

Material response

Radial reaction

Surface reaction

入力イベント(音声用のマイク、タッチ用の指のパッド、または適切なフィールドにキーボードをおした時)を受信すると、システムは接触点における瞬間的/視覚的な確認を提供します。この応答を表現する1つの方法は、インクメタファを介し被覆紙のすべてのシートで動的な表示を行います。

この接触を表現するコアな視覚メカニズムがTouch Rippleです。これは始まりおよび継続的なタッチイベント、音声の振幅、またはタッチの解釈圧力などの動的な側面を表現します。

Customize Touch Feedback

Customize Touch Feedback

Best Practices

入力は特定のポイント(指の接触点または音声用のマイクのアイコン)で発生します。この時点から、視覚的な放射状に変化を作ります。

Touch ripple: press and release

Touch ripple: drag in and out

Material response

インクのような表面上の作用に加え Material 自体にも反応することができます。触れたときMaterialは活性状態を示し持ち上げることができます。ユーザーは新しく Material を生成またはtouch上で既存のMaterial を変換するか、直接ドラッグか、それらをスワイプすることにより Material を操作することができます。

Point of origin

新しい Material はユーザ操作の結果として生成された場合入力の点から発信すべきです。

タッチポイントから表示されることにより、Material は視覚的にタッチポイントと要素を結びつけます。

良い例

画面の中心から表示されると Material と入力との関係は壊します。

悪い例

Lift on touch

カードまたは分離可能な要素が活性化されると、カードがアクティブ状態を示すために持ち上がる必要があります。

Assign Elevation to Your Views

Lift on touch

Radial action

すべてのユーザーが開始したアクションは起点を持っています。システムに入り込む場合、場所に対する意図を伝えます。タッチスクリーンや音声や指でユーザー入力からの強い視覚的な接続を作成することによって、ユーザーが開始したイベントへの明瞭さを与えます。画面上の状態変化は、アクションのリップルを作成、接触は増加の点までの距離としてトリガになります。

  • 入力は起点を持っています。タッチした接触点やマイクアイコンの音声、個々のキーを通してキーボードなどで発生し入力します。
  • アクションは、視覚的に、それぞれの入力に接続する必要があります。近いアクションがアクションのリップル(動きが触ったところから発生する)を作成し遠くに伸びていきます。

Use the Reveal Effect