2020-8-22 Zil✖️エキサイト LT

Transcript

1. Material Design のススメ 2020/8/26 Zil✖エキサイト合同LT
2. 自己紹介 広瀬 元周(MOTCCi) 会津大学B3 ・Androidアプリ開発に関連した技術を勉強中 Kotlinやアーキテクチャ,UIデザインなど ・趣味はサイクリング,スキー,映画観賞など 最近公開された「TENET」が気になる
3. Material Designとは Googleのプラットフォーム上で他のアプリを操作性を保ちつつ 利用できるデザインとして誕生 誰もが,どのデバイスでも使えて,表現したいブランドや アイデンティティを最大限引き出せることが目標
4. Material Designとは 3つの基本原則 ”Material is the metaphor” … 物質的である ”Bold, graphic, intentional” … 適切なデザインの使用 ”Motion provides meaning” … 動作が自然
5. Material Designとは デザインの例
6. https://material.io/design/ 　 色のヒエラルキー 重要な色 ほど濃い
7. https://material.io/design/ 要素の境界 奥行きで 区別 透明度で 区別 色の違いで 区別
8. https://material.io/design/ 重要度　①　→　②　→　③　 実例① ボタン
9. https://material.io/design/ 重要度の順番に 従ってる 同じ重要度で並べて はいけない 実例① ボタン
10. 実例② FAB 良い例 何かを追加しそうかも .... https://material.io/design/ ※FAB FloatongActionButton
11. 実例② FABボタン 悪い例 何を表しているか わかりづらい.... 文字は入れては いけない... https://material.io/design/
12. 実例③ CardView 仕切りがなくて わかりづらい....
13. おわりに Material Designはユーザーにとって自然なものであ り、一貫した操作性を実現できる AndroidやiOSでも取り入れているアプリは多いので ガイドラインから外れることは望ましくない
14. より詳しく MaterialDesignの設計思想を探る https://note.com/usagimaruma/n/nb22f1bbca4c8 デザインと品質 https://developer.android.com/design?hl=ja MaterialDesign公式 https://material.io/develop/
15. 試してみる Google Codelab https://codelabs.developers.google.com/ でMDCと検索すると、Kotlin,Swift,Web,Flutter等で マテリアルデザインのコーディングが体験できます
16. ありがとう ございました！ Twitter ＠motcci Github motochika1 icon