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

7分で分かるMaterial Design

7分で分かるMaterial Design

Fabric寿司

Ce37cf75fa85b89a33916545978c64de?s=128

@hotchemi

August 01, 2014
Tweet

More Decks by @hotchemi

Other Decks in Programming

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