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

Material Design with Polymer

Material Design with Polymer

第49回 HTML5とか勉強会 https://atnd.org/events/53826 で使用したスライドです。本編40分。

YouTube: http://youtu.be/G7hIDm4aK5g?t=1h25m43s

※普段よりもスライドの情報量すくなめで、口頭とデモ多めでした。Paper Elementsを使ったコーディングと、Polymer Designerを使ったコーディング(?)のデモなど。

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

July 28, 2014
Tweet

Transcript

  1. Material Design with Polymer 2014-07-28 ୈ49ճ HTML5ͱ͔ษڧձ Ayumu Sato @ahomu

  2. ࠤ౻ า ͞ͱ͏ ͋ΏΉ

  3. ϋϯυϧωʔϜ ahomu @

  4. 100ਓ͘Β͍͔ͱࢥͬͯͨΒ 350ਓืूͰϏϏͬͯ·͢ɻ

  5. Profile • גࣜձࣾαΠόʔΤʔδΣϯτ • WebϑϩϯτΤϯυΤϯδχΞ • PHPer + SE →

    Frontend + Node + Android + AWS͋ • HTML5 Experts.jp ʹ͓͚Δ༓ྶ෦һͷͻͱΓ • ࠷ۙͷ೰Έ͸ɺࣾ಺ͰΦοαϯʹݟΒΕΔ͜ͱʢΞϥαʔʣ
  6. None
  7. Agenda • Google I/O ͷײ૝ • Material Design ͷ͓͞Β͍ •

    ίϯηϓτ • ΨΠυϥΠϯͷαϚϦʔ • Web Ͱ࢖͏ • Polymer • Papaer Elements
  8. Google I/O 2014

  9. ॳɾGoogle I/O

  10. ͪΌΜͱࢀՃ͠·ͨ͠ Registration ͔Βͯ͠ӳձ࿩ྗͷແ͞Λ௧ײ

  11. ӳޠ͕ୡऀͰ͸ͳ͍ͷͰ ࣈນ੮ͷ͓ੈ࿩ʹ

  12. ͋ͱ͸งғؾͰ ʗ(^o^)ʘ

  13. Polymer and Web Components change everything you know about Web

    development https://www.youtube.com/watch?v=8OJ7ih8EE7s
  14. How we built Chrome Dev Editor with the Chrome platform

    https://www.youtube.com/watch?v=NNLnTz6yIc4
  15. Material science: Developing Android applications with material design https://www.youtube.com/watch?v=lSH9aKXjgt8

  16. Material design: Visual style and imagery https://www.youtube.com/watch?v=ctzWKRlTYHQ

  17. Material design: Motion https://www.youtube.com/watch?v=FBD0VlcVS1E

  18. ͱͯ΋ҙ͕ࣝߴ·Γ·ͨ͠ ʢখฒײʣ

  19. Material Design ϚςϦΞϧσβΠϯ

  20. Android ?

  21. HTML5 ͱ͔

  22. Google Design http://www.google.com/design/

  23. ໨త

  24. ͞·͟·ͳ؀ڥͰ ౷Ұ͞ΕͨମݧΛ࣮ݱ͢Δ

  25. across Platforms • Android • iOS • All browsers…

  26. across Devices • Smartphone • Tablet • Wearable • Automobile

    • All PCs…
  27. Material is the metapher

  28. Design metaphor inspired by paper and ink http://googledevelopers.blogspot.jp/2014/06/this-is-material-design.html

  29. ఻౷తͳάϥϑΟοΫσβΠϯ ! ۙ୅ٕज़ʹΑΔΠϊϕʔγϣϯ

  30. None
  31. Principles

  32. None
  33. Material is the metaphor Bold, graphic, intentional Motion provides meaning

  34. Google Design http://www.google.com/design/

  35. None
  36. Guidelines

  37. • Animation • Style • Layout • Components • Patterns

    • Usability • Resources Authentic Motion Responsive Interaction Meaningful Transitions Delightful Detail Animation
  38. None
  39. • Animation • Style • Layout • Components • Patterns

    • Usability • Resources Color Typography Icons Imagery Style
  40. None
  41. None
  42. • Animation • Style • Layout • Components • Patterns

    • Usability • Resources Principles Metrics and Keylines Structure Layout
  43. None
  44. None
  45. • Animation • Style • Layout • Components • Patterns

    • Usability • Resources Button Sheets Buttons Cards Chips Dialogs Grids … Components
  46. • Animation • Style • Layout • Components • Patterns

    • Usability • Resources Selection Gestures Promoted Actions Settings Imagery Treatment Search Patterns
  47. None
  48. • Animation • Style • Layout • Components • Patterns

    • Usability • Resources Accesibility Usability
  49. • Animation • Style • Layout • Components • Patterns

    • Usability • Resources Layout Tempaltes Sticker Sheets Roboto Font Color Palettes Resources
  50. iOS 7 Design Resources https://developer.apple.com/library/iOS/design/

  51. 2010೥ࠒ • ͳΜͰ΋͔ΜͰ΋ iOS ͬΆ͍ײ͕͡ྲྀߦΔ • ActionSheet ΍ AletView Έ͍ͨͳUIΛϒϥ΢βͰ࠶ൃ໌

    • ͭΒ͍ • ͋ɺjQuery Mobile ͞Μ… • Android ͷීٴɺσβΠϯϦςϥγʔͷ޲্ɹɹɹɹɹɹɹ ϑϥοτσβΠϯͷོ੝ͳͲͰϑΣʔυΞ΢τ
  52. Twitter Bootstrap http://getbootstrap.com/

  53. 2012೥ࠒ • Twitter Bootstrap ͷྲྀߦ • ਺ଟ͘ͷ؅ཧπʔϧ͕ Bootstrap Խ •

    ΤϯδχΞʹେਓؾ • ΦʔϓϯιʔεϓϩδΣΫτͷαΠτͱ͔΋ Bootstrap • ͜Ε͸͍·ͩʹଓ͍ͯΔҹ৅
  54. Microsoft Design http://dev.windows.com/ja-jp/design

  55. ࣮͸ • Microsoft ΋ཱ೿ͳσβΠϯΨΠυϥΠϯΛ๊͍͑ͯͨ • εΠεͷάϥϑΟοΫσβΠϯʹώϯτΛಘͯΔͱ͔ • Metro ͱ͍͏໊લ͕঎ඪ໰୊ͱ͔Ͱ Modern

    ʹͳͬͯΔͱ͔ • ݸਓతʹ޷͖ͳͷͰ͕Μ͹ͬͯ΄͍͠Ͱ͢ ( ˘ω˘)
  56. Flat Pixels (article) http://sachagreif.com/flat-pixels/

  57. ʠ http://sachagreif.com/flat-pixels/ This style offers the best of both world:

    realism's affordances and subtle hints combined with the purity and simplicity off flat design.
  58. None
  59. ࠓޙ • Material Design ͷৄࡉͳεϖοΫ͸ࢀߟʹͳΔ • ࣮૷͢΂͖۩ମత಺༰ͱ࣮૷ࡁͷίʔυ͕ଘࡏ͢Δͷ͕ڧΈ • Android L

    ΄͔ Android ϑΝϛϦʔͰ׆༂༧ఆʁ • Webϒϥ΢βͷੈքʹ͸ਐग़Ͱ͖Δ͔ʁ • ͕͢͞ʹ౰࣌ͷ iOS ΄Ͳͷঢ়ଶ͸๚Εͳ͍ؾ͕…
  60. On the Web Webʹ͓͚ΔϚςϦΞϧσβΠϯ

  61. ɹɹPolymer

  62. Material design with Polymer www.polymer-project.org/docs/elements/material.html

  63. Paper Elements Core Elements

  64. Paper Elements Demo

  65. Elements Collections http://www.polymer-project.org/docs/elements/

  66. Drawer

  67. ! !

  68. </> <core-toolbar> <paper-icon-button id="paper_icon_button" icon="menu" isToggle></paper-icon-button> <p>Hello my-app</p> </core-toolbar> <core-drawer-panel

    id="core_drawer_panel" selected="{{$.paper_icon_button.active ? 'drawer' : 'main'}}"> <section drawer>This is Drawer</section> <section main>This is Main</section> </core-drawer-panel>
  69. ! <core-toolbar> <core-drawer-panel selected=“{{$.icon_butotn.active…}}”> <paper-icon-button id=“icon_butotn” active isToggle>

  70. Tabs

  71. ••• ▪▪▪ ••• ▪▪▪

  72. Polymer Designer http://www.polymer-project.org/tools/designer/

  73. ••• ▪▪▪ <paper-tabs id=“tabs” selected=“0”> <paper-tab>ONE</paper-tab> <paper-tab>TWO</paper-tab> </paper-tabs> <core-animated-pages selected=“{{$.tabs.selected}}”>

    <section>ONE</section> <section>TWO</section> </core-nimated-pages>
  74. ͳͲͳͲ…

  75. </> <div class="card"> <paper-shadow z="1"></paper-shadow> </div> <paper-shadow>

  76. </> <div class="button raised green"> <div class="center" fit>OK</div> <paper-ripple fit></paper-ripple>

    </div> <paper-ripple>
  77. </> <core-style id=“shared”> :host { display: block color: white; }

    </core-style> <polymer-element noscript> <template> <core-style ref=“shared”> </core-style> </template> </polymer-element> <core-style>
  78. Unlock the next era of UI development with Polymer https://www.youtube.com/watch?v=HKrYfrAzqFA

    http://www.slideshare.net/rob_dodson/unlock-the-next-era-of-ui-design-with-polymer
  79. Topeka http://www.polymer-project.org/apps/topeka/

  80. FAQ

  81. Is this project related to Angular JS?

  82. ʠ http://www.polymer-project.org/resources/faq.html#frameworks Nope. Polymer isn’t like things that have come

    before. Polymer is the first of a new kind of library taking advantage of Web Components.
  83. angular/material https://github.com/angular/material

  84. How is polymer related to Material Design?

  85. ʠ http://www.polymer-project.org/resources/faq.html#materialdesign Polymer played a key role in material design’s

    development: it was used to quickly prototype and iterate on design concepts.
  86. Is polymer Production ready?

  87. ʠ http://www.polymer-project.org/resources/faq.html#readiness Polymer is currently in “developer preview”.

  88. ͓ͬ͠Όʔ ϚςϦΞϧͬͧ͆͆͢

  89. ΉΉΉ… • Web Components ࣗମ͕ Chrome 36 ͕΍ͬͱ͜ରԠ • Platform.js

    ͋Δ͚Ͳɺ͍͔ʹ΋ Developer Preview • ϞόΠϧͰ Polymer/Web Componentsେৎ෉͔ • γϟυ΢ͱΞχϝʔγϣϯͷଟ༻͸ϒϥ΢βWebͷఱఢ • Material Design ͦͷ΋ͷ͕ɺAndroid L ʹ޲͚ͯ͜Ε͔Β • Android ͷ UIWidget ྨ΋ɺ·ͩΑ͘͸ಈ͔ͳ͍
  90. : )

  91. Conclusion

  92. • Material Design ͕ྲྀߦΔ͔͸ผͱͯ͠ษڧʹͳΔ • Web ༻ʹ͸ Polymer + Paper

    Elements Λར༻Ͱ͖Δ • Material Design ΋ Polymer (Web Components) ΋ൃల్্ • ϓϩμΫγϣϯ༻్Ͱීٴ͠͏Δͷ͸ɺ΋͏গ͠ઌͷະདྷ
  93. Thanks! http://aho.mu @ahomu github.com/ahomu ! ⌂