UIデザイナーのためのMaterial Designの理解と実践

Transcript

1. © 2018 Goodpatch Inc. All Right Reserved. 1 UIデザイナーのための Material Designの理解と実践 2018/05/25 Google I/O Extended 2018 Shibuya
2. © 2018 Goodpatch Inc. All Right Reserved. 2 アジェンダ はじめに Material Designを理解する Material Designを実践する まとめ
3. © 2018 Goodpatch Inc. All Right Reserved. 3 ⾃⼰紹介 はじめに 蔡 漢翔（サイ カンショウ） UI Designer, Goodpatch Inc.
4. © 2018 Goodpatch Inc. All Right Reserved. 4 Material DesignΛཧղ͢Δ
5. © 2018 Goodpatch Inc. All Right Reserved. 5 Material Designって何 Material DesignΛཧղ͢Δ 「Materialはガイドライン、コンポーネント、 ツールが含まれ、UIデザインのベストプラク ティスをサポートする柔軟性のあるシステム」 “Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design.” 引⽤：Material Design https://material.io/ （20180525） “ ”
6. © 2018 Goodpatch Inc. All Right Reserved. 6 Material Designって何 Material DesignΛཧղ͢Δ 「美しいプロダクトをもっと速く作ろう。 Materialはオープンソースコードで裏づけされ たデザインシステムで、チームのデジタル体験 を築くことに役⽴ちます」 “Make beautiful products, faster. Material is a design system – backed by open-source code – that helps teams build digital experiences” 引⽤：Material Design https://material.io/ （20180525） “ ”
7. © 2018 Goodpatch Inc. All Right Reserved. 7 簡単に⾔うと Material DesignΛཧղ͢Δ Materialはデザインシステム
8. © 2018 Goodpatch Inc. All Right Reserved. 8 デザインシステム？ Material DesignΛཧղ͢Δ デザインシステム？
9. © 2018 Goodpatch Inc. All Right Reserved. 9 デザインシステムとは… Material DesignΛཧղ͢Δ 引⽤：Product Unicorn, “Design systems, style guides, pattern libraries. What the hell is the difference?” https://product-unicorn.com/design-systems-style-guides-all-those-libraries-what-the-hell-is- the-difference-4c2741193fdc（20180525） • Style Guide • Component Library • Code Library • …
10. © 2018 Goodpatch Inc. All Right Reserved. 10 Material Designの中⾝ Material DesignΛཧղ͢Δ Design Develop Tools
11. © 2018 Goodpatch Inc. All Right Reserved. 11 Material Designの中⾝ Material DesignΛཧղ͢Δ Design Develop Tools
12. © 2018 Goodpatch Inc. All Right Reserved. 12 Material / Design Material DesignΛཧղ͢Δ Material Foundation Environment Layout Navigation Color Typography Iconography Shape Motion Interaction Communication Material Guidelines Material Theming Components Usability Platform Guidance Material System Introduction Material Studies
13. © 2018 Goodpatch Inc. All Right Reserved. 13 メタファー Material DesignΛཧղ͢Δ アプリ/サイト = デザイナー/デベロッパ = デザインシステム = 料理 シェフ キッチン＋調理器具＋ レシピ＋⾷材…
14. © 2018 Goodpatch Inc. All Right Reserved. 14 メタファー Material DesignΛཧղ͢Δ Material Design = Material Foundation = Material Components = Material Tools = 料理教室 料理の基礎知識 処理済みの常⽤⾷材 便利なキッチン⽤品
15. © 2018 Goodpatch Inc. All Right Reserved. 15 メタファー Material DesignΛཧղ͢Δ 料理教室は 料理の基礎が分かれば 誰でも⾃分の家においしい料理が作れるため の存在
16. © 2018 Goodpatch Inc. All Right Reserved. 16 メタファー Material DesignΛཧղ͢Δ Material Designは UIの基礎が分かれば 誰でも美しいアプリが作れるため のデザインシステム
17. © 2018 Goodpatch Inc. All Right Reserved. 17 改めて、Material Designは Material DesignΛཧղ͢Δ Material Designは デザインシステムを作るため のデザインシステム
18. © 2018 Goodpatch Inc. All Right Reserved. 18 Material DesignΛ࣮ફ͢Δ
19. © 2018 Goodpatch Inc. All Right Reserved. 19 今⽇やってみるところ Material DesignΛ࣮ફ͢Δ Color Typography Components
20. © 2018 Goodpatch Inc. All Right Reserved. 20 使うツールは Material DesignΛ࣮ફ͢Δ Sketch.app Material Theme Editor
21. © 2018 Goodpatch Inc. All Right Reserved. 21 InVision Studioでも出るらしい Material DesignΛ࣮ફ͢Δ 引⽤：Twitter, @materialdesign https://twitter.com/materialdesign/status/999703078059331584 （20180525）
22. © 2018 Goodpatch Inc. All Right Reserved. 22 Color
23. © 2018 Goodpatch Inc. All Right Reserved. 23 The baseline Material color theme Material DesignΛ࣮ફ͢Δ 引⽤：Material Design https://material.io/design//color/the-color- system.html#color-theme-creation（20180525） • Primary • Secondary • Background • Surface • Error • “On” Colors
24. © 2018 Goodpatch Inc. All Right Reserved. 24 Colors and theming Material DesignΛ࣮ફ͢Δ 引⽤：Material Design https://material.io/design/color/the-color- system.html#color-theme-creation （20180525） • Primary color • Secondary color • Light and dark variants
25. © 2018 Goodpatch Inc. All Right Reserved. 25 Colors and theming Material DesignΛ࣮ફ͢Δ 引⽤：Material Design https://material.io/design/color/the-color- system.html#color-usage-palettes （20180525） • Primary color • Secondary color • Light and dark variants
26. © 2018 Goodpatch Inc. All Right Reserved. 26 Text Color Material DesignΛ࣮ફ͢Δ 引⽤：Material Design https://material.io/design/color/text- legibility.html#text-backgrounds （20180525） • High Emphasis • Medium Emphasis • Disabled • ৭ͷಁ໌౓Λ࢖͏
27. © 2018 Goodpatch Inc. All Right Reserved. 27 Material Theme Editorで ⾃分のColor Paletteを⽣成する Material DesignΛ࣮ફ͢Δ Primary Secondary Surface
28. © 2018 Goodpatch Inc. All Right Reserved. 28 ⽣成された Colorシンボル Material DesignΛ࣮ફ͢Δ
29. ৭ 500 600 700 800 900 © 2018 Goodpatch Inc. All Right Reserved. 29 Primary & Secondary Material DesignΛ࣮ફ͢Δ όϦΤʔγϣϯ 050 100 200 300 400 ৭ελΠϧ • Primary • Secondary • Surface • Icons
30. © 2018 Goodpatch Inc. All Right Reserved. 30 Surface Material DesignΛ࣮ફ͢Δ ৭ελΠϧ • Primary • Secondary • Surface • Icons όϦΤʔγϣϯ • Primary or Secondary • Main • Base • Light • Dark
31. © 2018 Goodpatch Inc. All Right Reserved. 31 “On” Colors Material DesignΛ࣮ફ͢Δ ঢ়ଶ • Active • Inactive • Disabled ৭ελΠϧ • Primary • Secondary • Surface • Icons όϦΤʔγϣϯ • Primary or Secondary • Error • Black • White • Selected • On Primary • On Secondary • On Surface
32. © 2018 Goodpatch Inc. All Right Reserved. 32 “On” Colors Material DesignΛ࣮ફ͢Δ ঢ়ଶ • Active • Inactive • Disabled όϦΤʔγϣϯ • Primary or Secondary • Error • Black • White • Selected • On Primary • On Secondary • On Surface
33. © 2018 Goodpatch Inc. All Right Reserved. 33 DEMO
34. © 2018 Goodpatch Inc. All Right Reserved. 34 Typography
35. © 2018 Goodpatch Inc. All Right Reserved. 35 Type Scale Material DesignΛ࣮ફ͢Δ 引⽤：Material Design https://material.io/design/typography/the-type- system.html#type-scale（20180525） • Headline1-6 • Subtitle1-2 • Body1-2 • Button • Caption & Overline
36. © 2018 Goodpatch Inc. All Right Reserved. 36 引⽤：Material Design https://web.archive.org/web/20180223140413/https://material.io/ guidelines/style/typography.html#typography-line-height （20180525）
37. © 2018 Goodpatch Inc. All Right Reserved. 37 4dp grid Material DesignΛ࣮ફ͢Δ • BaselineͰἧ͑Δ • Line-height͸4ͷഒ਺ 引⽤：Material Design https://material.io/design/typography/ understanding-typography.html#type-properties （20180525）
38. © 2018 Goodpatch Inc. All Right Reserved. 38 Dense script considerations Material DesignΛ࣮ફ͢Δ 引⽤：Material Design https://material.io/design/typography/understanding- typography.html#type-properties （20180525） • English-likeλΠϓΑΓଟ ΊͷLine-height͕ඞཁ • λΠτϧΑΓখ͍͞จࣈ͸ Type Scaleͷௐ੔͕ඞཁ
39. © 2018 Goodpatch Inc. All Right Reserved. 39 Material Theme Editorで⽣成されたTextシンボル Material DesignΛ࣮ફ͢Δ
40. © 2018 Goodpatch Inc. All Right Reserved. 40 Material Theme Editorで⽣成されたTextシンボル Material DesignΛ࣮ફ͢Δ λΠϓελΠϧ Headline1-6 Subtitle1-2 Body1-2 Button Caption & Overline ৭ Primary Secondary Selected Black White ڧ͞ High Emphasis Medium Emphasis Disabled ഑ஔ Left Center Right
41. © 2018 Goodpatch Inc. All Right Reserved. 41 DEMO
42. © 2018 Goodpatch Inc. All Right Reserved. 42 Components
43. © 2018 Goodpatch Inc. All Right Reserved. 43 Atomic Design Material DesignΛ࣮ફ͢Δ 引⽤：Atomic Design Methodology http://atomicdesign.bradfrost.com/chapter-2/ （20180525） • Atoms • Molecules • Organisms • Templates • Pages
44. © 2018 Goodpatch Inc. All Right Reserved. 44 Atomic Design Material DesignΛ࣮ફ͢Δ 引⽤：Atomic Design Methodology http://atomicdesign.bradfrost.com/chapter-2/ （20180525） • Atoms • Molecules • Organisms • Templates • Pages …But atomic design is not rigid dogma. Ultimately, whatever taxonomy you choose to work with should help you and your organization communicate more effectively in order to craft an amazing UI design system. 引⽤：Atomic Design Methodology http://atomicdesign.bradfrost.com/chapter-2/ （20180525） “ ”
45. © 2018 Goodpatch Inc. All Right Reserved. 45 SketchでのComponentの構造 Material DesignΛ࣮ફ͢Δ Component Patterns Elements Foundation Color Typography Icon Image Elevation Grid System Spacing System
46. © 2018 Goodpatch Inc. All Right Reserved. 46 Componentの例: Material Components Material DesignΛ࣮ફ͢Δ App Bar Backdrop Banner Bottom Navigation Buttons Cards Chips Dialogs Divider FAB Icon Grids Icon Image Lists Image Treatments Images Keyboard List Menu Navigation Drawer Progress Indicators Scrollbar Selective Control Shadow Sheets Slider Snackbar System Bar Tab Test Text Field Tooltip 引⽤：Material Design https://material.io/design/components/app-bars- bottom.html （20180525）
47. © 2018 Goodpatch Inc. All Right Reserved. 47 Componentの例: iOS HIG Material DesignΛ࣮ફ͢Δ Bars Navigation Bars Search Bars Status Bars Tab Bars Toolbars Views Action Sheets Activity Views Alerts Collections Image Views Maps Pages Popovers Scroll Views Split Views Tables Text Views Web Views Controls Buttons Edit Menus Labels Page Controls Pickers Progress Indicators Refresh Content Controls Segmented Controls Sliders Steppers Switches Text Fields 引⽤：iOS Human Interface Guidelines https://developer.apple.com/ios/human-interface- guidelines/ （20180525）
48. © 2018 Goodpatch Inc. All Right Reserved. 48 Componentの例: 某案件 Material DesignΛ࣮ફ͢Δ Bars NavigationBar SearchBar StatusBar Tab TabBar Toolbar EntryBar ContentViews Card Carousel Divider Footnote GridList Image List Subheader Table MessageBubble Controls Button HomeIndicator Keyboard Menu PageControl Picker ProgressIndicator RefreshContentControl SegmentedControl Switch ModalViews ActionSheet ActivityView Alert BottomSheet Dialog
49. © 2018 Goodpatch Inc. All Right Reserved. 49 Component構造の例 Material DesignΛ࣮ફ͢Δ • Tabs • Patterns • Fixed Tabs • Scrollable Tabs • Elements • Text Tab • Icon Tab • Text & Icon Tab • Indicator
50. © 2018 Goodpatch Inc. All Right Reserved. 50 Component構造の例 Material DesignΛ࣮ફ͢Δ • Cards • Patterns • Multi-image • Title Top • with Chips • … • Elements • Title Block • Media • Action • Surface
51. © 2018 Goodpatch Inc. All Right Reserved. 51 DEMO
52. © 2018 Goodpatch Inc. All Right Reserved. 52 Gallery.io
53. © 2018 Goodpatch Inc. All Right Reserved. 53 DEMO
54. © 2018 Goodpatch Inc. All Right Reserved. 54 まとめ
55. © 2018 Goodpatch Inc. All Right Reserved. 55 今⽇話したこと まとめ Material Designを理解する Material Designを実践する
56. © 2018 Goodpatch Inc. All Right Reserved. 56 今⽇話したこと まとめ Material Designは UIの基礎が分かれば 誰でも美しいアプリが作れるため のデザインシステム
57. © 2018 Goodpatch Inc. All Right Reserved. 57 今⽇話したこと まとめ Color Typography Components
58. © 2018 Goodpatch Inc. All Right Reserved. 58 今⽇話したこと まとめ Component Patterns Elements Foundation Color Typography Icon Image Elevation Grid System Spacing System
59. © 2018 Goodpatch Inc. All Right Reserved. 59 One more thing まとめ Make good things together
60. © 2018 Goodpatch Inc. All Right Reserved. 60 ありがとうございました！