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
520
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
56
Androidアプリ内課金のテスト
takuaraki
0
450
GASでSlackBot
takuaraki
1
530
Material Design Guideline: Dialogs, Dividers
takuaraki
0
410
App Shortcuts
takuaraki
0
350
[関モバ#18] SQLBrite&SQLDelight
takuaraki
0
460
A/B testing GTM&GA vs Firebase
takuaraki
1
2.9k
【関モバ#12】Google Tag ManagerでモバイルアプリのABテストをする
takuaraki
1
640
Other Decks in Design
See All in Design
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
270
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
400
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.2k
私とデザインの10年
iflection
0
150
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
130
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
370
Storyboard Honey
rocioparronrubio
0
280
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
How GitHub (no longer) Works
holman
314
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Raft: Consensus for Rubyists
vanstee
140
7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Embracing the Ebb and Flow
colly
86
4.7k
It's Worth the Effort
3n
185
28k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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