Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material Design Guideline: Bottom components

C49eed1cf04caeb4de645d6d9117708d?s=47 takuaraki
August 01, 2017

Material Design Guideline: Bottom components

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

C49eed1cf04caeb4de645d6d9117708d?s=128

takuaraki

August 01, 2017
Tweet

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