Material Design Guideline: Bottom components

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