Closed18
Designing a high quality app with the latest Android features
rkonnoAndroidの最新機能を搭載した高品質なアプリの設計
rkonno3つのAndroidの最新機能を使って、高品質なアプリを設計する
- ユーザーはアプリがモダンでエレガントで、パーソナルで、アクセスしやすいものであることを望んでいる
- それらを実現する上で助けになるAndroidプラットフォームで提供される3つの最新機能
Androidプラットフォームの3つの最新機能 (0:42)
1. Premium layout with edge to edge
高級感のあるレイアウトと没入感を実現する Edge to Edge
2. Delightful navigation with predictive back gesture
予測可能で、情報量の多い、より快適なバックジェスチャー
3. Accessible color system with dynamic color
アクセシビリティに配慮したモダンなカラーシステムの設計
rkonno1. Premium layout with edge to edge
Android11 以降、ナビゲーションが透明化されることを待ち望む声があった
- ナビゲーションバーを透明にすることが、Androidユーザーからの重要なフィードバックだった
- Android 13だけでなく、11と12でも同じ要望があったため、Android 11以降はステータスバーとナビゲーションバーの背後に描画範囲を広げることを推奨している
透明なナビゲーションバーを望むユーザーの声 (1:28)
rkonnoEdge to Edge に関連する API
- システムUIとの重なりを避けるには、プラットフォームが提供する
WindowInsetsを使用するか、Android XのWindowInsetsCompatを使用する
Edge to edgeでレイアウトを構築する (1:43)
rkonnoGoogle Slides, Gmail での対応例
- Google Slides
- スクロールするとコンテンツはステータスバーとナビゲーションバーの下に描画されている
- FAB（floating action button）はスクロールしても固定されたままになっている
- Gmail
- ボトムナビゲーションバーの下に描画されていない
- ボトムナビゲーションバーの色との調和が取れている
Google スライドとGmailでの対応例 (2:10)
rkonnoEdge to edge の実装方法
1. Theme を編集する
- ステータスバーとナビゲーションバーを透明に設定する(
@android:color/transparent) - この設定は Compose または View ベースに関わらず必要
2. Activity で setDecorFitsSystemWindows を呼び出す
- Activity で
WindowCompat.setDecorFitsSystemWindowsを呼び出し、ウィンドウの互換性をfalseとする-
trueの場合は、システムウィンドウ内に収まるように制御される -
falseの場合は、システムウィンドウの背後にも描画するように制御する
-
edge to edge の実装方法 (2:43)
rkonnoFAB（floating action button）の padding の処理
- Jetpack Compose および Material 3 で更新された scaffold を使用すれば、スクロール中に FAB を固定し続けることができる
- また、inset の padding は自動的に処理されるため Modifer を使ってさらにカスタマイズすることがなければコードの追記は必要ない
- View ベースのコンテンツについては、システムバーとナビゲーションバーに対して
windowinsets.getinsetsを呼び出して、任意の padding を追加する処理が必要になる - これらの変更によって、モバイルだけでなくフォルダブルやタブレットでもその恩恵を受けることができる
Material 3 の scaffold を使えば自動的に処理される (3:33)
モバイルだけでなく、フォルダブルやタブレットにも対応できた(4:05)
rkonno2. Delightful navigation with predictive back gesture
予測可能な「戻る」で楽しいナビゲーションを作る
- ジェスチャーナビゲーションは、高速で、自然で、人間工学に基づいたインタラクションモデル
- 戻るジェスチャーは最もよく使われる方法だが、誤ってアプリを終了してしまうケースも見受けられ、Google では、これを "falsing" と呼んでいる
- ユーザーは、アプリをナビゲートするとき、ジェスチャーの行き先を示す視覚的な手がかりが欲しいと考えている
- 特に行き先がアプリの外であれば、なおさら手がかりが重要になる
- "falsing" が何らかのメトリクスに影響を与えている可能性は十分にある
「ホーム画面の前の最後の画面にいることがわからない」というユーザーの声 (4:20)
rkonnoAhead-of-time モデルによって予測アニメーションをサポートする
- Android 13では、アプリがよりエレガントで有益に感じられるように、また、すべてのアプリに一貫した感じを与えるために予測可能な「戻る」ジェスチャーをリリースした
- ユーザーがスワイプして戻ろうすると、ホーム画面がチラッと見えて、アプリの外に戻ることを知らせる
- この予測アニメーションをサポートするために、System back は Ahead-of-time モデルへ移行した
- Android 13以降では、アプリ内で System back のイベントを処理する場合は事前にシステムに伝える必要がある
- 次の「戻る」ジェスチャがアプリ内バックスタックをポップするのか、ランチャーに戻るのかをシステムが事前に知っているため、アプリを終了してランチャーを表示するヒントをプレビューすることができる
予測可能な「戻る」ジェスチャーの仕組み (4:51)
rkonno予測可能な「戻る」をオプトインする
- Android 13 以降、AndroidManifest で
enableOnBackInvokedCallbackをtrueに設定することで、オプトインすることが可能 - アプリ内で「戻る」処理をカスタムしていない場合、必要な作業はこれだけで良い
- このフラグが設定されると
KEYCODE_BACKとonBackPressed()などが機能しなくなる
オプトイン方法 (6:38)
- 詳しい導入方法については、Android Developer のドキュメントをご参照ください。
rkonnoAndroid 14 では、アプリ内でも同様の体験に
- Android 14では、アプリ内でスワイプしたときにも同様の体験が可能になる
- デフォルトまたはカスタムのアニメーションを活用することで、ユーザーは「戻る」によってどこへ遷移するのかを予測できるようになる（Coming soon）
アプリ内でも同様の体験が可能になる (7:58)
rkonno3. Accessible color system with dynamic color
ダイナミックカラーを使ったアクセシブルなカラーシステムの構築
- 色によって「ブランドを表現したい」「さまざまな照明の下でも見やすく」「ユーザーの好みを反映させたい」
- ユーザーはアプリがアクセシブルで表現豊かであることを望んでいる
- 一方で、開発者はカラーシステムがスケーラブルであることを望んでいる
- 多くのカラーシステムを扱うことで、色の管理が難しくなってきている
アクセシブルなカラーシステムの構築 (8:17)
rkonnoデザイントークンによって柔軟性と一貫性を実現する
- デザイントークンにより、エンジニアがUIにおける要素の色を値で設定するのではなく、役割を割り当てることができるようになり、製品全体の柔軟性と一貫性が生まれる
- 統一されたカラーシステムが生まれ、デザイナーとエンジニアが同じカラートークンで足並みを揃えることで、コラボレーションのしやすさが向上する
スケーラブルなデザイントークン (10:01)
このスクラップは2022/11/22にクローズされました