M3 Expressiveの思想に迫る

Transcript

1. Notchy (@chnotchy) M3 Expressiveの思想に迫る
2. M3 Expressiveって？ 0 Googleの Material Design $ 0 略してM$ 0 M3が更新された
3. DeNA 25卒 エンジニア職　Notchy（のっちー） Y 技c Y モバイル（Flutter, AndroidF Y webフロントエン) Y 趣6 Y アプリ開発，デザイン @chnotchy @chnotchy
4. M3 Expressiveの概要 アップデート内容 Material Designの思想 デザインシステムへの向き合い方 実機デモ
5. M3 Expressiveの概要
6. GoogleのMaterial DesigÄ Â M1 〜 M3 M3 Expressiveの概要
7. M1 M3 Expressiveの概要
8. M1 M3 Expressiveの概要
9. M2 M3 Expressiveの概要
10. M2 M3 Expressiveの概要
11. M3 M3 Expressiveの概要
12. M3 M3 Expressiveの概要
13. 4 Material Designを何度も大幅に更$ 4 現在M3が最$ 4 ドキュメントが詳細に書かれてい 4 カラーシステÅ 4 コントラスト比を維持したデザイン M3 Expressiveの概要
14. M3 Expressive M3 Expressiveの概要
15. M3 Expressive M3 Expressiveの概要
16. アップデート内容
17. アップデート内容
18. ' App bard ' Carouse( ' Common buttond ' Extended FA ' FABd ' Icon buttond ' Navigation bar ' Navigation rai( ' Progress indicators アップデート内容
19. App bar A Top App Bar → App Ba7 A Search App Bar追 A Medium, Largeはそれぞれ
 Medium flexible, Large flexibleに アップデート内容
20. Carouseà  変更点不明... アップデート内容
21. Common buttonQ H サイズ：5種類のサイ3 H Extra small ~ Extra larg! H 形：Round, Squar! H Toggle buttonの選択/非選 H 余白：より小さい余A H 16dp paddingが推奨に アップデート内容
22. Extended FAW  サイズ：3種類のサイC  Small, Medium, Largu  今までのデフォルトサイズは、 ExpressiveのSmallに該)  Surface extended FAB非推@  今まではSurfaceのオプション も選択可能だったが、非推奨に アップデート内容
23. FABd  サイズ：Small削除、Medium追7  Small FAB → 非推奨H  FAB → デフォルト、変化な&  Medium FAB → 新規追7  Large FAB → 変化な&  Surface FAB非推"  今まではSurfaceのオプション も選択可能だったが、非推奨に アップデート内容
24. Icon buttonb  サイズ：5種類のサイC  XS, S (default), M, L, X$  XS, M, L, XLが追#  形：Round, Squar3  トグルの選択/非選S  幅：3種類のサイC  Narrow, Default, Wid3  Google Meetではすでに利用 アップデート内容
25. Navigation bat a 横幅に応じてレイアウト変9 a Flexible navigation bat a デフォルト：Vertica3 a 中サイズのとき、
 Horizontal（ラベルがアイコ ンの横に@ a 今までのNavigation barは
 非推奨となる予Q a アクティブラベルの色変9 a on-surface-variant→secondary アップデート内容
26. Navigation raix 1 今までのNavigation railは非推奨と なる予X 1 横幅に応じてレイアウト変) 1 Collapsed（デフォルト9 1 今までより横幅 1 Expande$ 1 Navigation drawerの代わり
 nav drawerは非推奨予X 1 アクティブラベルの色変) 1 on-surface-variant→secondary アップデート内容
27. Progress indicator8 6 track（線）の太さ設定可能) 6 形状：2種 6 Flat（defaultE 6 WavÈ 6 新たに追% 6 アニメーションさせること も可能 アップデート内容
28. 新しいコンポーネン0 1 Button groupsH 1 FAB menuH 1 Loading indicatorH 1 Split buttonH 1 Toolbars アップデート内容
29. Button groupsQ 8 Standard button grou9 8 単にボタンを横に並べたもH 8 Connected button grou9 8 ボタン同士が密 8 Segmented buttonは非推 8 サイズ・形の種類はボタン同Ä 8 サイズ：XS ~ XÃ 8 形：Round, Square アップデート内容
30. FAB menuP ' FAB押下時にオプションを持たせ たい場合に使 ' 今まではSmall FABを
 表示してい# ' Small FABが非推奨になり、
 FAB menuが新たに追加された アップデート内容
31. Loading indicatorx c 今までのCircular progress indicatorに代わって使 c pull-to-refresh時な2 c ドキュメントには以下の通り記 c 〜200ms：即座に表Ç c 200ms〜5s：loading indicatoR c 5秒〜：progress indicatoR c ただし、途中でloadingとprogress を切り替えることは避けるべき アップデート内容
32. Split buttonQ 0 通常のボタンに、オプションを追 加できるようにしたも5 0 サイズ：5種類のサイG 0 Extra small, Small, Medium, Large, Extra large アップデート内容
33. Toolbars8 ) Bottom app barに代わって使# ) Bottom app barは非推! ) 2種 ) Docked toolbaG ) 色々なボタンを配置可 ) Floating toolbaG ) Standard, VerticaI ) 横にFABを配置可能 アップデート内容
34. Material Designの思想
35. Googleデザインリサーチについての驚きの記事
36. C 調D C 数百のデザインを対象とした46の調D C 18,000人以上の参加0 C 美しくかつ非常に使いやすいシステムを微調 整してきた デザインリサーチについて
37. c アプリの操作は若年層ほど速い傾向にあ8 c デザインを改W c （操作時間は明記されてないが）少なく ともボタンとかを認識する時間があらゆ る年齢層で短È c 45歳以上でも若い人と同じくらいの時間 で認識できるようになった デザインリサーチについて
38. デザインリサーチについて
39. デザインリサーチについて
40. デザインリサーチについて
41. デザインリサーチについて
42. デザインリサーチについて
43. A カスタマイズの余地を残 A 調査結果をベースにデザインシステムを決É A 使いにくいものは非推奨にして更新する Material Designの思想
44. デザインシステムへの向き合い方
45. 9 客観8 9 実際のユーザーの反応をベースにす 9 単なる見た目の美しさや、
 デザイナーのこだわりにとらわれない デザインシステムへの向き合い方
46.  既存のアセットにとらわれな1  調査の結果、使いにくいとわかったら
 容赦なく改善す!  デザイナー的には、自分のデザインを
 消すのには勇気がいるはÆ  エンジニア的にも工数が増えて大変 デザインシステムへの向き合い方
47. 実機デモ
48. Composeで書いて
 実際に動かす 実機デモ
49. ご清聴ありがとうございました