モーション

モーションは強力なツールですが、運転中は控えめに使用すべきです。ドライバーの注意を道路から逸らすことなく情報を提供できる場合にのみ、モーションは適切です。

ガイダンスの概要(TL;DR):

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

運動原理

Android for Cars インターフェースのモーションを設計するときは、安全性、情報提供、柔軟性という 3 つの基本原則を念頭に置いてください。

安全

運転はユーザーにとって最も重要なタスクであり、他のすべては二次的なものです。ユーザーの注意力を限られたリソースとして扱い、不要な注意散漫を引き起こすような動きは避けてください。

目のGIF

有益な

ユーザーに役立つ情報を伝えるには、モーションを活用しましょう。例えば、モーションは要素間の階層的・空間的な関係性を示すことで、ユーザーの製品理解を深めることができます。また、利用可能なインタラクションを示すことで、ユーザーのインターフェースへの習熟度向上にも役立ちます。

情報提供GIF

フレキシブル

あらゆるサイズや形状の画面、およびあらゆる種類のユーザー入力に適応できるほどスケーラブルで柔軟なモーション言語を定義します。

フレックススクリーンGIF

動きのパターン

すべてのアプリで一貫したユーザー エクスペリエンスをサポートするために、Android Automotive では、次の状況で使用する特定のモーション パターンに関する推奨事項が提供されます。

  • 同じレベルのビュー間の切り替え
  • 詳細ビューに移動する
  • 既存のアクションの拡張
  • アクションの最小化と拡張
  • 行動を妨害する

このセクションのすべてのモーションパターンは、マテリアルデザインのイージングガイドラインで説明されている標準的なイージングに基づいています。つまり、モーションは急速に加速し、徐々に減速することで、トランジションの最後まで注目を集めます。


同じレベルのビュー間の切り替え

アプリバーのタブやプレイリストの曲など、アプリ内の同じ階層レベルのビューを切り替える場合は、左右に動かす動作を使います。水平方向の動きは、アプリ内で同じ階層に留まっているという感覚を強調します。

ピア移行の例
Android Automotiveでは、素早いクロスフェードにより、ユーザーはナビゲーションアプリからメディアアプリへ、そしてまたナビゲーションアプリに戻ることができます。

例

Android Automotive OSでは、メディアアプリでホームタブからプレイリストタブに切り替えるときに左右に動くことで、両方のタブがコンテンツのトップレベルのビューであることを強調しています。

詳細ビューに移動する

コンテンツの上位ビューから詳細ビューに移動する際には、下位レイヤーを拡大し、上位レイヤーがフェードアウトするのに合わせてフェードインするZ深度モーションを使用します。このモーションは、上位ビューと詳細ビューの親子関係を強調し、後者に焦点を合わせます。

親から子への移行
親画面から子要素が持ち上がり、その場で拡大します

例

詳細ビューに切り替える
Android Automotive OSのメディアテンプレートでは、ユーザーがアルバムのグリッド内の特定のアルバムをクリックすると、そのアルバムの曲リストが拡大表示され、詳細が強調されます。

既存のアクションの拡張

ユーザーが何らかのアクションを実行中に、関連するアクションを実行する際は、垂直方向(上下方向)の動きを使って、メインアクションの上にスクリムを背景にしたフルスクリーンオーバーレイで、サブアクションを促します。スクリムを通してメインアクションが見えることで、ユーザーがまだそのアクションを実行中であることを印象付けます。

セカンダリアクションを閉じる際は、この動作の逆の動作を使用します。ユーザーはセカンダリアクションを終えて終了する準備ができているため、逆の動作は元の動作よりも短時間で完了します。

吹き出しアイコン
間隔
トランジションにかかる時間に関するマテリアルデザインガイドライン
セカンダリアクションオーバーレイ
ここでは、セカンダリアクションがオーバーレイ上のプライマリアクションから立ち上がっており、プライマリアクションはスクリムの後ろに部分的に見えたままになっている。

例

Android Auto OS アクションオーバーレイの例
Android Automotive OSのメディアテンプレートでは、ユーザーがオーバーフローボタンをタップしてコントロールバーを展開すると、追加のコントロールが浮かび上がり、オーバーレイ上に表示されます。

アクションの最小化と拡張

マルチタスクを可能にするために、画面上で小さい形式に最小化された進行中のアクションを拡大する場合は、全画面フェードイン付きの拡大ウィンドウ マスクを使用します。

進行中のアクションを最小化する場合は、この動作の逆を行います。ユーザーは基本的にこのアクションを終了し、邪魔にならないようにする準備ができているため、最小化の動作は拡大動作よりも短時間で完了します。

吹き出しアイコン
間隔
トランジションにかかる時間に関するマテリアルデザインガイドライン
最小化された画面を拡大する
最小化されたアクションは、現在のアクションの上にフェードインしながら全画面に拡大されます。

例

Android Automotive OS コントロールバーの例
Android Automotive OSのメディアテンプレートでは、最小化されたコントロールバーがフル再生ビューに展開され、ユーザーが下矢印をタップすると最小化された形式に戻ります。

行動を妨害する

進行中のアクションの上に、短くてブロックしないアクションを突然表示する必要がある場合は、画面の端から下または上にスライドさせる(部分的なスクリムの場合)、または中央にフェードインさせる(完全なスクリムの場合)という方法があります。新しいアクションを表示させたい場所に最も近い位置からモーションを開始してください。

短いアクションの例
妨害アクションが画面上部付近に表示される場合は、部分的なスクリムを使用して上部からスライドさせます。

例

ダイアログの例
Android Automotive OSのメディアテンプレートの中央に邪魔なアクションが現れると、スクリーンいっぱいにフェードインして、一時的にユーザーの注意を新しいアクション(この場合は、位置情報データの使用許可の要求)に集中させます。