Dark Mode / 20190617 #wwdc_rusuban

704056da9a4c4e075ad14479beaebab7?s=47 takasek
June 17, 2019

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

704056da9a4c4e075ad14479beaebab7?s=128

takasek

June 17, 2019
Tweet

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