Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
7分で分かるMaterial Design
@hotchemi
August 01, 2014
Programming
0
1k
7分で分かるMaterial Design
Fabric寿司
@hotchemi
August 01, 2014
Tweet
Share
More Decks by @hotchemi
See All by @hotchemi
kompile-testing internal
hotchemi
0
210
The things we’ve learned from iOS×React Native hybrid development
hotchemi
2
4.3k
React Nativeを活用したアプリ開発体制/sapuri meetup
hotchemi
3
6.9k
Type-Safe i18n on RN
hotchemi
2
850
Navigation in a hybrid app
hotchemi
3
990
PermissionsDispatcher × Kotlin
hotchemi
0
1.9k
kotlin compiler plugin
hotchemi
1
530
Rx and Preferences
hotchemi
2
130
Introducing PermissionsDispatcher
hotchemi
1
110
Other Decks in Programming
See All in Programming
レビュー駆動学習のススメ_StaPy#83
soogie
0
320
Getting Started With Data Structures
adoranwodo
1
270
ExplainableAIの概要とAmazon SageMaker Clarifyでの実装例
hacarus
0
110
SAM × Dockerでサーバーレス開発が超捗った話
yu_yukk_y
1
420
ベストプラクティス・ドリフト
sssssssssssshhhhhhhhhh
1
220
SwiftUIで「意図」を伝える / swiftui_intention
uhooi
2
150
SRE NEXT 2022に学ぶこれからのSREキャリア
fukubaka0825
2
400
Pythonで鉄道指向プログラミング
usabarashi
0
130
RustのWebフレームワーク周りの概観
hayao
0
180
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
390
回帰分析ではlm()ではなくestimatr::lm_robust()を使おう / TokyoR100
dropout009
0
4.6k
How to Test Your Compose UI (Droidcon Berlin 2022)
stewemetal
1
130
Featured
See All Featured
Code Review Best Practice
trishagee
44
9.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
223
49k
Navigating Team Friction
lara
175
11k
How to name files
jennybc
40
63k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
A better future with KSS
kneath
226
16k
Why Our Code Smells
bkeepers
PRO
324
55k
Pencils Down: Stop Designing & Start Developing
hursman
113
9.9k
Adopting Sorbet at Scale
ufuk
63
7.6k
Product Roadmaps are Hard
iamctodd
35
6.9k
What the flash - Photography Introduction
edds
63
10k
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