Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

マテリアルデザイン

4 114 vues

Publié le

講義用資料

Publié dans : Design
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2u6xbL5 ❶❶❶
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Dating direct: ♥♥♥ http://bit.ly/2u6xbL5 ♥♥♥
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

マテリアルデザイン

  1. 1. マテリアルデザイン Material Design Akio Yonekura http://neuegrafik.jp
  2. 2. 1. マテリアルデザインとは 2. アニメーション 3. スタイル 4. レイアウト 5. ユーザーインターフェイス
  3. 3. マテリアルデザインとは
  4. 4. © Copyright Akio Yonekura マテリアルデザインとは マテリアルデザインとは Google I/O 2014で発表されたGoogleのデザインガイドライン。 Androidアプリをはじめ、WebサイトやiOS用アプリも移行を進めている。 フラットデザインに近いが、影やレイヤーなど3Dを表現 現実世界の物理的なアニメーション
  5. 5. © Copyright Akio Yonekura マテリアルデザインとは 「紙」と「インク」 マテリアルデザインは「紙(ペーパー)」と「インク」をメタファーとしている。 UIはバーチャル空間に「紙」の特徴を持つ。 「紙」は長方形か円形(正円) 三角形などの複雑なシェイプは使わない 複雑なシェイプは「インク」(コンテンツ)として 紙の上に描く
  6. 6. © Copyright Akio Yonekura マテリアルデザインとは 3D(XYZ軸)空間でのUI設計 マテリアルデザインのUIは、紙を用途に合わせて重ねていく3次元で設計する。 UIはXYZ軸を持つ 紙のUIを重ねて情報設計や遷移を行う
  7. 7. © Copyright Akio Yonekura マテリアルデザインとは 紙の変形 紙のUIはコンテンツの遷移やピックアップなどの目的にあわせて変形する。 紙のUIはX軸とY軸で変形する 円型は等倍で変形する Transforming material http://www.google.com/design/spec/what-is-material/material-properties.html
  8. 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
  9. 9. アニメーション
  10. 10. © Copyright Akio Yonekura アニメーション リップル(波紋) タップするとフィードバックとして波紋のアニメーションが始まる Responsive interaction : User Input http://www.google.com/design/spec/animation/responsive-interaction.html タップした位置から 波紋が広がる
  11. 11. © Copyright Akio Yonekura アニメーション リベール コンテンツの遷移に使う。円形で覆うアニメーション。 Use the Reveal Effect http://developer.android.com/training/material/animations.html#Reveal
  12. 12. © Copyright Akio Yonekura アニメーション コンテンツの継続 コンテンツの遷移は、タップした場所が広がり詳細が現れる 。カード、リスト、グリッドで共通して使われている。 Meaningful transitions http://www.google.com/design/spec/animation/meaningful-transitions.html
  13. 13. © Copyright Akio Yonekura アニメーション 隆起アニメーション カードやレイズボタン、フローティングアクションボタンは、押している間浮き上がる Lift on touch http://www.google.com/design/spec/animation/responsive-interaction.html タップした後に 隆起する 隆起した後に 元の位置に沈む
  14. 14. © Copyright Akio Yonekura アニメーション Delightfulアニメーション 細部に何度も押したくなるような楽しい表現が含まれている Delightful details http://www.google.com/design/spec/animation/delightful-details.html 時計回りで回転する
  15. 15. スタイル / レイアウト
  16. 16. © Copyright Akio Yonekura スタイル / レイアウト カラー 1つの主要色(プライマリー)と1つの強調色(アクセント)によって成り立つ アップバーのプライマリーのシェード500 ステイタスバーはシェード700を使用する Color palette http://www.google.com/design/spec/style/color.html
  17. 17. © Copyright Akio Yonekura スタイル / レイアウト アクセントカラー アクセントカラーは重要な要素に注目を集めるために使う。 鮮やかな強調色は小さめに使う フローティングアクションボタンなどの 目立つ場所にはアクセントカラーを使用する
  18. 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. 19. © Copyright Akio Yonekura スタイル / レイアウト 文字サイズと行送り アプリ内で使用する文字サイズと行送り NotoRoboto
  20. 20. © Copyright Akio Yonekura スタイル / レイアウト 文字色 背景が白の場合、文字色は黒(#000000)を基準として 透明度を下げていく 背景に色がある場合、文字色は白(#FFFFFF)を基準として 透明度を下げていく
  21. 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. 22. © Copyright Akio Yonekura スタイル / レイアウト Seem(繋ぎ目)とStep(段差) レイアウトの境界は、紙が並ぶ Seem(継ぎ目)と、紙が重なる Step(段差)がある Seem(繋ぎ目)では 隣接する紙が同時に動く。 Step(段差)は それぞれの紙が個別に動く
  23. 23. © Copyright Akio Yonekura スタイル / レイアウト アイコン マテリアルデザイン用のシステムアイコンを提供している System icons in Github https://github.com/google/material-design-icons
  24. 24. © Copyright Akio Yonekura スタイル / レイアウト カスタムアイコン カスタムでアイコンを制作する際には24dpのグリッドシステムを使用する。 24dpのグリッドを使い アイコンを描く 24dpの領域に対して、 実際の描画は20dpに収める
  25. 25. ユーザーインターフェイス
  26. 26. © Copyright Akio Yonekura ユーザーインターフェイス UI(ユーザーインターフェイス) App bar アップバー Card / Dialog カード / ダイアログ Status bar ステータスバー Background バックグラウンド
  27. 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. 28. © Copyright Akio Yonekura ユーザーインターフェイス ボタン マテリアルUIで使用するボタンは3種類。優先度で決定する。 Floating action button フローティング・アクション ボタン Raised button レイズド ボタン Flat button フラット ボタン
  29. 29. © Copyright Akio Yonekura ユーザーインターフェイス フローティング・アクション・ボタン FAB(フローティング・アクション・ボタン)は紙の上ならどこにでも配置できる。 Seem、Stepともに両方の紙に 関連がある場合は跨いで上に 表示できる Floating action button http://www.google.com/design/spec/components/buttons- floating-action-button.html
  30. 30. © Copyright Akio Yonekura ユーザーインターフェイス レイズドボタン レイズドボタンとフラットボタンが汎用的に使用できる。優先度で使い分ける。 「紙」でつくられた汎用的なボタン 押すと隆起する Raised button http://www.google.com/design/spec/components/buttons.html
  31. 31. © Copyright Akio Yonekura ユーザーインターフェイス フラットボタン レイズドボタンとフラットボタンが汎用的に使用できる。優先度で使い分ける。 「インク」で作られた汎用的なボタン 影が無いボタン Flat button http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised- buttons
  32. 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. 33. © Copyright Akio Yonekura ユーザーインターフェイス ナビゲーション・ドロワー Googleアプリ共通のナビゲーション 左から右へスライドして、右56dpで 停止する。 戻りは左側へアニメーションする 項目が多い場合は上下にスライドする
  34. 34. © Copyright Akio Yonekura ユーザーインターフェイス コンテンツ コンテンツの表現方法は主に3種類 List リスト Grid グリッド Card カード 単一のリンクにはリストやグリッドを使う。複数の機能やリンク先を持つ場合にはグリッドを使う
  35. 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. 36. © Copyright Akio Yonekura ユーザーインターフェイス グリッド コンテンツをグリッド上に並べて視覚的に選択する 四隅の角が直角 シャドウがついていない
  37. 37. © Copyright Akio Yonekura ユーザーインターフェイス カード 紙の上に写真やテキストを載せることができる 四隅の角が丸い(2dp) シャドウがついている
  38. 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

×