モーション

コンセプト、ブランディング、要素間の関係を表現するため、運転のコンテキストではモーションを控えめに表現する必要があります。ドライバーの注意をそらさずに情報を伝えるためにのみ使用してください。

概要:

• 不要な動きでユーザーの注意をそらさない
• モーションを駆使してユーザーの理解を深め、習熟度を高める
• 関連するすべてのハードウェアに対応する柔軟性の高いモーション言語を作成する
• 状況に応じて推奨されるモーション パターンを使用してください

---

動作パターン

すべてのアプリで一貫したユーザー エクスペリエンスを実現するため、以下の操作に特定のモーション パターンが適用されます。

• アプリの切り替え
• 類似アプリのビューの切り替え
• 既存のアクションの拡張
• アクションを最小化、展開する
• アクションの中断

マテリアル デザインで説明されているように、これらのモーション パターンは標準イージングに基づいています。このイージングでは、遷移を速くし、徐々に速度を落とすことで、遷移の終了に重点を置きます。

イージング

アニメーションの変化率の調整に関するマテリアル デザイン ガイドライン

---

アプリの切り替え

アプリを切り替える場合は、クロスフェード遷移を使用します。これは、1 つの要素がビューにフェードアウトし、別の要素がフェードアウトします。この遷移は、現在のアプリから終了して別のアプリにすばやく移行していることを示します。

クロスフェード モーションで、アプリをすばやく切り替えることができます

例

高速クロスフェードにより、ナビゲーション アプリからメディアアプリにユーザーを移動させ、また元に戻す

---

類似アプリのビューの切り替え

アプリバーのタブやプレイリストの曲など、アプリの階層の同じレベルでビューを切り替える場合は（ピアビューとも呼ばれます）共有軸の移行を使用します。この遷移の横方向の左右への動きは、アプリ内で同じレベルにとどまっている状態を反映しています。

高速クロスフェードにより、ナビゲーション アプリからメディアアプリにユーザーを移動させ、また戻ります

例

メディアアプリで曲から曲に切り替えたときに、両方の曲が同じプレイリストにあることが強化される共有軸のモーション パターン

---

既存のアクションの拡張

ユーザーが閲覧や操作の途中で、関連する 2 つ目の操作を行う場合、その操作は垂直（上下）に動かす必要があります。このセカンダリ アクションは、スクリムの背景とともにフルスクリーン オーバーレイでプライマリ アクションの前に表示されます。スクリムでメイン アクションが表示されていることで、ユーザーがまだそのアクションを行っていることを強調できます。

セカンダリ アクションは、開き動作の逆方向に閉じられます。この逆のモーションは、元のモーションよりも短くなります。アクションが完了したためです。

所要時間

遷移の所要時間に関するマテリアル デザイン ガイドライン

ここでは、セカンダリ アクションがオーバーレイ上のプライマリ アクションから上昇していますが、プライマリ アクションはスクリムの背後に部分的に表示されたままになっています。

例

メディア コントロール バーのオーバーフロー ボタンを選択すると、スクリム背景のオーバーレイ上で縦方向に拡張される

---

アクションを最小化、展開する

進行中のアクションを小さいサイズに最小化できます。この小さい画面では、進行中のアクションをバックグラウンドで実行しながらマルチタスクを行えます。

• エキスパンド: 最小化されたアクションをタップすると、フェードイン遷移を使用してサイズが拡大し、全画面に表示されます。

• 最小化: 進行中の操作を最小化する場合は、その逆の動作を使用します。ユーザーがこのアクションをやめるため、最小化動作は拡大動作よりも短くする必要があります。

所要時間

遷移の所要時間に関するマテリアル デザイン ガイドライン

最小化されたアクションが現在のアクションの上にフェードインすると、全画面表示に拡大されます

例

再生 FAB（フローティング アクション ボタン）が再生ビュー全体に表示され、下矢印をクリックして縮小

---

アクションの中断

進行中の操作の前に短いオプションのアクションを突然表示する必要がある場合は、画面の端から一部をスクリムしてスライド（上下）させます。または、画面の中央にフェードアウトしてフルスクリムにします。新しいアクションを表示したい場所に最も近い場所からモーションを開始します。

混乱させるアクションが画面の上部付近に表示されている場合は、部分的なスクリムで画面の上部からスライドさせます

例

この Android Auto の例では、次の曲がり角に関する通知が画面上部から下方向にスライドして一部スクリム表示されるので、進行中のメディア コンテンツが表示されたままになります。