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を使ったコーディング(?)のデモなど。

Ayumu Sato

July 28, 2014
Tweet

More Decks by Ayumu Sato

Other Decks in Technology

Transcript

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

    View Slide

  2. ࠤ౻ า
    ͞ͱ͏ ͋ΏΉ

    View Slide

  3. ϋϯυϧωʔϜ
    ahomu
    @

    View Slide

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

    View Slide

  5. Profile
    • גࣜձࣾαΠόʔΤʔδΣϯτ
    • WebϑϩϯτΤϯυΤϯδχΞ
    • PHPer + SE → Frontend + Node + Android + AWS͋
    • HTML5 Experts.jp ʹ͓͚Δ༓ྶ෦һͷͻͱΓ
    • ࠷ۙͷ೰Έ͸ɺࣾ಺ͰΦοαϯʹݟΒΕΔ͜ͱʢΞϥαʔʣ

    View Slide

  6. View Slide

  7. Agenda
    • Google I/O ͷײ૝
    • Material Design ͷ͓͞Β͍
    • ίϯηϓτ
    • ΨΠυϥΠϯͷαϚϦʔ
    • Web Ͱ࢖͏
    • Polymer
    • Papaer Elements

    View Slide

  8. Google I/O 2014

    View Slide

  9. ॳɾGoogle I/O

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. Polymer and Web Components change
    everything you know about Web development
    https://www.youtube.com/watch?v=8OJ7ih8EE7s

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. Android ?

    View Slide

  21. HTML5 ͱ͔

    View Slide

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

    View Slide

  23. ໨త

    View Slide

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

    View Slide

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

    View Slide

  26. across Devices
    • Smartphone
    • Tablet
    • Wearable
    • Automobile
    • All PCs…

    View Slide

  27. Material is the metapher

    View Slide

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

    View Slide

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

    View Slide

  30. View Slide

  31. Principles

    View Slide

  32. View Slide

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

    View Slide

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

    View Slide

  35. View Slide

  36. Guidelines

    View Slide

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

    View Slide

  38. View Slide

  39. • Animation
    • Style
    • Layout
    • Components
    • Patterns
    • Usability
    • Resources
    Color
    Typography
    Icons
    Imagery
    Style

    View Slide

  40. View Slide

  41. View Slide

  42. • Animation
    • Style
    • Layout
    • Components
    • Patterns
    • Usability
    • Resources
    Principles
    Metrics and Keylines
    Structure
    Layout

    View Slide

  43. View Slide

  44. View Slide

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

    View Slide

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

    View Slide

  47. View Slide

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

    View Slide

  49. • Animation
    • Style
    • Layout
    • Components
    • Patterns
    • Usability
    • Resources
    Layout Tempaltes
    Sticker Sheets
    Roboto Font
    Color Palettes
    Resources

    View Slide

  50. iOS 7 Design Resources
    https://developer.apple.com/library/iOS/design/

    View Slide

  51. 2010೥ࠒ
    • ͳΜͰ΋͔ΜͰ΋ iOS ͬΆ͍ײ͕͡ྲྀߦΔ
    • ActionSheet ΍ AletView Έ͍ͨͳUIΛϒϥ΢βͰ࠶ൃ໌
    • ͭΒ͍
    • ͋ɺjQuery Mobile ͞Μ…
    • Android ͷීٴɺσβΠϯϦςϥγʔͷ޲্ɹɹɹɹɹɹɹ
    ϑϥοτσβΠϯͷོ੝ͳͲͰϑΣʔυΞ΢τ

    View Slide

  52. Twitter Bootstrap
    http://getbootstrap.com/

    View Slide

  53. 2012೥ࠒ
    • Twitter Bootstrap ͷྲྀߦ
    • ਺ଟ͘ͷ؅ཧπʔϧ͕ Bootstrap Խ
    • ΤϯδχΞʹେਓؾ
    • ΦʔϓϯιʔεϓϩδΣΫτͷαΠτͱ͔΋ Bootstrap
    • ͜Ε͸͍·ͩʹଓ͍ͯΔҹ৅

    View Slide

  54. Microsoft Design
    http://dev.windows.com/ja-jp/design

    View Slide

  55. ࣮͸
    • Microsoft ΋ཱ೿ͳσβΠϯΨΠυϥΠϯΛ๊͍͑ͯͨ
    • εΠεͷάϥϑΟοΫσβΠϯʹώϯτΛಘͯΔͱ͔
    • Metro ͱ͍͏໊લ͕঎ඪ໰୊ͱ͔Ͱ Modern ʹͳͬͯΔͱ͔
    • ݸਓతʹ޷͖ͳͷͰ͕Μ͹ͬͯ΄͍͠Ͱ͢ ( ˘ω˘)

    View Slide

  56. Flat Pixels (article)
    http://sachagreif.com/flat-pixels/

    View Slide

  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.

    View Slide

  58. View Slide

  59. ࠓޙ
    • Material Design ͷৄࡉͳεϖοΫ͸ࢀߟʹͳΔ
    • ࣮૷͢΂͖۩ମత಺༰ͱ࣮૷ࡁͷίʔυ͕ଘࡏ͢Δͷ͕ڧΈ
    • Android L ΄͔ Android ϑΝϛϦʔͰ׆༂༧ఆʁ
    • Webϒϥ΢βͷੈքʹ͸ਐग़Ͱ͖Δ͔ʁ
    • ͕͢͞ʹ౰࣌ͷ iOS ΄Ͳͷঢ়ଶ͸๚Εͳ͍ؾ͕…

    View Slide

  60. On the Web
    Webʹ͓͚ΔϚςϦΞϧσβΠϯ

    View Slide

  61. ɹɹPolymer

    View Slide

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

    View Slide

  63. Paper Elements
    Core Elements

    View Slide

  64. Paper Elements
    Demo

    View Slide

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

    View Slide

  66. Drawer

    View Slide

  67. ! !

    View Slide

  68. >

    isToggle>
    Hello my-app

    selected="{{$.paper_icon_button.active ? 'drawer' : 'main'}}">
    This is Drawer
    This is Main

    View Slide

  69. !

    selected=“{{$.icon_butotn.active…}}”>
    id=“icon_butotn”
    active
    isToggle>

    View Slide

  70. Tabs

    View Slide

  71. ●●● ■■■ ●●● ■■■

    View Slide

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

    View Slide

  73. ●●● ■■■

    ONE
    TWO

    selected=“{{$.tabs.selected}}”>
    ONE
    TWO

    View Slide

  74. ͳͲͳͲ…

    View Slide

  75. >




    View Slide

  76. >

    OK



    View Slide

  77. >

    :host {
    display: block
    color: white;
    }








    View Slide

  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

    View Slide

  79. Topeka
    http://www.polymer-project.org/apps/topeka/

    View Slide

  80. FAQ

    View Slide

  81. Is this project related
    to Angular JS?

    View Slide

  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.

    View Slide

  83. angular/material
    https://github.com/angular/material

    View Slide

  84. How is polymer related
    to Material Design?

    View Slide

  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.

    View Slide

  86. Is polymer
    Production ready?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  90. : )

    View Slide

  91. Conclusion

    View Slide

  92. • Material Design ͕ྲྀߦΔ͔͸ผͱͯ͠ษڧʹͳΔ
    • Web ༻ʹ͸ Polymer + Paper Elements Λར༻Ͱ͖Δ
    • Material Design ΋ Polymer (Web Components) ΋ൃల్্
    • ϓϩμΫγϣϯ༻్Ͱීٴ͠͏Δͷ͸ɺ΋͏গ͠ઌͷະདྷ

    View Slide

  93. Thanks!
    http://aho.mu
    @ahomu
    github.com/ahomu
    !

    View Slide