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

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

Tsuyoshi Higuchi
PRO
September 25, 2014

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

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

Tsuyoshi Higuchi
PRO

September 25, 2014
Tweet

More Decks by Tsuyoshi Higuchi

Other Decks in Design

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