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
54
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
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
130
How to get a Tiger to Tulsa
mcduckyart
0
110
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
600
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
440
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
130
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
510
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
4
1.1k
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
440
Cards | Storyboards
giofortuna_story
0
340
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
960
PF_濵村ひろみ_202503
maru_design78
0
180
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A better future with KSS
kneath
239
17k
Practical Orchestrator
shlominoach
188
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
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