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