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
Material Design Guideline: Bottom components
Search
takuaraki
August 01, 2017
Design
0
460
Material Design Guideline: Bottom components
マテリアルデザインガイドライン輪読会 #1(
https://connpass.com/event/62761/
) 用のスライドです。
takuaraki
August 01, 2017
Tweet
Share
More Decks by takuaraki
See All by takuaraki
2021/02/03 発覚の COCOA Android版 不具合について
takuaraki
0
46
Androidアプリ内課金のテスト
takuaraki
0
400
GASでSlackBot
takuaraki
1
470
Material Design Guideline: Dialogs, Dividers
takuaraki
0
360
App Shortcuts
takuaraki
0
320
[関モバ#18] SQLBrite&SQLDelight
takuaraki
0
400
A/B testing GTM&GA vs Firebase
takuaraki
1
2.9k
【関モバ#12】Google Tag ManagerでモバイルアプリのABテストをする
takuaraki
1
580
Other Decks in Design
See All in Design
DMMデザイナーのプロダクトへの携わり方と組織再編
takumasaito
1
350
我做了一個詐騙網站...嗎?
crboy
1
130
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
120
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
530
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
470
accfes2024_torque_yamasaki
yuuyamasakiyuu
2
770
PdMを始めたUIデザイナーのリアルな課題
muture
0
730
Tuzukuru解説ブック
atsumaru1377
0
300
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
4
3.7k
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
260
Breaking News on the Web
souvikdg
0
660
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
2.3k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
201
24k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
How to train your dragon (web standard)
notwaldorf
85
5.6k
It's Worth the Effort
3n
182
27k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
A better future with KSS
kneath
235
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Transcript
Bottom components components.pdf p1~38
@ara_tack
ࢿྉʹ͍ͭͯ • ࣸܦଟΊ • ࣗͳΓͷղऍΛͨ͠ͱ͜Ζʹ ? ͱ͚ͭͯ ͋Δ • ࢿྉʹσβΠϯྗͳ͍
components.pdf p1~39 • Լ෦ͷφϏήʔγϣϯ (Bottom navigation) • ఈ෦γʔτ (Bottom sheets)
• Ӭଓఈ෦γʔτ (Persistent Bottom Sheets) • Ϟʔμϧఈ෦γʔτ (Modal bottom sheets)
Bottom navigation
Bottom navigation Լ෦ͷφϏήʔγϣϯόʔɺճλοϓ͢Δ ͚ͩͰ࠷্ҐͷϏϡʔΛΓସ͑ͯ؆୯ʹ୳ࡧ Ͱ͖ΔΑ͏ʹ͢ΔͷͰ͢ɻ components p1
Bottom navigation • ؔ࿈͢ΔϏϡʔʹ Ҡಈ͢Δ • ݱࡏͷΞΫςΟϒϏϡʔ Λߋ৽͢Δ components p2
༻ํ๏ • ϞόΠϧͰԼ෦ʹ ஔ͢Δ Bottom navigation components p4
༻ํ๏ • ύιίϯλϒϨοτ ͰɺࠨαΠυͷφϏ ήʔγϣϯͱ͢Δ Bottom navigation components p4
༻ํ๏ - ༻్ • ࠷্ҐͷҠಈઌΛ3~5ݸදࣔ͢Δ • ΞΫηε͢Δඞཁ͕͋ΔͷʢϝΠϯͷ ػೳʁʣ Bottom navigation
components p5
3~5ݸͰ͢ʂ • 1~2ݸͷ߹λϒʢcomponents p274ʣΛ ར༻ɻBottom navigationͱͷซ༻ෆՄ • 6ݸҎ্ͷ߹φϏήʔγϣϯυϩϫʔ ʢpatterns p81ʣΛར༻
Bottom navigation components p5
ελΠϧ • ΞΫγϣϯΛΞΠίϯͰදࣔ͢ΔͷͰɺΞΠί ϯͰදࣔ͢Δͷʹదͨ͠ίϯςϯπʹ͢Δ • ϑΥʔΧεͷ͋ΔϏϡʔͷΞΠίϯͱςΩε τϥϕϧΛදࣔ • ΞΫγϣϯ͕3ͭͳΒɺඇΞΫςΟϒͰςΩ ετϥϕϧΛදࣔ͢Δ
Bottom navigation components p7
ελΠϧ - Χϥʔ • ΞΫςΟϒͳΞΫγϣ ϯͷΞΠίϯͱςΩε τϥϕϧʹ৭Λ͚ͭ Δ • ΞϓϦͷϝΠϯͷ৭
Λ͚ͭΔ Bottom navigation components p7
ελΠϧ - Χϥʔ • ৭͖ͷφϏήʔγϣ ϯͷ߹ࠇ৭͔ന৭ Λ͚ͭΔ • ৭͖φϏήʔγϣϯ ʹ৭͖ΞΠίϯ
༻͠ͳ͍ Bottom navigation components p8
ελΠϧ - ςΩετϥϕϧ ςΩετϥϕϧɺΞΠίϯͷ؆ܿͳઆ໌Λද ࣔ͢Δɻ͍ςΩετϥϕϧආ͚Δɻ Bottom navigation 0, /( components
p8
ಈ࡞ • ؔ࿈͢ΔϏϡʔʹҠಈ͠ ͨΓɺΞΫςΟϒϏϡʔ Λߋ৽ͨ͠Γ͢Δ • εΫϩʔϧͰදࣔ/ඇදࣔ • ΫϩεϑΣʔυΞχϝʔ γϣϯ
Bottom navigation
ಈ࡞ • ΞΠίϯλοϓͰϙοϓΞοϓΛ։͍͍͚ͯͳ͍ • AndroidͷΔϘλϯͰφϏήʔγϣϯόʔͷ ϏϡʔؒΛҠಈ͢Δ͜ͱͰ͖ͳ͍ • ίϯςϯπΛεϫΠϓͯ͠ɺϏϡʔؒΛҠಈ͢Δ͜ ͱͰ͖ͳ͍ •
ΞΠίϯλοϓͰҠಈҎ֎ೝΊ͍ͯͳ͍ʁ Bottom navigation components p10
༷ - جຊ • ߴ͞ 56 dp • ΞΠίϯ 24x24dp
• dp ີඇґଘϐΫηϧɻը໘ղ૾Λߟྀ ͨ͠αΠζͷ୯Ґɻlayout p6 Λࢀর Bottom navigation
༷ - ݻఆͷ߹ • ݻఆɿৗʹશͯͷΞΫ γϣϯͷΞΠίϯͱς Ωετ͕දࣔͰ͖Δʁ • ΞΫγϣϯͷ෯Ϗϡʔ શମͷ෯ΛΞΫγϣϯ
Ͱׂͬͨ Bottom navigation components p12
༷ - γϑτ͢Δ߹ • γϑτ͢ΔɿΞΫςΟ ϒͳͷ͚ͩΞΠίϯ ͱςΩετ͕දࣔ͞Ε Δʁ • ΞΫςΟϒ͔ඇΞΫςΟ
ϒͰϏϡʔͷ࠷େ෯ͱ ࠷খ෯͕ҧ͏ Bottom navigation components p14
༷ - ߴ • Bottom navigation ͷߴɺ8dp • εφοΫόʔʢߴ 6dpʣɺBottom
navigation ͷഎ໘ʹ දࣔ͞ΕΔ Bottom navigation components p17
Bottom sheets
Bottom sheets ఈ෦γʔτͱɺը໘ͷԼ͔Β্ʹεϥΠ υදࣔ͞ΕΔϚςϦΞϧͷγʔτͰ͢ɻఈ෦γʔ τϢʔβʔͷૢ࡞ʹΑͬͯͷΈදࣔ͞Εɺ্ ʹεϫΠϓ͢ΔͱίϯςϯπΛ͞ΒʹදࣔͰ͖ ·͢ɻఈ෦γʔτʹɺҰ࣌తͳϞʔμϧͷද ࣔ໘ɺ·ͨΞϓϦͷӬଓతͳߏͷཁૉΛ ༻Ͱ͖·͢ɻ components
p18
ೋͭͷछྨ • Ӭଓఈ෦γʔτ(Persistent Bottom Sheets) • Ϟʔμϧఈ෦γʔτ(Modal bottom sheets) Bottom
sheets components p19
Persistent Bottom Sheets • ಠࣗͷදࣔ໘Ͱ৽͍͠ ίϯςϯπΛૠೖ͢Δ • ϝΠϯͷίϯςϯπͱ ՁͷίϯςϯπΛද ࣔ͢Δ
• ΞϓϦͱಉ͡ߴ components p20
දࣔํ๏ ϑϧ෯ (ϞόΠϧɺλϒϨοτɺύιίϯ) Persistent Bottom Sheets
දࣔํ๏ Πϯηοτ (λϒϨοτɺύιίϯ) Persistent Bottom Sheets
දࣔํ๏ ผͷϚςϦΞϧͷදࣔ໘γʔτ (ύιίϯ) Persistent Bottom Sheets components p23
Modal bottom sheets • ϝχϡʔγϯϓϧμΠ ΞϩάͷΘΓ • ଞͷΞϓϦͷσΟʔϓ ϦϯΫ •
ओʹϞόΠϧ༻ɻେ͖ͳ ը໘Ͱϝχϡʔγ ϯϓϧμΠΞϩά components p24
༻్ • ϝχϡʔγϯϓϧμΠΞϩάͷΘΓʹɺ Ϧετ·ͨάϦουܗࣜͰૢ࡞Λදࣔ • ϝχϡʔͷ໌Β͔ͳΤϯτϦϙΠϯτ͕ͳ ͍߹ʹɺίϯςΩετϝχϡʔΛදࣔ͢Δ • γʔτʹؚ·ΕΔཁૉͷࢹೝੑΛߴΊΔ Modal
bottom sheets components p25
༻్ ͍ΞΠςϜ໊ɺαϒς Ωετ͖ͷΞΠςϜɺ ΞΠςϜʹؔ࿈͢ΔΞΠ ίϯΛදࣔͰ͖Δ Modal bottom sheets components p25
σΟʔϓϦϯΫ ผͷΞϓϦͷίϯςϯπ ίϯτϩʔϧͷσΟʔ ϓϦϯΫΛදࣔͰ͖Δ ྫʣࣙॻΞϓϦΛىಈͤ ͣʹ୯ޠͷҙຯΛදࣔ Modal bottom sheets components
p26
σΟʔϓϦϯΫ • ผͷΞϓϦΛ͞ΒʹԼͷ֊ͱҠಈ͢Δ ͜ͱͰ͖Δ • ࠷ॳͷ֊ʹΔ͜ͱͰ͖Δ • ্ͷ֊ʹҠಈͰ͖ͳ͍ɻҠಈ͍ͤͨ͞ ߹ɺΦʔόʔϑϩʔϝχϡʔܦ༝ͰΞϓϦΛ ։͘໌ࣔతͳϦϯΫΛ༻͢Δ
Modal bottom sheets components p27
σΟʔϓϦϯΫ • શʹల։ɿΞϓϦόʔʹ [X] Λදࣔ • Լ֊ʹҠಈɿ্ҹΛදࣔ Modal bottom sheets
0, /( components p27
ϞόΠϧͰͷදࣔ 0, Modal bottom sheets • ຊདྷɺϞόΠϧͷίϯϙʔ ωϯτͰ͋Δ • ॎ͖Ͱԣ͖Ͱը
໘෯͍ͬͺ͍ʹදࣔ͢Δ • ߴؚ͞·ΕΔίϯςϯ πͷྔʹԠͯ͡ઃఆ͢Δ components p28
/( ϞόΠϧͰͷදࣔ • ຊདྷɺϞόΠϧͷίϯϙʔ ωϯτͰ͋Δ • ॎ͖Ͱԣ͖Ͱը ໘෯͍ͬͺ͍ʹදࣔ͢Δ • ߴؚ͞·ΕΔίϯςϯ
πͷྔʹԠͯ͡ઃఆ͢Δ Modal bottom sheets components p28
ϞόΠϧͰͷදࣔ 0, Modal bottom sheets ͍ϦετΛදࣔ͢Δ ͱ͖ɺ্ʹεϫΠϓ ͢Δ͜ͱͰɺ16:9ͷ ΩʔϥΠϯΛ͑ͯల ։Ͱ͖Δ
※ΩʔϥΠϯ layout p20 components p29
/( ϞόΠϧͰͷදࣔ Modal bottom sheets • ࠷ॳ͔ΒΞϓϦόʔ ʹॏͳΔΑ͏ʹදࣔ ͍͚ͯ͠ͳ͍ •
Ϣʔβʔ͕γʔτͷ ֎ଆΛλοϓͯ͠ด ͡ΒΕΔΑ͏ʹ͢Δ components p29
େ͖ͳը໘ͷ߹ • λϒϨοτύιίϯͰɺΫϦοΫͨ͠ ॴ͔ΒΕͨҐஔʹදࣔ͞Εͯ͠·͏Մೳੑ ͕͋Δ • ସํ๏ɿϝχϡʔɺγϯϓϧμΠΞϩάɺΠ ϯϥΠϯͰల։ɺӬଓతʹΞΫηεՄೳͳཁ ૉʹ͢Δɺ৽͍͠ϒϥβΟϯυͰ։͘ Modal
bottom sheets components p30
ྫʣϝχϡʔλοϓͨۙ͘͠ʹදࣔͰ͖Δ େ͖ͳը໘ͷ߹ Modal bottom sheets components p31
దͳϨΠΞτʢάϦουʣ େ͖ͳը໘ͷ߹ Modal bottom sheets components p32
దͳϨΠΞτʢϦετʣ େ͖ͳը໘ͷ߹ Modal bottom sheets components p32
ಈ࡞ AndroidͷΔϘλϯͰด͡Δɻ·ͨɺԼʹ εϫΠϓɺγʔτͷ֎ଆΛλοϓɺ[X]Λλοϓ Ͱด͡Δ Modal bottom sheets components p33
༷ - ϑΥϯτͱΧϥʔ • ςΩετɿ16sp #000 87% • λΠτϧɿ16sp #000
54% • എܠɿ#FFF • ಁ໌ͳΦʔόʔϨΠɿ#000 20% Modal bottom sheets components p34
༷ - ϦετελΠϧ • ը໘ࠨӈͷ༨ന 16dp • ্Լͷ༨ന 8dp •
ΞΠςϜͷߴ͞ 48dp • ΞΠίϯ 24x24dp தԝἧ͑ • ςΩετͷԣํύσΟϯά 32dp Modal bottom sheets components p34
༷ - ϔομʔ͖Ϧετ Modal bottom sheets • ্ஈͷϦετͷԼ෦ͷεϖʔε 7dp •
σΟόΠμʔϥΠϯ 1dp • ԼஈͷϦετͷ্෦ͷεϖʔε 8dp • ϦετλΠτϧͷߴ͞ 56dp components p35
༷ - ΞΠίϯ͖άϦου Modal bottom sheets • ը໘ࠨӈͷ༨ന 24dp •
άϦουϦετͷ্Լεϖʔε 24dp • ΞΠίϯ 48x48dp ॎҐஔΛதԝἧ͑ ԣҐஔΛۉʹஔ • ςΩετ ߴ͞16dp ΞΠίϯͷԼʹ தԝἧ͑ • άϦουԼ෦ͷύσΟϯά 24dp components p35
༷ - γʔτͷߴ͞ Modal bottom sheets • ը໘ͷԼ෦͔Β্෦ʹεϥΠυදࣔ • ࠷ॳͷߴؚ͞·ΕΔϦετΞΠς
Ϝͷߴ͞ʹൺྫ • ίϯςϯπ͕ଟ͍߹ 16:9 ͷ ΩʔϥΠϯΛ͑ͳ͍Α͏ʹ͢Δ • Ϣʔβʔ্͕ʹεϫΠϓͯ͠શʹ ల։͢ΔͱεΫϩʔϧՄೳʹͳΔ components p36
༷ - ύιίϯͱλϒϨοτ • ը໘͔Βͷεϖʔεͷ࠷খͱγʔτͷ࠷ খ෯͕ఆٛ͞Ε͍ͯΔ • ͋ΔͷഒΛ͏ɻͨͱ͑ΞϓϦόʔ ͷߴ͞Λ୯Ґͱͯ͠ɺͦͷഒΛ͏ Modal
bottom sheets components p37
༷ - ύιίϯͱλϒϨοτ Modal bottom sheets