Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dark Mode / 20190617 #wwdc_rusuban

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

takasek

June 17, 2019
Tweet

More Decks by takasek

Other Decks in Design

Transcript

  1. Dark Mode
    by.
    2019/6/17 WWDCΰϦΰϦΩϟονΞοϓձ
    1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. iOS Design System
    6

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  12. Semantic Color
    ʹ৭Λϋʔυίʔυͤͣɺ໨తͰදݱ͢Δ

    • title: .labelColor
    • subtitle: .secondaryLabelColor
    • icon: .secondaryFillColor
    • background: .tertiaryFillColor
    12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Base and Elevated
    17

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Dark Mode ͱ Materials
    21

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

  31. traitCollectionͷΦʔόʔϥΠυ
    UserInterfaceStyle ΍ traitCollection ͸ɺView, ViewController,
    PresentationController౳ͷϨϕϧͰ
    ΦʔόʔϥΠυՄೳ
    ɹ

    Info.plist ͷ
    UIUserInterfaceStyle Λઃఆ͢Ε͹
    ΞϓϦશମͷstyleΛ্ॻ͖͢Δ͜ͱ΋Մೳ
    ʹμʔΫϞʔυରԠΛແޮԽ
    31

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. ݸਓతݟղ
    38

    View full-size slide

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

    View full-size 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 full-size slide