Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Material Design Guideline: Dialogs, Dividers
Search
takuaraki
August 22, 2017
Design
0
360
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
46
Androidアプリ内課金のテスト
takuaraki
0
400
GASでSlackBot
takuaraki
1
470
Material Design Guideline: Bottom components
takuaraki
0
460
App Shortcuts
takuaraki
0
320
[関モバ#18] SQLBrite&SQLDelight
takuaraki
0
400
A/B testing GTM&GA vs Firebase
takuaraki
1
2.9k
【関モバ#12】Google Tag ManagerでモバイルアプリのABテストをする
takuaraki
1
580
Other Decks in Design
See All in Design
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
120
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
310
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
220
MLP_Cleanup_Olga
olgastoryboard
0
120
RIDLEY JONES - Ridley's Christmas Carol
serenascipio
1
150
Sci-Fi: Descenso
elrtovar
0
260
User Experience Design für Entwickler
joergneumann
4
950
Pizza Trail v2
jerfusart
0
110
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
12
3.5k
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
1
11k
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
1
460
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
1.8k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
101
6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
How to train your dragon (web standard)
notwaldorf
85
5.6k
What the flash - Photography Introduction
edds
67
11k
Gamification - CAS2011
davidbonilla
79
5k
The Language of Interfaces
destraynor
153
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
5
490
Become a Pro
speakerdeck
PRO
22
4.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
GraphQLとの向き合い方2022年版
quramy
43
13k
Designing Experiences People Love
moore
138
23k
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