7分で分かるMaterial Design

Slide 1

Slide 1 text

7෼Ͱ෼͔ΔMaterial Design

Slide 2

Slide 2 text

•id: hotchemi •Android Developer •Recruit Technologies Co.,Ltd.

Slide 3

Slide 3 text

ࠓ೔࿩͢ࣄ

Slide 4

Slide 4 text

Material Design

Slide 5

Slide 5 text

Material Design • ଟ༷ͳϓϥοτϑΥʔϜɾσόΠεαΠζؒͰ౷Ұײͷ͋ΔମݧΛఏڙ! • Ϣʔβʔ͕ࠞཚ͠ͳ͍ɼ೴ʹεοͱೖͬͯ͘ΔσβΠϯ! • ϚςϦΞϧ(෺࣭త)ΛϝλϑΝʔͱͨ͠Visual Language(ࢹ֮ݴޠ)! • Χϥϑϧ͔ͭγϯϓϧɻ༨നΛॏࢹ www.google.com/design

Slide 6

Slide 6 text

• Androidʹཹ·Βͳ͍Googleͷ౷ҰతσβΠϯϓϥοτϑΥʔϜ! • WebͰ͸Polymerͱ͍͏Web Components͕ఏڙ͞ΕΔ! • Matias Duarte͕ݗҾ! • ಛ௃! • Shadow! • Touch Feedback! • Animation! • Transitions Material Design

Slide 7

Slide 7 text

• Card Style • Shadow • Touch feedback What is Material Design

Slide 8

Slide 8 text

• Ripple(೾໲) Animation What is Material Design

Slide 9

Slide 9 text

• Activity Transitions • Automatic defaults, but customizable What is Material Design

Slide 10

Slide 10 text

• Material Design͸ϚϧνϓϥοτϑΥʔϜɼϚϧνσόΠε! • Android WearɺAndroid AutoɺAndroid TVͳͲͷ֤छϓϥοτϑΥʔϜΛܨ͙! • খ͞ͳը໘Ͱѻ͏Android Wearʹ΋ɺंͷӡసʹ஫ҙྗͷେ൒Λ͍͔࣋ͬͯΕΔ Android AutoͰ΋Ϣʔβ͸ҰͭͷίϯςΩετΛ஌͍ͬͯΔ͚ͩͰૢ࡞Ͱ͖Δ! • Android of ThingsΛࢧ͑Δҝͷ౷ҰతσβΠϯΨΠυϥΠϯ Why Material Design

Slide 11

Slide 11 text

Material Design vs Flat Design • ϑϥοτσβΠϯͷ໨త͸ࢹ֮తͳࠞཚΛऔΓআ͘͜ͱ! • ͔͠͠ӨͷΑ͏ͳεΫϦʔϯΛૢ࡞͠΍͘͢͢ΔͨΊͷσΟςʔϧ΋औΓڈΒΕͯ͠ ·ͬͨ! • Material DesignͰ͸ɺϐΫηϧ͸৭ͱਂ͞Λ͍࣋ͬͯΔ! • Material Design͸੩ࢭըͰݟΔͱϑϥοτσβΠϯͱࣅ͍ͯΔ͕ࢥ૝΍࢖͍৺஍͸ҟ ͳ͍ͬͯΔ

Slide 12

Slide 12 text

• ίϯςΩετΛ౷Ұ͢ΔࣄͰϢʔβʔͷࠞཚΛ࠷খݶʹͰ͖Δ! • དྷΔ΂͖΢ΣΞϥϒϧ࣌୅Λݟӽͤ͹΍͓͍ͬͯͯଛ͸ͳ͍͸ͣ! • Androidඪ४ͷύʔπΛ࢖༻͢ΔࣄͰ࣮૷ίετΛ࡟ݮͰ͖Δ! • Google PlayͰϑΟʔνϟʔ͞Ε΍͘͢ͳΔʂʂʂ Developer΁ͷӨڹ ϝϦοτ σϝϦοτ • OSຖʹ࠷దԽ͞ΕͨUIΛߟ͑Δͷ͸େม…

Slide 13

Slide 13 text

• Material Design͸GoogleͷAndroid of thingsઓུΛࢧ͑ΔΞΩϨε伳! • ϑϥοτσβΠϯͱ͸Ұݟࣅ͍ͯΔ͕ͦͷࢥ૝ɼ࢖͍উख͸ҟͳΔ! • ಠࣗUIΛ࡞Γ͜ΉΑΓ΋ϓϥοτϑΥʔϜʹ৐ͬͨํ͕ྑ͍ࣄ͕͋Δ! • Կ͸ͱ΋͋Ε www.google.com/design/ Λಡ΋͏ʂ! • ΤϯδχΞ΋σβΠϯͷࣄΛ஌͍ͬͯͳ͍ͱݫ͍͠͠ɺσβΠφʔ΋ίʔυΛॻ࣌͘୅ ʹͳ͖͍ͬͯͯΔ ·ͱΊ

Slide 14

Slide 14 text

L Developer Preview

Slide 15

Slide 15 text

L Developer Preview • Android্࢙ॳΊͯDeveloper Previewମ੍ʹҠߦɻ! • ࢢ৔ʹग़Δͷ͸൒೥ఔޙʁ! • 5000Λ௒͑ΔAPI͕௥Ճɻ! • Lollipopʁ

Slide 16

Slide 16 text

• android:Theme.Material͕ ఏڙ։࢝ • ActionBar΍StatusBarͷ৭ ΛมߋՄೳʹ Material Theme

Slide 17

Slide 17 text

Material Theme

Slide 18

Slide 18 text

• શͯͷViewʹZ propertyΛ௥ՃɻӨΛࢦఆͰ͖ΔΑ͏ʹ Material Theme

Slide 19

Slide 19 text

Animation • λονΠϕϯτʹ൓Ԡ͢Δλον ϑΟʔυόοΫΞχϝʔγϣϯ • ϏϡʔͷදࣔɾඇදࣔΛ෼͔Γ ΍͘͢͢ΔΞχϝʔγϣϯ • ΞΫςΟϏςΟΛભҠ͢Δͱ͖ͷ Ξχϝʔγϣϯ

Slide 20

Slide 20 text

• Circular Reveal Animation

Slide 21

Slide 21 text

• Path Tracing Animation

Slide 22

Slide 22 text

Palette • android-support-v7-palette • ը૾ͷBitMap͔ΒΧϥʔύϨοτΛੜ੒

Slide 23

Slide 23 text

Dynamic palette

Slide 24

Slide 24 text

• ਐԽͷํ޲ੑ͸ଥ౰͕ͩݱஈ֊Ͱ͸ޓ׵ੑΛอ͍ͬͯΔ΋ͷ͸ଟ͘ͳ͍ • ͱ͸͍͑σβΠϯΨΠυϥΠϯΛॱक͢ΔͳͲࠓ͙͢Ͱ͖Δࣄ΋͋Δʂ • support-v7ʹೖ͍ͬͯΔCardView, PaletteลΓʹ஫໨ ॴײ