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

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. ͓ΘΓ