Material Design 守破離〜えこよみ編〜

Transcript

1. 1.

   Material Design 守破離 〜えこよみ編〜 Androidエンジニア デザイン部 #1 株式会社ノハナ 瀬戸優之 @seto_hi

2. 2.

   自己紹介 • 瀬戸優之 Seto HiroYUKI @seto_hi • Androidエンジニア & アプリデザイン

   • 株式会社ノハナ ◦ 一組でも多くの家族に笑顔を届ける ◦ 絶賛採用中 • Material Design大好き • 好きなAPIはCanvas#saveとViewGroup#layout
3. 3.

   2018/2/22

4. 4.

   2018/2/22 Release

5. 5.

   None
6. 6.

   えこよみ と Material Design

7. 7.

   ガイドラインを守れば 必ず 使いやすいのか

8. 8.

   ガイドラインを守れば 必ず 売れるのか

9. 9.

   そうとは言い切れない　

10. 10.

    もう少し発展が必要

11. 11.

    守破離

12. 12.

    守破離 守破離（しゅはり）は、日本での茶道、武道、芸術等における師弟 関係のあり方の一つ。 守：支援のもとに作業を遂行できる（半人前）。 　　～ 自律的に作業を遂行できる（1人前）。 破：作業を分析し改善・改良できる（1.5人前）。 離：新たな知識（技術）を開発できる（創造者）。 https://ja.wikipedia.org/wiki/%E5%AE%88%E7%A0%B4%E9%9B%A2

13. 13.

    Material Designと守破離 守：ガイドラインを覚える 　　ガイドラインを厳密に守る 破：ガイドラインの意図を理解して 　　ガイドラインにないコンポーネントの作成 離：既存のガイドラインを破る 　　新たなガイドラインの作成

14. 14.

    Material Design 守破離 〜えこよみ編〜

15. 15.

    守

16. 16.

    守

17. 17.

    守

18. 18.

    守

19. 19.

    守

20. 20.

    守

21. 21.

    守 • 大前提：Material Designは素晴らしいガイドライン • ガイドラインを忠実に守った設計 ◦ 8dpのgrid ◦ Shadow

    & Elevation ◦ Accent ColorとPrimary Color • 重要でない画面には有用 ◦ 工数削減 ▪ エンジニアもデザイナーも
22. 22.

    破

23. 23.

    破

24. 24.

    破：CardViewの使い方 • CardViewのレイアウト ◦ 画像比率 • トップ画面をエモくしたい ◦ カードを作らなくても使われるアプリが理想 •

    ポストカードの画像を有効活用する ◦ フォトブックアプリでも同様のアプローチ • 思い出は個別事象なのでリストでなくカード
25. 25.

    破

26. 26.

    破：中央ボタン • カードの裏表を切り替えるボタン • 独自Viewコンポーネント • 左右と時間軸の話 ◦ FABはなぜ画面右下か http://seto-hi.hatenablog.com/entry/2017/12/04/084404

    ▪ 左が過去・否定、右が未来、肯定 • 否定でも肯定でもない、そこそこ重要なボタン ◦ 画面中央に白ベースでFloating • まだ改善点がある
27. 27.

    破：Progress • Progress Dialogがひとつもない(守) ◦ 全画面でProgressBar表示も2カ所だけ • ボタンと円形Progressの切り替え • まだ改善点がある

    ◦ チラつき、連続性など
28. 28.

    離

29. 29.

    離

30. 30.

    離：プレビュー画面 • 現実世界を意識させた画面 ◦ ポストカードを買ってもらうためのアプリ ◦ Material Designの世界だけでは不十分 ◦ 背景、影、サイズなど調整

    • 「バーンとエモくしてください」 ◦ ランディングページ、GooglePlayと共通の背景、配色 • まだまだ発展途上
31. 31.

    エンジニアは デザインに どのように 向き合うか

32. 32.

    エンジニアが武器にする Material Design (p13~) https://speakerdeck.com/seto_hi/enziniagawu-qi-nisurumaterial-design

33. 33.

    実装 • 実装できるものを増やす • Viewの実装に関する知識 ◦ どんなViewコンポーネントがある ◦ 描画、レイアウト、アニメーション •

    逆引きで実装できるようになる ◦ 「◦◦したら××になる」ではなく 「××を実現するのには◦◦したら良い」という知識 ◦ 実現力
34. 34.

    カスタムViewの勘所 • Drawable ◦ LayerDrawable、GradientDrawable • アニメーション ◦ beginDelayedTransition +

    Transition(ChangeBounds, Fade, Slide) ◦ ValueAnimator, ObjectAnimator, StateListAnimator • Canvas ◦ clipPath, translate, rotate, scale ◦ save, restoreToCount
35. 35.

    オススメの実装資料 • Android Support Libraryのコード ◦ 特にdesignライブラリ

36. 36.

    オススメの資料(Animation系) • サポートライブラリを支える技術 ◦ http://yaraki.github.io/slides/gdg-kobe-2016q3 • 動かす ◦ http://yaraki.github.io/slides/devfest-kansai-2016 •

    In transition ◦ https://goo.gl/photos/puv99eA7nz98Nkku9 • How to implement material design animation ◦ https://speakerdeck.com/takahirom/how-to-implement-material-design-animation
37. 37.

    デザインへの貢献 • デザインの実現可能性の判断 ◦ 工数の見積もり ▪ 工数は守＜破＜離 ▪ エンジニアがデザインをやると 画面設計と工数見積もりが同時にできる

    ◦ 理想と妥協点の折り合い ▪ デザインの意図のくみ取り ▪ 実現可能なUIを提案 • Viewの知識がプロダクトの効率を高める！
38. 38.

    まとめ • ガイドラインと守破離 ◦ 守：記憶・実践 ◦ 破：理解・応用 ◦ 離：独立 •

    エンジニアは実装の知識で貢献 ◦ 実現可能性の判断 ◦ 実装工数
39. 39.

    以上