Contenu connexe
Plus de Akio Yonekura (7)
マテリアルデザイン
- 4. © Copyright Akio Yonekura
マテリアルデザインとは
マテリアルデザインとは
Google I/O 2014で発表されたGoogleのデザインガイドライン。
Androidアプリをはじめ、WebサイトやiOS用アプリも移行を進めている。
フラットデザインに近いが、影やレイヤーなど3Dを表現
現実世界の物理的なアニメーション
- 5. © Copyright Akio Yonekura
マテリアルデザインとは
「紙」と「インク」
マテリアルデザインは「紙(ペーパー)」と「インク」をメタファーとしている。
UIはバーチャル空間に「紙」の特徴を持つ。
「紙」は長方形か円形(正円)
三角形などの複雑なシェイプは使わない
複雑なシェイプは「インク」(コンテンツ)として
紙の上に描く
- 6. © Copyright Akio Yonekura
マテリアルデザインとは
3D(XYZ軸)空間でのUI設計
マテリアルデザインのUIは、紙を用途に合わせて重ねていく3次元で設計する。
UIはXYZ軸を持つ
紙のUIを重ねて情報設計や遷移を行う
- 7. © Copyright Akio Yonekura
マテリアルデザインとは
紙の変形
紙のUIはコンテンツの遷移やピックアップなどの目的にあわせて変形する。
紙のUIはX軸とY軸で変形する
円型は等倍で変形する
Transforming material
http://www.google.com/design/spec/what-is-material/material-properties.html
- 8. © Copyright Akio Yonekura
マテリアルデザインとは
標高Z軸と影(シャドウ)
XY軸が変形するのに対して、Z軸は標高の移動に絞られる。紙のUIには厚みがあり、UIの役割によって標高が異なる。
紙のUIは厚みを持つ(1dp)
紙の厚みやZ軸の標高・アニメーションによって
シャドウが異なる
Material casts shadows
http://www.google.com/design/spec/what-is-material/material-properties.html
Resting elevation
http://www.google.com/design/spec/what-is-material/elevation-shadows.html
- 10. © Copyright Akio Yonekura
アニメーション
リップル(波紋)
タップするとフィードバックとして波紋のアニメーションが始まる
Responsive interaction : User Input
http://www.google.com/design/spec/animation/responsive-interaction.html
タップした位置から
波紋が広がる
- 11. © Copyright Akio Yonekura
アニメーション
リベール
コンテンツの遷移に使う。円形で覆うアニメーション。
Use the Reveal Effect
http://developer.android.com/training/material/animations.html#Reveal
- 12. © Copyright Akio Yonekura
アニメーション
コンテンツの継続
コンテンツの遷移は、タップした場所が広がり詳細が現れる 。カード、リスト、グリッドで共通して使われている。
Meaningful transitions
http://www.google.com/design/spec/animation/meaningful-transitions.html
- 13. © Copyright Akio Yonekura
アニメーション
隆起アニメーション
カードやレイズボタン、フローティングアクションボタンは、押している間浮き上がる
Lift on touch
http://www.google.com/design/spec/animation/responsive-interaction.html
タップした後に
隆起する
隆起した後に
元の位置に沈む
- 14. © Copyright Akio Yonekura
アニメーション
Delightfulアニメーション
細部に何度も押したくなるような楽しい表現が含まれている
Delightful details
http://www.google.com/design/spec/animation/delightful-details.html
時計回りで回転する
- 16. © Copyright Akio Yonekura
スタイル / レイアウト
カラー
1つの主要色(プライマリー)と1つの強調色(アクセント)によって成り立つ
アップバーのプライマリーのシェード500
ステイタスバーはシェード700を使用する
Color palette
http://www.google.com/design/spec/style/color.html
- 17. © Copyright Akio Yonekura
スタイル / レイアウト
アクセントカラー
アクセントカラーは重要な要素に注目を集めるために使う。
鮮やかな強調色は小さめに使う
フローティングアクションボタンなどの
目立つ場所にはアクセントカラーを使用する
- 18. © Copyright Akio Yonekura
スタイル / レイアウト
タイポグラフィ
マテリアルデザインではRoboto(欧文)とNoto(和文)を使用する。
Android 5 Lollipop日本語版では基本フォントは丸ゴシックが使われている。
Roboto & Noto fonts
http://www.google.com/design/spec/resources/roboto-noto-fonts.html
ABCDEFGHIJKLMN
abcdefghijklmnopq
あいうえおかきくけこ
さしすせそたちつてと
Noto Sans JapaneseRoboto
Roboto 美しい日本語
- 19. © Copyright Akio Yonekura
スタイル / レイアウト
文字サイズと行送り
アプリ内で使用する文字サイズと行送り
NotoRoboto
- 20. © Copyright Akio Yonekura
スタイル / レイアウト
文字色
背景が白の場合、文字色は黒(#000000)を基準として
透明度を下げていく
背景に色がある場合、文字色は白(#FFFFFF)を基準として
透明度を下げていく
- 21. © Copyright Akio Yonekura
スタイル / レイアウト
dp (密度非依存ピクセル単位)
dp(別名dip)はAndoroid端末で使われる密度非依存ピクセル単位 density-independent pixels
dpは端末の解像度に関わらず
統一的に大きさを扱うための単位
UIのサイズや影にも適応する
文字サイズは同じ規格で
sp(scale-independent pixel)と呼ぶ
100px
mdpi / 160dpi xxhdpi / 480dpi
300px100dp 100dp
- 22. © Copyright Akio Yonekura
スタイル / レイアウト
Seem(繋ぎ目)とStep(段差)
レイアウトの境界は、紙が並ぶ Seem(継ぎ目)と、紙が重なる Step(段差)がある
Seem(繋ぎ目)では
隣接する紙が同時に動く。
Step(段差)は
それぞれの紙が個別に動く
- 23. © Copyright Akio Yonekura
スタイル / レイアウト
アイコン
マテリアルデザイン用のシステムアイコンを提供している
System icons in Github
https://github.com/google/material-design-icons
- 24. © Copyright Akio Yonekura
スタイル / レイアウト
カスタムアイコン
カスタムでアイコンを制作する際には24dpのグリッドシステムを使用する。
24dpのグリッドを使い
アイコンを描く
24dpの領域に対して、
実際の描画は20dpに収める
- 26. © Copyright Akio Yonekura
ユーザーインターフェイス
UI(ユーザーインターフェイス)
App bar
アップバー
Card / Dialog
カード / ダイアログ
Status bar
ステータスバー
Background
バックグラウンド
- 27. © Copyright Akio Yonekura
ユーザーインターフェイス
App bar
App barは、ブランディングと機能(ナビゲーション、検索、アクション)を持つ。
Navアイコンからドロワーナビゲーションを開く
階層を戻る際にはNavアイコンを使用する
Nav icon Menu icon
Title
Menuアイコンから
重なる項目が出る
App bar drop down
http://www.google.com/design/spec/components/menus.html
Action icon
- 28. © Copyright Akio Yonekura
ユーザーインターフェイス
ボタン
マテリアルUIで使用するボタンは3種類。優先度で決定する。
Floating action button
フローティング・アクション
ボタン
Raised button
レイズド ボタン
Flat button
フラット ボタン
- 29. © Copyright Akio Yonekura
ユーザーインターフェイス
フローティング・アクション・ボタン
FAB(フローティング・アクション・ボタン)は紙の上ならどこにでも配置できる。
Seem、Stepともに両方の紙に
関連がある場合は跨いで上に
表示できる
Floating action button
http://www.google.com/design/spec/components/buttons-
floating-action-button.html
- 30. © Copyright Akio Yonekura
ユーザーインターフェイス
レイズドボタン
レイズドボタンとフラットボタンが汎用的に使用できる。優先度で使い分ける。
「紙」でつくられた汎用的なボタン
押すと隆起する
Raised button
http://www.google.com/design/spec/components/buttons.html
- 31. © Copyright Akio Yonekura
ユーザーインターフェイス
フラットボタン
レイズドボタンとフラットボタンが汎用的に使用できる。優先度で使い分ける。
「インク」で作られた汎用的なボタン
影が無いボタン
Flat button
http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-
buttons
- 32. © Copyright Akio Yonekura
ユーザーインターフェイス
タブ
タブはグループ分けされたコンテンツの切り替えに使う
タブは文字のタップとコンテンツのスワイプ
で切り替えられる
タブをナビゲーションとして使わない
Animation of sibling-to-sibling transition
https://www.google.com/design/spec/patterns/navigational-transitions.
html#navigational-transitions-parent-to-child
- 33. © Copyright Akio Yonekura
ユーザーインターフェイス
ナビゲーション・ドロワー
Googleアプリ共通のナビゲーション
左から右へスライドして、右56dpで
停止する。
戻りは左側へアニメーションする
項目が多い場合は上下にスライドする
- 34. © Copyright Akio Yonekura
ユーザーインターフェイス
コンテンツ
コンテンツの表現方法は主に3種類
List
リスト
Grid
グリッド
Card
カード
単一のリンクにはリストやグリッドを使う。複数の機能やリンク先を持つ場合にはグリッドを使う
- 35. © Copyright Akio Yonekura
ユーザーインターフェイス
リスト
項目を縦に数多く並べることができる
詳細への遷移は、タップしたリスト項目
が広がり次へ繋がる
Parent-to-child transition animation
https://www.google.com/design/spec/patterns/navigational-transitions.
html#navigational-transitions-parent-to-child
- 36. © Copyright Akio Yonekura
ユーザーインターフェイス
グリッド
コンテンツをグリッド上に並べて視覚的に選択する
四隅の角が直角
シャドウがついていない
- 37. © Copyright Akio Yonekura
ユーザーインターフェイス
カード
紙の上に写真やテキストを載せることができる
四隅の角が丸い(2dp)
シャドウがついている
- 38. 参考文献
- Material design Guideline
https://www.google.com/design/spec/
- I/O 2014 アプリに学ぶマテリアルデザイン
http://googledevjp.blogspot.jp/2014/08/io-2014.html
-【マテリアルデザイン採用】リニューアルで気をつけた4つの大事なポイント -feedly編-
http://photoshopvip.net/archives/73204
- マテリアルデザインに対応した Evernote for Android
https://blog.evernote.com/jp/2015/03/12/47325