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

How to implement Material Design

ymnder
March 27, 2018

How to implement Material Design

Androidエンジニア デザイン部 #1 2018/03/28 @ymnd
https://nohana.connpass.com/event/80530/

ymnder

March 27, 2018
Tweet

More Decks by ymnder

Other Decks in Programming

Transcript

  1. How to implement Material Design
    AndroidΤϯδχΞ σβΠϯ෦ #1 2018/03/28 @ymnd

    View Slide

  2. ࠓ೔ͷ͓඼ॻ͖
    ᶃ ࣄલௐࠪ
    ᶄ ΨΠυϥΠϯ֬ೝ
    ᶅ σβΠϯͷ۩ମԽ
    ᶆ σόοά࡞ۀ
    2

    View Slide

  3. Ͳ͏΍ͬͯσβΠϯΛ੡඼ʹ
    ࣮૷ͯ͠·͔͢

    View Slide

  4. ͨͱ͑͹͜ΜͳλεΫ
    • ݕࡧը໘ΛϚςϦΞϧσβΠϯԽ͢Δ
    • શ໘తʹελΠϧΛݟ௚͢
    • ৭ʗ༨നʗॻମʗΞΠίϯɾɾɾɾ
    • ݕࡧલʹཤྺ΍ϗοτΩʔϫʔυΛදࣔ͢Δ
    • ݕࡧը໘ʹೖͬͨͱ͖ʹϗοτΩʔϫʔυΛදࣔ
    • ݕࡧBoxΛλοϓͯ͠ཤྺΛදࣔ
    4

    View Slide

  5. ࣗ෼ͷྗͰ
    σβΠϯ͍ͯ͘͠

    View Slide

  6. View Slide

  7. ΍͍͖ͬͯͩʂʂʂ

    View Slide

  8. ࠓ೔ͷ͓඼ॻ͖
    ᶃ ࣄલௐࠪ
    ᶄ ΨΠυϥΠϯ֬ೝ
    ᶅ σβΠϯͷ۩ମԽ
    ᶆ σόοά࡞ۀ
    8

    View Slide

  9. ᶃࣄલௐࠪ
    • ઌߦࣄྫΛൺֱ͢Δ
    • ͍ΖΜͳΞϓϦΛ৮ͬͯΈΔ
    • ݕࡧػೳΛ࢖ͬͯεΫγϣΛूΊΔ
    9

    View Slide

  10. ᶃࣄલௐࠪͷ࣮ྫ
    10

    View Slide

  11. ࠓ೔ͷ͓඼ॻ͖
    ᶃ ࣄલௐࠪ
    ᶄ ΨΠυϥΠϯ֬ೝ
    ᶅ σβΠϯͷ۩ମԽ
    ᶆ σόοά࡞ۀ
    11

    View Slide

  12. ᶄΨΠυϥΠϯͷ֬ೝ
    • ΨΠυϥΠϯΛݟʹߦ͘
    • ࣄલʹҰ௨Γ໨Λ௨͓ͯ͘͜͠ͱ
    • ̍ͭͷը໘Λͭ͘Δʹࡍͯ͠΋ߟྀࣄ߲͸ͨ͘͞Μ͋Δ
    • Patterns/Search
    • Components/Lists
    • Style/Color
    • Style/Icons
    12

    View Slide

  13. ᶄΨΠυϥΠϯͷ֬ೝͷ࣮ྫ
    • ݕࡧɺϦετɺΞΠίϯɺϑΥϯτͷଠ͞ɺ৭ຯ
    ←ΫϦΞϘλϯͷେ͖͞ʗ༨ന͸ʁ
    ←ςΩετͷϘτϜҐஔ
    ←ελΠϧ͸Boldʁ
    ←ྻͷdp͸ʁ
    ϚςϦΞϧΞΠίϯ͸ʁˠ
    େ͖͞ͱҐஔ͸ʁˠ
    ৭͸ςΩετΑΓೱ͍ʁˠ
    ଞͷΞΠίϯͷྫ͸ʁˠ
    ←ંฦ͠͸ߟྀ͢΂͖ʁ
    ←dividerͷ৭͸ʁଠ͞͸ʁ
    ←ݟग़͠͸Ͳ͏͍ΕΔ͔
    ɹʢଞͷΞΠςϜͷ૝ఆʣ
    ςΩετͱͲΕ͘Β͍཭͢ʁˠ
    ←ϑΥϯταΠζ͸ʁ
    13

    View Slide

  14. ࠓ೔ͷ͓඼ॻ͖
    ᶃ ࣄલௐࠪ
    ᶄ ΨΠυϥΠϯ֬ೝ
    ᶅ σβΠϯͷ۩ମԽ
    ᶆ σόοά࡞ۀ
    14

    View Slide

  15. ᶅσβΠϯͷ۩ମԽ
    • SketchͰෳ਺ҊΛඳ͍ͯνʔϜͰ૬ஊ͢Δ
    15

    View Slide

  16. ࠓ೔ͷ͓඼ॻ͖
    ᶃ ࣄલௐࠪ
    ᶄ ΨΠυϥΠϯ֬ೝ
    ᶅ σβΠϯͷ۩ମԽ
    ᶆ σόοά࡞ۀ
    16

    View Slide

  17. ᶆσόοά࡞ۀ
    • σόοάͷ௕͍௕͍ಓͷΓ
    • ૊ΈํΛؒҧ͔ͬͨͳʁ
    • Ґஔ͕ἧΘͳ͍ଞ
    • ୺຤໰୊
    • Կނ͔ಛఆ୺຤ͰͷΈڍಈ͕ҧ͏
    • OSόʔδϣϯ໰୊
    • Կނ͔̐ܥ่͚ͩΕΔ
    • λονϑΟʔυόοΫରԠ
    17

    View Slide

  18. ᶆσόοά࡞ۀ
    • LayoutInspector
    • Stetho
    • ։ൃऀπʔϧ
    • Sketch
    18

    View Slide

  19. ᶆσόοά࡞ۀ(LayoutInspector)
    • AndroidStudio > Tools > Layout Inspector
    • ViewHierarchyͱ֤ཁૉͷঢ়ଶΛ֬ೝͰ͖Δ
    • ViewͷVisibility΍Themeɺ༨നɺେ͖͞ͳͲ
    19

    View Slide

  20. ᶆσόοά࡞ۀ(LayoutInspector)

    View Slide

  21. ᶆσόοά࡞ۀ(LayoutInspector)
    View Tree

    View Slide

  22. ᶆσόοά࡞ۀ(LayoutInspector)
    View Properties

    View Slide

  23. ᶆσόοά࡞ۀ(Stetho)
    • http://facebook.github.io/stetho/
    • ChromeDeveloperToolsΛར༻͠CSS-likeʹ֬ೝͰ͖Δ
    • TextΛϦΞϧλΠϜͰૢ࡞͢Δ͜ͱ͕Ͱ͖Δ
    • ௕͘ͳͬͨ৔߹ͷݟͨ໨ΛνΣοΫͰ͖Δ
    23

    View Slide

  24. ᶆσόοά࡞ۀ(Stetho)

    View Slide

  25. ᶆσόοά࡞ۀ(Stetho)
    View Tree

    View Slide

  26. ᶆσόοά࡞ۀ(Stetho)
    View Properties

    View Slide

  27. ᶆσόοά࡞ۀ(Stetho)

    View Slide

  28. ᶆσόοά࡞ۀ(Stetho)

    View Slide

  29. ᶆσόοά࡞ۀ(Stetho)
    text෦෼Λબ୒ˍೖྗ

    View Slide

  30. ᶆσόοά࡞ۀ(Stetho)

    View Slide

  31. ᶆσόοά࡞ۀ(Stetho)

    View Slide

  32. ᶆσόοά࡞ۀ(։ൃऀπʔϧ)
    • ઃఆ > ։ൃऀ޲͚Φϓγϣϯ > ϨΠΞ΢τڥքΛදࣔ
    • ڥ໨͕Ͳ͜ʹ͋Δ͔ܶతʹ෼͔Γ΍͘͢ͳΔ
    32

    View Slide

  33. ᶆσόοά࡞ۀ(Sketch)
    • σβΠϯҊʹεΫγϣΛॏͶͯඍௐ੔Λ܁Γฦ͢
    • OpacityΛ80%ʹͯ͠ॏͶΔ
    33

    View Slide

  34. Ͱ͖͕͋Γ
    34

    View Slide

  35. whoami
    • twitter:@ymnd, github:@ymnder
    • Application Engineer
    • Android ೔ܦిࢠ൛ΞϓϦ
    • Android ࢴ໘ϏϡʔΞʔΞϓϦ
    • ٕज़ॻయ̐Ͱ೔ܦిࢠ൛ͷ஌ݟΛ·ͱΊͨຊΛग़͠·͢ɻ
    35

    View Slide

  36. Design΍͍͖ͬͯ

    View Slide