Material Design Guideline: Dialogs, Dividers

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