Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[社内LT]あたらしいMaterial Design

[社内LT]あたらしいMaterial Design

D96c7e61d2f394f1d0af66945181a230?s=128

きりみん

May 18, 2018
Tweet

Transcript

  1. ͋ͨΒ͍͠Material Design @kirimin

  2. ͋ͨΒ͍͠Material Design • Material Theming • New Components

  3. ͋ͨΒ͍͠Material Design • Google I/O2018ʹ߹ΘͤͯϚςϦΞϧσβΠ ϯΨΠυϥΠϯ͕ߋ৽͞Εͨɻ • Material Themingͱ͍͏֓೦͕௥Ճ͞Εͨ ଞɺComponentsʹ΋ଟ͘ͷมߋ͕͋ͬͨɻ

  4. Material Themingʁ • ϚςϦΞϧσβΠϯΛΞϓϦͷϒϥϯυ༻ʹ ΧελϚΠζ͢ΔͨΊͷࢦ਑ɻ • ΧϥʔύϨοτ΍ϘλϯͳͲͷؙ֯ͷܗͳͲ ΛมߋͰ͖Δɻ

  5. Material Themingʁ

  6. Material Themingʁ • Material Theme Editorͱ͍͏΋ͷ͕ެ։͞Εͨɻ • Material ThemingΛ࡞ΕΔπʔϧɻ •

    ݱঢ়͸SketchͷPluginͱͯ͠༻ҙ͞Ε͍ͯΔɻ • σβΠϯϞοΫͱͯ͠ग़ྗग़དྷΔ͕ɺAndroidϓϩ δΣΫτͷThemeϑΝΠϧͱͯ͠ΠϯϙʔτͰ͖ͨ Γ͢ΔΘ͚Ͱ͸ͳ͍Β͍͠ɻ
  7. New Components • ϚςϦΞϧσβΠϯΨΠυϥΠϯࣗମ΋େ෯ʹߋ৽͞Εɺ৽͠ ͍Component͕ଟ͘௥Ճ͞Εͨɻ • App bars:bottom • Backdrop

    • Banners • Extended FAB • Progress indicators
  8. App bars:bottom

  9. App bars:bottom • ϘτϜφϏήʔγϣϯυϩϫʔ΍ϑϩʔςΟϯάΛ ؚΉΞΫγϣϯϘλϯ΁ͷΞΫηεΛఏڙ͢Δɻ

  10. When to use • ͲΜͳ࣌ʹ࢖͏΂͖͔ • ϞόΠϧσόΠεݶఆ • φϏήʔγϣϯυϩϫʔ΁ͷΞΫηε •

    ͔̎Β̑ͷΞΫγϣϯ • App babrs: topͱಉ࣌ʹ࢖͏͜ͱ΋Մ • ͲΜͳ࣌ʹ࢖͏΂͖Ͱ͸ͳ͍͔ • Bottom Navigation Bar(Լλϒ)Λར༻ͨ͠ΞϓϦ • ୯Ұͷը໘΋͘͠͸ΞΫγϣϯ͕ͳ͍ΞϓϦ
  11. Backdrop

  12. Backdrop • όοΫͱϑϩϯτͷ̎ͭͷϨΠϠʔ͔Βߏ੒͞ΕΔɻ όοΫϨΠϠʔ͸ΞΫγϣϯͱίϯςΩετΛදࣔɺ ϑϩϯτϨΠϠʔʹ͸ͦΕΒͷૢ࡞΍௨஌Λදࣔɻ

  13. Backdrop • όοΫϨΠϠʔ͸extend͢ΔϔομʔΈ͍ͨͳΠ ϝʔδʁಈըϓϨΠϠʔ΍ΤσΟλʔͳͲૢ࡞͕த ৺ͷΞϓϦͰ࢖ΘΕΔΠϝʔδ͔΋͠Εͳ͍ɻ

  14. Banners

  15. Banners • ॏཁͰ؆ૉͳϝοηʔδΛදࣔ͠ɺಉ࣌ʹϢʔβʔ ʹΞΫγϣϯΛఏڙ͢Δ • Banners͸ը໘ͷTOP(AppBarͷԼ)ʹදࣔ͞ΕΔ

  16. Banners • Banners͸ಉ࣌ʹҰ͔ͭ͠දࣔͤͯ͞͸͍͚ͳ͍ • ը໘಺NotificationΈ͍ͨͳҐஔ͚ͮʁ • ࠓ·Ͱख࡞Γ͍͓ͯͨ͠஌ΒͤόφʔͷΨΠυϥ ΠϯԽ

  17. Floating Action Button • ԡԼ࣌ͷΞΫγϣϯͷΨΠυϥΠϯԽ

  18. Floating Action Button • Extended FAB͕௥Ճ • Floating Action ButtonΛؙ͚ͩ͡Όͳ͘৭ʑͳ

    ελΠϧʹग़དྷΔΑ͏ʹ
  19. Text Fields • FilledͱOutlinedͷ̎ͭͷσβΠϯ͕બ΂ΔΑ͏ʹ ͳͬͨ

  20. Text Fields • ̎ͭͷλΠϓ͸ಉ͡ػೳΛఏڙ͢ΔͷͰɺͲͪΒΛ બͿ͔͸ΞϓϦͷελΠϧʹґଘ͢Δ

  21. ·ͱΊ • ϚςϦΞϧσβΠϯΨΠυϥΠϯ͸೔ʑਐԽ͍ͯ͠Δɻ • ΨΠυϥΠϯʹ͸ͳ͍͕σβΠφʔ͕ಠࣗʹఆ͍ٛͯ͠ ͨΑ͏ͳComponent͕ެࣜʹऔΓೖΕΒΕ͍ͯ͘Π ϝʔδɻ • ΤϯδχΞతʹ͸ࠓ·Ͱʮ͜Ε͸ඍົ͡ΌͶʁʯͱࢥ ͍ͭͭै͍ͬͯͨΨΠυϥΠϯ͕มΘ͍ͬͯ͘ͷͰɺ

    ͪΐͬͱෳࡶͳ૝͍ʹͳΔ͜ͱ΋
  22. ͓ΘΓ