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

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

2018/3/28
Androidエンジニア デザイン部 #1

Ad449f3f4e595ade283a30c4f66010be?s=128

HiroYUKI Seto

March 28, 2018
Tweet

Transcript

  1. 2.

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

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

  5. 16.

  6. 17.

  7. 18.

  8. 19.

  9. 20.

  10. 21.

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

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

  12. 23.

  13. 24.

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

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

  15. 26.

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

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

  17. 29.

  18. 30.

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

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

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

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

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

    Transition(ChangeBounds, Fade, Slide) ◦ ValueAnimator, ObjectAnimator, StateListAnimator • Canvas ◦ clipPath, translate, rotate, scale ◦ save, restoreToCount
  21. 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
  22. 37.

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

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

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

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