【20日目】Material Designのガイドライン備忘録 8
本日もアツシさんという方のUIデザインガイドラインに沿ってMaterial Designのガイドラインを読ませて頂きます。（いつもありがとうございます）
※※※ページ内の画像はアツシさんのブログ同様、全てMaterial Design のものを引用しています。※※※
・コンポーネントとは？
UIデザインにおいてコンポーネントとは「画面上に表示するUIパーツの総称」のこと。
具体的には、ボタン、チェックボックス、ダイアログ（ポップアップ）、テキストフィールド（文字入力欄）などがあり、共通パーツとして使用される。
共通パーツとして使用することでアプリに統一感が生まれユーザーが少ないヒントで使いこなすことができる。
8.Applying density(高密度の適用)
Applying density（高密度の適用）とは、画面内に多くのコンテンツを表示することによってユーザーの利便性を向上させる方法のこと。
ex.ユーザーの利便性
・コンポーネントを探す時間が減る
・画面をスクロールしなくてもその画面内で操作を完結できる
など。
・具体的にApplying densityはどのように適用する？
ex.受信メールの画面一覧。リストの密度を上げることで画面内により多くのリストを表示させることができる
・Applying densityを適用してはいけないケースは？
ex.ドロップダウンメニュー、日付ピッカー、など一点を狙ってタップすることが想定される操作に対しては望ましくない。（タップ領域が狭くなり操作しにくい）
ex.AlertやDialogなども密度を上げると視認性が悪くなるので相応しくない。
・Applying densityにおけるGridとコンポーネントの関係性とは？
見やすいUIにするために、コンポーネントのApplying densityを高めた場合、Gridの密度は下げることによって画面全体のバランスを保つ必要がある。
（密度を高める場合はGridの幅を広めに保つことで視認性を保つ。両方狭くすると視認性が低下する）
・コンポーネントへのApplying density適用ルール
コンポーネントのApply densityを調整するときは、アプリ内の全てのコンポーネントを同じバランスで調整する必要がある。
・コンポーネントへのDensity scaleという考え方
Density scale＝コンポーネントのDensityを変更するルール
0を基準にマイナスに推移し「-1〜-3」まで減少させることができる。
マイナスが大きいほどdensity（密度）が高くなる。
（buttonの縦の余白など。-4にすると成り立たないので禁止されている。）
・コンポーネントへのDensity scaleという考え方
コンポーネントのDensity scaleが変更されるとき、コンポーネントの位置とpaddingを変更することは禁止されており、縦幅のみ変更できる。
（ex.ボタンの文字間は変更できない、縦幅のみ変更できる。
・タッチ領域の確保
タッチのしやすさを確保するためにApplying densityに関係なく48dp×48dp以上を確保し、8dp以上の間隔を空ける必要がある。
（iosの場合は44dp×44dp推奨）
・テキストとApplying densityの関係
UI上テキストのApplying densityはLine height（行の高さ）として管理することができる。
9.Understanding navigation(画面遷移の理解)
※※※この章は情報設計(IA:Information Architecture）の基本的な考え方がまとめられており、UIデザインを理解するのに重要な項目。※※※
マテリアルデザインにおける「Navigation」とは画面間の移動、つまり画面遷移のことを指し、下記3つの種類がある。
1.Lateral navigation → 横方向への画面遷移
2.Forward navigation → 深い方向への画面遷移
3.Reverse navigation → 戻る方向への画面遷移
1.Lateral navigationとは？
Lateral navigationとは「横方向のナビゲーション」。同じ階層の別の画面へ遷移すること。
ピンク色の枠と矢印で示されている遷移がLateral navigation
最上位の階層の画面はLateral navigationによって全ての画面に遷移できるようにする必要がある。
最上位の階層の画面数に応じてLateral navigationをするための適した遷移方法（コンポーネント）が規定されている。
最上位の画面数と、その画面数に適したコンポーネントとは？
・最上位の画面数が5画面以上の場合、Navigation drawer（下の図）と呼ばれるコンポーネントが適している。
（原文にはないが、横スクロールが可能なTabも適していると考えられる）
・最上位の画面数が3〜5画面の場合、Bottom Navigation bar（下の図）と呼ばれるコンポーネントが適している。
・最上位の画面数が2〜3画面の場合、Tab（下の図）と呼ばれるコンポーネントが適している。Tabは画面上部に表示することにより、他の画面への遷移を簡単にする。（インスタの画像・リール・タグ付、がこれ）
下の図のように、TabはNavigation drawerと組み合わせることによって、最上位の画面ではなくても、Lateral navigationを実現させることができる。
2.Forward navigationとは？
Forward bavigationとは「前の方向へのナビゲーション」であり、深い階層の画面へ遷移すること。
（下の図で言うと、Album画面→Song画面、Search画面→Song画面への遷移のこと）
ピンク色の枠と矢印で示されている遷移がForward navigation
Forward navigationには下記3種類の遷移方法がある。
①階層の高い画面から、深い画面への遷移（最も一般的）
→商品画面の「詳細ボタン」を押すと商品の詳細画面に遷移する
②順番通りの決められたステップによる画面遷移
→料理のレシピなど、順番通り遷移することで工程を確認できる
③最上部の階層から、検索機能などを用いて深い階層の画面へ直接的に遷移
→トップページの検索バーからして直接商品詳細に遷移する
3.Reverse navigationとは？
Reverse navigationとは「戻る方向のナビゲーション」であり、以前の画面へ戻る画面遷移のこと。
（下の図で言うと、Song画面→Album画面、Song画面→Search画面への遷移のこと）
ピンク色の枠と矢印で示されている遷移がReverse navigation
Reverse navigationは基本的に「OSの仕組み」として提供される。
Reverse navigationを検討する際の配慮
Reserve navigationで前の画面に戻る時には、ユーザーのUXを向上させるための配慮が必要。
・前の画面に戻った時にスクロール位置を記憶して表示させることが重要（遷移した位置に戻るように）
・前の画面で入力されていた情報が消去されていた場合はメッセージなどでユーザーに通知することが望ましい
・ユーザーが深い階層の画面を表示した際にその上の階層に画面があることを理解できる構成にする実用がある（→パンクズリストなど）
10.Navigation transitions(画面遷移時のアニメーション)
Navigation transitionsとは画面遷移時のアニメーションのことであり、マテリアルデザインではこのアニメーションの違いによって各画面の関係性を表現している。
また、アニメーションによって、ユーザーは今どのような画面を表示しているのか、を認識できる。
Navigation transitiondは大きく分けて下記3つの種類がある。
※元のページでは動画で例が表示されていますが、動画の貼り付けができなかったので、必要な場合はページを確認してください。
1.Hierarchical transitions → 階層が変わる遷移
また、画面遷移する前の画面を「Parent screen：親画面」、画面遷移したあとの画面を「Child screen：子画面」とも呼ぶ。
2.Peer transitions →関連性がある同じ階層への遷移
例）Tabをスライドさせて同じ階層の階層の横の画面へ遷移
（Instagramの投稿・リール・タグ付のスライド遷移）
3.Top-level-transitions →それぞれが独立した同じ階層への遷移
例）Bottom navigationで違う階層の画面へ遷移
（Instagramのホーム・検索・リール・ショッピング・マイページへの遷移）
今日はここまで〜
この記事が気に入ったらサポートをしてみませんか？