7分で分かるMaterial Design

Fabric寿司

Transcript

1. 7෼Ͱ෼͔ΔMaterial Design
2. •id: hotchemi •Android Developer •Recruit Technologies Co.,Ltd.
3. ࠓ೔࿩͢ࣄ
4. Material Design
5. Material Design • ଟ༷ͳϓϥοτϑΥʔϜɾσόΠεαΠζؒͰ౷Ұײͷ͋ΔମݧΛఏڙ! • Ϣʔβʔ͕ࠞཚ͠ͳ͍ɼ೴ʹεοͱೖͬͯ͘ΔσβΠϯ! • ϚςϦΞϧ(෺࣭త)ΛϝλϑΝʔͱͨ͠Visual Language(ࢹ֮ݴޠ)! • Χϥϑϧ͔ͭγϯϓϧɻ༨നΛॏࢹ www.google.com/design
6. • Androidʹཹ·Βͳ͍Googleͷ౷ҰతσβΠϯϓϥοτϑΥʔϜ! • WebͰ͸Polymerͱ͍͏Web Components͕ఏڙ͞ΕΔ! • Matias Duarte͕ݗҾ! • ಛ௃! • Shadow! • Touch Feedback! • Animation! • Transitions Material Design
7. • Card Style • Shadow • Touch feedback What is Material Design
8. • Ripple(೾໲) Animation What is Material Design
9. • Activity Transitions • Automatic defaults, but customizable What is Material Design
10. • Material Design͸ϚϧνϓϥοτϑΥʔϜɼϚϧνσόΠε! • Android WearɺAndroid AutoɺAndroid TVͳͲͷ֤छϓϥοτϑΥʔϜΛܨ͙! • খ͞ͳը໘Ͱѻ͏Android Wearʹ΋ɺंͷӡసʹ஫ҙྗͷେ൒Λ͍͔࣋ͬͯΕΔ Android AutoͰ΋Ϣʔβ͸ҰͭͷίϯςΩετΛ஌͍ͬͯΔ͚ͩͰૢ࡞Ͱ͖Δ! • Android of ThingsΛࢧ͑Δҝͷ౷ҰతσβΠϯΨΠυϥΠϯ Why Material Design
11. Material Design vs Flat Design • ϑϥοτσβΠϯͷ໨త͸ࢹ֮తͳࠞཚΛऔΓআ͘͜ͱ! • ͔͠͠ӨͷΑ͏ͳεΫϦʔϯΛૢ࡞͠΍͘͢͢ΔͨΊͷσΟςʔϧ΋औΓڈΒΕͯ͠ ·ͬͨ! • Material DesignͰ͸ɺϐΫηϧ͸৭ͱਂ͞Λ͍࣋ͬͯΔ! • Material Design͸੩ࢭըͰݟΔͱϑϥοτσβΠϯͱࣅ͍ͯΔ͕ࢥ૝΍࢖͍৺஍͸ҟ ͳ͍ͬͯΔ
12. • ίϯςΩετΛ౷Ұ͢ΔࣄͰϢʔβʔͷࠞཚΛ࠷খݶʹͰ͖Δ! • དྷΔ΂͖΢ΣΞϥϒϧ࣌୅Λݟӽͤ͹΍͓͍ͬͯͯଛ͸ͳ͍͸ͣ! • Androidඪ४ͷύʔπΛ࢖༻͢ΔࣄͰ࣮૷ίετΛ࡟ݮͰ͖Δ! • Google PlayͰϑΟʔνϟʔ͞Ε΍͘͢ͳΔʂʂʂ Developer΁ͷӨڹ ϝϦοτ σϝϦοτ • OSຖʹ࠷దԽ͞ΕͨUIΛߟ͑Δͷ͸େม…
13. • Material Design͸GoogleͷAndroid of thingsઓུΛࢧ͑ΔΞΩϨε伳! • ϑϥοτσβΠϯͱ͸Ұݟࣅ͍ͯΔ͕ͦͷࢥ૝ɼ࢖͍উख͸ҟͳΔ! • ಠࣗUIΛ࡞Γ͜ΉΑΓ΋ϓϥοτϑΥʔϜʹ৐ͬͨํ͕ྑ͍ࣄ͕͋Δ! • Կ͸ͱ΋͋Ε www.google.com/design/ Λಡ΋͏ʂ! • ΤϯδχΞ΋σβΠϯͷࣄΛ஌͍ͬͯͳ͍ͱݫ͍͠͠ɺσβΠφʔ΋ίʔυΛॻ࣌͘୅ ʹͳ͖͍ͬͯͯΔ ·ͱΊ
14. L Developer Preview
15. L Developer Preview • Android্࢙ॳΊͯDeveloper Previewମ੍ʹҠߦɻ! • ࢢ৔ʹग़Δͷ͸൒೥ఔޙʁ! • 5000Λ௒͑ΔAPI͕௥Ճɻ! • Lollipopʁ
16. • android:Theme.Material͕ ఏڙ։࢝ • ActionBar΍StatusBarͷ৭ ΛมߋՄೳʹ Material Theme
17. Material Theme
18. • શͯͷViewʹZ propertyΛ௥ՃɻӨΛࢦఆͰ͖ΔΑ͏ʹ Material Theme
19. Animation • λονΠϕϯτʹ൓Ԡ͢Δλον ϑΟʔυόοΫΞχϝʔγϣϯ • ϏϡʔͷදࣔɾඇදࣔΛ෼͔Γ ΍͘͢͢ΔΞχϝʔγϣϯ • ΞΫςΟϏςΟΛભҠ͢Δͱ͖ͷ Ξχϝʔγϣϯ
20. • Circular Reveal Animation
21. • Path Tracing Animation
22. Palette • android-support-v7-palette • ը૾ͷBitMap͔ΒΧϥʔύϨοτΛੜ੒
23. Dynamic palette
24. • ਐԽͷํ޲ੑ͸ଥ౰͕ͩݱஈ֊Ͱ͸ޓ׵ੑΛอ͍ͬͯΔ΋ͷ͸ଟ͘ͳ͍ • ͱ͸͍͑σβΠϯΨΠυϥΠϯΛॱक͢ΔͳͲࠓ͙͢Ͱ͖Δࣄ΋͋Δʂ • support-v7ʹೖ͍ͬͯΔCardView, PaletteลΓʹ஫໨ ॴײ
25. ͓·͚ɿࠓ͙͢Ͱ͖ΔMaterial Design
26. ࠷ޙʹ No more ૴ࣜUI