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

Material Design Guideline: Dialogs, Dividers

C49eed1cf04caeb4de645d6d9117708d?s=47 takuaraki
August 22, 2017

Material Design Guideline: Dialogs, Dividers

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

C49eed1cf04caeb4de645d6d9117708d?s=128

takuaraki

August 22, 2017
Tweet

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