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

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

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
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. 以上