マテリアルデザインを採用するメリット by 山本麻美さん
マテリアルデザインは Android アプリのためだけのガイドラインではない
→ クロスプラットフォーム を目指すためのガイドライン(Android アプリが対象ではない)
HIG との対比ではない
Design
Develop
Tools
Material Icon
たくさんの種類
線(Outline)と塗り(Filled) → 最新の Android は Outline が主流に
二色のものなど
アイコンを自作する場合もルールがあり、原則が定義されている キャンバスサイズ
Padding
ストロークは内側で作る(線も塗りもサイズが変わらない)
Sketch プラグイン
画面サイズ・解像度
単位
dpi: 1dp = 1px
hdpi: 1dp = 1.5px
xhdpi: 1dp = 2px
環境
物質的な世界に基づいたルール
追加することはあるが、通過することはない
影 距離に応じて影の強さ
コンポーネントに応じて標高が定義されている 勝手に変えない FABなど
Theme
ブランディングに合うようにテーマ
Material Theme Editer
Sketch 用のプラグイン(XD用は開発中らしい)
設定を変更したら、全ての要素に反映される(カラーやフォントなど)
テーマ以上のもの ツールを動かすために Sketch を使っている
色の名前も定義されている
Primary Color
Secondary Color
Text Color
Gallery にアップロードすることができる
チーム内でコメントが可能
Inspect Mode: エンジニア向けの情報が表示される コンポーネント情報をコピペできるように表示
デザインから開発まで Google の用意したツールで行うことで、便利に開発することができる
Android 9 Pie の変更点
検索窓が下に移動した → 画面の大型化
シャドウが濃くなった
iOS とさらに近くなった
マテリアルデザイン失敗例
FAB の誤用
闇雲に使わない
ナビゲーション(違うページへの遷移)には使わない
その画面の主要なアクションに対して使用する
TAB の誤用
カテゴリー分けは OK
ナビゲーションには使わない
読む順番が決まっているものの他ページへの遷移
同じアイテムの表示サイズ切り替え
iOS と違い審査で落とされることは少ないが、突然ストアから落とされることもあるらしい