Gunosy Material Design Study: What is Material Design? - Material Design勉強会

@tyshgcによるMaterial Designの解釈・解読まとめ。
Gunosyにて行われた勉強会のスライドです。
動画版はこちら https://vimeo.com/107162632
資料参考リンクはこちら: http://raindrop.io/collection/215731

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Gunosy Material Design Study
   .BUFSJBM%FTJHOͱ͸ʜ
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. Gunosy Material Design Study
    ࠷ޙʹʜ
    

    View Slide

16. 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
    

    View Slide

17. Gunosy Material Design Study
    ॴײ
    

    View Slide

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

    View Slide

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

    View Slide