はじめに
普段iPhoneを使っているAndroidエンジニア(1.5年程度)がAndroidらしさを学びたくマテリアルデザインの基礎の基礎を学んだものです
同じようにAndroidらしさの触り部分を学びたい方はご参照ください
モバイル向けのデザインの基礎にあるアクセシビリティ、システムバー、用語集について記載しています
基礎
アクセシビリティ
世界人口の約6人に1人が障害のうちに重度または一時的な障害を経験する中で、使いやすく高品質なアプリであることでユーザーと開発者両方が恩恵を得られる
視覚アクセシビリティのガイドライン
まず、色のコントラストのダメなデザイン例は以下
アプリのコンテンツが可能な限り読みやすく、コンポーネントも視覚的に理解しやすくするための設計として以下のガイドラインに従う必要がある
- 様々なデバイスに対応できるよう、フォントサイズにはスケーラブルピクセル(sp)を使う
- bodyのフォントを12spより小さくしない
- 背景とテキストのコントラスト比は4.5:1になるようにする
-
- 背景とボタンなどの非テキスト要素の間にはコントラスト比3:1を満たすようにする
-
- リンクなどのアクションには複数のビジュアルアフォーダンスを使う
サウンドのガイドライン
TalkBackというGoogleスクリーンリーダーを用いてユーザーが目を使わずにコントロールできる機能がある
アプリがスクリーンリーダーに対応できるとように以下のガイドラインがある
- コード内にUI情報を記述する
- xmlはcontentDescription
- ComposeはSemantics properties
- アイコンと画像の追加のテキスト説明を提供する
- 装飾アイテムの説明には null を設定
- アクションとコンテンツのブロック間をスキップできるようにするには、UI の細分性と UI 要素のグループ化を考慮する
オーディオ向けのデザイン
Androidは、ユーザーの様々な音声コマンドやクエリを通じてデバイスを操作できる
Voice Accessを使うと、音声を使用してハンズフリーでアプリを開いたり、ナビゲートしたり、テキストを編集することができる
運動能力に合わせたデザイン
スイッチアクセスを使用すると、ユーザーは別のデバイスを使用してAndroid端末を操作することができる
(操作用のデバイスのイメージ)
タッチスクリーンを操作するのが難しい、手先の器用さが制限されているユーザに対して役に立つ機能
以下のガイドラインがある
- 全てのアクションを完了するために、ジェスチャ(スワイプなど)に依存しない形にする
- (例：ゴミ箱アイコンで削除可能)
- (例：ゴミ箱アイコンで削除可能)
- UI要素のビジュアルを超えている場合でも、タッチターゲットが少なくとも48dpある
- 触覚フィードバックの利用を検討する
Androidシステムバー
ステータスバーとナビゲーションバーを合わせてシステムバーと呼ぶ
UI設計にかかわらずシステムバーが目立ってしまうことを考慮するのが重要
システムバーが確実に考慮されるよう、ほとんどのレイヤーの最上部に配置する
システムバーにおける重要な点
- UIセーフゾーン、システムインタラクション、入力方法、...などを考慮してデザインにシステムバーを含める
- 推奨事項：システムバーを透明にしてアプリを全画面でレイアウトし、バーの下にUIを継続してedge-to-edgeを提供する
- 両方のバーを透明に設定できない場合は、バーの色をアプリ本体の色と一致させる
-
- edge-to-edgeやジェスチャーナビゲーションと競合する場所にタップジェスチャを追加しない
-
システムバーの背後にコンテンツを描画するようにする
ユーザに没入型のエクスペリエンスを提供するため、ナビゲーションバーを透明にするなどedge-to-edgeを推奨している
edge-to-edgeの設計の際に次のインセット(画面のどの部分がシステムUIと交差するか)に注意する
- システムバーインセットは、タップ可能であり、システムバーによって視覚的に隠れてはいけないUIに適用される
- システムジェスチャインセットは、アプリよりも優先され、システムによって使用されるジェスチャナビゲーション領域に適用される
ステータスバー
Androidではステータスバーに通知アイコンとシステムアイコンがある
ユーザーはステータスバーを引き下げることで通知シェードにアクセスする
- ステータスバー領域
-
ステータスバーは、時刻やユーザーが設定したパラメータやテーマによって表示が変わる
そして、スタイルを設定することもできる
- ライトテーマとダークテーマ
-
- デフォルト(黒)
-
- スタイル付きバー
-
- edge-to-edgeを使用した透明バー
-
システムバーをデフォルトの属性に設定したままにせず、コンテンツを強化したりアプリのブランドに合わせることが必要
以下のようにステータスバーのスタイルを設定できる
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
ディスプレイのカットアウトは、前面にあるセンサー用の領域でステータスバーの外観に影響を与える可能性がある
- xml上で設定することができる
-
ナビゲーションバー
Androidではユーザーが「戻る」、「ホーム」、「Overview」をコントロールして制御できる
- 「戻る」は前のビューに直接戻る
- 「ホーム」はアプリからデバイスのホーム画面に遷移する
- 「Overview」は最近開いたアプリが表示される
ユーザーはジェスチャーナビゲーション(推奨)や3ボタンナビゲーションなど様々な構成を選択できる
ジェスチャーナビゲーション
ジェスチャーナビゲーションでは、「戻る」、「ホーム」、「Overview」のボタンを使用する代わりにスワイプでの操作になる
良いUXを実現するためにジェスチャーナビゲーションでは以下のことを考慮する
- edge-to-edgeをサポートする
- ジェスチャーナビゲーションの下に押下可能なものを追加しない
イマーシブモード
イマーシブモード：全画面表示が必要な場合にシステムバーを非表示にするモード
- ゲームアプリ
-
- ビデオ通話
-
- プレゼンテーション
-
このほかにも非表示にする際の振る舞いなどを指定できる
用語集
AndroidとUI関連の用語
| 用語 | 説明 |
|---|---|
| CTA(Call To Action) | ユーザーに実施してもらいたい行動の喚起 例：資料請求が目的のアプリで、「今すぐ資料請求をする」ボタンを画面上部に設置して資料請求を促す |
| Canonical layout | 一般的なユースケースや画面サイズに適応させるために用いられるデザイン構成 例：MateriaDesignのCanonical layout |
| Chroma(彩度) | グレー 〜 鮮やかな色のカラフルさの度合い |
| Containment | 視覚的なグループ化の概念 例：ダイアログ、カード、リスト |
| Density-independent pixels (dp) | どの画面でも均一な寸法になるように拡大縮小できる柔軟な単位 160dpi画面を基準にしていて1dpは1ピクセルとほぼ等しい |
| Display cutout | 一部のデバイス上で、前面センサー用のスペースを提供するためにディスプレイ表面に広がる領域 わかりやすい：https://qiita.com/YusukeIwaki/items/c9ce1ecc9b6518112241 |
| Hue(色相) | 色の説明方法 |
| Navigation bar | 画面の下部に表示される Android システム バー |
| Scalable pixels (sp) | dpと同じ機能を果たすが、フォントに対してのみ機能する |
| Status bar | 画面上部に表示される Android システム バー |
| Tasks | ユーザーが目標を達成するために従う一連のアクティビティ |
| Tone | 色の輝度、または明るさ |
おわりに
マテリアルデザインを学ぶための基礎を学びました
個人的には何も考えなければ突拍子もないデザインになりかねないと思うので、(トレードオフはありますが)ガイドラインに則っていくことで自分なりのこだわりを見つけていきたいです