予測型「戻る」は、ジェスチャー ナビゲーション操作の結果です。ユーザーが「戻る」ジェスチャーを完全に完了する前に、スワイプして「戻る」ジェスチャーの先をプレビューします。これにより、ユーザーは続行するか、つまり「戻る」ジェスチャーを「コミット」するか、現在のビューに留まるかを決定できます。
予測型「戻る」は、ジェスチャー ナビゲーションを使用しながら、よりスムーズで直感的なナビゲーション エクスペリエンスを提供します。組み込みのアニメーションを活用して、アクションの移動先をユーザーに通知し、予期しない結果を削減します。
アプリの設計で、カスタム遷移用の「戻る」ナビゲーションと主な出来事のアニメーションが必要な場合は、このページの設計ガイダンスを使用してください。
予測型「戻る」のサポート
予測型「戻る」は、デフォルトまたはカスタムの「戻る」ナビゲーションを使用できます。デフォルトの「戻る」ナビゲーションを使用している場合は、簡単にこの機能を有効にできます。詳しくは、予測型「戻る」のサポートの説明をご覧ください。
オプトインすると、ホームに戻る、アクティビティ間、タスク間などのアニメーションがアプリに組み込まれます。
また、マテリアル コンポーネントの依存関係を MDC Android の 1.10.0-alpha02 以降にアップグレードして、次のマテリアル コンポーネント アニメーションを受け取ることもできます。
アプリがエッジ ツー エッジに対応していることを確認する
ユーザーをサポートするために、予測型「戻る」ナビゲーションでは、エッジ ツー エッジ機能で定義されたジェスチャー インセットが考慮されます。こうした操作領域にタップ操作を追加したり、ターゲットをドラッグしたりしないでください。
全画面サーフェス
アプリで全画面サーフェス用のカスタムのアプリ内遷移を作成する場合は、この設計ガイダンスに従ってください。
背面プレビュー
ユーザーが全画面表示のサーフェスで「戻る」ジェスチャーを行うと、ジェスチャーの進行に伴って内側の領域が縮小されます。ユーザーがコミットのしきい値を超えるとすぐに、フェードスルーを使用してコンテンツを次の状態に切り替え、アクションの実行先をユーザーに知らせる必要があります。
内挿
interpolator を使用すると、画面がすばやく終了します。パラメータは（.1、.1、0、1）で、SystemUI アニメーションに使用される interpolator と一致します。
アクションをキャンセル
非コミット状態でユーザーが操作を離すと、コンテンツはすぐに戻り、操作が開始される前に元の状態とサイズに縮小され、状態の変更がすべて元に戻されます。
モーションの仕様
パラメータ |
初期値 |
目標値 |
背景情報 |
|---|---|---|---|
スケールを終了 |
100% |
90% |
|
スケールを入力 |
110% |
100% |
|
フェードを終了 |
100% |
0% |
進行状況のしきい値 35% で目標値までフェードします |
フェードを入力 |
0% |
100% |
進行状況の 35% のしきい値でフェードを開始 |
共有要素遷移
アプリで共有要素遷移用のカスタムのアプリ内遷移を作成する場合は、次の設計ガイダンスに従ってください。
ユーザーが共有要素の遷移で「戻る」ジェスチャーを行うと、「戻る」プレビュー中にサーフェスが画面の端から完全に外れ、ユーザーは直接操作できるようになります。ただし、「戻る」ジェスチャーを行うと「戻る」ジェスチャーの方向でアイテムが閉じられることを、ユーザーに視覚的に示唆してはなりません。
たとえば、詳細画面を閉じて縦方向のリストに戻るときに、共有要素遷移を使用して、ユーザーが前の操作を元に戻すことを視覚的に示唆できます。動画 3 では、カレンダーの予定が閉じられ、日ビューに戻ります。操作性を向上させるため、ジェスチャー中に発生するばねの張力の一部を吸収するために、わずかにオーバーシュートを加えています。
背面プレビュー
予測型アニメーションをユーザーに提示する際、アプリが保持する pre-commit 状態は、ユーザーがエッジ ツー エッジの戻るジェスチャーを行ったが、手を離すことでコミットしていない状態を測定します。この事前コミット状態に適用されるパラメータを指定する必要があります。
表示される動きの量は、操作を開始した位置からユーザーが移動できる距離に基づきます。
モーションの仕様
共有要素の遷移は、操作の開始からの x と y のシフトの影響を直接受けます。このセクションでは、画面上のフィードバックに使用されるメカニズムを規定する仕様と値について説明します。
次の図は、サーフェス アニメーションの推奨モーション仕様を示しています。
1 マージン: 両側の幅の 5%（3 に記載されている表面積に関連）
2 ウィンドウを中央にスケーリングする場合に計算されるシフト。 必要な 8 dp マージンに対して計算する: (((screen width / 20) - 8) dp
3 サーフェスは 90% のサイズにスケーリングされ、残りの 10% をマージンとして利用できます（1 を参照）。
4 画面の端から 8 dp のギャップを設ける
動作の一貫性を保つため、上記のパラメータをそのまま使用することをおすすめしますが、仕様を変更してカスタム アニメーションを作成することもできます。
上の図では、画面の幅は 1,280 であるため、x シフトは 56 dp です。計算式は次のとおりです。
((1280/20)-8)= 56 dp x-shift
1 y シフトに利用できるエッジとデバイス マージンの間のスペース
2 サーフェスが画面外にシフトした場合は、サーフェスを 50% 以内に縮小します。
2 サーフェスは垂直方向の中央から開始します。y シフトは次のように定義されます。
- サーフェスが 8 dp の画面マージンを通過しないように y シフトを制限する
- サーフェスが突然停止するのを防ぐには、減速インターポレータを使用して y シフトの制限にマッピングします。
3 サーフェスが十分に短くなったら 8 dp のマージンを維持する
カスタム アニメーションでは、次のパラメータをすべて定義する必要があります。
パラメータ |
値 |
背景情報 |
|---|---|---|
X シフト |
（（画面幅 / 20）- 8）dp |
最大シフト量（余白は 8 dp） |
Y シフト |
（（使用可能な画面の高さ / 20）-8）dp |
最大シフト量（余白は 8 dp） |
規模 |
90% |
ウィンドウ サイズの最小スケール |
Predictive Back Progress API を使用してカスタム アニメーションを実装するデベロッパーは、これらのパラメータを使用します。
ジェスチャーの進行状況を補間する
リニア進行状況の値はユーザーの操作から取得できますが、プレビュー アニメーションに直接使用しないでください。フィードバックは、戻る操作中にユーザーに役立つ内容に調整する必要があります。進行状況の値を STANDARD_DECELERATE トークンまたは PathInterpolator(0f, 0f, 0f, 1f) でフィードし、最初からジェスチャーが明確になるようにします。このフィードバックにより、操作開始時の動きの検出が強化されます。また、減速によってフィードバックが視覚的に快適かつ明確に制御されます。
実践
ユーザーがコミット ポイントを超えてジェスチャーを離すと、アクションの完了を確認するアニメーションが表示されます。
ユーザーがすばやくジェスチャーを行うと、通常はフリングと解釈されます。この種の操作は画面上の要素に高速に適用されるため、戻るプレビューのコンテキストでは、コミット アニメーションを実行する前に、サーフェスを最大プレビュー状態に向けて一時的にアニメーション化することで、その速度を吸収します。
フリングの強さによって、commit アニメーションを実行する前にプレビュー アニメーションをどの程度表示するかが決まります。動画 2 に示すように、表示されるアニメーションの種類は、閉じるコンテンツによって異なります。
アクションをキャンセル
動画 6 は、しきい値よりも前にユーザーがボタンを離すとどうなるかの例を示しており、アクションがキャンセルされたことを確認するアニメーションが表示されています。共有要素遷移の場合、ウィンドウは迅速に移動し、操作が開始される前の元のエッジ ツー エッジの状態に縮小します。