Tweet
Tweet

Slide 1

Slide 1 text

Bottom components components.pdf p1~38

Slide 2

Slide 2 text

@ara_tack

Slide 3

Slide 3 text

ࢿྉʹ͍ͭͯ • ࣸܦଟΊ • ࣗ෼ͳΓͷղऍΛͨ͠ͱ͜Ζʹ͸ ? ͱ͚ͭͯ ͋Δ • ࢿྉʹσβΠϯྗ͸ͳ͍

Slide 4

Slide 4 text

components.pdf p1~39 • Լ෦ͷφϏήʔγϣϯ (Bottom navigation) • ఈ෦γʔτ (Bottom sheets) • Ӭଓఈ෦γʔτ (Persistent Bottom Sheets) • Ϟʔμϧఈ෦γʔτ (Modal bottom sheets)

Slide 5

Slide 5 text

Bottom navigation

Slide 6

Slide 6 text

Bottom navigation Լ෦ͷφϏήʔγϣϯόʔ͸ɺճλοϓ͢Δ ͚ͩͰ࠷্ҐͷϏϡʔΛ੾Γସ͑ͯ؆୯ʹ୳ࡧ Ͱ͖ΔΑ͏ʹ͢Δ΋ͷͰ͢ɻ components p1

Slide 7

Slide 7 text

Bottom navigation • ؔ࿈͢ΔϏϡʔʹ௚઀ Ҡಈ͢Δ • ݱࡏͷΞΫςΟϒϏϡʔ Λߋ৽͢Δ components p2

Slide 8

Slide 8 text

࢖༻ํ๏ • ϞόΠϧͰ͸Լ෦ʹ഑ ஔ͢Δ Bottom navigation components p4

Slide 9

Slide 9 text

࢖༻ํ๏ • ύιίϯ΍λϒϨοτ Ͱ͸ɺࠨαΠυͷφϏ ήʔγϣϯͱ͢Δ Bottom navigation components p4

Slide 10

Slide 10 text

࢖༻ํ๏ - ༻్ • ࠷্ҐͷҠಈઌΛ3~5ݸදࣔ͢Δ • ௚઀ΞΫηε͢Δඞཁ͕͋Δ΋ͷʢϝΠϯͷ ػೳʁʣ Bottom navigation components p5

Slide 11

Slide 11 text

3~5ݸͰ͢ʂ • 1~2ݸͷ৔߹͸λϒʢcomponents p274ʣΛ ར༻ɻBottom navigationͱͷซ༻͸ෆՄ • 6ݸҎ্ͷ৔߹͸φϏήʔγϣϯυϩϫʔ ʢpatterns p81ʣΛར༻ Bottom navigation components p5

Slide 12

Slide 12 text

ελΠϧ • ΞΫγϣϯΛΞΠίϯͰදࣔ͢ΔͷͰɺΞΠί ϯͰදࣔ͢Δͷʹదͨ͠ίϯςϯπʹ͢Δ • ϑΥʔΧεͷ͋ΔϏϡʔͷΞΠίϯͱςΩε τϥϕϧΛදࣔ • ΞΫγϣϯ͕3ͭͳΒɺඇΞΫςΟϒͰ΋ςΩ ετϥϕϧΛදࣔ͢Δ Bottom navigation components p7

Slide 13

Slide 13 text

ελΠϧ - Χϥʔ • ΞΫςΟϒͳΞΫγϣ ϯͷΞΠίϯͱςΩε τϥϕϧʹ৭Λ͚ͭ Δ • ΞϓϦͷϝΠϯͷ৭ Λ͚ͭΔ Bottom navigation components p7

Slide 14

Slide 14 text

ελΠϧ - Χϥʔ • ৭෇͖ͷφϏήʔγϣ ϯͷ৔߹͸ࠇ৭͔ന৭ Λ͚ͭΔ • ৭෇͖φϏήʔγϣϯ ʹ৭෇͖ΞΠίϯ͸࢖ ༻͠ͳ͍ Bottom navigation components p8

Slide 15

Slide 15 text

ελΠϧ - ςΩετϥϕϧ ςΩετϥϕϧ͸ɺΞΠίϯͷ؆ܿͳઆ໌Λද ࣔ͢Δɻ௕͍ςΩετϥϕϧ͸ආ͚Δɻ Bottom navigation 0, /( components p8

Slide 16

Slide 16 text

ಈ࡞ • ؔ࿈͢ΔϏϡʔʹҠಈ͠ ͨΓɺΞΫςΟϒϏϡʔ Λߋ৽ͨ͠Γ͢Δ • εΫϩʔϧͰදࣔ/ඇදࣔ • ΫϩεϑΣʔυΞχϝʔ γϣϯ Bottom navigation

Slide 17

Slide 17 text

ಈ࡞ • ΞΠίϯλοϓͰϙοϓΞοϓΛ։͍ͯ͸͍͚ͳ͍ • Androidͷ໭ΔϘλϯͰφϏήʔγϣϯόʔͷ ϏϡʔؒΛҠಈ͢Δ͜ͱ͸Ͱ͖ͳ͍ • ίϯςϯπΛεϫΠϓͯ͠ɺϏϡʔؒΛҠಈ͢Δ͜ ͱ΋Ͱ͖ͳ͍ • ΞΠίϯλοϓͰҠಈҎ֎͸ೝΊ͍ͯͳ͍ʁ Bottom navigation components p10

Slide 18

Slide 18 text

࢓༷ - جຊ • ߴ͞ 56 dp • ΞΠίϯ 24x24dp • dp ͸ີ౓ඇґଘϐΫηϧɻը໘ղ૾౓Λߟྀ ͨ͠αΠζͷ୯Ґɻlayout p6 Λࢀর Bottom navigation

Slide 19

Slide 19 text

࢓༷ - ݻఆͷ৔߹ • ݻఆɿৗʹશͯͷΞΫ γϣϯͷΞΠίϯͱς Ωετ͕දࣔͰ͖Δʁ • ΞΫγϣϯͷ෯͸Ϗϡʔ શମͷ෯ΛΞΫγϣϯ ਺Ͱׂͬͨ஋ Bottom navigation components p12

Slide 20

Slide 20 text

࢓༷ - γϑτ͢Δ৔߹ • γϑτ͢ΔɿΞΫςΟ ϒͳ΋ͷ͚ͩΞΠίϯ ͱςΩετ͕දࣔ͞Ε Δʁ • ΞΫςΟϒ͔ඇΞΫςΟ ϒͰϏϡʔͷ࠷େ෯ͱ ࠷খ෯͕ҧ͏ Bottom navigation components p14

Slide 21

Slide 21 text

࢓༷ - ߴ౓ • Bottom navigation ͷߴ౓͸ɺ8dp • εφοΫόʔʢߴ౓ 6dpʣ͸ɺBottom navigation ͷഎ໘ʹ දࣔ͞ΕΔ Bottom navigation components p17

Slide 22

Slide 22 text

Bottom sheets

Slide 23

Slide 23 text

Bottom sheets ఈ෦γʔτͱ͸ɺը໘ͷԼ୺͔Β্ʹεϥΠ υදࣔ͞ΕΔϚςϦΞϧͷγʔτͰ͢ɻఈ෦γʔ τ͸Ϣʔβʔͷૢ࡞ʹΑͬͯͷΈදࣔ͞Εɺ্ ʹεϫΠϓ͢ΔͱίϯςϯπΛ͞ΒʹදࣔͰ͖ ·͢ɻఈ෦γʔτʹ͸ɺҰ࣌తͳϞʔμϧͷද ࣔ໘ɺ·ͨ͸ΞϓϦͷӬଓతͳߏ଄ͷཁૉΛ࢖ ༻Ͱ͖·͢ɻ components p18

Slide 24

Slide 24 text

ೋͭͷछྨ • Ӭଓఈ෦γʔτ(Persistent Bottom Sheets) • Ϟʔμϧఈ෦γʔτ(Modal bottom sheets) Bottom sheets components p19

Slide 25

Slide 25 text

Persistent Bottom Sheets • ಠࣗͷදࣔ໘Ͱ৽͍͠ ίϯςϯπΛૠೖ͢Δ • ϝΠϯͷίϯςϯπͱ ౳ՁͷίϯςϯπΛද ࣔ͢Δ • ΞϓϦͱಉ͡ߴ౓ components p20

Slide 26

Slide 26 text

දࣔํ๏ ϑϧ෯ (ϞόΠϧɺλϒϨοτɺύιίϯ) Persistent Bottom Sheets

Slide 27

Slide 27 text

දࣔํ๏ Πϯηοτ (λϒϨοτɺύιίϯ) Persistent Bottom Sheets

Slide 28

Slide 28 text

දࣔํ๏ ผͷϚςϦΞϧͷදࣔ໘΍γʔτ (ύιίϯ) Persistent Bottom Sheets components p23

Slide 29

Slide 29 text

Modal bottom sheets • ϝχϡʔ΍γϯϓϧμΠ Ξϩάͷ୅ΘΓ • ଞͷΞϓϦ΁ͷσΟʔϓ ϦϯΫ • ओʹϞόΠϧ༻ɻେ͖ͳ ը໘Ͱ͸ϝχϡʔ΍γ ϯϓϧμΠΞϩά components p24

Slide 30

Slide 30 text

༻్ • ϝχϡʔ΍γϯϓϧμΠΞϩάͷ୅ΘΓʹɺ Ϧετ·ͨ͸άϦουܗࣜͰૢ࡞Λදࣔ • ϝχϡʔ΁ͷ໌Β͔ͳΤϯτϦϙΠϯτ͕ͳ ͍৔߹ʹɺίϯςΩετϝχϡʔΛදࣔ͢Δ • γʔτʹؚ·ΕΔཁૉͷࢹೝੑΛߴΊΔ Modal bottom sheets components p25

Slide 31

Slide 31 text

༻్ ௕͍ΞΠςϜ໊ɺαϒς Ωετ෇͖ͷΞΠςϜɺ ΞΠςϜʹؔ࿈͢ΔΞΠ ίϯΛදࣔͰ͖Δ Modal bottom sheets components p25

Slide 32

Slide 32 text

σΟʔϓϦϯΫ ผͷΞϓϦͷίϯςϯπ ΍ίϯτϩʔϧ΁ͷσΟʔ ϓϦϯΫΛදࣔͰ͖Δ ྫʣࣙॻΞϓϦΛىಈͤ ͣʹ୯ޠͷҙຯΛදࣔ Modal bottom sheets components p26

Slide 33

Slide 33 text

σΟʔϓϦϯΫ • ผͷΞϓϦ಺Λ͞ΒʹԼͷ֊૚΁ͱҠಈ͢Δ ͜ͱ΋Ͱ͖Δ • ࠷ॳͷ֊૚ʹ໭Δ͜ͱ΋Ͱ͖Δ • ্ͷ֊૚ʹ͸ҠಈͰ͖ͳ͍ɻҠಈ͍ͤͨ͞৔ ߹͸ɺΦʔόʔϑϩʔϝχϡʔܦ༝ͰΞϓϦΛ ։͘໌ࣔతͳϦϯΫΛ࢖༻͢Δ Modal bottom sheets components p27

Slide 34

Slide 34 text

σΟʔϓϦϯΫ • ׬શʹల։ɿΞϓϦόʔʹ [X] Λදࣔ • Լ֊૚ʹҠಈɿ্໼ҹΛදࣔ Modal bottom sheets 0, /( components p27

Slide 35

Slide 35 text

ϞόΠϧͰͷදࣔ 0, Modal bottom sheets • ຊདྷɺϞόΠϧͷίϯϙʔ ωϯτͰ͋Δ • ॎ޲͖Ͱ΋ԣ޲͖Ͱ΋ը ໘෯͍ͬͺ͍ʹදࣔ͢Δ • ߴ͞͸ؚ·ΕΔίϯςϯ πͷྔʹԠͯ͡ઃఆ͢Δ components p28

Slide 36

Slide 36 text

/( ϞόΠϧͰͷදࣔ • ຊདྷɺϞόΠϧͷίϯϙʔ ωϯτͰ͋Δ • ॎ޲͖Ͱ΋ԣ޲͖Ͱ΋ը ໘෯͍ͬͺ͍ʹදࣔ͢Δ • ߴ͞͸ؚ·ΕΔίϯςϯ πͷྔʹԠͯ͡ઃఆ͢Δ Modal bottom sheets components p28

Slide 37

Slide 37 text

ϞόΠϧͰͷදࣔ 0, Modal bottom sheets ௕͍ϦετΛදࣔ͢Δ ͱ͖͸ɺ্ʹεϫΠϓ ͢Δ͜ͱͰɺ16:9ͷ ΩʔϥΠϯΛ௒͑ͯల ։Ͱ͖Δ ※ΩʔϥΠϯ layout p20 components p29

Slide 38

Slide 38 text

/( ϞόΠϧͰͷදࣔ Modal bottom sheets • ࠷ॳ͔ΒΞϓϦόʔ ʹॏͳΔΑ͏ʹදࣔ ͯ͠͸͍͚ͳ͍ • Ϣʔβʔ͕γʔτͷ ֎ଆΛλοϓͯ͠ด ͡ΒΕΔΑ͏ʹ͢Δ components p29

Slide 39

Slide 39 text

େ͖ͳը໘ͷ৔߹ • λϒϨοτ΍ύιίϯͰ͸ɺΫϦοΫͨ͠৔ ॴ͔Β཭ΕͨҐஔʹදࣔ͞Εͯ͠·͏Մೳੑ ͕͋Δ • ୅ସํ๏ɿϝχϡʔɺγϯϓϧμΠΞϩάɺΠ ϯϥΠϯͰల։ɺӬଓతʹΞΫηεՄೳͳཁ ૉʹ͢Δɺ৽͍͠ϒϥ΢β΢Οϯυ΢Ͱ։͘ Modal bottom sheets components p30

Slide 40

Slide 40 text

ྫʣϝχϡʔ͸λοϓͨۙ͘͠ʹදࣔͰ͖Δ େ͖ͳը໘ͷ৔߹ Modal bottom sheets components p31

Slide 41

Slide 41 text

ద੾ͳϨΠΞ΢τʢάϦουʣ େ͖ͳը໘ͷ৔߹ Modal bottom sheets components p32

Slide 42

Slide 42 text

ద੾ͳϨΠΞ΢τʢϦετʣ େ͖ͳը໘ͷ৔߹ Modal bottom sheets components p32

Slide 43

Slide 43 text

ಈ࡞ Androidͷ໭ΔϘλϯͰด͡Δɻ·ͨ͸ɺԼʹ εϫΠϓɺγʔτͷ֎ଆΛλοϓɺ[X]Λλοϓ Ͱด͡Δ Modal bottom sheets components p33

Slide 44

Slide 44 text

࢓༷ - ϑΥϯτͱΧϥʔ • ςΩετɿ16sp #000 87% • λΠτϧɿ16sp #000 54% • എܠɿ#FFF • ಁ໌ͳΦʔόʔϨΠɿ#000 20% Modal bottom sheets components p34

Slide 45

Slide 45 text

࢓༷ - ϦετελΠϧ • ը໘ࠨӈͷ༨ന 16dp • ্Լͷ༨ന 8dp • ΞΠςϜͷߴ͞ 48dp • ΞΠίϯ 24x24dp தԝἧ͑ • ςΩετͷԣํ޲ύσΟϯά 32dp Modal bottom sheets components p34

Slide 46

Slide 46 text

࢓༷ - ϔομʔ෇͖Ϧετ Modal bottom sheets • ্ஈͷϦετͷԼ෦ͷεϖʔε 7dp • σΟόΠμʔϥΠϯ 1dp • ԼஈͷϦετͷ্෦ͷεϖʔε 8dp • ϦετλΠτϧͷߴ͞ 56dp components p35

Slide 47

Slide 47 text

࢓༷ - ΞΠίϯ෇͖άϦου Modal bottom sheets • ը໘ࠨӈͷ༨ന 24dp • άϦουϦετͷ্Լεϖʔε 24dp • ΞΠίϯ 48x48dp ॎҐஔΛதԝἧ͑ ԣҐஔΛۉ౳ʹ഑ஔ • ςΩετ ߴ͞16dp ΞΠίϯͷԼʹ தԝἧ͑ • άϦουԼ෦ͷύσΟϯά 24dp components p35

Slide 48

Slide 48 text

࢓༷ - γʔτͷߴ͞ Modal bottom sheets • ը໘ͷԼ෦͔Β্෦ʹεϥΠυදࣔ • ࠷ॳͷߴ͞͸ؚ·ΕΔϦετΞΠς Ϝͷߴ͞ʹൺྫ • ίϯςϯπ͕ଟ͍৔߹͸ 16:9 ͷ ΩʔϥΠϯΛ௒͑ͳ͍Α͏ʹ͢Δ • Ϣʔβʔ্͕ʹεϫΠϓͯ͠׬શʹ ల։͢ΔͱεΫϩʔϧՄೳʹͳΔ components p36

Slide 49

Slide 49 text

࢓༷ - ύιίϯͱλϒϨοτ • ը໘୺͔Βͷεϖʔεͷ࠷খ஋ͱγʔτͷ࠷ খ෯͕ఆٛ͞Ε͍ͯΔ • ͋Δ਺஋ͷഒ਺Λ࢖͏ɻͨͱ͑͹ΞϓϦόʔ ͷߴ͞Λ୯Ґͱͯ͠ɺͦͷഒ਺Λ࢖͏ Modal bottom sheets components p37

Slide 50

Slide 50 text

࢓༷ - ύιίϯͱλϒϨοτ Modal bottom sheets