【Material Design】この先も使えそうなポイント"だけ"集めました！
Googleが定めたデザインのガイドライン。これからふとした時に確認したいときが絶対にありそう・・・・頭の整理のためにもTipsをまとめました。
Surface | UIは"surface - 紙"の重なりで構成！
●Scrim(スクリム)
・概要：ダイアログなど一部のSurfaceを強調する時に使う
・利用例：ダイアログ以外の画面を暗くする（もしくは透過ホワイト）
Elevation | 優先度や強調を表現
●Elevationの表現方法3つ
・shadow（影）
・Colors（色）
・Opacity（透明度）
Light and shadows | 影の落とし方
● Shadowの生成方法
○2つの影から成り立つ
・Key light（太陽みたいなイメージ/メインの光源）
・Ambient light（環境光/ブラーの役割）
Responsive layout grid | 各Gridの意味合い
●画面レイアウトにおけるgrid3種
○Columns（1.コンテンツ領域）
・デバイスの画面サイズに合わせて領域が変化
※あえて固定するも可。その場合はMarginが可変。
○Gutters（2.Columns間での溝）
・画面サイズで変化はするが、一定の画面サイズ内では「固定値」
・gutterの幅によって"グループとしての表現"や"独立"の表現が可能
○Margins（3.画面上の両端の余白）
・画面サイズで変化はするが、一定の画面サイズ内では「固定値」
●UI region
○Permanent UI region
・概要：画面サイズに依存せず、固定のサイズで表示される領域
・利用例：常にサイドに表示されているNavigation drawer
○Persistent UI region
・概要：ユーザーの操作によって自由に表示/非表示が切り替えられる
・利用例：アクションボタンをタップした際に、画面上のColumnsが圧縮される形で表示してくるNavigation drawer
○Temporary UI region
・概要：ユーザーの操作によって一時的に表示される「UI region」
Temporaryが表示されてもColumnsには影響を与えない
・利用例：モーダルみたいなNavigation drawer
Spacing methods | 設置画像の比率とかも参考になる！
●Aspect ratio
○マテリアルデザインは、画面の一貫性や統一感を保つために、下記の図のアスペクト比を推奨している。
●Responsive cropping
○ブレイクポイント毎での画像の比率調整方法
▼縦幅に合わせ比率を維持する
▼縦幅に合わせ画像の比率を変更する
▼画像のタテ幅を固定にする
●Touch targets
○ボタンなどタップ（もしくはクリック）ができる最小領域は48dp
・インタラクティブなコンポーネントと他のUI要素との間隔は「8 dp以上」あける必要がある
Component behavior | ブレイクポイント毎のデザインに使えそう！
●Component width
○Fluid：画面サイズに応じてComponent widthも可変
・メモ：ボタンのような操作が必要なパーツは固定が良いかも
○Fixed：画面サイズに影響を受けず固定
・メモ：ストーリーを考慮しcomponent毎に考える
●Responsive patterns（画面サイズの変化に応じたコンポの表示パターン）
○レスポンシブ毎の表示パターンに迷ったらとりあえずここ見るべし！
・マテリアルデザイン
・マテリアルデザイン （日本語解釈）
Applying density | UI要素をギュッとしてより多くのコンテンツ表示させるタイミングは？！
●適しているタイミング
○大量のコンテンツを表示して操作する必要のある画面
例：メールBOX / 長めのフォーム
●適していないタイミング
○「一点をねらうこと」が要求されるコンポーネント、またはアラートベースのダイアログ
例：日付ピッカー / ドロップダウンメニュー
●Applying densityを適用する場合の注意点
○密度の高いコンポーネントを使用する場合は、下記のようにgutterとmarginの密度を下げ、コンテンツのグループ同士の区別をより明確にする必要がある
Navigation | ナビ-UIパターンの目安として！
●横方向の移動（最上位の階層間移動） 画面数ごとのパターン
▽5画面以上：Navigation drawer
▽3~5画面：Bottom navigation bar
▽2~3画面：Tab
○注意点
・上記のパターンに固執するのではなく、状況に応じて柔軟に切り替え
・ドロワーとタブの組み合わせなど、掛け合わせもあり
Navigation transitions | ナビ毎のアニメーションを検討する際に役立ちそう！
●動画が多いので下記のページ確認するとよいかも
・マテリアルデザインに関わらず様々な参考をみよう
The color system | そもそも色ってどうして使い分けるんだっけ
●色を使う目的としては主に3つ
○Hierarchical：優先度の表現
○Legible：視認性の向上
○Expressive：ブランディング
●Accessible color（識別しやすいテキストカラー）
▼マテリアルとは関係ないけどコントラストチェックする時使えそう：
●Material palette generator（カラーの組み合わせを自動作成）
https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=26A69A
Color usage | 色で意味の表現もできる！
▼意味の表現
○意味の表現以外にも"強調・ブランド・状態"の表現に使用
Text legibility | テキスト透明度の使い分け
●強調の使い分け4パターン
・最も強調したいテキスト：87%の不透明度
・中程度に強調したいテキスト：60%の不透明度
・操作無効のテキスト：38%の不透明度
・エラー時：「#B00020」を使用
System icons | アイコンのサイズ
●icon size
▽24*24dpが基本
▽アイコンを「ライブエリア」内におさめることにより、画面上の他のオブジェクト(例えば一時的に表示されるスクロールバー)によって見えなくなるケースを減らす
●アイコンの状態毎の透明度目安
・アクティブでフォーカスされた状態：不透明度87％
・アクティブでフォーカス無しの状態：不透明度54％
・非アクティブ状態：不透明度38％
About Shape | そもそもなんでShapeのデザインするんだっけ
基本的には「Surfaceの形状」にはデフォルト(初期値)があり、具体的には「半径が4dpの丸角がある長方形」となっている。
●形状をデザインする目的
▽強調（Floating action button / App bar）
▽アイデンティティ（Entry chip）
▽状態の表現（Card）
▽ブランディング（throughout an app）
▽意味づけ（Menu）
上記以外にも、階層の違いの表現もできるよ！
Shape as expression | ブランドの表現方法
●使用例
●これはだめよ
Applying shape to UI | コンポーネントの形状に迷ったら
●形状としてのカテゴリ3つあり、それぞれのカテゴリ毎で統一した形状を採用すべき
○Small components（小さなコンポーネント ）
○Medium components（中型コンポーネント ）
○Large components（大きなコンポーネント ）
▼『*』がついたコンポーネントは"角"が使えない
●シェイプを形成する3つの要素
○Shape famly（角の形状）
・Rounded corner｜丸角
・Cut corner｜切り角
○Shape zize（角のサイズ）
・「絶対値」もしくは「％」で指定
角丸を使う場合は「絶対値」で指定する
○Symmetry（角の対象性）
▼例
Component｜コンポーネント : Button
Category｜形状カテゴリ : Small
Shape family｜角の形状 : Rounded
Shape size｜角のサイズ : 4dp;4dp;4dp;4dp
●Shapeの基準値
○Shapeをカスタマイズしたい場合はとりあえず下記の"Baseline shape values"を参照するといいかも！
https://material.io/design/shape/applying-shape-to-ui.html#baseline-shape-values
The motion system | ページ遷移のアニメーションは基本4つに分類される！
モーションには4つの種類がある！
●01：Container transform｜コンテナ変形｜containerからの関係性を示す
イメージ：リストとかカードとかFABから"出現している"関係性を表現
●02：Shared axis｜共通軸｜そのページとの関係性を示す
イメージ：同じ階層、前後の階層への表現を、X/Z/Y軸のモーションを用いて表現
●03：Fade through｜フェードスルー｜UI間に関係性がない場合
イメージ：フェードイン/フォードアウトで表現。アニメーションの順番としてまず最初に、遷移前のUIがフェードアウト。次に、遷移後のUI要素がサイズを92％から100％に拡大しながらフェードイン。ユーザーが「UI要素のサイズの変化」に注目しすぎないように、遷移後のUI要素にのみ、サイズの拡大を適用(つまり遷移前のUI要素はサイズ変更しない！)。
●04：Fade｜フェード｜画面内の一部のUIが出入りする
イメージ：ダイアログとかハンバーガーメニューとか、画面内で表示・非表示が可能なUI要素に適用。最初に表示するUI要素を80％から100％のサイズになるように拡大しながらフェードイン。そしてUI要素が非表示になる際は、UI要素のサイズ変更はおこなわず、フェードアウト！
○モーションのスピードが気になったら↓
○モーションを自ら作るとき参考↓
Selection | ユーザーに"選択"をさせる時の参考！
●選択方法
○モバイル：長押し、もしくはショートカット
○デスクトップ：ホバーでチェックボックスを表示
◼︎いずれもチェックボックスは選択モード（一つの選択を開始した状態）になって初めて常時表示させる
●選択状態の表現
○スクリム（透過した塗り）＋ チェックアイコン
●選択ボックスのデザインと実装参考
State | 状態をユーザーに伝える！
●状態は基本的にオーバーレイ（半透明のカバー）で表現
▽状態として種類は主に下記の11通り
▽それぞれの不透明度の参考値は下記の通り（無効な状態は、有効な状態の 38% の不透明度で表示）
●メモ
○オーバーレイの色は適用先の要素のテキストまたはアイコンの色と一致
○状態の変化中にテキストまたはアイコンの色が変わる場合、オーバーレイは最終状態の色と一致する必要がある
Confirmation & acknowledgement | 確認画面と通知画面
●Confirmation - そのアクションを続行するかをユーザーに確認する
○必要場面：
・アクションの結果に対してやり直しがきかない場合
・重要なアクションである場合
○含める内容
・アクションに関連する警告（~の削除してよろしいですか？）
・重要な情報（~がリセットされます）
○使用するコンポーネント
・Alert dialog
●Acknowledgement - システム側のアクションをユーザーに通知
○必要場面
・アクションの結果をよりわかりやすく伝えたい時
○含める内容
・アクションの結果
○使用するコンポーネント
・緊急度により選択▼
Help & feedback | ヘルプコンテンツの配置
●ヘルプコンテンツ（よくある質問など）の基本的な配置
○Navigation drawer
・最後のアイテムとして配置
・"よくある質問"系は最後（お問い合わせなどはその上）
・ただし"ログアウト"がある場合それを最後のアイテムとして設置
○Overflow menu
・ドロワーど同様
○App bar
・ヘルプコンテンツを明示する必要がある時（料金の支払いなど）は、アプリバーに個別のアイコンとして配置する必要がある
●ヘルプコンテンツの各アイコン
○Help：塗りのアイコンを使用（吹き出しやアウトラインはNG ）
○Help Tooltips（一時的に表示する簡単な説明UI）：アウトライン(Outlined)のアイコン
Writing | UIテキストに悩んだら基本に立ち戻ろう！
●簡潔に伝える
🙆♀️ 付属の説明書を読んでください
↪︎ピンポイントで重要な作業に焦点をあてた指示を
🙅♂️ 詳細な手順については電話機に付属のマニュアルを参照してください
↪︎長い説明の中に指示を埋め込まない
●シンプルかつ直接的に
🙆♀️ 登録して投票する
↪︎現在の作業に焦点をあてたUIテキストを記述
🙅♂️ 投票する前に登録する必要があります
↪︎アクションの実行方法を直接ユーザーに伝えなければいけない
●一般的な単語を使用する
🙆♀️ 動画を準備中…
↪︎一般的な単語を使用
🙅♂️ バッファリング中…
↪︎文脈を理解する上で重要でない限り、専門用語は使用しない
●一人称を使用する
🙆♀️ メッセージを送信しました
↪︎ユーザー目線
🙅♂️ メッセージが送信されました
↪︎サービス目線
●数字を使用する
🙆♀️ 3 件のメッセージがあります
↪︎数字を使用
🙅♂️ 三件のメッセージがあります
↪︎漢字などは使わない
●目的からはじめる
🙆♀️ このアルバムから写真を削除するには、ゴミ箱にドラッグします
↪︎目的から始まり、アクションで終わる
🙅♂️ 写真をゴミ箱にドラッグして、このアルバムから削除します
↪︎目的の前にアクションがきている
この記事が気に入ったらサポートをしてみませんか？