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

by Hanhsiang Tsai

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

© 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） “ ”

Slide 6

Slide 6 text

© 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） “ ”

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

© 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 • …

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

© 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

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

© 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

Slide 24

Slide 24 text

© 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

Slide 25

Slide 25 text

© 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

Slide 26

Slide 26 text

© 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 • ৭ͷಁ໌౓Λ࢖͏

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

© 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

Slide 32

Slide 32 text

© 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

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

© 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

Slide 36

Slide 36 text

Slide 37

Slide 37 text

© 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）

Slide 38

Slide 38 text

© 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ͷௐ੔͕ඞཁ

Slide 39

Slide 39 text

Slide 40

Slide 40 text

© 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

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

© 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

Slide 44

Slide 44 text

© 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） “ ”

Slide 45

Slide 45 text

Slide 46

Slide 46 text

© 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）

Slide 47

Slide 47 text

© 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）

Slide 48

Slide 48 text

© 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