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
2. Gunosy Material Design Study PROFILE (VOPTZͷ6*σβΠφʔɾϑϩϯτΤϯυΤϯδχΞͷ๣Βɺ
   69ઃܭͳͲ΋୲౰͍ͯ͠Δྑ͘΋ѱ͘΋೥બखɻ
   (VOPTZʹ͸೥݄ʹδϣΠϯɻ
   લ৬͸(VOPTZॳظ6*ઃܭΛͨ͠๭ࣾɻ Ṥޱɹ߶ɹ5TVZPTIJ
   )JHVDIJ
3. Gunosy Material Design Study Index 1 .BUFSJBM
   %FTJHOͷ໨త ʜ 2 .BUFSJBM
   %FTJHOͱ͸ ʜ 3 ؾʹͳΔͱ͜Ζͷ·ͱΊ ʜ
4. Gunosy Material Design Study Material Designͷ໨త ϚϧνσόΠε࣌୅ͷਐԽʹ͋Θͤɺաڈʹங͔Ε͖ͯͨσβΠϯͷ ݪଇ΍ཧ࿦ɺٕज़ֵ৽ͱՊֶͷՄೳੑΛϕʔεʹɺ
   ༷ʑͳσόΠε্ͰαʔϏεΛར༻͍ͨ͠Ϣʔβʔ΁ڞ௨ͷૢ࡞ମݧ Λఏڙ͢Δࣄ͕໨తɻ σόΠεɾϓϥοτϑΥʔϜΛ໰Θͳ͍UXΨΠυϥΠϯ͕ඞཁ
5. Gunosy Material Design Study σόΠεʹΑͬͯૢ࡞ɾମݧ͕มΘΔ User ετϨε ݱ࣮ੈքʹͳ͍Ϟϊͷಈ͖ ͙͢ʹೝ஌Ͱ͖ͳ͍GUIίϯϙʔωϯτ No Platform Consistency!!
6. σόΠε΍ϓϥοτϑΥʔϜͷ্ʹ
   ੜ׆͕͋ΔͷͰ͸ͳ͘ɺ
   ੜ׆ͷதʹσόΠε΍ϓϥοτϑΥʔϜ͕͋Δ l l Gunosy Material Design Study ෺ཧ๏ଇ΍Ϟϊͷྺ࢙͸
   ແࢹͰ͖ͳ͍
   Ϣʔβʔͷ࢖͍׳Εͨ؀ڥ͔Βҳ୤͢Δͱ཭୤཰͸্͕Δ
7. Gunosy Material Design Study .BUFSJBM
   %FTJHOͱ͸ʜ
8. Gunosy Material Design Study ࣾձతʹ
   ஝ੵ͞Εͨ
   σβΠϯཧ࿦ ϑΟʔυόοΫ
   ʹΑΔ
   ମݧͷܧଓੑ Material Design ෺ཧతͰ
   ࣗવͳ
   ܗঢ়ɾಈ͖ Visual Language Material is the metaphor Bold, graphic, intentional Motion provides meaning
9. Gunosy Material Design Study શ෦࿩͢ͱ௕͍ͷͰɺ
   ؾʹͳΔ఺͚ͩ·ͱΊ·͢
10. Gunosy Material Design Study "OJNBUJPO ౷Ұ͞ΕͨΠʔδϯά Swift out linear ͸ NG! ಈ͖ʹ͸ҙຯ͕͋Δ Πʔδϯάʹ͍ͭͯ஌Γ͍ͨํ͸ͪ͜Β͕Φεεϝ Easing Function ૣݟද http://easings.net/
11. Gunosy Material Design Study 3FTQPOTJWF
    *OUFSBDUJPO λοϓͯ͠΋Կ΋มԽ͕ͳ͍ = ద੾ʹॲཧ͞Ε͔ͨΘ͔Γʹ͍͘ Ϣʔβʔͷߦಈʹରͯ͠
    ΞχϝʔγϣϯͰ
    ॲཧ͕ߦΘΕͨࣄΛදݱ͢Δɻ
12. Gunosy Material Design Study 6*
    $PMPS
    1BMFUUF Material Design͸ݪ৭Λϕʔεʹɺ ಓ࿏ඪࣝ΍ݱ୅ݐஙɾεϙʔπ༻ͷ ίʔτͳͲΛࢀߟʹ͠ɺॠ࣌ʹೝ஌ Ͱ͖ΔΑ͏ʹઃܭ͞Ε͍ͯΔɻ Χϥʔ͸ϝΠϯΧϥʔͱΞΫηϯτ
    Χϥʔͷ૊Έ߹ΘͤͰߏ੒͞Εɺ
    8FCɾ"OESPJEɾJ04ʹରԠ͢ΔͨΊ ͷΧϥʔύϨοτ͕༻ҙ͞Ε͍ͯΔɻ
13. Gunosy Material Design Study 'MPBUJOH
    "DUJPO
    #VUUPO .BUFSJBM
    %FTJHOͷ؊ͱ΋͍͏΂͖
    'MPBUJOH
    "DUJPO
    #VUUPO 1 αΠζ͸௨Γ 2 ࠷΋ॏཁͳΞΫγϣϯΛ جຊը໘ʹͭ഑ஔ ి࿩ΞϓϦͷ৔߹ ి࿩͢Δ ϗʔϜ΁ 3 ؔ࿈ͨ͠ཁૉͷ৔߹͸
    ෳ਺ઃஔՄೳ ࠶ੜʹؔ࿈͍ͯ͠Δ ԻָΞϓϦͷ৔߹
14. Gunosy Material Design Study -BZPVU
    BOE
    4IBEPX .BUFSJBM
    %FTJHOͰ͸ࢴΛ
    ϝλϑΝʔͱͯ͠ѻ͍ɺ
    ҙຯʢΞϑΥʔμϯεʣΛ
    ࣋ͨͤΔɻ Floating Action Button Status Bar Background .BUFSJBMʢૉࡐʣͱϝλϑΝʔʢᎏ᎐ʣͰϢʔβʔͷ೴ʹରͯ͠
    ࣮ੈքͱಉܹࢗ͡Λ༩͑ͯɺ೴ͷෛ୲Λ͍ܰ͘͠Δɻ
15. Gunosy Material Design Study ࠷ޙʹʜ
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σβΠϯ੹೚ऀʹΠϯλϰϡʔ
    
    #SFOU
    3PTFʵ(J[NPEP
    64
    ຋༁
    NJIP ϚςΟΞεɾσϡΞϧςࢯ
    
    .BUJBT
    %VBSUF
17. Gunosy Material Design Study ॴײ
18. Gunosy Material Design Study .BUFSJBM
    %FTJHOͱ͸
    6*σβΠϯ΍69ΞʔΩςΫνϟʹ͓͚Δ఩ֶ
19. Gunosy Material Design Study @ tyshgc Tsuyoshi Higuchi Thank you ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ http://raindrop.io/collection/215731 Զͷz.BUFSJBM
    %FTJHO·ͱΊzϦϯΫ