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
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
130
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
240
Swift Concurrency - 状態監視の罠
objectiveaudio
2
460
CSC305 Lecture 02
javiergs
PRO
1
260
実践AIチャットボットUI実装入門
syumai
7
2.5k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
開発生産性を上げるための生成AI活用術
starfish719
1
180
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
Advance Your Career with Open Source
ivargrimstad
0
350
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Building an army of robots
kneath
306
46k
Fireside Chat
paigeccino
40
3.7k
How to train your dragon (web standard)
notwaldorf
96
6.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Into the Great Unknown - MozCon
thekraken
40
2.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Become a Pro
speakerdeck
PRO
29
5.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Docker and Python
trallard
46
3.6k
The Pragmatic Product Professional
lauravandoore
36
6.9k
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