Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Material Design Guideline: Dialogs, Dividers
takuaraki
August 22, 2017
Design
0
240
Material Design Guideline: Dialogs, Dividers
マテリアルデザインガイドライン輪読会 #2(
https://connpass.com/event/63771/
) 用のスライドです。
takuaraki
August 22, 2017
Tweet
Share
More Decks by takuaraki
See All by takuaraki
2021/02/03 発覚の COCOA Android版 不具合について
takuaraki
0
38
Androidアプリ内課金のテスト
takuaraki
0
230
GASでSlackBot
takuaraki
1
430
Material Design Guideline: Bottom components
takuaraki
0
310
App Shortcuts
takuaraki
0
250
[関モバ#18] SQLBrite&SQLDelight
takuaraki
0
350
A/B testing GTM&GA vs Firebase
takuaraki
1
2.7k
【関モバ#12】Google Tag ManagerでモバイルアプリのABテストをする
takuaraki
1
380
Other Decks in Design
See All in Design
The Triangle
wallabites
0
130
The Party! - Story Sequence
diablicos_
0
140
幸せなパーパス経営の実現に欠かせない、社員の「個人理念」の重要性と活用法
kakukoki
PRO
0
130
Bec Purser - Are you consulting, collaborating, or co-designing? And why it matters.
uxaustralia
PRO
0
110
コミュニケーションデザイン組織のタタキ台 - SmartHR Communication Design Group
bebe
4
1.6k
My Yahoo Refresh Overview
xuechunwu
0
320
Illustration journey @Yahoo
xuechunwu
0
610
採用担当デザイナーがみるポートフォリオのポイント
yonekura907
0
600
Cat Seance
emmamsketches
0
140
Storyboard: Midnight Cookie
luchiianita
0
210
なみなみかみっ
naminamikami2021
1
240
Filmarks デザイナー向け紹介資料
shingo2000
2
860
Featured
See All Featured
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Become a Pro
speakerdeck
PRO
3
820
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.3k
Rails Girls Zürich Keynote
gr2m
86
12k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Visualization
eitanlees
124
11k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
104
16k
Fireside Chat
paigeccino
11
1.3k
The Cult of Friendly URLs
andyhume
68
4.8k
Statistics for Hackers
jakevdp
781
210k
Robots, Beer and Maslow
schacon
152
7.1k
Transcript
Dialogs, Dividers components.pdf p122~155
@ara_tack
components.pdf p122~155 • μΠΞϩά (Dialogs) • σΟόΠμʔ (Dividers)
Dialogs
Dialogs • ಛఆͷλεΫʹॏΛஔ͍ͨ ςΩετUIίϯτϩʔϧΛ ؚΉ • ϢʔβʔʹॏཁͳใΛΒ ͤͨΓɺܾఆΛԼ͢Α͏ʹٻ ΊͨΓ͢Δ •
ෳͷλεΫʹؔΘΔ͜ͱ ͋Δ
Dialogs • ඪ४ͷϚςϦΞϧγεςϜμΠΞϩά • ඪ४Ҏ֎ͷμΠΞϩάʢ͜͜ͰѻΘͳ͍ʣ • ߪೖϑϩʔ༻ͷϒϥϯυϘλϯ • ඇඪ४UIͷϑΥʔϜ •
ݻ༗ͷϨΠΞτ
ಈ࡞ େ͖ͳ͛ʹͳΒͳ͍Α͏ʹ͢Δ • ݱࡏͷλεΫΛதஅ͢ΔͷͰɺ߇͑Ίʹ • ସखஈɿϝχϡʔɺΠϯϥΠϯల։ Dialogs
ಈ࡞ μΠΞϩάΛཱͨͤΔ • ଞͷཁૉͰ෴͍Ӆͨ͠Γɺը໘্ʹҰ෦ ͷΈදࣔͤͨ͞ΓNG • ඇදࣔʹ͞ΕΔ͔ඞཁͳૢ࡞͕ߦΘΕΔ· ͰɺৗʹϑΥʔΧε͕อ࣋͞ΕΔ Dialogs
ಈ࡞ ආ͚Δ͖͜ͱ • μΠΞϩά͔ΒμΠΞϩάΛ։͘ • εΫϩʔϧ͢ΔίϯςϯπΛؚΊΔ Dialogs
ಈ࡞ શը໘μΠΞϩάͷྫ֎ • ՃͷμΠΞϩάΛ։ ͘͜ͱ͕Ͱ͖Δ • ΞϓϦͰೝࣝ͞ΕΔZ ਂࢹ֮తͳϊΠζ Λ૿͠ʹ͍͘ Dialogs
ಈ࡞ εΫϩʔϧՄೳͳίϯςϯπͷྫ֎ • બࢶͷεΫϩʔϧՄೳͳϦετΛදࣔ͢Δͱ͖ λΠτϧ͕Ұ൪্ʹݻఆ͞ΕΔɻ͜ΕʹΑΓɺͲͷ ҐஔͷબࢶΛબΜͰλΠτϧͱҰॹʹݟΒΕΔ • ͦΕҎ֎ͷ߹ɺλΠτϧίϯςϯπͱҰॹʹε Ϋϩʔϧ͢ΔɻΞΫγϣϯʢOKϘλϯͳͲʣৗ ʹఆҐஔ
Dialogs
ಈ࡞ εΫϩʔϧՄೳͳίϯ ςϯπ ྫʣண৴ԻϦετ Dialogs
ಈ࡞ ՃͷίϯςϯπΛදࣔ͢Δ • ΠϯϥΠϯల։Λར༻ • େنͳίϯςϯπ͚ʹ࠷దԽ͞Εͨ ସίϯϙʔωϯτΛݕ౼͢Δ Dialogs
ಈ࡞ μΠΞϩάΛඇදࣔʹ͢Δ • μΠΞϩάͷ֎ଆΛλοϓ·ͨΫϦοΫ͢ Δ͔ɺγεςϜ(Android)ͷΔϘλϯͰඇ දࣔʹͰ͖Δ • ͍ͣΕ͔ͷબࢶ͕બΕΔΑ͏ʹɺμΠΞ ϩάͷඇදࣔΛͤ͞ͳ͍͜ͱՄೳ Dialogs
छྨ • Ξϥʔτ • γϯϓϧϝχϡʔʢସίϯϙʔωϯτʣ • γϯϓϧμΠΞϩά • ֬ೝμΠΞϩά •
શը໘μΠΞϩά Dialogs
Ξϥʔτ • ۓٸʹதஅΛੜͤͯ͡͞Ϣʔβʔʹঢ়گΛ ΒͤΔ • ঝೝΛඞཁͱ͢Δ • εφοΫόʔͱͷҧ͍ɿεφοΫόʔૢ࡞ ޙͷิॿతͳใ&લͷૢ࡞ΛݩʹͤΔ Dialogs
ΞϥʔτɿλΠτϧόʔͳ͠ ͍ํ • ࣭Λ͢Δ • ૢ࡞Ϙλϯʹؔ࿈͢ Δهड़Λ࡞͢Δ Dialogs
ΞϥʔτɿλΠτϧόʔͳ͠ దͳྫ • ߠఆతʹ͑Δ ʮഁغ (Discard) ʯ • ൱ఆతʹ͑ΔʮΩϟϯ ηϧ
(Cancel)ʯ • ܾఆʹΑͬͯԿ͕ى͜Δ ͔͕໌֬ Dialogs
ΞϥʔτɿλΠτϧόʔͳ͠ ෆదͳྫ • No, Yes Ͱ൱ఆ͔ߠ ఆ͔Λ͑Δ • ܾఆʹΑͬͯԿ͕ ى͜Δ͔͕໌֬Ͱ
ͳ͍ Dialogs
ΞϥʔτɿλΠτϧόʔ͖ • ϦεΫ͕ߴ͍ঢ়گʢଓ͕அ͞ΕΔՄೳੑ ͕͋Δ߹ͳͲʣͰར༻ • λΠτϧͱϘλϯͷςΩετ͚ͩͰબࢶ ͕ཧղͰ͖ΔΑ͏ʹ͢Δ Dialogs
ΞϥʔτɿλΠτϧόʔ͖ దͳྫ • ۩ମతͳ࣭Λ͔͚͛ͯ ͍Δ • ੜ͡ΔӨڹΛ؆ܿʹઆ໌͠ ͍ͯΔ • ໌֬ͳΞΫγϣϯΛఏࣔ͠
͍ͯΔ Dialogs
ΞϥʔτɿλΠτϧόʔ͖ ෆదͳྫ • λΠτϧͷ࣭͕ᐆດ Ͱ͋Δ • ͲͷΑ͏ͳӨڹ͕ੜ͡ Δ͔ෆ໌ʢը૾͕ফ ͑Δͱ໌ه͍ͯ͠ͳ͍ʣ Dialogs
γϯϓϧϝχϡʔ • ϦετܗࣜͰબࢶ Λදࣔ͢Δ • બࢶΛλοϓ͢Δ ͱ͙͢ʹબ͕֬ఆ ͞ΕΔ Dialogs
γϯϓϧϝχϡʔ • ϦετܗࣜͰબࢶ Λදࣔ͢Δ • બࢶΛλοϓ͢Δ ͱ͙͢ʹબ͕֬ఆ ͞ΕΔ Dialogs
γϯϓϧϝχϡʔ γϯϓϧμΠΞϩάͱͷҧ͍ • γϯϓϧμΠΞϩάγϯϓϧϝχϡʔͱಉ͡ί ϯςϯπΛදࣔͰ͖Δ • μΠΞϩάϦετΞΠςϜʹ͍ͭͯৄ͍͠Φϓγϣ ϯΛදࣔͨ͠Γɺؔ࿈ΞΫγϣϯΛఏࣔͰ͖Δ • ϝχϡʔͷํ͕ίϯςΩετͷ͛ʹͳΒͳ͍
Dialogs
γϯϓϧμΠΞϩά • ϦετΞΠςϜʹ͍ͭ ͯՃͷใΞΫ γϣϯΛఏڙͰ͖Δ ྫʣΞόλʔɺΞΠ ίϯɺઆ໌༻ͷαϒ ςΩετɺؔ࿈ੑͷ ͳ͍ΞΫγϣϯ Dialogs
γϯϓϧμΠΞϩά • બࢶΛબͿͱͪ ʹͦͷબࢶʹ֬ఆ ͞Εͯด͡Δ • μΠΞϩάͷ֎Λλο ϓ͢Δ͔ΔϘλϯ Λԡ͢ͱૢ࡞͕Ωϟ ϯηϧ͞Εͯด͡Δ
Dialogs
γϯϓϧμΠΞϩά ໌ࣔతͳΩϟϯηϧϘλ ϯͳ͠ • ૢ࡞Λঝೝͨ͠ΓΩϟ ϯηϧͨ͠Γ͢Δ໌ࣔ తͳϘλϯΛ༻͠ͳ ͍ • ӈͷը૾ෆదͳྫ
Dialogs
γϯϓϧμΠΞϩά ༷ • ը໘ͷதԝʹਨ͔ͭਫฏʹදࣔ͢Δ • ը໘ͷ·Ͱͷڑɺࠨӈ40dpҎ্ɺ্Լ 24dpҎ্ • ίϯςϯπͷҐஔμΠΞϩάͷ͔Β24dp Dialogs
γϯϓϧμΠΞϩά ༷ • ߦͷߴ͞ม͑Δ͜ ͱ͕Ͱ͖Δ • ςΩετͷંΓฦ͠ ͕Ͱ͖Δʢγϯϓϧ ϝχϡʔͰෆՄʣ Dialogs
֬ೝμΠΞϩά • બ༰Λ໌ࣔతʹ֬ೝ ͢ΔΑ͏ٻΊΔ • OKΛλοϓ͢Δͱબ͞ ΕΔ • ΩϟϯηϧΛλοϓ͢Δ ͔ΔϘλϯΛԡ͢ͱɺ
มߋ༰͕ഁغ͞Εͯด ͡Δ Dialogs
֬ೝμΠΞϩά • બ༰Λ໌ࣔతʹ֬ೝ ͢ΔΑ͏ٻΊΔ • OKΛλοϓ͢Δͱબ͞ ΕΔ • ΩϟϯηϧΛλοϓ͢Δ ͔ΔϘλϯΛԡ͢ͱɺ
มߋ༰͕ഁغ͞Εͯด ͡Δ Dialogs
֬ೝμΠΞϩά ୯ҰͷΛ֬ೝ͢Δ • ϦετҎ֎ͷϨΠΞτ ༻Մೳ • ͋͘·Ͱ୯ҰͷΛબ ͢Δ͜ͱ͕త ྫʣ࣌ؒͱͰͳ͘ɺ ͷΈબ
Dialogs
֬ೝμΠΞϩά ΩϟϯηϧϘλϯͱ֬ೝϘ λϯ • ໌ࣔతͳ֬ೝϘλϯɺΩϟ ϯηϧϘλϯΛఏڙ͢Δ • ΩϟϯηϧϘλϯ͔Δ ϘλϯΛλοϓɺμΠΞ ϩάΛऴྃ͢Δͱมߋ
༰͕ഁغ͞ΕΔ Dialogs
֬ೝμΠΞϩά ෆదͳྫ • μΠΞϩάͷϘλϯ͕ 1͚ͭͩ • γεςϜͷΔϘλϯ ͕Ωϟϯηϧͳͷ͔֬ ೝͳͷ͔ᐆດʹͳΔ Dialogs
શը໘μΠΞϩά • ϞόΠϧͷΈ • Ұ࿈ͷλεΫ͕֬ఆ͢Δ· Ͱͷखॱ·ͨഁغ͞ΕΔ ·Ͱͷखॱ͕1ͭʹ·ͱΊ ΒΕΔ • [อଘ]
λοϓͰอଘɻ[X] λοϓͰมߋ༰͕ഁغ͞ Εͯด͡Δ Dialogs
શը໘μΠΞϩά • ෳࡶͳϨΠΞτ͕Մೳ • ΞϓϦͰೝࣝ͞ΕΔߴ ΛҰ࣌తʹߴΊͷϕʔε ϥΠϯʹηοτ͢͜͠ ͱ͕Ͱ͖Δ • γϯϓϧϝχϡʔγϯ
ϓϧμΠΞϩάΛىಈͰ ͖Δ Dialogs
શը໘μΠΞϩά ࣍ͷ͍ͣΕ͔ͷ݅Λຬͨͤར༻Մೳɿ • ΩʔϘʔυͷΑ͏ͳIMEΛඞཁͱ͢Δίϯϙʔωϯτʢબ πʔϧϑΥʔϜཝͳͲʣؚ͕·Ε͍ͯΔ • มߋ༰͕ϦΞϧλΠϜͰอଘ͞Εͳ͍ • ΞϓϦʹԼॻ͖ػೳ͕ͳ͍߹ •
Ұׅૢ࡞Λߦ͏߹มߋ༰Λૹ৴͢ΔલʹΩϡʔΛೖ ΕΔ߹ Dialogs
શը໘μΠΞϩά ΞΫγϣϯը໘্෦ • ֬ೝ • ൱ఆతͳΞΫγϣϯ Dialogs
શը໘μΠΞϩά ֬ೝ • ը໘ͷӈ্ʹ֬ೝͷΞΫγϣ ϯΛஔ • આ໌తͳಈࢺΛ༻ • ӈਤͷΑ͏ͳᐆດͳදݱ ༻͠ͳ͍
• μΠΞϩάͷඞਢ߲͕͢ ͯຬͨ͞ΕΔ·Ͱແޮ Dialogs
શը໘μΠΞϩά ഁغ • ഁغͷΞΫγϣϯ(ը໘ͷࠨ্ ʹ͋Δ[x])͔ΔϘλϯͰμΠ ΞϩάΛดͯ͡มߋΛഁغ͢ Δ • มߋ͕ͳ͍߹ด͡Δ͚ͩ •
มߋ͕͋Δ߹ɺΞΫγϣ ϯͷ֬ೝΛ͢Δ Dialogs
શը໘μΠΞϩά φϏήʔγϣϯ • ্ҹ (up arrow) ɺมߋ༰͕ͪʹ ֬ఆ͞ΕΔ͜ͱΛࣔ͢ • [X]
ɺมߋ༰͕͢ ͯഁغ͞ΕΔ Dialogs
શը໘μΠΞϩά φϏήʔγϣϯ • ্ҹ (up arrow) ɺมߋ༰͕ͪʹ ֬ఆ͞ΕΔ͜ͱΛࣔ͢ • [X]
ɺมߋ༰͕͢ ͯഁغ͞ΕΔ Dialogs
શը໘μΠΞϩά λΠτϧ • ಈతจࣈΛ༻͠ͳ͍ ʢӈਤෆదͳྫʣ • ʢ੩తจࣈͷ߹ʣඞ ཁʹԠͯ͡2ߦ·Ͱ ར༻Ͱ͖Δ Dialogs
શը໘μΠΞϩά ίϯςϯπΤϦΞʹλ ΠτϧΛஔ • ಈతจࣈʢՄมʣ • ҟͳΔݴޠͰಛఆͷ ୯ޠ͕͘ͳΔ߹ Dialogs
༷ • লུՄೳͳλΠτϧ • ίϯςϯπ • ΞΫγϣϯ Dialogs
༷ লུՄೳͳλΠτϧ • ͲͷΑ͏ͳબ͕ߦΘΕ Δ͔Λ؆୯ʹઆ໌͢Δ • ৗʹશମΛදࣔ͢Δ • ඞཁͳ߹ʹͷΈ༻ ͢Δ
Dialogs
༷ ίϯςϯπ • ςΩετUIίϯτ ϩʔϧཁૉ • ಛఆͷλεΫʢ֬ೝɺ બͳͲʣʹॏΛ ஔ͘ Dialogs
༷ ΞΫγϣϯ • ߠఆతͳΞΫγϣϯӈ ଆ • ൱ఆతͳΞΫγϣϯߠ ఆͷࠨྡ • ςΩετϥϕϧ۩ମత
ͳಈ࡞ Dialogs
༷ ঝೝͷΞΫγϣϯ • ίϯςϯπΛϢʔβʔ͕ঝೝ͢Δඞཁ͕͋Δ ߹ɺΞΫγϣϯ1ͭͷΞϥʔτΛ͏ • ߇͑Ίʹ༻͢Δ • ΠϯϥΠϯల։ͳͲͷผͷํ๏ݕ౼͢Δ Dialogs
༷ ΞΫγϣϯͷ • 3ͭҎ্ͷΞΫγϣϯΛؚΊͳ͍ʢબ͕ະ֬ ఆͷ··Εͤ͞ͳ͍ʣ • ৄࡉใΠϯϥΠϯల։Ͱදࣔ͢Δɺ·ͨ μΠΞϩάදࣔલʹఏڙ͢Δ Dialogs
༷ ʮৄࡉʯΛԡ͢ͱະ֬ఆͷ··Εͯ͠·͏ Dialogs
༷ େจࣈͷଘࡏ͠ͳ͍ݴޠ • தࠃޠɺຊޠɺؖࠃޠͳͲ • Ұ؏ੑͷ͋ΔஔɺִؒɺΧϥʔ • ༗ޮͳ͚࣌ͩ৭Λ͚ͭΔ Dialogs
༷ ྫʣؖࠃޠ Dialogs
༷ ίϯςϯπ ΨΠυϥΠϯ Dialogs
༷ ίϯςϯπͷԼͷύσΟϯά24dp Dialogs
༷ εΫϩʔϧͨ͠ঢ়ଶͷμΠΞϩά Dialogs
༷ Ϙλϯͷ෯ͱύσΟϯά • ߴ͞ 36dp • ࠷খ෯ 64dp • ଆͷύσΟϯά
8dp • ϘλϯؒͷύσΟϯά 8dp Dialogs
༷ ϘλϯΤϦΞͷߴ͞52dp Dialogs
༷ εΫϩʔϧঢ়ଶͰετϩʔΫͰ۠Δ Dialogs
༷ جຊతʹϘλϯྡΓ߹Θͤ Dialogs
༷ ςΩετϥϕϧ͕࠷େ෯Λ͑Δ߹ॎ Dialogs
༷ ΩʔϥΠϯ • ࠨӈͷ͔Β24dp • ΞΠίϯΞόλʔ ʹؔ࿈͚ͮΒΕͨί ϯςϯπࠨ͔Β 80dp Dialogs
༷ શը໘μΠΞϩάͷλΠτϧ Dialogs
Dividers
Dividers σόΠμʔΛ͏ͱɺϦετͷίϯςϯπ ϖʔδϨΠΞτΛ۠ͬͯάϧʔϓԽ͢Δ͜ ͱ͕Ͱ͖·͢ɻσόΠμʔࡉͯ͘৭ͷബ͍ܩઢ Ͱ͕͢ɺࢹ֮తʹۭؒతʹίϯςϯπΛ۠ ผͰ͖ΔेͳޮՌ͕͋Γ·͢ɻ αϒλΠτϧ
σόΠμʔͷछྨ • ϑϧϒϦʔυσόΠμʔ • ΠϯηοτσόΠμʔ • αϒϔομʔͱσόΠμʔ Dividers
σόΠμʔͷछྨ ϑϧϒϦʔυσόΠμʔ • ໌Β͔ʹҟͳΔίϯς ϯπΛ۠Δ • ϚςϦΞϧ͕ల։͢Δ ߹ͷγʔϜࣔͤΔ ʢઢ͕ಈ͘͜ͱͰಈ͖ ͕ೝࣝͰ͖Δʁʣ
Dividers
σόΠμʔͷछྨ ΠϯηοτσόΠμʔ • ಉྨͷίϯςϯπΠ ϯηοτσόΠμʔͰ ۠Δ • ΞΠίϯΞόλʔͳ ͲͷΞϯΧʔཁૉͱ Έ߹ΘͤΔ
Dividers
σόΠμʔͷछྨ αϒϔομʔͱσόΠμʔ • αϒϔομʔͱίϯς ϯπͷؔ࿈ੑΛڧΊΔ ඞཁ͕͋Δ • σόΠμʔΛαϒϔομʔ ͷ্ʹஔ͢Δ Dividers
༻ํ๏ ΞϯΧʔͷͳ͍߲ • ΞόλʔΞΠίϯͳ ͲͷΞϯΧʔ͕ͳ͍ ͷ • ϑϧϒϦʔυσόΠμʔ Λ༻͢Δͱݸʑͷ߲ Λ۠ผ͘͢͠ͳΔ
Dividers
༻ํ๏ ΞϯΧʔͷͳ͍߲ • ΞόλʔΞΠίϯͳ ͲͷΞϯΧʔ͕ͳ͍ ͷ • ϑϧϒϦʔυσόΠμʔ Λ༻͢Δͱݸʑͷ߲ Λ۠ผ͘͢͠ͳΔ
Dividers
༻ํ๏ ը૾ϕʔεͷίϯςϯ π • σόΠμʔෆཁ • ༨നͱαϒϔομʔ ͰηΫγϣϯ͕۠ ΒΕΔ Dividers
༻ํ๏ ଟ༻͠ͳ͍ • ݟ͕ͨࡶʹͳΔ • ΠϯηοτͳΒগ͠ Ϛγ • దͳྔ͕ྑ͍ Dividers
༻ํ๏ ଟ༻͠ͳ͍ • ݟ͕ͨࡶʹͳΔ • ΠϯηοτͳΒগ͠ Ϛγ • దͳྔ͕ྑ͍ Dividers
༻ํ๏ ଟ༻͠ͳ͍ • ݟ͕ͨࡶʹͳΔ • ΠϯηοτͳΒগ͠ Ϛγ • దͳྔ͕ྑ͍ Dividers
༷ • ϒϥοΫ͔ϗϫΠτ • ಁ໌12% • ෯1dp • ίϯςϯπλΠϧͷ ԼʹԊͬͯஔ
Dividers