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

Transcript

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

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

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

3. 2018/2/22

4. 2018/2/22 Release

5. None

6. えこよみ と Material Design

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

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

9. そうとは言い切れない　

10. もう少し発展が必要

11. 守破離

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

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

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

15. 守

16. 守

17. 守

18. 守

19. 守

20. 守

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

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

22. 破

23. 破

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

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

25. 破

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

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

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

    ◦ チラつき、連続性など

28. 離

29. 離

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

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

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

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

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

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

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

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

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

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

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

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

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

39. 以上