Material Design Guideline: Bottom components

マテリアルデザインガイドライン輪読会 #1(https://connpass.com/event/62761/) 用のスライドです。

Transcript

1. Bottom components components.pdf p1~38
2. @ara_tack
3. ࢿྉʹ͍ͭͯ • ࣸܦଟΊ • ࣗ෼ͳΓͷղऍΛͨ͠ͱ͜Ζʹ͸ ? ͱ͚ͭͯ ͋Δ • ࢿྉʹσβΠϯྗ͸ͳ͍
4. components.pdf p1~39 • Լ෦ͷφϏήʔγϣϯ (Bottom navigation) • ఈ෦γʔτ (Bottom sheets) • Ӭଓఈ෦γʔτ (Persistent Bottom Sheets) • Ϟʔμϧఈ෦γʔτ (Modal bottom sheets)
5. Bottom navigation
6. Bottom navigation 
   Լ෦ͷφϏήʔγϣϯόʔ͸ɺճλοϓ͢Δ ͚ͩͰ࠷্ҐͷϏϡʔΛ੾Γସ͑ͯ؆୯ʹ୳ࡧ Ͱ͖ΔΑ͏ʹ͢Δ΋ͷͰ͢ɻ components p1
7. Bottom navigation • ؔ࿈͢ΔϏϡʔʹ௚઀ Ҡಈ͢Δ • ݱࡏͷΞΫςΟϒϏϡʔ Λߋ৽͢Δ components p2
8. ࢖༻ํ๏ • ϞόΠϧͰ͸Լ෦ʹ഑ ஔ͢Δ Bottom navigation components p4
9. ࢖༻ํ๏ • ύιίϯ΍λϒϨοτ Ͱ͸ɺࠨαΠυͷφϏ ήʔγϣϯͱ͢Δ Bottom navigation components p4
10. ࢖༻ํ๏ - ༻్ • ࠷্ҐͷҠಈઌΛ3~5ݸදࣔ͢Δ • ௚઀ΞΫηε͢Δඞཁ͕͋Δ΋ͷʢϝΠϯͷ ػೳʁʣ Bottom navigation components p5
11. 3~5ݸͰ͢ʂ • 1~2ݸͷ৔߹͸λϒʢcomponents p274ʣΛ ར༻ɻBottom navigationͱͷซ༻͸ෆՄ • 6ݸҎ্ͷ৔߹͸φϏήʔγϣϯυϩϫʔ ʢpatterns p81ʣΛར༻ Bottom navigation components p5
12. ελΠϧ • ΞΫγϣϯΛΞΠίϯͰදࣔ͢ΔͷͰɺΞΠί ϯͰදࣔ͢Δͷʹదͨ͠ίϯςϯπʹ͢Δ • ϑΥʔΧεͷ͋ΔϏϡʔͷΞΠίϯͱςΩε τϥϕϧΛදࣔ • ΞΫγϣϯ͕3ͭͳΒɺඇΞΫςΟϒͰ΋ςΩ ετϥϕϧΛදࣔ͢Δ Bottom navigation components p7
13. ελΠϧ - Χϥʔ • ΞΫςΟϒͳΞΫγϣ ϯͷΞΠίϯͱςΩε τϥϕϧʹ৭Λ͚ͭ Δ • ΞϓϦͷϝΠϯͷ৭ Λ͚ͭΔ Bottom navigation components p7
14. ελΠϧ - Χϥʔ • ৭෇͖ͷφϏήʔγϣ ϯͷ৔߹͸ࠇ৭͔ന৭ Λ͚ͭΔ • ৭෇͖φϏήʔγϣϯ ʹ৭෇͖ΞΠίϯ͸࢖ ༻͠ͳ͍ Bottom navigation components p8
15. ελΠϧ - ςΩετϥϕϧ ςΩετϥϕϧ͸ɺΞΠίϯͷ؆ܿͳઆ໌Λද ࣔ͢Δɻ௕͍ςΩετϥϕϧ͸ආ͚Δɻ Bottom navigation 0, /( components p8
16. ಈ࡞ • ؔ࿈͢ΔϏϡʔʹҠಈ͠ ͨΓɺΞΫςΟϒϏϡʔ Λߋ৽ͨ͠Γ͢Δ • εΫϩʔϧͰදࣔ/ඇදࣔ • ΫϩεϑΣʔυΞχϝʔ γϣϯ Bottom navigation
17. ಈ࡞ • ΞΠίϯλοϓͰϙοϓΞοϓΛ։͍ͯ͸͍͚ͳ͍ • Androidͷ໭ΔϘλϯͰφϏήʔγϣϯόʔͷ ϏϡʔؒΛҠಈ͢Δ͜ͱ͸Ͱ͖ͳ͍ • ίϯςϯπΛεϫΠϓͯ͠ɺϏϡʔؒΛҠಈ͢Δ͜ ͱ΋Ͱ͖ͳ͍ • ΞΠίϯλοϓͰҠಈҎ֎͸ೝΊ͍ͯͳ͍ʁ Bottom navigation components p10
18. ࢓༷ - جຊ • ߴ͞ 56 dp • ΞΠίϯ 24x24dp • dp ͸ີ౓ඇґଘϐΫηϧɻը໘ղ૾౓Λߟྀ ͨ͠αΠζͷ୯Ґɻlayout p6 Λࢀর Bottom navigation
19. ࢓༷ - ݻఆͷ৔߹ • ݻఆɿৗʹશͯͷΞΫ γϣϯͷΞΠίϯͱς Ωετ͕දࣔͰ͖Δʁ • ΞΫγϣϯͷ෯͸Ϗϡʔ શମͷ෯ΛΞΫγϣϯ ਺Ͱׂͬͨ஋ Bottom navigation components p12
20. ࢓༷ - γϑτ͢Δ৔߹ • γϑτ͢ΔɿΞΫςΟ ϒͳ΋ͷ͚ͩΞΠίϯ ͱςΩετ͕දࣔ͞Ε Δʁ • ΞΫςΟϒ͔ඇΞΫςΟ ϒͰϏϡʔͷ࠷େ෯ͱ ࠷খ෯͕ҧ͏ Bottom navigation components p14
21. ࢓༷ - ߴ౓ • Bottom navigation ͷߴ౓͸ɺ8dp • εφοΫόʔʢߴ౓ 6dpʣ͸ɺBottom navigation ͷഎ໘ʹ දࣔ͞ΕΔ Bottom navigation components p17
22. Bottom sheets
23. Bottom sheets 
    ఈ෦γʔτͱ͸ɺը໘ͷԼ୺͔Β্ʹεϥΠ υදࣔ͞ΕΔϚςϦΞϧͷγʔτͰ͢ɻఈ෦γʔ τ͸Ϣʔβʔͷૢ࡞ʹΑͬͯͷΈදࣔ͞Εɺ্ ʹεϫΠϓ͢ΔͱίϯςϯπΛ͞ΒʹදࣔͰ͖ ·͢ɻఈ෦γʔτʹ͸ɺҰ࣌తͳϞʔμϧͷද ࣔ໘ɺ·ͨ͸ΞϓϦͷӬଓతͳߏ଄ͷཁૉΛ࢖ ༻Ͱ͖·͢ɻ components p18
24. ೋͭͷछྨ • Ӭଓఈ෦γʔτ(Persistent Bottom Sheets) • Ϟʔμϧఈ෦γʔτ(Modal bottom sheets) Bottom sheets components p19
25. Persistent Bottom Sheets • ಠࣗͷදࣔ໘Ͱ৽͍͠ ίϯςϯπΛૠೖ͢Δ • ϝΠϯͷίϯςϯπͱ ౳ՁͷίϯςϯπΛද ࣔ͢Δ • ΞϓϦͱಉ͡ߴ౓ components p20
26. දࣔํ๏ ϑϧ෯ (ϞόΠϧɺλϒϨοτɺύιίϯ) Persistent Bottom Sheets
27. දࣔํ๏ Πϯηοτ (λϒϨοτɺύιίϯ) Persistent Bottom Sheets
28. දࣔํ๏ ผͷϚςϦΞϧͷදࣔ໘΍γʔτ (ύιίϯ) Persistent Bottom Sheets components p23
29. Modal bottom sheets • ϝχϡʔ΍γϯϓϧμΠ Ξϩάͷ୅ΘΓ • ଞͷΞϓϦ΁ͷσΟʔϓ ϦϯΫ • ओʹϞόΠϧ༻ɻେ͖ͳ ը໘Ͱ͸ϝχϡʔ΍γ ϯϓϧμΠΞϩά components p24
30. ༻్ • ϝχϡʔ΍γϯϓϧμΠΞϩάͷ୅ΘΓʹɺ Ϧετ·ͨ͸άϦουܗࣜͰૢ࡞Λදࣔ • ϝχϡʔ΁ͷ໌Β͔ͳΤϯτϦϙΠϯτ͕ͳ ͍৔߹ʹɺίϯςΩετϝχϡʔΛදࣔ͢Δ • γʔτʹؚ·ΕΔཁૉͷࢹೝੑΛߴΊΔ Modal bottom sheets components p25
31. ༻్ ௕͍ΞΠςϜ໊ɺαϒς Ωετ෇͖ͷΞΠςϜɺ ΞΠςϜʹؔ࿈͢ΔΞΠ ίϯΛදࣔͰ͖Δ Modal bottom sheets components p25
32. σΟʔϓϦϯΫ ผͷΞϓϦͷίϯςϯπ ΍ίϯτϩʔϧ΁ͷσΟʔ ϓϦϯΫΛදࣔͰ͖Δ ྫʣࣙॻΞϓϦΛىಈͤ ͣʹ୯ޠͷҙຯΛදࣔ Modal bottom sheets components p26
33. σΟʔϓϦϯΫ • ผͷΞϓϦ಺Λ͞ΒʹԼͷ֊૚΁ͱҠಈ͢Δ ͜ͱ΋Ͱ͖Δ • ࠷ॳͷ֊૚ʹ໭Δ͜ͱ΋Ͱ͖Δ • ্ͷ֊૚ʹ͸ҠಈͰ͖ͳ͍ɻҠಈ͍ͤͨ͞৔ ߹͸ɺΦʔόʔϑϩʔϝχϡʔܦ༝ͰΞϓϦΛ ։͘໌ࣔతͳϦϯΫΛ࢖༻͢Δ Modal bottom sheets components p27
34. σΟʔϓϦϯΫ • ׬શʹల։ɿΞϓϦόʔʹ [X] Λදࣔ • Լ֊૚ʹҠಈɿ্໼ҹΛදࣔ Modal bottom sheets 0, /( components p27
35. ϞόΠϧͰͷදࣔ 0, Modal bottom sheets • ຊདྷɺϞόΠϧͷίϯϙʔ ωϯτͰ͋Δ • ॎ޲͖Ͱ΋ԣ޲͖Ͱ΋ը ໘෯͍ͬͺ͍ʹදࣔ͢Δ • ߴ͞͸ؚ·ΕΔίϯςϯ πͷྔʹԠͯ͡ઃఆ͢Δ components p28
36. /( ϞόΠϧͰͷදࣔ • ຊདྷɺϞόΠϧͷίϯϙʔ ωϯτͰ͋Δ • ॎ޲͖Ͱ΋ԣ޲͖Ͱ΋ը ໘෯͍ͬͺ͍ʹදࣔ͢Δ • ߴ͞͸ؚ·ΕΔίϯςϯ πͷྔʹԠͯ͡ઃఆ͢Δ Modal bottom sheets components p28
37. ϞόΠϧͰͷදࣔ 0, Modal bottom sheets ௕͍ϦετΛදࣔ͢Δ ͱ͖͸ɺ্ʹεϫΠϓ ͢Δ͜ͱͰɺ16:9ͷ ΩʔϥΠϯΛ௒͑ͯల ։Ͱ͖Δ ※ΩʔϥΠϯ layout p20 components p29
38. /( ϞόΠϧͰͷදࣔ Modal bottom sheets • ࠷ॳ͔ΒΞϓϦόʔ ʹॏͳΔΑ͏ʹදࣔ ͯ͠͸͍͚ͳ͍ • Ϣʔβʔ͕γʔτͷ ֎ଆΛλοϓͯ͠ด ͡ΒΕΔΑ͏ʹ͢Δ components p29
39. େ͖ͳը໘ͷ৔߹ • λϒϨοτ΍ύιίϯͰ͸ɺΫϦοΫͨ͠৔ ॴ͔Β཭ΕͨҐஔʹදࣔ͞Εͯ͠·͏Մೳੑ ͕͋Δ • ୅ସํ๏ɿϝχϡʔɺγϯϓϧμΠΞϩάɺΠ ϯϥΠϯͰల։ɺӬଓతʹΞΫηεՄೳͳཁ ૉʹ͢Δɺ৽͍͠ϒϥ΢β΢Οϯυ΢Ͱ։͘ Modal bottom sheets components p30
40. ྫʣϝχϡʔ͸λοϓͨۙ͘͠ʹදࣔͰ͖Δ େ͖ͳը໘ͷ৔߹ Modal bottom sheets components p31
41. ద੾ͳϨΠΞ΢τʢάϦουʣ େ͖ͳը໘ͷ৔߹ Modal bottom sheets components p32
42. ద੾ͳϨΠΞ΢τʢϦετʣ େ͖ͳը໘ͷ৔߹ Modal bottom sheets components p32
43. ಈ࡞ Androidͷ໭ΔϘλϯͰด͡Δɻ·ͨ͸ɺԼʹ εϫΠϓɺγʔτͷ֎ଆΛλοϓɺ[X]Λλοϓ Ͱด͡Δ Modal bottom sheets components p33
44. ࢓༷ - ϑΥϯτͱΧϥʔ • ςΩετɿ16sp #000 87% • λΠτϧɿ16sp #000 54% • എܠɿ#FFF • ಁ໌ͳΦʔόʔϨΠɿ#000 20% Modal bottom sheets components p34
45. ࢓༷ - ϦετελΠϧ • ը໘ࠨӈͷ༨ന 16dp • ্Լͷ༨ന 8dp • ΞΠςϜͷߴ͞ 48dp • ΞΠίϯ 24x24dp தԝἧ͑ • ςΩετͷԣํ޲ύσΟϯά 32dp Modal bottom sheets components p34
46. ࢓༷ - ϔομʔ෇͖Ϧετ Modal bottom sheets • ্ஈͷϦετͷԼ෦ͷεϖʔε 7dp • σΟόΠμʔϥΠϯ 1dp • ԼஈͷϦετͷ্෦ͷεϖʔε 8dp • ϦετλΠτϧͷߴ͞ 56dp components p35
47. ࢓༷ - ΞΠίϯ෇͖άϦου Modal bottom sheets • ը໘ࠨӈͷ༨ന 24dp • άϦουϦετͷ্Լεϖʔε 24dp • ΞΠίϯ 48x48dp ॎҐஔΛதԝἧ͑ ԣҐஔΛۉ౳ʹ഑ஔ • ςΩετ ߴ͞16dp ΞΠίϯͷԼʹ தԝἧ͑ • άϦουԼ෦ͷύσΟϯά 24dp components p35
48. ࢓༷ - γʔτͷߴ͞ Modal bottom sheets • ը໘ͷԼ෦͔Β্෦ʹεϥΠυදࣔ • ࠷ॳͷߴ͞͸ؚ·ΕΔϦετΞΠς Ϝͷߴ͞ʹൺྫ • ίϯςϯπ͕ଟ͍৔߹͸ 16:9 ͷ ΩʔϥΠϯΛ௒͑ͳ͍Α͏ʹ͢Δ • Ϣʔβʔ্͕ʹεϫΠϓͯ͠׬શʹ ల։͢ΔͱεΫϩʔϧՄೳʹͳΔ components p36
49. ࢓༷ - ύιίϯͱλϒϨοτ • ը໘୺͔Βͷεϖʔεͷ࠷খ஋ͱγʔτͷ࠷ খ෯͕ఆٛ͞Ε͍ͯΔ • ͋Δ਺஋ͷഒ਺Λ࢖͏ɻͨͱ͑͹ΞϓϦόʔ ͷߴ͞Λ୯Ґͱͯ͠ɺͦͷഒ਺Λ࢖͏ Modal bottom sheets components p37
50. ࢓༷ - ύιίϯͱλϒϨοτ Modal bottom sheets