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
   

   View Slide

2. takasek
   @takasek
   Works
   OSS: ActionClosurable౳
   App: PasteTheType
   Articles
   ʮίϯύΠϧΤϥʔ΍ϥϯλΠϜΤϥʔΛ௚͍ͯ͘͠
   ͚ͩͰiOSΞϓϦͷ࡞Γํ͕Θ͔ΔϓϩδΣΫτʯ
   ʮ͓લΒ͕ModelͱݺͿΞϨΛͳΜͱݺͿ΂͖͔ʯ
   ʮiOSΞϓϦઃܭύλʔϯೖ໳ʯʢڞஶʣ
   2
   

   View Slide

3. ໨࣍
   1. Dark ModeͷཱͪҐஔ
   2. σβΠϯ্ͷ؍఺
   3. ࣮૷্ͷ؍఺
   3
   

   View Slide

4. ໨࣍
   1. Dark ModeͷཱͪҐஔ
   2. σβΠϯ্ͷ؍఺
   3. ࣮૷্ͷ؍఺
   4
   

   View Slide

5. Dark Modeͱ͸͜͏͍͏΋ͷ
   • ಈը΍ࣸਅͳͲͷίϯςϯπʹूதͰ͖Δ
   • ޷Ήਓ͕͍Δ
   • ࠇഎܠʹϕθϧ͕ӅΕΔ
   • όοςϦʔফඅΛ཈͑Δ
   5
   

   View Slide

6. iOS Design System
   6
   

   View Slide

7. iOS Design System ͷ໨త
   • familiarity(Θ͔ΓΈ)ͷҡ࣋
   • ϓϥοτϑΥʔϜͷҰ؏ੑ
   • ໌֬ͳ৘ใώΤϥϧΩʔ
   • ΞΫηγϏϦςΟ
   • γϯϓϧ
   7
   

   View Slide

8. iOS Design System Λࢧ͑Δٕज़
   • Dark Mode
   • Materials
   • UIKitۘ੡ͷViews
   8
   

   View Slide

9. Appleͷओு
   UIKitۘ੡ͷʢ৭ɺmaterialɺviewɺcontrolʣΛ࢖͓͏
   ඞཁͳ৔߹ʹΧελϚΠζͯ͘͠Ε
   9
   

   View Slide

10. ໨࣍
    1. Dark ModeͷཱͪҐஔ
    2. σβΠϯ্ͷ؍఺
    3. ࣮૷্ͷ؍఺
    10
    

    View Slide

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
    

    View Slide

12. Semantic Color
    ʹ৭Λϋʔυίʔυͤͣɺ໨తͰදݱ͢Δ
    ⭕
    • title: .labelColor
    • subtitle: .secondaryLabelColor
    • icon: .secondaryFillColor
    • background: .tertiaryFillColor
    12
    

    View Slide

13. Semantic ColorͰදݱͰ͖͍ͯΕ͹ɺ
    UIKitۘ੡ͷviewͰͳ͘ͱ΋ɺΧελϜͷViewͰ΋μʔΫϞʔ
    υରԠ؆୯
    13
    

    View Slide

14. System Colors͸ɺLight, Darkʹ͘Θ͑ɺͦΕͧΕʹaccessible color΋ઃఆ͞Ε͍ͯΔ
    ʢ΋ͪΖΜɺΧελϜΧϥʔͰ΋ઃఆ͸ՄೳͰ͢ʣ
    https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
    14
    

    View Slide

15. HIGʹ͸ଞʹ΋৭ʑॻ͍ͯ͋ΔͷͰඞಡ
    https://developer.apple.com/design/human-interface-
    guidelines/ios/visual-design/color/
    • ʮSystem Colorͷ໨తΛ࠶ఆٛ͢ΔͳɺҙਤͷҰ؏ੑΛଛͳ͏
    ͷͰʯ
    • ʮಠࣗ࠶ݱ΋͢Δͳɺ৭ʹௐ੔͕ೖΔ͜ͱ͕͋ΔͷͰʯ
    • ʮΧελϜΧϥʔͰ͸ɺલܠഎܠͷίϯτϥετൺ͸7:1ʯ
    ͳͲ
    15
    

    View Slide

16. ͪΐͬͱ୤ઢ͠·͢
    ͕…
    Χϥʔίϯτϥετͱ͍͑͹ɺtry!
    Swift TokyoͰ΋ྑ͍ൃද͕͋Γ·ͨ͠
    Ͷɻ
    ๨Εͳ͍Α͏ʹ͍ͨ͠Ͱ͢Ͷɻ
    ΞΫηγϏϦςΟͷͨΊͷΧϥʔίϯτ
    ϥετ - niwatakoͷ͸ͯͳϒϩά
    http://niwatako.hatenablog.jp/entry/
    2019/03/21/104753
    16
    

    View Slide

17. Base and Elevated
    17
    

    View Slide

18. viewʹ͸֊૚ߏ଄͕͋Γ·͢
    ͔͠͠ Light Mode ͱ Dark Mode Ͱ͸ͦͷදݱ͕ҟͳΔ
    • LightͰ͸ drop shadow͕࢖͑Δ
    • DarkͰ͸࢖͑ͳ͍
    • ͔ΘΓʹelevated background colorΛ࢖ͬͯΔ
    • ֊૚্͕ͷViewͷഎܠ৭͸ɺͪΐͬͱ໌Δ͍
    18
    

    View Slide

19. ͪͳΈʹElevationͷߟ͑ํ͸ɺMaterial Designతʹ΋ڞ௨
    https://material.io/design/color/dark-theme.html#properties
    19
    

    View Slide

20. Human Interface Guidelines ᐌ͘ɺ
    ҰൠతʹɺҎԼͷഎܠ৭ͷόϦΤʔγϣϯͰ֊૚Λࣔ͢
    • Primary: શମతͳView
    • Secondary: Primary಺ͰάϧʔϓԽ͞Εͨίϯςϯπ΍ཁૉ
    • Tertiary: Secondary಺ͰάϧʔϓԽ͞Εͨίϯςϯπ΍ཁૉ
    https://developer.apple.com/documentation/uikit/uicolor/
    ui_element_colors
    20
    

    View Slide

21. Dark Mode ͱ Materials
    21
    

    View Slide

22. Materials ͱ͸
    എܠ͕Blur Effectʢ UIBlurEffect ʣͰ൓ө͞Ε͍ͯΔίϯ
    ϙʔωϯτ
    ৭͸ແࢹ͞Εɺ Solid Color Ͱ͸ͳ͘ Vibrant Color Ͱදݱ
    ͞ΕΔ
    લܠ͕എܠ৭ʹӨڹ͞ΕΔͷͰɺSolid Colorͩͱഎܠ৭࣍ୈ
    Ͱ༹͚ࠐΉ
    Vibrant ColorͳΒͲΜͳ৭߹͍Ͱ΋ݟ΍͍͢
    22
    

    View Slide

23. ͦͷଞɺDark Modeʹ
    ӨڹΛड͚Δ΋ͷ
    23
    

    View Slide

24. ͦͷଞɺDark ModeʹӨڹΛड͚Δ΋ͷνΣοΫϦετ
    • Attributed Text
    • UIColorΛ࢖Θͳ͍ layer.borderColor ͱ͔
    • Status Bar
    • UIScrollViewͷindicator style
    • UIActivityIndicatorView
    24
    

    View Slide

25. ໨࣍
    1. Dark ModeͷཱͪҐஔ
    2. σβΠϯ্ͷ؍఺
    3. ࣮૷্ͷ؍఺
    25
    

    View Slide

26. Interface Builder
    • ίϯϙʔωϯτͷ৭ʹ͸ Dynamic Color Λࢦఆ͢Δ
    • ΧελϚΠζ͚ͨ͠Ε͹ɺ
    • Color AssetʹAppearanceΛ૿΍͢
    • Image Asset΋Appearance͸͋Δ
    Ҏ্ʂ
    26
    

    View Slide

27. ίʔυ
    ίʔυ for UIColor
    Dynamic ColorΛηοτͨ͠৔߹͸ɺࣗಈతʹมԽ
    // iOS13未満
    view.backgroundColor = .white
    // iOS13以降
    view.backgroundColor = .systemBackground
    27
    

    View Slide

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
    

    View Slide

29. ͘͠Έɿ UITraitCollection ͷ͓͔͛
    let dynamicColor = UIColor { traitCollection -> UIColor in
    if traitCollrction.userInterfaceStyle == .dark {
    return .black
    } else {
    return .white
    }
    }
    ※ UITraitCollection = Size classesͱؚ͔͕·ΕΔ΍ͭ
    29
    

    View Slide

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
    

    View Slide

31. traitCollectionͷΦʔόʔϥΠυ
    UserInterfaceStyle ΍ traitCollection ͸ɺView, ViewController,
    PresentationController౳ͷϨϕϧͰ
    ΦʔόʔϥΠυՄೳ
    ɹ
    ※
    Info.plist ͷ
    UIUserInterfaceStyle Λઃఆ͢Ε͹
    ΞϓϦશମͷstyleΛ্ॻ͖͢Δ͜ͱ΋Մೳ
    ʹμʔΫϞʔυରԠΛແޮԽ
    31
    

    View Slide

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
    

    View Slide

33. Q. UIColorΛ࢖Θͳ͍ layer.borderColor ͱ͔΋উखʹ
    ൓ө͞ΕΔͷʁ
    A.
    CGColorͳͷͰDynamicʹͳΒͳ͍
    layoutSubviews() ͳͲͷλΠϛϯάͰదٓߋ৽͢Δඞཁ͕͋Δ
    ·ͨɺ UIColor.label.cgColor Ͱ͸औΕͳ͍
    ͪΌΜͱresolveͨ͠UIColor͔ΒCGColorΛऔΓग़͢͜ͱ
    ※ ϥΠϑαΠΫϧϝιουͷ֎Ͱ͸ɺ
    ɹtraitCollection͕ಛఆͷ஋Λ͍ࣔͯ͠Δ͜ͱ͸อূ͞Εͳ͍
    ɹ֎Ͱѻ͍͍ͨͱ͖͸ࣗ෼Ͱ؅ཧ͠ͳ͍ͱ͍͚ͳ͍
    33
    

    View Slide

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
    

    View Slide

35. ͦͷଞͷίϯϙʔωϯτ
    35
    

    View Slide

36. Status Bar
    • iOS13ະຬ:
    • .default, .lightContent ͕ઃఆ͞Εͯͨ
    • iOS13Ҏ߱:
    • traitʹԠͯ͡ .darkContent, .lightContent ͕ઃఆ͞Ε
    Δ
    • UIScrollView ͷ indicator style΋ಉ༷
    36
    

    View Slide

37. UIActivityIndicatorView
    • iOS13ະຬ:
    • .gray , .white , .whiteLarge
    • iOS13Ҏ߱:
    • Dynamic Styles͕ద༻͞ΕΔ
    • color propertyΛηοτ͢Δ͜ͱ
    37
    

    View Slide

38. ݸਓతݟղ
    38
    

    View Slide

39. ݸਓతݟղ
    • Dark Mode͸ද૚͚ͩͳͧΕ͹͍͍΋ͷͰ͸ͳ͍ͱ࣮ײ
    • Apple͕ఏڙ͢ΔDesign Systemͷͻͱͭͱ͍͏Ґஔ͚ͮ
    • ͪΌΜͱ৽σβΠϯγεςϜશମͷ஌ࣝΛΞοϓσʔτ͠ͳ͍ͱة͏͍ͱײ
    ͡Δ
    • ͱ͘ʹ Session 808: What's New in iOS Design ͷσβΠφʔ΁ͷΠϯ
    ϓοτΛ͔ͬ͠Γ
    • ରԠ͢ΔͳΒૣ͘ iOS10 ͸੾Γ͍ͨ
    • Color Assets͸iOS11ʙͰͳ͍ͱ࢖͑ͳ͍ͷͰ
    39
    

    View Slide

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
    

    View Slide