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
7分で分かるMaterial Design
Search
@hotchemi
August 01, 2014
Programming
0
1.1k
7分で分かるMaterial Design
Fabric寿司
@hotchemi
August 01, 2014
Tweet
Share
More Decks by @hotchemi
See All by @hotchemi
kompile-testing internal
hotchemi
0
230
The things we’ve learned from iOS×React Native hybrid development
hotchemi
2
5.1k
React Nativeを活用したアプリ開発体制/sapuri meetup
hotchemi
3
7.8k
Type-Safe i18n on RN
hotchemi
2
1.1k
Navigation in a hybrid app
hotchemi
3
1.2k
PermissionsDispatcher × Kotlin
hotchemi
0
2.9k
kotlin compiler plugin
hotchemi
1
700
Rx and Preferences
hotchemi
2
150
Introducing PermissionsDispatcher
hotchemi
1
140
Other Decks in Programming
See All in Programming
CloudNativePGを布教したい
nnaka2992
0
110
PRレビューのお供にDanger
stoticdev
1
230
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
110
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
190
GoとPHPのインターフェイスの違い
shimabox
2
210
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
0
130
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.2k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
54
19k
color-scheme: light dark; を完全に理解する
uhyo
7
490
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Automating Front-end Workflow
addyosmani
1368
200k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building an army of robots
kneath
303
45k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
Producing Creativity
orderedlist
PRO
344
40k
Fireside Chat
paigeccino
34
3.2k
What's in a price? How to price your products and services
michaelherold
244
12k
Done Done
chrislema
182
16k
Speed Design
sergeychernyshev
27
810
Transcript
7Ͱ͔ΔMaterial Design
•id: hotchemi •Android Developer •Recruit Technologies Co.,Ltd.
ࠓ͢ࣄ
Material Design
Material Design • ଟ༷ͳϓϥοτϑΥʔϜɾσόΠεαΠζؒͰ౷Ұײͷ͋ΔମݧΛఏڙ! • Ϣʔβʔ͕ࠞཚ͠ͳ͍ɼʹεοͱೖͬͯ͘ΔσβΠϯ! • ϚςϦΞϧ(࣭త)ΛϝλϑΝʔͱͨ͠Visual Language(ࢹ֮ݴޠ)! •
Χϥϑϧ͔ͭγϯϓϧɻ༨നΛॏࢹ www.google.com/design
• Androidʹཹ·Βͳ͍Googleͷ౷ҰతσβΠϯϓϥοτϑΥʔϜ! • WebͰPolymerͱ͍͏Web Components͕ఏڙ͞ΕΔ! • Matias Duarte͕ݗҾ! • ಛ!
• Shadow! • Touch Feedback! • Animation! • Transitions Material Design
• Card Style • Shadow • Touch feedback What is
Material Design
• Ripple() Animation What is Material Design
• Activity Transitions • Automatic defaults, but customizable What is
Material Design
• Material DesignϚϧνϓϥοτϑΥʔϜɼϚϧνσόΠε! • Android WearɺAndroid AutoɺAndroid TVͳͲͷ֤छϓϥοτϑΥʔϜΛܨ͙! • খ͞ͳը໘Ͱѻ͏Android
WearʹɺंͷӡసʹҙྗͷେΛ͍͔࣋ͬͯΕΔ Android AutoͰϢʔβҰͭͷίϯςΩετΛ͍ͬͯΔ͚ͩͰૢ࡞Ͱ͖Δ! • Android of ThingsΛࢧ͑Δҝͷ౷ҰతσβΠϯΨΠυϥΠϯ Why Material Design
Material Design vs Flat Design • ϑϥοτσβΠϯͷతࢹ֮తͳࠞཚΛऔΓআ͘͜ͱ! • ͔͠͠ӨͷΑ͏ͳεΫϦʔϯΛૢ࡞͘͢͢͠ΔͨΊͷσΟςʔϧऔΓڈΒΕͯ͠ ·ͬͨ!
• Material DesignͰɺϐΫηϧ৭ͱਂ͞Λ͍࣋ͬͯΔ! • Material Design੩ࢭըͰݟΔͱϑϥοτσβΠϯͱࣅ͍ͯΔ͕ࢥ͍৺ҟ ͳ͍ͬͯΔ
• ίϯςΩετΛ౷Ұ͢ΔࣄͰϢʔβʔͷࠞཚΛ࠷খݶʹͰ͖Δ! • དྷΔ͖ΣΞϥϒϧ࣌Λݟӽ͓͍ͤͬͯͯଛͳ͍ͣ! • Androidඪ४ͷύʔπΛ༻͢ΔࣄͰ࣮ίετΛݮͰ͖Δ! • Google PlayͰϑΟʔνϟʔ͞Ε͘͢ͳΔʂʂʂ DeveloperͷӨڹ
ϝϦοτ σϝϦοτ • OSຖʹ࠷దԽ͞ΕͨUIΛߟ͑Δͷେม…
• Material DesignGoogleͷAndroid of thingsઓུΛࢧ͑ΔΞΩϨε伳! • ϑϥοτσβΠϯͱҰݟࣅ͍ͯΔ͕ͦͷࢥɼ͍উखҟͳΔ! • ಠࣗUIΛ࡞Γ͜ΉΑΓϓϥοτϑΥʔϜʹͬͨํ͕ྑ͍ࣄ͕͋Δ! •
Կͱ͋Ε www.google.com/design/ Λಡ͏ʂ! • ΤϯδχΞσβΠϯͷࣄΛ͍ͬͯͳ͍ͱݫ͍͠͠ɺσβΠφʔίʔυΛॻ࣌͘ ʹͳ͖͍ͬͯͯΔ ·ͱΊ
L Developer Preview
L Developer Preview • Android্࢙ॳΊͯDeveloper Previewମ੍ʹҠߦɻ! • ࢢʹग़Δͷఔޙʁ! • 5000Λ͑ΔAPI͕Ճɻ!
• Lollipopʁ
• android:Theme.Material͕ ఏڙ։࢝ • ActionBarStatusBarͷ৭ ΛมߋՄೳʹ Material Theme
Material Theme
• શͯͷViewʹZ propertyΛՃɻӨΛࢦఆͰ͖ΔΑ͏ʹ Material Theme
Animation • λονΠϕϯτʹԠ͢Δλον ϑΟʔυόοΫΞχϝʔγϣϯ • ϏϡʔͷදࣔɾඇදࣔΛ͔Γ ͘͢͢ΔΞχϝʔγϣϯ • ΞΫςΟϏςΟΛભҠ͢Δͱ͖ͷ Ξχϝʔγϣϯ
• Circular Reveal Animation
• Path Tracing Animation
Palette • android-support-v7-palette • ը૾ͷBitMap͔ΒΧϥʔύϨοτΛੜ
Dynamic palette
• ਐԽͷํੑଥ͕ͩݱஈ֊ͰޓੑΛอ͍ͬͯΔͷଟ͘ͳ͍ • ͱ͍͑σβΠϯΨΠυϥΠϯΛॱक͢ΔͳͲࠓ͙͢Ͱ͖Δࣄ͋Δʂ • support-v7ʹೖ͍ͬͯΔCardView, PaletteลΓʹ ॴײ
͓·͚ɿࠓ͙͢Ͱ͖ΔMaterial Design
࠷ޙʹ No more ࣜUI