Tweet
Tweet

Slide 1

Slide 1 text

Gunosy Material Design Study @ tyshgc Tsuyoshi Higuchi What is Material Design? ϚςϦΞϧσβΠϯͬͯͳΜͩΖ͏? 2014, Sept. 25

Slide 2

Slide 2 text

Gunosy Material Design Study PROFILE (VOPTZͷ6*σβΠφʔɾϑϩϯτΤϯυΤϯδχΞͷ๣Βɺ 69ઃܭͳͲ΋୲౰͍ͯ͠Δྑ͘΋ѱ͘΋೥બखɻ (VOPTZʹ͸೥݄ʹδϣΠϯɻ લ৬͸(VOPTZॳظ6*ઃܭΛͨ͠๭ࣾɻ Ṥޱɹ߶ɹ5TVZPTIJ)JHVDIJ

Slide 3

Slide 3 text

Gunosy Material Design Study Index 1 .BUFSJBM%FTJHOͷ໨త ʜ 2 .BUFSJBM%FTJHOͱ͸ ʜ 3 ؾʹͳΔͱ͜Ζͷ·ͱΊ ʜ

Slide 4

Slide 4 text

Gunosy Material Design Study Material Designͷ໨త ϚϧνσόΠε࣌୅ͷਐԽʹ͋Θͤɺաڈʹங͔Ε͖ͯͨσβΠϯͷ ݪଇ΍ཧ࿦ɺٕज़ֵ৽ͱՊֶͷՄೳੑΛϕʔεʹɺ ༷ʑͳσόΠε্ͰαʔϏεΛར༻͍ͨ͠Ϣʔβʔ΁ڞ௨ͷૢ࡞ମݧ Λఏڙ͢Δࣄ͕໨తɻ σόΠεɾϓϥοτϑΥʔϜΛ໰Θͳ͍UXΨΠυϥΠϯ͕ඞཁ

Slide 5

Slide 5 text

Gunosy Material Design Study σόΠεʹΑͬͯૢ࡞ɾମݧ͕มΘΔ User ετϨε ݱ࣮ੈքʹͳ͍Ϟϊͷಈ͖ ͙͢ʹೝ஌Ͱ͖ͳ͍GUIίϯϙʔωϯτ No Platform Consistency!!

Slide 6

Slide 6 text

σόΠε΍ϓϥοτϑΥʔϜͷ্ʹ ੜ׆͕͋ΔͷͰ͸ͳ͘ɺ ੜ׆ͷதʹσόΠε΍ϓϥοτϑΥʔϜ͕͋Δ l l Gunosy Material Design Study ෺ཧ๏ଇ΍Ϟϊͷྺ࢙͸ ແࢹͰ͖ͳ͍ Ϣʔβʔͷ࢖͍׳Εͨ؀ڥ͔Βҳ୤͢Δͱ཭୤཰͸্͕Δ

Slide 7

Slide 7 text

Gunosy Material Design Study .BUFSJBM%FTJHOͱ͸ʜ

Slide 8

Slide 8 text

Gunosy Material Design Study ࣾձతʹ ஝ੵ͞Εͨ σβΠϯཧ࿦ ϑΟʔυόοΫ ʹΑΔ ମݧͷܧଓੑ Material Design ෺ཧతͰ ࣗવͳ ܗঢ়ɾಈ͖ Visual Language Material is the metaphor Bold, graphic, intentional Motion provides meaning

Slide 9

Slide 9 text

Gunosy Material Design Study શ෦࿩͢ͱ௕͍ͷͰɺ ؾʹͳΔ఺͚ͩ·ͱΊ·͢

Slide 10

Slide 10 text

Gunosy Material Design Study "OJNBUJPO ౷Ұ͞ΕͨΠʔδϯά Swift out linear ͸ NG! ಈ͖ʹ͸ҙຯ͕͋Δ Πʔδϯάʹ͍ͭͯ஌Γ͍ͨํ͸ͪ͜Β͕Φεεϝ Easing Function ૣݟද http://easings.net/

Slide 11

Slide 11 text

Gunosy Material Design Study 3FTQPOTJWF*OUFSBDUJPO λοϓͯ͠΋Կ΋มԽ͕ͳ͍ = ద੾ʹॲཧ͞Ε͔ͨΘ͔Γʹ͍͘ Ϣʔβʔͷߦಈʹରͯ͠ ΞχϝʔγϣϯͰ ॲཧ͕ߦΘΕͨࣄΛදݱ͢Δɻ

Slide 12

Slide 12 text

Gunosy Material Design Study 6*$PMPS1BMFUUF Material Design͸ݪ৭Λϕʔεʹɺ ಓ࿏ඪࣝ΍ݱ୅ݐஙɾεϙʔπ༻ͷ ίʔτͳͲΛࢀߟʹ͠ɺॠ࣌ʹೝ஌ Ͱ͖ΔΑ͏ʹઃܭ͞Ε͍ͯΔɻ Χϥʔ͸ϝΠϯΧϥʔͱΞΫηϯτ Χϥʔͷ૊Έ߹ΘͤͰߏ੒͞Εɺ 8FCɾ"OESPJEɾJ04ʹରԠ͢ΔͨΊ ͷΧϥʔύϨοτ͕༻ҙ͞Ε͍ͯΔɻ

Slide 13

Slide 13 text

Gunosy Material Design Study 'MPBUJOH"DUJPO#VUUPO .BUFSJBM%FTJHOͷ؊ͱ΋͍͏΂͖ 'MPBUJOH"DUJPO#VUUPO 1 αΠζ͸௨Γ 2 ࠷΋ॏཁͳΞΫγϣϯΛ جຊը໘ʹͭ഑ஔ ి࿩ΞϓϦͷ৔߹ ి࿩͢Δ ϗʔϜ΁ 3 ؔ࿈ͨ͠ཁૉͷ৔߹͸ ෳ਺ઃஔՄೳ ࠶ੜʹؔ࿈͍ͯ͠Δ ԻָΞϓϦͷ৔߹

Slide 14

Slide 14 text

Gunosy Material Design Study -BZPVUBOE4IBEPX .BUFSJBM%FTJHOͰ͸ࢴΛ ϝλϑΝʔͱͯ͠ѻ͍ɺ ҙຯʢΞϑΥʔμϯεʣΛ ࣋ͨͤΔɻ Floating Action Button Status Bar Background .BUFSJBMʢૉࡐʣͱϝλϑΝʔʢᎏ᎐ʣͰϢʔβʔͷ೴ʹରͯ͠ ࣮ੈքͱಉܹࢗ͡Λ༩͑ͯɺ೴ͷෛ୲Λ͍ܰ͘͠Δɻ

Slide 15

Slide 15 text

Gunosy Material Design Study ࠷ޙʹʜ

Slide 16

Slide 16 text

Gunosy Material Design Study So when we talk about the physics of things, we're not trying to copy the real world. We're trying to make it natural for your brain, for you mind, while still unleashing this thing that software can do which is be this totally mutable, transformable, truly magical type of experience. So that's kind of the line that we're trying to dance on. ๻Β͸ϦΞϧͳ෺ཧΛ࢖͏ͱ͸͍ͬͯ·͕͢ɺ ϦΞϧੈքΛίϐʔ͠Α͏ͱ͸ߟ͍͑ͯ·ͤΜɻ ͨͩɺ೴΍৺ʹͱͬͯࣗવͳ΋ͷΛ࡞Ζ͏ͱ͍ͯ͠Δ͚ͩͰ͢ɻ ιϑτ΢ΣΞͷՄೳੑΛ։͍ͯɺมԽͷ͋Δຊ౰ʹϚδΧϧͳ ମݧΛ࡞͍ͬͯ͘ɺ๻Β͸ͦΜͳϥΠϯͷ্Ͱμϯε͠Α͏ͱ ͍ͯ͠·͢ɻ Ҿ༻ݩɿϚςϦΞϧɾσβΠϯͬͯԿʁ"OESPJEσβΠϯ੹೚ऀʹΠϯλϰϡʔ#SFOU3PTFʵ(J[NPEP64຋༁NJIP ϚςΟΞεɾσϡΞϧςࢯ.BUJBT%VBSUF

Slide 17

Slide 17 text

Gunosy Material Design Study ॴײ

Slide 18

Slide 18 text

Gunosy Material Design Study .BUFSJBM%FTJHOͱ͸ 6*σβΠϯ΍69ΞʔΩςΫνϟʹ͓͚Δ఩ֶ

Slide 19

Slide 19 text

Gunosy Material Design Study @ tyshgc Tsuyoshi Higuchi Thank you ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ http://raindrop.io/collection/215731 Զͷz.BUFSJBM%FTJHO·ͱΊzϦϯΫ