Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Ad449f3f4e595ade283a30c4f66010be?s=128

HiroYUKI Seto

March 28, 2018
Tweet

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. 守 • 大前提:Material Designは素晴らしいガイドライン • ガイドラインを忠実に守った設計 ◦ 8dpのgrid ◦ Shadow

    & Elevation ◦ Accent ColorとPrimary Color • 重要でない画面には有用 ◦ 工数削減 ▪ エンジニアもデザイナーも
  16. 破:CardViewの使い方 • CardViewのレイアウト ◦ 画像比率 • トップ画面をエモくしたい ◦ カードを作らなくても使われるアプリが理想 •

    ポストカードの画像を有効活用する ◦ フォトブックアプリでも同様のアプローチ • 思い出は個別事象なのでリストでなくカード
  17. 破:中央ボタン • カードの裏表を切り替えるボタン • 独自Viewコンポーネント • 左右と時間軸の話 ◦ FABはなぜ画面右下か http://seto-hi.hatenablog.com/entry/2017/12/04/084404

    ▪ 左が過去・否定、右が未来、肯定 • 否定でも肯定でもない、そこそこ重要なボタン ◦ 画面中央に白ベースでFloating • まだ改善点がある
  18. 破:Progress • Progress Dialogがひとつもない(守) ◦ 全画面でProgressBar表示も2カ所だけ • ボタンと円形Progressの切り替え • まだ改善点がある

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

    • 「バーンとエモくしてください」 ◦ ランディングページ、GooglePlayと共通の背景、配色 • まだまだ発展途上
  20. エンジニアは デザインに どのように 向き合うか

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

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

    逆引きで実装できるようになる ◦ 「◦◦したら××になる」ではなく 「××を実現するのには◦◦したら良い」という知識 ◦ 実現力
  23. カスタムViewの勘所 • Drawable ◦ LayerDrawable、GradientDrawable • アニメーション ◦ beginDelayedTransition +

    Transition(ChangeBounds, Fade, Slide) ◦ ValueAnimator, ObjectAnimator, StateListAnimator • Canvas ◦ clipPath, translate, rotate, scale ◦ save, restoreToCount
  24. オススメの実装資料 • Android Support Libraryのコード ◦ 特にdesignライブラリ

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

    ◦ 理想と妥協点の折り合い ▪ デザインの意図のくみ取り ▪ 実現可能なUIを提案 • Viewの知識がプロダクトの効率を高める!
  27. まとめ • ガイドラインと守破離 ◦ 守:記憶・実践 ◦ 破:理解・応用 ◦ 離:独立 •

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