Tweet
Tweet

Slide 1

Slide 1 text

࣮ફDark ModeରԠ @hirothings

Slide 2

Slide 2 text

ࣗݾ঺հ • @hirothings (Objective-ͻΖC) • ݩϥʔϝϯ԰ళ௕ϓϩάϥϚʔ • ৭ʑ͋ͬͯݱࡏiOSσϕϩούʔ

Slide 3

Slide 3 text

৭ͷࢦఆʹ͍ͭͯ

Slide 4

Slide 4 text

μʔΫϞʔυରԠ࣌ͷ৭ઃܭʹ͍ͭͯ Human Interface GuidelinesΑΓ • ηϚϯςΟοΫΧϥʔΛ࢖༻͢Δ͜ͱ(label, separator, systemBackground..etc) • γεςϜఆٛͷ৭Λ࢖༻͢Δͱɺલܠͱഎܠͷίϯςϯπؒͷద੾ͳίϯ τϥετൺ͕อূ͞ΕΔ(ޙड़) • ΧελϜΧϥʔͷ৔߹ɺಛʹখ͍͞ςΩετͷ৔߹ɺίϯτϥετൺ7ɿ1 Λ໨ࢦ͢͜ͱ • μʔΫϞʔυͰίϯςϯπʹന͍എܠΛ࢖༻͢Δඞཁ͕͋Δ৔߹͸ɺपғ ͷ҉͍ίϯςϯπʹରͯ͠എܠ͕ޫΒͳ͍Α͏ʹɺগ͠҉͍നΛબ୒͢Δ ͜ͱ

Slide 5

Slide 5 text

Color SetΛ׆༻͢Δ

Slide 6

Slide 6 text

Color SetΛ׆༻͢Δ Light Dark Any

Slide 7

Slide 7 text

Color SetΛ׆༻͢Δ SwiftGenͳͲΛ࢖ͬͯɺίʔυ͔Βࢀর͢Δ࣌ʹλΠϓηʔϑʹͳΔΑ͏ରԠ͢Δͱ ͞Βʹศརɻ ը૾ͷAssetsͱ৭ͷAssets͸෼͚ͯ؅ཧ͢Δͱݟ΍͍͢

Slide 8

Slide 8 text

CONTRAST CHECKERͰίϯτϥετൺͷ֬ೝ͕Ͱ͖Δ https://contrastchecker.com/

Slide 9

Slide 9 text

ը૾ʹ͍ͭͯ

Slide 10

Slide 10 text

SF Symbols SF SymbolsΛ࢖͏ͱࣗಈͰ྆ϞʔυରԠͰ͖Δ

Slide 11

Slide 11 text

SF Symbols SF Symbolsʹ͍ͭͯิ଍ • 1500Ҏ্ͷΞΠίϯηοτ • 9ͭͷ΢ΣΠτ • iOS 13~ • SF Symbols appͰϓϨϏϡʔ͕Մೳ (લεϥΠυͷεΫγϣ΋͜Ε) • https://developer.apple.com/design/human-interface-guidelines/sf- symbols/overview/ • download the SF Symbols app. ͷ෦෼͔ΒDLͰ͖Δ..(෼͔ΓͮΒ͍)

Slide 12

Slide 12 text

Image Assets Color Setಉ༷ɺμʔΫɾϥΠτࢦఆ͕Մೳ

Slide 13

Slide 13 text

Background Colorʹ͍ͭͯ

Slide 14

Slide 14 text

γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ γεςϜఆٛͷ৭Λ࢖༻͢ΔͱɺϑΥΞάϥ΢ϯυͱόοΫάϥ ΢ϯυͷίϯςϯπؒͷద੾ͳίϯτϥετൺ͕อূ͞ΕΔ “Using system-defined colors ensures a proper contrast ratio between your foreground and background content.” (HIG) .systemBackgroundColor .secondarySystemBackground .. etc

Slide 15

Slide 15 text

γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ ϑΥΞάϥ΢ϯυ(Modal) όοΫάϥ΢ϯυ

Slide 16

Slide 16 text

γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ ϑΥΞάϥ΢ϯυ(Modal) όοΫάϥ΢ϯυ Ϟʔμϧͷഎܠ৭ ͷํ͕શମతʹ ໌Δ͍

Slide 17

Slide 17 text

γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ • γεςϜఆٛͷഎܠ৭Λ࢖͏ϝϦοτ • ࣗ਎ͷViewͷ֊૚ʹԠͯ͡ɺ৭߹͍ΛࣗಈͰௐ੔ͯ͘͠ΕΔ • .systemBackgroundColor ͳͲΛࢦఆ͢Δ͚ͩ • ͜ͷը໘͸Ϟʔμϧ͔ͩΒ..ͱҰͭҰͭΧελϜΧϥʔΛࢦ ఆ͢Δͷ͸ഁ୼͢Δ

Slide 18

Slide 18 text

γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ • γεςϜఆٛͷഎܠ৭Λ࢖͏ฐ֐ • LightϞʔυ࣌ͷഎܠ৭ΛΧελϚΠζͰ͖ͳ͍ ͜͏͍͏୶͍τʔϯͷഎܠ৭ΛΞϓϦͷ τʔϯʹ߹Θͤͯࢦఆ͍ͨ࣌͠ͳͲ

Slide 19

Slide 19 text

ίʔυͰରԠ͢Δ

Slide 20

Slide 20 text

ίʔυͰରԠ͕ඞਢͷՕॴ CALayer • borderColor • shadowOpacity • shadowColor ..etc

Slide 21

Slide 21 text

ϢʔβʔͷDark / Light੾Γସ͑ʹϦΞϧλΠϜʹ ൓Ԡ͢ΔͨΊ UITraitCollectionΛ࢖͏ • OSͷΞϐΞϥϯε͕੾ΓସΘͬͨλΠϛϯάͰݺ͹ΕΔ ྫ͑͹Ϣʔβʔ͕μʔΫϞʔυʹ੾Γସ͑ͨλΠϛϯάͰ
 ΞΠίϯΛμʔΫϞʔυ࢓༷ʹ͢Δ͜ͱ΋Մೳ

Slide 22

Slide 22 text

ϢʔβʔͷDark / Light੾Γସ͑ʹϦΞϧλΠϜʹ ൓Ԡ͢ΔͨΊ https://developer.apple.com/videos/play/wwdc2019/214/ UITraitCollectionΛ࢖͏ • UIColorͷΫϩʔδϟΛ࢖ͬͨॳظԽ΋͋Γ

Slide 23

Slide 23 text

μʔΫϞʔυͷσόοάʹ͍ͭͯ

Slide 24

Slide 24 text

Storyboard, XibΛ࢖͏ͱ֬ೝ͕ϥΫ

Slide 25

Slide 25 text

Storyboard, XibΛ࢖͏ͱ֬ೝ͕ϥΫ ϥΠτɾμʔΫͷ؆қ֬ೝ͕ Ϗϧυͳ͠Ͱग़དྷΔ

Slide 26

Slide 26 text

γϛϡϨʔλͷLight / Dark੾Γସ͑΋ XcodeͰ΍ΔͱϥΫ Accessibilityͷઃఆ΋

Slide 27

Slide 27 text

࣮ػͩͱίϯτϩʔϧηϯλʔͰαοͱม͑ΒΕΔ ઃఆ > ίϯτϩʔϧηϯλʔ > ίϯτϩʔϧηϯλʔΛΧελϚΠζ

Slide 28

Slide 28 text

UITraitCollectionͷΠϕϯτͷσόοά traitCollectionDidChange(_:) ΍ willTransition(to:with:)ͷ ϩΪϯά͕Մೳ(iOS13~) https://developer.apple.com/videos/play/wwdc2019/214/

Slide 29

Slide 29 text

ଞTIPS • ྫ͑εϓϥογϡ࣮૷͍ͯ͠ͳͯ͘΋ɺLaunchScreenͷμʔΫ ϞʔυରԠ͸ࡁ·ͤΔ͜ͱ • ΞϓϦىಈ࣌ɺҰॠന͍ը໘͕දࣔ͞ΕΔ • ๨Εͯͦͷ··ϦϦʔεͨ͠ • (SlackͷΞϓϦ΋ରԠ๨Εͯͨˠ) • μʔΫϞʔυରԠ͠ͳ͍৔߹͸ɺInfo-Plistʹ UIUserInterfaceStyle: LightΛࢦఆ͢Δ

Slide 30

Slide 30 text

μʔΫϞʔυରԠͷϋʔυϧʹ͍ͭͯ • ը໘਺͸ແ࿦ɺطଘΞϓϦͷ৭ͷ؅ཧঢ়ଶʹΑͬͯมΘΔ • Named ColorsΛఆٛ͢Δ͔͠ͳ͍ͷͰɺରԠ͢Δͱࣗવͱ৭ ͷ؅ཧ͕੔ཧ͞ΕΔ • ΞϓϦͷੑ࣭ʹΑΔ • ϢʔςΟϦςΟܥͷΞϓϦͩͱൺֱతָ͔ɻधཁ΋͋Γͦ͏ • ΠϥετΛ;ΜͩΜʹ࢖͍ͬͯΔΞϓϦͳͲμʔΫϞʔυͱ ͷ૬ੑ͕೉͍͠΋ͷ΋͋Δ

Slide 31

Slide 31 text

νʔϜ։ൃͰରԠ͢Δ৔߹ • ίϯϙʔωϯτϨϕϧͰͷμʔΫϞʔυͷݕূ͸ඞཁ • 1ը໘ͣͭμʔΫϞʔυ༻ͷը໘Λى͜͢ͷ͸ݶք͕͋Γͦ͏(५ ୔ʹσβΠφʔͷϦιʔε͕͋ΔͳΒ΍ΕΔ) • ίϯϙʔωϯτͷݕূΛࡁ·ͤͨΒɺ࣮ࡍʹը໘Λ࣮૷ͯ͠σβ Πφʔͱ౎౓֬ೝ͢ΔελΠϧ͕ݱ࣮ղ͔ͱࢥΘΕΔ • ϓϩμΫτͰ࣮૷͍ͯ͠ͳ͍ͷͰໝ૝Ϩϕϧ..