Material Design Guideline: Dialogs, Dividers

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

Transcript

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