Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Material Design 守破離〜えこよみ編〜
Search
HiroYUKI Seto
March 28, 2018
Programming
5
1.5k
Material Design 守破離〜えこよみ編〜
2018/3/28
Androidエンジニア デザイン部 #1
HiroYUKI Seto
March 28, 2018
Tweet
Share
More Decks by HiroYUKI Seto
See All by HiroYUKI Seto
Androidアプリの 安全なリファクタリングを行うパターン集
seto_hi
2
4.9k
UI TestやVisual Regression Testを コスパ良くやる
seto_hi
3
1.9k
事業支援というお仕事
seto_hi
0
420
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
410
Jetpack Compose
seto_hi
2
790
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.7k
MDCのButtonのCorner Family
seto_hi
1
200
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
990
Other Decks in Programming
See All in Programming
理論と実務のギャップを超える
eycjur
0
170
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
780
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
CSC305 Lecture 08
javiergs
PRO
0
270
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
620
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
4
130
What's new in Spring Modulith?
olivergierke
1
160
モテるデスク環境
mozumasu
3
1k
One Enishi After Another
snoozer05
PRO
0
150
Software Architecture
hschwentner
6
2.3k
CSC509 Lecture 07
javiergs
PRO
0
240
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
16
6.6k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
Why Our Code Smells
bkeepers
PRO
340
57k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Facilitating Awesome Meetings
lara
57
6.6k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Transcript
Material Design 守破離 〜えこよみ編〜 Androidエンジニア デザイン部 #1 株式会社ノハナ 瀬戸優之 @seto_hi
自己紹介 • 瀬戸優之 Seto HiroYUKI @seto_hi • Androidエンジニア & アプリデザイン
• 株式会社ノハナ ◦ 一組でも多くの家族に笑顔を届ける ◦ 絶賛採用中 • Material Design大好き • 好きなAPIはCanvas#saveとViewGroup#layout
2018/2/22
2018/2/22 Release
None
えこよみ と Material Design
ガイドラインを守れば 必ず 使いやすいのか
ガイドラインを守れば 必ず 売れるのか
そうとは言い切れない
もう少し発展が必要
守破離
守破離 守破離(しゅはり)は、日本での茶道、武道、芸術等における師弟 関係のあり方の一つ。 守:支援のもとに作業を遂行できる(半人前)。 ~ 自律的に作業を遂行できる(1人前)。 破:作業を分析し改善・改良できる(1.5人前)。 離:新たな知識(技術)を開発できる(創造者)。 https://ja.wikipedia.org/wiki/%E5%AE%88%E7%A0%B4%E9%9B%A2
Material Designと守破離 守:ガイドラインを覚える ガイドラインを厳密に守る 破:ガイドラインの意図を理解して ガイドラインにないコンポーネントの作成 離:既存のガイドラインを破る 新たなガイドラインの作成
Material Design 守破離 〜えこよみ編〜
守
守
守
守
守
守
守 • 大前提:Material Designは素晴らしいガイドライン • ガイドラインを忠実に守った設計 ◦ 8dpのgrid ◦ Shadow
& Elevation ◦ Accent ColorとPrimary Color • 重要でない画面には有用 ◦ 工数削減 ▪ エンジニアもデザイナーも
破
破
破:CardViewの使い方 • CardViewのレイアウト ◦ 画像比率 • トップ画面をエモくしたい ◦ カードを作らなくても使われるアプリが理想 •
ポストカードの画像を有効活用する ◦ フォトブックアプリでも同様のアプローチ • 思い出は個別事象なのでリストでなくカード
破
破:中央ボタン • カードの裏表を切り替えるボタン • 独自Viewコンポーネント • 左右と時間軸の話 ◦ FABはなぜ画面右下か http://seto-hi.hatenablog.com/entry/2017/12/04/084404
▪ 左が過去・否定、右が未来、肯定 • 否定でも肯定でもない、そこそこ重要なボタン ◦ 画面中央に白ベースでFloating • まだ改善点がある
破:Progress • Progress Dialogがひとつもない(守) ◦ 全画面でProgressBar表示も2カ所だけ • ボタンと円形Progressの切り替え • まだ改善点がある
◦ チラつき、連続性など
離
離
離:プレビュー画面 • 現実世界を意識させた画面 ◦ ポストカードを買ってもらうためのアプリ ◦ Material Designの世界だけでは不十分 ◦ 背景、影、サイズなど調整
• 「バーンとエモくしてください」 ◦ ランディングページ、GooglePlayと共通の背景、配色 • まだまだ発展途上
エンジニアは デザインに どのように 向き合うか
エンジニアが武器にする Material Design (p13~) https://speakerdeck.com/seto_hi/enziniagawu-qi-nisurumaterial-design
実装 • 実装できるものを増やす • Viewの実装に関する知識 ◦ どんなViewコンポーネントがある ◦ 描画、レイアウト、アニメーション •
逆引きで実装できるようになる ◦ 「◦◦したら××になる」ではなく 「××を実現するのには◦◦したら良い」という知識 ◦ 実現力
カスタムViewの勘所 • Drawable ◦ LayerDrawable、GradientDrawable • アニメーション ◦ beginDelayedTransition +
Transition(ChangeBounds, Fade, Slide) ◦ ValueAnimator, ObjectAnimator, StateListAnimator • Canvas ◦ clipPath, translate, rotate, scale ◦ save, restoreToCount
オススメの実装資料 • Android Support Libraryのコード ◦ 特にdesignライブラリ
オススメの資料(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
デザインへの貢献 • デザインの実現可能性の判断 ◦ 工数の見積もり ▪ 工数は守<破<離 ▪ エンジニアがデザインをやると 画面設計と工数見積もりが同時にできる
◦ 理想と妥協点の折り合い ▪ デザインの意図のくみ取り ▪ 実現可能なUIを提案 • Viewの知識がプロダクトの効率を高める!
まとめ • ガイドラインと守破離 ◦ 守:記憶・実践 ◦ 破:理解・応用 ◦ 離:独立 •
エンジニアは実装の知識で貢献 ◦ 実現可能性の判断 ◦ 実装工数
以上