Dark Mode / 20190617 #wwdc_rusuban

参加してなくてもついていけるもん！WWDCゴリゴリキャッチアップ会 - connpass
https://wwdc-gorilla.connpass.com/event/132144/
の発表資料です。

## 参考資料

Session 808: What's New in iOS Design
（このビデオをデザイナー巻き込んで観て共通認識にしとかないとヤバい）
https://developer.apple.com/videos/play/wwdc2019/808/

Session 214: Implementing Dark Mode on iOS
（本発表のソースコードはこのセッション参照）
https://developer.apple.com/videos/play/wwdc2019/214/

デザイナーもチェックしてほしいWWDC19のデザイン系アップデート #Zaim｜akatsuki174
https://blog.zaim.co.jp/n/n4cb9da9d5319

Transcript

1. Dark Mode by. 2019/6/17 WWDCΰϦΰϦΩϟονΞοϓձ 1
2. takasek @takasek Works OSS: ActionClosurable౳ App: PasteTheType Articles ʮίϯύΠϧΤϥʔ΍ϥϯλΠϜΤϥʔΛ௚͍ͯ͘͠ ͚ͩͰiOSΞϓϦͷ࡞Γํ͕Θ͔ΔϓϩδΣΫτʯ ʮ͓લΒ͕ModelͱݺͿΞϨΛͳΜͱݺͿ΂͖͔ʯ ʮiOSΞϓϦઃܭύλʔϯೖ໳ʯʢڞஶʣ 2
3. ໨࣍ 1. Dark ModeͷཱͪҐஔ 2. σβΠϯ্ͷ؍఺ 3. ࣮૷্ͷ؍఺ 3
4. ໨࣍ 1. Dark ModeͷཱͪҐஔ 2. σβΠϯ্ͷ؍఺ 3. ࣮૷্ͷ؍఺ 4
5. Dark Modeͱ͸͜͏͍͏΋ͷ • ಈը΍ࣸਅͳͲͷίϯςϯπʹूதͰ͖Δ • ޷Ήਓ͕͍Δ • ࠇഎܠʹϕθϧ͕ӅΕΔ • όοςϦʔফඅΛ཈͑Δ 5
6. iOS Design System 6
7. iOS Design System ͷ໨త • familiarity(Θ͔ΓΈ)ͷҡ࣋ • ϓϥοτϑΥʔϜͷҰ؏ੑ • ໌֬ͳ৘ใώΤϥϧΩʔ • ΞΫηγϏϦςΟ • γϯϓϧ 7
8. iOS Design System Λࢧ͑Δٕज़ • Dark Mode • Materials • UIKitۘ੡ͷViews 8
9. Appleͷओு UIKitۘ੡ͷʢ৭ɺmaterialɺviewɺcontrolʣΛ࢖͓͏ ඞཁͳ৔߹ʹΧελϚΠζͯ͘͠Ε 9
10. ໨࣍ 1. Dark ModeͷཱͪҐஔ 2. σβΠϯ্ͷ؍఺ 3. ࣮૷্ͷ؍఺ 10
11. Semantic Color ʹ৭Λϋʔυίʔυͤͣɺ໨తͰදݱ͢Δ ❌ • title: light=(0,0,0) dark=(255,255,255) • subtitle: light=(60,60,67) dark=(235,235,245) • icon: light=(60,60,67) dark=(235,235,245) • background: light=(118,118,128) dark=(118,118,128) 11
12. Semantic Color ʹ৭Λϋʔυίʔυͤͣɺ໨తͰදݱ͢Δ ⭕ • title: .labelColor • subtitle: .secondaryLabelColor • icon: .secondaryFillColor • background: .tertiaryFillColor 12
13. Semantic ColorͰදݱͰ͖͍ͯΕ͹ɺ UIKitۘ੡ͷviewͰͳ͘ͱ΋ɺΧελϜͷViewͰ΋μʔΫϞʔ υରԠ؆୯ 13
14. System Colors͸ɺLight, Darkʹ͘Θ͑ɺͦΕͧΕʹaccessible color΋ઃఆ͞Ε͍ͯΔ ʢ΋ͪΖΜɺΧελϜΧϥʔͰ΋ઃఆ͸ՄೳͰ͢ʣ https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/ 14
15. HIGʹ͸ଞʹ΋৭ʑॻ͍ͯ͋ΔͷͰඞಡ https://developer.apple.com/design/human-interface- guidelines/ios/visual-design/color/ • ʮSystem Colorͷ໨తΛ࠶ఆٛ͢ΔͳɺҙਤͷҰ؏ੑΛଛͳ͏ ͷͰʯ • ʮಠࣗ࠶ݱ΋͢Δͳɺ৭ʹௐ੔͕ೖΔ͜ͱ͕͋ΔͷͰʯ • ʮΧελϜΧϥʔͰ͸ɺલܠഎܠͷίϯτϥετൺ͸7:1ʯ ͳͲ 15
16. ͪΐͬͱ୤ઢ͠·͢ ͕… Χϥʔίϯτϥετͱ͍͑͹ɺtry! Swift TokyoͰ΋ྑ͍ൃද͕͋Γ·ͨ͠ Ͷɻ ๨Εͳ͍Α͏ʹ͍ͨ͠Ͱ͢Ͷɻ ΞΫηγϏϦςΟͷͨΊͷΧϥʔίϯτ ϥετ - niwatakoͷ͸ͯͳϒϩά http://niwatako.hatenablog.jp/entry/ 2019/03/21/104753 16
17. Base and Elevated 17
18. viewʹ͸֊૚ߏ଄͕͋Γ·͢ ͔͠͠ Light Mode ͱ Dark Mode Ͱ͸ͦͷදݱ͕ҟͳΔ • LightͰ͸ drop shadow͕࢖͑Δ • DarkͰ͸࢖͑ͳ͍ • ͔ΘΓʹelevated background colorΛ࢖ͬͯΔ • ֊૚্͕ͷViewͷഎܠ৭͸ɺͪΐͬͱ໌Δ͍ 18
19. ͪͳΈʹElevationͷߟ͑ํ͸ɺMaterial Designతʹ΋ڞ௨ https://material.io/design/color/dark-theme.html#properties 19
20. Human Interface Guidelines ᐌ͘ɺ ҰൠతʹɺҎԼͷഎܠ৭ͷόϦΤʔγϣϯͰ֊૚Λࣔ͢ • Primary: શମతͳView • Secondary: Primary಺ͰάϧʔϓԽ͞Εͨίϯςϯπ΍ཁૉ • Tertiary: Secondary಺ͰάϧʔϓԽ͞Εͨίϯςϯπ΍ཁૉ https://developer.apple.com/documentation/uikit/uicolor/ ui_element_colors 20
21. Dark Mode ͱ Materials 21
22. Materials ͱ͸ എܠ͕Blur Effectʢ UIBlurEffect ʣͰ൓ө͞Ε͍ͯΔίϯ ϙʔωϯτ ৭͸ແࢹ͞Εɺ Solid Color Ͱ͸ͳ͘ Vibrant Color Ͱදݱ ͞ΕΔ લܠ͕എܠ৭ʹӨڹ͞ΕΔͷͰɺSolid Colorͩͱഎܠ৭࣍ୈ Ͱ༹͚ࠐΉ Vibrant ColorͳΒͲΜͳ৭߹͍Ͱ΋ݟ΍͍͢ 22
23. ͦͷଞɺDark Modeʹ ӨڹΛड͚Δ΋ͷ 23
24. ͦͷଞɺDark ModeʹӨڹΛड͚Δ΋ͷνΣοΫϦετ • Attributed Text • UIColorΛ࢖Θͳ͍ layer.borderColor ͱ͔ • Status Bar • UIScrollViewͷindicator style • UIActivityIndicatorView 24
25. ໨࣍ 1. Dark ModeͷཱͪҐஔ 2. σβΠϯ্ͷ؍఺ 3. ࣮૷্ͷ؍఺ 25
26. Interface Builder • ίϯϙʔωϯτͷ৭ʹ͸ Dynamic Color Λࢦఆ͢Δ • ΧελϚΠζ͚ͨ͠Ε͹ɺ • Color AssetʹAppearanceΛ૿΍͢ • Image Asset΋Appearance͸͋Δ Ҏ্ʂ 26
27. ίʔυ ίʔυ for UIColor Dynamic ColorΛηοτͨ͠৔߹͸ɺࣗಈతʹมԽ // iOS13未満 view.backgroundColor = .white // iOS13以降 view.backgroundColor = .systemBackground 27
28. ίʔυ for Materials UIVibrancyEffect ͷ style ΋ DynamicʹͳΔ // iOS13未満 let effect = UIVibrancyEffect( blurEffect: UIBlurEffect(style: .light) ) // iOS13以降 let effect = UIVibrancyEffect( blurEffect: UIBlurEffect(style: . systemThinMaterial), style: .secondaryLabel ) 28
29. ͘͠Έɿ UITraitCollection ͷ͓͔͛ let dynamicColor = UIColor { traitCollection -> UIColor in if traitCollrction.userInterfaceStyle == .dark { return .black } else { return .white } } ※ UITraitCollection = Size classesͱؚ͔͕·ΕΔ΍ͭ 29
30. ʢSession 214: Implementing Dark Mode in i OS ͷࢿྉpdf p100 Λݟ ͳ͕Β௥͍ͬͯͩ͘͞ʣ 1. ֤Controller΍View͕traitCollection ͷࢀরΛࢠʹҾ͖౉͍ͯ͠Δ 2. Light Mode / Dark Mode ͕੾ΓସΘΔͱ traitCollection ͕มԽ͢ Δ 3. ࢠͷ traitCollectionDidChange(_:) ͕ݺ͹ΕΔ 4. dynamic color͸࣮ࡍͷ৭Λresolveͯ͠ద༻ • draw(_ rect: CGRect) ͷλΠϛϯάͰ UITraitCollection.current ͕ηοτ͞ΕΔ 30
31. traitCollectionͷΦʔόʔϥΠυ UserInterfaceStyle ΍ traitCollection ͸ɺView, ViewController, PresentationController౳ͷϨϕϧͰ ΦʔόʔϥΠυՄೳ ɹ ※ Info.plist ͷ UIUserInterfaceStyle Λઃఆ͢Ε͹ ΞϓϦશମͷstyleΛ্ॻ͖͢Δ͜ͱ΋Մೳ ʹμʔΫϞʔυରԠΛແޮԽ 31
32. Attributed Text ΋ Dynamic ColorରԠͯ͠ Δ // iOS13未満 let attributes: [NSAttributedString.Key: Any] = [ .font: UIFont.systemFont(ofSize: 36.0) ] // iOS13以降 let attributes: [NSAttributedString.Key: Any] = [ .font: UIFont.systemFont(ofSize: 36.0), .foregroundColor: UIColor.label // ] 32
33. Q. UIColorΛ࢖Θͳ͍ layer.borderColor ͱ͔΋উखʹ ൓ө͞ΕΔͷʁ A. CGColorͳͷͰDynamicʹͳΒͳ͍ layoutSubviews() ͳͲͷλΠϛϯάͰదٓߋ৽͢Δඞཁ͕͋Δ ·ͨɺ UIColor.label.cgColor Ͱ͸औΕͳ͍ ͪΌΜͱresolveͨ͠UIColor͔ΒCGColorΛऔΓग़͢͜ͱ ※ ϥΠϑαΠΫϧϝιουͷ֎Ͱ͸ɺ ɹtraitCollection͕ಛఆͷ஋Λ͍ࣔͯ͠Δ͜ͱ͸อূ͞Εͳ͍ ɹ֎Ͱѻ͍͍ͨͱ͖͸ࣗ෼Ͱ؅ཧ͠ͳ͍ͱ͍͚ͳ͍ 33
34. let layer = CALayer() let traitCollection = view.traitCollection // Option 1 let resolvedColor = UIColor.label.resolvedColor(with: traitCollection) layer.borderColor = resolvedColor.cgColor // Option 2 traitCollection.performAsCurrent { layer.borderColor = UIColor.label.cgColor } // Option 3 let savedTraitCollection = UITraitCollection.current UITraitCollection.current = traitCollection layer.borderColor = UIColor.label.cgColor UITraitCollection.current = savedTraitCollection 34
35. ͦͷଞͷίϯϙʔωϯτ 35
36. Status Bar • iOS13ະຬ: • .default, .lightContent ͕ઃఆ͞Εͯͨ • iOS13Ҏ߱: • traitʹԠͯ͡ .darkContent, .lightContent ͕ઃఆ͞Ε Δ • UIScrollView ͷ indicator style΋ಉ༷ 36
37. UIActivityIndicatorView • iOS13ະຬ: • .gray , .white , .whiteLarge • iOS13Ҏ߱: • Dynamic Styles͕ద༻͞ΕΔ • color propertyΛηοτ͢Δ͜ͱ 37
38. ݸਓతݟղ 38
39. ݸਓతݟղ • Dark Mode͸ද૚͚ͩͳͧΕ͹͍͍΋ͷͰ͸ͳ͍ͱ࣮ײ • Apple͕ఏڙ͢ΔDesign Systemͷͻͱͭͱ͍͏Ґஔ͚ͮ • ͪΌΜͱ৽σβΠϯγεςϜશମͷ஌ࣝΛΞοϓσʔτ͠ͳ͍ͱة͏͍ͱײ ͡Δ • ͱ͘ʹ Session 808: What's New in iOS Design ͷσβΠφʔ΁ͷΠϯ ϓοτΛ͔ͬ͠Γ • ରԠ͢ΔͳΒૣ͘ iOS10 ͸੾Γ͍ͨ • Color Assets͸iOS11ʙͰͳ͍ͱ࢖͑ͳ͍ͷͰ 39
40. ࢀߟࢿྉ What's New in iOS Design https://developer.apple.com/videos/play/wwdc2019/808/ Implementing Dark Mode on iOS ຊൃදͷιʔείʔυ͸͜ͷηογϣϯࢀর https://developer.apple.com/videos/play/wwdc2019/214/ σβΠφʔ΋νΣοΫͯ͠΄͍͠WWDC19ͷσβΠϯܥΞοϓ σʔτ #Zaimʛakatsuki174 https://blog.zaim.co.jp/n/n4cb9da9d5319 40