Material Design Guideline: Dialogs, Dividers
by
takuaraki
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Dialogs, Dividers components.pdf p122~155
Slide 2
Slide 2 text
@ara_tack
Slide 3
Slide 3 text
components.pdf p122~155 • μΠΞϩά (Dialogs) • σΟόΠμʔ (Dividers)
Slide 4
Slide 4 text
Dialogs
Slide 5
Slide 5 text
Dialogs • ಛఆͷλεΫʹॏΛஔ͍ͨ ςΩετUIίϯτϩʔϧΛ ؚΉ • ϢʔβʔʹॏཁͳใΛΒ ͤͨΓɺܾఆΛԼ͢Α͏ʹٻ ΊͨΓ͢Δ • ෳͷλεΫʹؔΘΔ͜ͱ ͋Δ
Slide 6
Slide 6 text
Dialogs • ඪ४ͷϚςϦΞϧγεςϜμΠΞϩά • ඪ४Ҏ֎ͷμΠΞϩάʢ͜͜ͰѻΘͳ͍ʣ • ߪೖϑϩʔ༻ͷϒϥϯυϘλϯ • ඇඪ४UIͷϑΥʔϜ • ݻ༗ͷϨΠΞτ
Slide 7
Slide 7 text
ಈ࡞ େ͖ͳ͛ʹͳΒͳ͍Α͏ʹ͢Δ • ݱࡏͷλεΫΛதஅ͢ΔͷͰɺ߇͑Ίʹ • ସखஈɿϝχϡʔɺΠϯϥΠϯల։ Dialogs
Slide 8
Slide 8 text
ಈ࡞ μΠΞϩάΛཱͨͤΔ • ଞͷཁૉͰ෴͍Ӆͨ͠Γɺը໘্ʹҰ෦ ͷΈදࣔͤͨ͞ΓNG • ඇදࣔʹ͞ΕΔ͔ඞཁͳૢ࡞͕ߦΘΕΔ· ͰɺৗʹϑΥʔΧε͕อ࣋͞ΕΔ Dialogs
Slide 9
Slide 9 text
ಈ࡞ ආ͚Δ͖͜ͱ • μΠΞϩά͔ΒμΠΞϩάΛ։͘ • εΫϩʔϧ͢ΔίϯςϯπΛؚΊΔ Dialogs
Slide 10
Slide 10 text
ಈ࡞ શը໘μΠΞϩάͷྫ֎ • ՃͷμΠΞϩάΛ։ ͘͜ͱ͕Ͱ͖Δ • ΞϓϦͰೝࣝ͞ΕΔZ ਂࢹ֮తͳϊΠζ Λ૿͠ʹ͍͘ Dialogs
Slide 11
Slide 11 text
ಈ࡞ εΫϩʔϧՄೳͳίϯςϯπͷྫ֎ • બࢶͷεΫϩʔϧՄೳͳϦετΛදࣔ͢Δͱ͖ λΠτϧ͕Ұ൪্ʹݻఆ͞ΕΔɻ͜ΕʹΑΓɺͲͷ ҐஔͷબࢶΛબΜͰλΠτϧͱҰॹʹݟΒΕΔ • ͦΕҎ֎ͷ߹ɺλΠτϧίϯςϯπͱҰॹʹε Ϋϩʔϧ͢ΔɻΞΫγϣϯʢOKϘλϯͳͲʣৗ ʹఆҐஔ Dialogs
Slide 12
Slide 12 text
ಈ࡞ εΫϩʔϧՄೳͳίϯ ςϯπ ྫʣண৴ԻϦετ Dialogs
Slide 13
Slide 13 text
ಈ࡞ ՃͷίϯςϯπΛදࣔ͢Δ • ΠϯϥΠϯల։Λར༻ • େنͳίϯςϯπ͚ʹ࠷దԽ͞Εͨ ସίϯϙʔωϯτΛݕ౼͢Δ Dialogs
Slide 14
Slide 14 text
ಈ࡞ μΠΞϩάΛඇදࣔʹ͢Δ • μΠΞϩάͷ֎ଆΛλοϓ·ͨΫϦοΫ͢ Δ͔ɺγεςϜ(Android)ͷΔϘλϯͰඇ දࣔʹͰ͖Δ • ͍ͣΕ͔ͷબࢶ͕બΕΔΑ͏ʹɺμΠΞ ϩάͷඇදࣔΛͤ͞ͳ͍͜ͱՄೳ Dialogs
Slide 15
Slide 15 text
छྨ • Ξϥʔτ • γϯϓϧϝχϡʔʢସίϯϙʔωϯτʣ • γϯϓϧμΠΞϩά • ֬ೝμΠΞϩά • શը໘μΠΞϩά Dialogs
Slide 16
Slide 16 text
Ξϥʔτ • ۓٸʹதஅΛੜͤͯ͡͞Ϣʔβʔʹঢ়گΛ ΒͤΔ • ঝೝΛඞཁͱ͢Δ • εφοΫόʔͱͷҧ͍ɿεφοΫόʔૢ࡞ ޙͷิॿతͳใ&લͷૢ࡞ΛݩʹͤΔ Dialogs
Slide 17
Slide 17 text
ΞϥʔτɿλΠτϧόʔͳ͠ ͍ํ • ࣭Λ͢Δ • ૢ࡞Ϙλϯʹؔ࿈͢ Δهड़Λ࡞͢Δ Dialogs
Slide 18
Slide 18 text
ΞϥʔτɿλΠτϧόʔͳ͠ దͳྫ • ߠఆతʹ͑Δ ʮഁغ (Discard) ʯ • ൱ఆతʹ͑ΔʮΩϟϯ ηϧ (Cancel)ʯ • ܾఆʹΑͬͯԿ͕ى͜Δ ͔͕໌֬ Dialogs
Slide 19
Slide 19 text
ΞϥʔτɿλΠτϧόʔͳ͠ ෆదͳྫ • No, Yes Ͱ൱ఆ͔ߠ ఆ͔Λ͑Δ • ܾఆʹΑͬͯԿ͕ ى͜Δ͔͕໌֬Ͱ ͳ͍ Dialogs
Slide 20
Slide 20 text
ΞϥʔτɿλΠτϧόʔ͖ • ϦεΫ͕ߴ͍ঢ়گʢଓ͕அ͞ΕΔՄೳੑ ͕͋Δ߹ͳͲʣͰར༻ • λΠτϧͱϘλϯͷςΩετ͚ͩͰબࢶ ͕ཧղͰ͖ΔΑ͏ʹ͢Δ Dialogs
Slide 21
Slide 21 text
ΞϥʔτɿλΠτϧόʔ͖ దͳྫ • ۩ମతͳ࣭Λ͔͚͛ͯ ͍Δ • ੜ͡ΔӨڹΛ؆ܿʹઆ໌͠ ͍ͯΔ • ໌֬ͳΞΫγϣϯΛఏࣔ͠ ͍ͯΔ Dialogs
Slide 22
Slide 22 text
ΞϥʔτɿλΠτϧόʔ͖ ෆదͳྫ • λΠτϧͷ࣭͕ᐆດ Ͱ͋Δ • ͲͷΑ͏ͳӨڹ͕ੜ͡ Δ͔ෆ໌ʢը૾͕ফ ͑Δͱ໌ه͍ͯ͠ͳ͍ʣ Dialogs
Slide 23
Slide 23 text
γϯϓϧϝχϡʔ • ϦετܗࣜͰબࢶ Λදࣔ͢Δ • બࢶΛλοϓ͢Δ ͱ͙͢ʹબ͕֬ఆ ͞ΕΔ Dialogs
Slide 24
Slide 24 text
γϯϓϧϝχϡʔ • ϦετܗࣜͰબࢶ Λදࣔ͢Δ • બࢶΛλοϓ͢Δ ͱ͙͢ʹબ͕֬ఆ ͞ΕΔ Dialogs
Slide 25
Slide 25 text
γϯϓϧϝχϡʔ γϯϓϧμΠΞϩάͱͷҧ͍ • γϯϓϧμΠΞϩάγϯϓϧϝχϡʔͱಉ͡ί ϯςϯπΛදࣔͰ͖Δ • μΠΞϩάϦετΞΠςϜʹ͍ͭͯৄ͍͠Φϓγϣ ϯΛදࣔͨ͠Γɺؔ࿈ΞΫγϣϯΛఏࣔͰ͖Δ • ϝχϡʔͷํ͕ίϯςΩετͷ͛ʹͳΒͳ͍ Dialogs
Slide 26
Slide 26 text
γϯϓϧμΠΞϩά • ϦετΞΠςϜʹ͍ͭ ͯՃͷใΞΫ γϣϯΛఏڙͰ͖Δ ྫʣΞόλʔɺΞΠ ίϯɺઆ໌༻ͷαϒ ςΩετɺؔ࿈ੑͷ ͳ͍ΞΫγϣϯ Dialogs
Slide 27
Slide 27 text
γϯϓϧμΠΞϩά • બࢶΛબͿͱͪ ʹͦͷબࢶʹ֬ఆ ͞Εͯด͡Δ • μΠΞϩάͷ֎Λλο ϓ͢Δ͔ΔϘλϯ Λԡ͢ͱૢ࡞͕Ωϟ ϯηϧ͞Εͯด͡Δ Dialogs
Slide 28
Slide 28 text
γϯϓϧμΠΞϩά ໌ࣔతͳΩϟϯηϧϘλ ϯͳ͠ • ૢ࡞Λঝೝͨ͠ΓΩϟ ϯηϧͨ͠Γ͢Δ໌ࣔ తͳϘλϯΛ༻͠ͳ ͍ • ӈͷը૾ෆదͳྫ Dialogs
Slide 29
Slide 29 text
γϯϓϧμΠΞϩά ༷ • ը໘ͷதԝʹਨ͔ͭਫฏʹදࣔ͢Δ • ը໘ͷ·Ͱͷڑɺࠨӈ40dpҎ্ɺ্Լ 24dpҎ্ • ίϯςϯπͷҐஔμΠΞϩάͷ͔Β24dp Dialogs
Slide 30
Slide 30 text
γϯϓϧμΠΞϩά ༷ • ߦͷߴ͞ม͑Δ͜ ͱ͕Ͱ͖Δ • ςΩετͷંΓฦ͠ ͕Ͱ͖Δʢγϯϓϧ ϝχϡʔͰෆՄʣ Dialogs
Slide 31
Slide 31 text
֬ೝμΠΞϩά • બ༰Λ໌ࣔతʹ֬ೝ ͢ΔΑ͏ٻΊΔ • OKΛλοϓ͢Δͱબ͞ ΕΔ • ΩϟϯηϧΛλοϓ͢Δ ͔ΔϘλϯΛԡ͢ͱɺ มߋ༰͕ഁغ͞Εͯด ͡Δ Dialogs
Slide 32
Slide 32 text
֬ೝμΠΞϩά • બ༰Λ໌ࣔతʹ֬ೝ ͢ΔΑ͏ٻΊΔ • OKΛλοϓ͢Δͱબ͞ ΕΔ • ΩϟϯηϧΛλοϓ͢Δ ͔ΔϘλϯΛԡ͢ͱɺ มߋ༰͕ഁغ͞Εͯด ͡Δ Dialogs
Slide 33
Slide 33 text
֬ೝμΠΞϩά ୯ҰͷΛ֬ೝ͢Δ • ϦετҎ֎ͷϨΠΞτ ༻Մೳ • ͋͘·Ͱ୯ҰͷΛબ ͢Δ͜ͱ͕త ྫʣ࣌ؒͱͰͳ͘ɺ ͷΈબ Dialogs
Slide 34
Slide 34 text
֬ೝμΠΞϩά ΩϟϯηϧϘλϯͱ֬ೝϘ λϯ • ໌ࣔతͳ֬ೝϘλϯɺΩϟ ϯηϧϘλϯΛఏڙ͢Δ • ΩϟϯηϧϘλϯ͔Δ ϘλϯΛλοϓɺμΠΞ ϩάΛऴྃ͢Δͱมߋ ༰͕ഁغ͞ΕΔ Dialogs
Slide 35
Slide 35 text
֬ೝμΠΞϩά ෆదͳྫ • μΠΞϩάͷϘλϯ͕ 1͚ͭͩ • γεςϜͷΔϘλϯ ͕Ωϟϯηϧͳͷ͔֬ ೝͳͷ͔ᐆດʹͳΔ Dialogs
Slide 36
Slide 36 text
શը໘μΠΞϩά • ϞόΠϧͷΈ • Ұ࿈ͷλεΫ͕֬ఆ͢Δ· Ͱͷखॱ·ͨഁغ͞ΕΔ ·Ͱͷखॱ͕1ͭʹ·ͱΊ ΒΕΔ • [อଘ] λοϓͰอଘɻ[X] λοϓͰมߋ༰͕ഁغ͞ Εͯด͡Δ Dialogs
Slide 37
Slide 37 text
શը໘μΠΞϩά • ෳࡶͳϨΠΞτ͕Մೳ • ΞϓϦͰೝࣝ͞ΕΔߴ ΛҰ࣌తʹߴΊͷϕʔε ϥΠϯʹηοτ͢͜͠ ͱ͕Ͱ͖Δ • γϯϓϧϝχϡʔγϯ ϓϧμΠΞϩάΛىಈͰ ͖Δ Dialogs
Slide 38
Slide 38 text
શը໘μΠΞϩά ࣍ͷ͍ͣΕ͔ͷ݅Λຬͨͤར༻Մೳɿ • ΩʔϘʔυͷΑ͏ͳIMEΛඞཁͱ͢Δίϯϙʔωϯτʢબ πʔϧϑΥʔϜཝͳͲʣؚ͕·Ε͍ͯΔ • มߋ༰͕ϦΞϧλΠϜͰอଘ͞Εͳ͍ • ΞϓϦʹԼॻ͖ػೳ͕ͳ͍߹ • Ұׅૢ࡞Λߦ͏߹มߋ༰Λૹ৴͢ΔલʹΩϡʔΛೖ ΕΔ߹ Dialogs
Slide 39
Slide 39 text
શը໘μΠΞϩά ΞΫγϣϯը໘্෦ • ֬ೝ • ൱ఆతͳΞΫγϣϯ Dialogs
Slide 40
Slide 40 text
શը໘μΠΞϩά ֬ೝ • ը໘ͷӈ্ʹ֬ೝͷΞΫγϣ ϯΛஔ • આ໌తͳಈࢺΛ༻ • ӈਤͷΑ͏ͳᐆດͳදݱ ༻͠ͳ͍ • μΠΞϩάͷඞਢ߲͕͢ ͯຬͨ͞ΕΔ·Ͱແޮ Dialogs
Slide 41
Slide 41 text
શը໘μΠΞϩά ഁغ • ഁغͷΞΫγϣϯ(ը໘ͷࠨ্ ʹ͋Δ[x])͔ΔϘλϯͰμΠ ΞϩάΛดͯ͡มߋΛഁغ͢ Δ • มߋ͕ͳ͍߹ด͡Δ͚ͩ • มߋ͕͋Δ߹ɺΞΫγϣ ϯͷ֬ೝΛ͢Δ Dialogs
Slide 42
Slide 42 text
શը໘μΠΞϩά φϏήʔγϣϯ • ্ҹ (up arrow) ɺมߋ༰͕ͪʹ ֬ఆ͞ΕΔ͜ͱΛࣔ͢ • [X] ɺมߋ༰͕͢ ͯഁغ͞ΕΔ Dialogs
Slide 43
Slide 43 text
શը໘μΠΞϩά φϏήʔγϣϯ • ্ҹ (up arrow) ɺมߋ༰͕ͪʹ ֬ఆ͞ΕΔ͜ͱΛࣔ͢ • [X] ɺมߋ༰͕͢ ͯഁغ͞ΕΔ Dialogs
Slide 44
Slide 44 text
શը໘μΠΞϩά λΠτϧ • ಈతจࣈΛ༻͠ͳ͍ ʢӈਤෆదͳྫʣ • ʢ੩తจࣈͷ߹ʣඞ ཁʹԠͯ͡2ߦ·Ͱ ར༻Ͱ͖Δ Dialogs
Slide 45
Slide 45 text
શը໘μΠΞϩά ίϯςϯπΤϦΞʹλ ΠτϧΛஔ • ಈతจࣈʢՄมʣ • ҟͳΔݴޠͰಛఆͷ ୯ޠ͕͘ͳΔ߹ Dialogs
Slide 46
Slide 46 text
༷ • লུՄೳͳλΠτϧ • ίϯςϯπ • ΞΫγϣϯ Dialogs
Slide 47
Slide 47 text
༷ লུՄೳͳλΠτϧ • ͲͷΑ͏ͳબ͕ߦΘΕ Δ͔Λ؆୯ʹઆ໌͢Δ • ৗʹશମΛදࣔ͢Δ • ඞཁͳ߹ʹͷΈ༻ ͢Δ Dialogs
Slide 48
Slide 48 text
༷ ίϯςϯπ • ςΩετUIίϯτ ϩʔϧཁૉ • ಛఆͷλεΫʢ֬ೝɺ બͳͲʣʹॏΛ ஔ͘ Dialogs
Slide 49
Slide 49 text
༷ ΞΫγϣϯ • ߠఆతͳΞΫγϣϯӈ ଆ • ൱ఆతͳΞΫγϣϯߠ ఆͷࠨྡ • ςΩετϥϕϧ۩ମత ͳಈ࡞ Dialogs
Slide 50
Slide 50 text
༷ ঝೝͷΞΫγϣϯ • ίϯςϯπΛϢʔβʔ͕ঝೝ͢Δඞཁ͕͋Δ ߹ɺΞΫγϣϯ1ͭͷΞϥʔτΛ͏ • ߇͑Ίʹ༻͢Δ • ΠϯϥΠϯల։ͳͲͷผͷํ๏ݕ౼͢Δ Dialogs
Slide 51
Slide 51 text
༷ ΞΫγϣϯͷ • 3ͭҎ্ͷΞΫγϣϯΛؚΊͳ͍ʢબ͕ະ֬ ఆͷ··Εͤ͞ͳ͍ʣ • ৄࡉใΠϯϥΠϯల։Ͱදࣔ͢Δɺ·ͨ μΠΞϩάදࣔલʹఏڙ͢Δ Dialogs
Slide 52
Slide 52 text
༷ ʮৄࡉʯΛԡ͢ͱະ֬ఆͷ··Εͯ͠·͏ Dialogs
Slide 53
Slide 53 text
༷ େจࣈͷଘࡏ͠ͳ͍ݴޠ • தࠃޠɺຊޠɺؖࠃޠͳͲ • Ұ؏ੑͷ͋ΔஔɺִؒɺΧϥʔ • ༗ޮͳ͚࣌ͩ৭Λ͚ͭΔ Dialogs
Slide 54
Slide 54 text
༷ ྫʣؖࠃޠ Dialogs
Slide 55
Slide 55 text
༷ ίϯςϯπ ΨΠυϥΠϯ Dialogs
Slide 56
Slide 56 text
༷ ίϯςϯπͷԼͷύσΟϯά24dp Dialogs
Slide 57
Slide 57 text
༷ εΫϩʔϧͨ͠ঢ়ଶͷμΠΞϩά Dialogs
Slide 58
Slide 58 text
༷ Ϙλϯͷ෯ͱύσΟϯά • ߴ͞ 36dp • ࠷খ෯ 64dp • ଆͷύσΟϯά 8dp • ϘλϯؒͷύσΟϯά 8dp Dialogs
Slide 59
Slide 59 text
༷ ϘλϯΤϦΞͷߴ͞52dp Dialogs
Slide 60
Slide 60 text
༷ εΫϩʔϧঢ়ଶͰετϩʔΫͰ۠Δ Dialogs
Slide 61
Slide 61 text
༷ جຊతʹϘλϯྡΓ߹Θͤ Dialogs
Slide 62
Slide 62 text
༷ ςΩετϥϕϧ͕࠷େ෯Λ͑Δ߹ॎ Dialogs
Slide 63
Slide 63 text
༷ ΩʔϥΠϯ • ࠨӈͷ͔Β24dp • ΞΠίϯΞόλʔ ʹؔ࿈͚ͮΒΕͨί ϯςϯπࠨ͔Β 80dp Dialogs
Slide 64
Slide 64 text
༷ શը໘μΠΞϩάͷλΠτϧ Dialogs
Slide 65
Slide 65 text
Dividers
Slide 66
Slide 66 text
Dividers σόΠμʔΛ͏ͱɺϦετͷίϯςϯπ ϖʔδϨΠΞτΛ۠ͬͯάϧʔϓԽ͢Δ͜ ͱ͕Ͱ͖·͢ɻσόΠμʔࡉͯ͘৭ͷബ͍ܩઢ Ͱ͕͢ɺࢹ֮తʹۭؒతʹίϯςϯπΛ۠ ผͰ͖ΔेͳޮՌ͕͋Γ·͢ɻ αϒλΠτϧ
Slide 67
Slide 67 text
σόΠμʔͷछྨ • ϑϧϒϦʔυσόΠμʔ • ΠϯηοτσόΠμʔ • αϒϔομʔͱσόΠμʔ Dividers
Slide 68
Slide 68 text
σόΠμʔͷछྨ ϑϧϒϦʔυσόΠμʔ • ໌Β͔ʹҟͳΔίϯς ϯπΛ۠Δ • ϚςϦΞϧ͕ల։͢Δ ߹ͷγʔϜࣔͤΔ ʢઢ͕ಈ͘͜ͱͰಈ͖ ͕ೝࣝͰ͖Δʁʣ Dividers
Slide 69
Slide 69 text
σόΠμʔͷछྨ ΠϯηοτσόΠμʔ • ಉྨͷίϯςϯπΠ ϯηοτσόΠμʔͰ ۠Δ • ΞΠίϯΞόλʔͳ ͲͷΞϯΧʔཁૉͱ Έ߹ΘͤΔ Dividers
Slide 70
Slide 70 text
σόΠμʔͷछྨ αϒϔομʔͱσόΠμʔ • αϒϔομʔͱίϯς ϯπͷؔ࿈ੑΛڧΊΔ ඞཁ͕͋Δ • σόΠμʔΛαϒϔομʔ ͷ্ʹஔ͢Δ Dividers
Slide 71
Slide 71 text
༻ํ๏ ΞϯΧʔͷͳ͍߲ • ΞόλʔΞΠίϯͳ ͲͷΞϯΧʔ͕ͳ͍ ͷ • ϑϧϒϦʔυσόΠμʔ Λ༻͢Δͱݸʑͷ߲ Λ۠ผ͘͢͠ͳΔ Dividers
Slide 72
Slide 72 text
༻ํ๏ ΞϯΧʔͷͳ͍߲ • ΞόλʔΞΠίϯͳ ͲͷΞϯΧʔ͕ͳ͍ ͷ • ϑϧϒϦʔυσόΠμʔ Λ༻͢Δͱݸʑͷ߲ Λ۠ผ͘͢͠ͳΔ Dividers
Slide 73
Slide 73 text
༻ํ๏ ը૾ϕʔεͷίϯςϯ π • σόΠμʔෆཁ • ༨നͱαϒϔομʔ ͰηΫγϣϯ͕۠ ΒΕΔ Dividers
Slide 74
Slide 74 text
༻ํ๏ ଟ༻͠ͳ͍ • ݟ͕ͨࡶʹͳΔ • ΠϯηοτͳΒগ͠ Ϛγ • దͳྔ͕ྑ͍ Dividers
Slide 75
Slide 75 text
༻ํ๏ ଟ༻͠ͳ͍ • ݟ͕ͨࡶʹͳΔ • ΠϯηοτͳΒগ͠ Ϛγ • దͳྔ͕ྑ͍ Dividers
Slide 76
Slide 76 text
༻ํ๏ ଟ༻͠ͳ͍ • ݟ͕ͨࡶʹͳΔ • ΠϯηοτͳΒগ͠ Ϛγ • దͳྔ͕ྑ͍ Dividers
Slide 77
Slide 77 text
༷ • ϒϥοΫ͔ϗϫΠτ • ಁ໌12% • ෯1dp • ίϯςϯπλΠϧͷ ԼʹԊͬͯஔ Dividers