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. 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
  2. viewʹ͸֊૚ߏ଄͕͋Γ·͢ ͔͠͠ Light Mode ͱ Dark Mode Ͱ͸ͦͷදݱ͕ҟͳΔ • LightͰ͸

    drop shadow͕࢖͑Δ • DarkͰ͸࢖͑ͳ͍ • ͔ΘΓʹelevated background colorΛ࢖ͬͯΔ • ֊૚্͕ͷViewͷഎܠ৭͸ɺͪΐͬͱ໌Δ͍ 18
  3. Human Interface Guidelines ᐌ͘ɺ ҰൠతʹɺҎԼͷഎܠ৭ͷόϦΤʔγϣϯͰ֊૚Λࣔ͢ • Primary: શମతͳView • Secondary:

    Primary಺ͰάϧʔϓԽ͞Εͨίϯςϯπ΍ཁૉ • Tertiary: Secondary಺ͰάϧʔϓԽ͞Εͨίϯςϯπ΍ཁૉ https://developer.apple.com/documentation/uikit/uicolor/ ui_element_colors 20
  4. Materials ͱ͸ എܠ͕Blur Effectʢ UIBlurEffect ʣͰ൓ө͞Ε͍ͯΔίϯ ϙʔωϯτ ৭͸ແࢹ͞Εɺ Solid Color

    Ͱ͸ͳ͘ Vibrant Color Ͱදݱ ͞ΕΔ લܠ͕എܠ৭ʹӨڹ͞ΕΔͷͰɺSolid Colorͩͱഎܠ৭࣍ୈ Ͱ༹͚ࠐΉ Vibrant ColorͳΒͲΜͳ৭߹͍Ͱ΋ݟ΍͍͢ 22
  5. Interface Builder • ίϯϙʔωϯτͷ৭ʹ͸ Dynamic Color Λࢦఆ͢Δ • ΧελϚΠζ͚ͨ͠Ε͹ɺ •

    Color AssetʹAppearanceΛ૿΍͢ • Image Asset΋Appearance͸͋Δ Ҏ্ʂ 26
  6. ίʔυ for Materials UIVibrancyEffect ͷ style ΋ DynamicʹͳΔ // iOS13未満

    let effect = UIVibrancyEffect( blurEffect: UIBlurEffect(style: .light) ) // iOS13以降 let effect = UIVibrancyEffect( blurEffect: UIBlurEffect(style: . systemThinMaterial), style: .secondaryLabel ) 28
  7. ͘͠Έɿ UITraitCollection ͷ͓͔͛ let dynamicColor = UIColor { traitCollection ->

    UIColor in if traitCollrction.userInterfaceStyle == .dark { return .black } else { return .white } } ※ UITraitCollection = Size classesͱؚ͔͕·ΕΔ΍ͭ 29
  8. ʢ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
  9. traitCollectionͷΦʔόʔϥΠυ UserInterfaceStyle ΍ traitCollection ͸ɺView, ViewController, PresentationController౳ͷϨϕϧͰ ΦʔόʔϥΠυՄೳ ɹ ※

    Info.plist ͷ UIUserInterfaceStyle Λઃఆ͢Ε͹ ΞϓϦશମͷstyleΛ্ॻ͖͢Δ͜ͱ΋Մೳ ʹμʔΫϞʔυରԠΛແޮԽ 31
  10. 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
  11. Q. UIColorΛ࢖Θͳ͍ layer.borderColor ͱ͔΋উखʹ ൓ө͞ΕΔͷʁ A. CGColorͳͷͰDynamicʹͳΒͳ͍ layoutSubviews() ͳͲͷλΠϛϯάͰదٓߋ৽͢Δඞཁ͕͋Δ ·ͨɺ

    UIColor.label.cgColor Ͱ͸औΕͳ͍ ͪΌΜͱresolveͨ͠UIColor͔ΒCGColorΛऔΓग़͢͜ͱ ※ ϥΠϑαΠΫϧϝιουͷ֎Ͱ͸ɺ ɹtraitCollection͕ಛఆͷ஋Λ͍ࣔͯ͠Δ͜ͱ͸อূ͞Εͳ͍ ɹ֎Ͱѻ͍͍ͨͱ͖͸ࣗ෼Ͱ؅ཧ͠ͳ͍ͱ͍͚ͳ͍ 33
  12. 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
  13. Status Bar • iOS13ະຬ: • .default, .lightContent ͕ઃఆ͞Εͯͨ • iOS13Ҏ߱:

    • traitʹԠͯ͡ .darkContent, .lightContent ͕ઃఆ͞Ε Δ • UIScrollView ͷ indicator style΋ಉ༷ 36
  14. UIActivityIndicatorView • iOS13ະຬ: • .gray , .white , .whiteLarge •

    iOS13Ҏ߱: • Dynamic Styles͕ద༻͞ΕΔ • color propertyΛηοτ͢Δ͜ͱ 37
  15. ݸਓతݟղ • Dark Mode͸ද૚͚ͩͳͧΕ͹͍͍΋ͷͰ͸ͳ͍ͱ࣮ײ • Apple͕ఏڙ͢ΔDesign Systemͷͻͱͭͱ͍͏Ґஔ͚ͮ • ͪΌΜͱ৽σβΠϯγεςϜશମͷ஌ࣝΛΞοϓσʔτ͠ͳ͍ͱة͏͍ͱײ ͡Δ

    • ͱ͘ʹ Session 808: What's New in iOS Design ͷσβΠφʔ΁ͷΠϯ ϓοτΛ͔ͬ͠Γ • ରԠ͢ΔͳΒૣ͘ iOS10 ͸੾Γ͍ͨ • Color Assets͸iOS11ʙͰͳ͍ͱ࢖͑ͳ͍ͷͰ 39
  16. ࢀߟࢿྉ 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