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
710
Rx and Preferences
hotchemi
2
150
Introducing PermissionsDispatcher
hotchemi
1
140
Other Decks in Programming
See All in Programming
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
660
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
260
Boost Your Web Performance with Hyperdrive
chimame
1
130
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
330
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
GoとPHPのインターフェイスの違い
shimabox
2
220
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
760
オレを救った Cline を紹介する
codehex
15
14k
自力でTTSモデルを作った話
zgock999
0
130
PEPCは何を変えようとしていたのか
ken7253
3
320
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
170
React 19アップデートのために必要なこと
uhyo
8
1.6k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The Cult of Friendly URLs
andyhume
78
6.2k
Thoughts on Productivity
jonyablonski
69
4.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Side Projects
sachag
452
42k
What's in a price? How to price your products and services
michaelherold
244
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
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