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
250
The things we’ve learned from iOS×React Native hybrid development
hotchemi
2
5.2k
React Nativeを活用したアプリ開発体制/sapuri meetup
hotchemi
3
7.9k
Type-Safe i18n on RN
hotchemi
2
1.2k
Navigation in a hybrid app
hotchemi
3
1.3k
PermissionsDispatcher × Kotlin
hotchemi
0
3.1k
kotlin compiler plugin
hotchemi
1
750
Rx and Preferences
hotchemi
2
150
Introducing PermissionsDispatcher
hotchemi
1
150
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
1
550
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
プログラマのための作曲入門
cheebow
0
510
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
1
380
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
2
300
dynamic!
moro
9
5.2k
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
280
TokyoR#119 bignners session2 Visualization
kotatyamtema
0
130
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
230
クラシルを支える技術と組織
rakutek
0
190
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Building Adaptive Systems
keathley
43
2.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
How to train your dragon (web standard)
notwaldorf
96
6.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
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