《iOS 13 Dark Mode 設(shè)計和適配》

一、設(shè)計

1. 為什么需要Dark Mode:

  1. 讓用戶更好的Focus于App內(nèi)展現(xiàn)的內(nèi)容
  2. 在暗光環(huán)境下減少用戶視覺疲勞，減少對周圍他人影響
  3. OLED屏幕可以大幅降低屏幕耗電量
  4. 用戶對深色UI的熱衷
  5. 在不大刀闊斧的改動UI界面的前提下，為用戶帶來耳目一新的視覺體驗(yàn)

2. iOS的設(shè)計團(tuán)隊(duì)為Dark Mode設(shè)立了以下五點(diǎn)設(shè)計原則：

  1. 保持視覺風(fēng)格的熟悉感
  2. 平臺一致性
  3. 清晰的信息架構(gòu)
  4. 輔助功能
  5. 易于開發(fā)者采用

3. Submit Your iPhone Apps to the App Store

iOS 13 is now running on 77% of all iOS devices introduced in the last four years, worldwide. Deliver great user experiences by seamlessly integrating with Dark Mode, Sign in with Apple, and the latest advances in ARKit 3, Core ML 3, and Siri. Starting April 30, 2020, all iPhone apps submitted to the App Store must be built with the iOS 13 SDK or later.
Take advantage of Xcode features such as storyboards (including launch storyboards), Auto Layout, and SwiftUI, to ensure your app’s interface elements and layouts automatically fit the display of all iPhone models, regardless of size or aspect ratio. Starting April 30, 2020, all apps submitted to the App Store must use an Xcode storyboard to provide the app’s launch screen and all iPhone apps must support all iPhone screens.

  • 針對蘋果官方3月4日的公告，分析如下：
    1. 從2020年4月30日起，所有提交給App Store的 iPhone應(yīng)用程序都必須使用iOS 13 SDK或更高版本構(gòu)建。（必須使用Xcode 11或更高版本打包上架。）
    2. 從2020年4月30日起，所有提交給App Store的應(yīng)用程序都必須使用 storyboard 來提供應(yīng)用程序的啟動屏幕。
    3. 所有iPhone應(yīng)用程序都必須支持所有iPhone屏幕。

4. 微信適配了暗黑模式（2020.03.09）

二、適配

1. 啟動頁：

從2020年4月30日起，所有提交給App Store的應(yīng)用程序都必須使用 storyboard 來提供應(yīng)用程序的啟動屏幕。

方法一：

  • 在 storyboard 中拖入UIImageView控件，設(shè)置好約束。


  • 在 Assets.xcassets 中新建 New Image Set。默認(rèn)新建的Image是不支持多種機(jī)型的，打開該Image的 Contents.json 文件，復(fù)制下面的代碼覆蓋該文件：
    把"filename"對應(yīng)的value替換為本地對應(yīng)的圖片名稱即可（_dark結(jié)尾的圖片對應(yīng)的是暗黑模式）。
{
  "images" : [
    {
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "scale" : "1x",
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ]
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_4.png",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_4_dark.png",
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ]
    },
    {
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "subtype" : "retina4",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_5.png",
      "subtype" : "retina4",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_5_dark.png",
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "subtype" : "retina4",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "subtype" : "retina4",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_7P.png",
      "subtype" : "736h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_7P_dark.png",
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "subtype" : "736h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_7.png",
      "subtype" : "667h",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_7_dark.png",
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "subtype" : "667h",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_X.png",
      "subtype" : "2436h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_X_dark.png",
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "subtype" : "2436h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_Xs Max.png",
      "subtype" : "2688h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_Xs Max_dark.png",
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "subtype" : "2688h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_XR.png",
      "subtype" : "1792h",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone_XR_dark.png",
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "subtype" : "1792h",
      "scale" : "2x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}
  • 在 LaunchScreen.storyboard 中選擇自己創(chuàng)建的image。
  • 存在緩存問題（待解決）
方法二：

對于簡單的啟動圖頁面，直接在 LaunchScreen.storyboard 中自己畫。創(chuàng)建icon、label等控件，設(shè)置好約束，就不用擔(dān)心屏幕適配問題了。

2. UITraitCollection：

在iOS13中，我們可以通過UITraitCollection來判斷當(dāng)前系統(tǒng)所處的模式。UIScreen, UIWindow, UIViewController, UIPresentationController, UIView 都遵循了 UITraitEnvironment 協(xié)議。

/*! Trait environments expose a trait collection that describes their environment. */
@protocol UITraitEnvironment <NSObject>
@property (nonatomic, readonly) UITraitCollection *traitCollection API_AVAILABLE(ios(8.0));

/*! To be overridden as needed to provide custom behavior when the environment's traits change. */
- (void)traitCollectionDidChange:(nullable UITraitCollection *)previousTraitCollection API_AVAILABLE(ios(8.0));
@end

當(dāng)用戶更改系統(tǒng)外觀時，系統(tǒng)會自動要求每個窗口和視圖重繪自身。在此過程中，系統(tǒng)將為macOS和iOS調(diào)用下表中列出的幾種眾所周知的方法來更新您的內(nèi)容。系統(tǒng)在調(diào)用這些方法之前會更新特征環(huán)境，所以只有在下列方法中獲取 traitCollection 屬性才是準(zhǔn)確的。

如果您在這些方法之外進(jìn)行外觀敏感的更改，則您的應(yīng)用可能無法針對當(dāng)前環(huán)境正確繪制其內(nèi)容。

在 iOS 13中，UIView、UIViewController 、UIWindow 有了一個 overrideUserInterfaceStyle 的新屬性，可以覆蓋系統(tǒng)的模式。

單個頁面或視圖關(guān)閉暗黑模式，設(shè)置 overrideUserInterfaceStyle 為對應(yīng)的模式，強(qiáng)制限制該視圖與其子視圖以設(shè)置的模式進(jìn)行展示，不跟隨系統(tǒng)模式改變進(jìn)行改變。

self.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;

設(shè)置此屬性會影響當(dāng)前view/viewController/window 以及它下面的任何內(nèi)容。

如果你希望一個子視圖監(jiān)聽系統(tǒng)的模式，請將 overrideUserInterfaceStyle 屬性設(shè)置為.unspecified。

3. 顏色：

  • 系統(tǒng)的語義化顏色


iOS默認(rèn)提供了9個彩色色板(TintColor)，在iOS 13中為了保證深色模式下的對比度效果，每個TintColor都新增了深淺模式兩種版本，在調(diào)用時也應(yīng)使用語義化的顏色名稱，比如SystemBlue，在淺色模式下指的是#007AFF，在深色模式下則是#0A84FF。


  • 自定義顏色: 通過 Assets.xcassets
    在 Assets.xcassets 中新建 New Color Set。通過[UIColor colorNamed:@""] 方法使用。

  • 通過代碼自定義顏色：

+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider;
- (UIColor *)initWithDynamicProvider:(UIColor * (^)(UITraitCollection *))dynamicProvider;

4. 圖片：

  • SF Symbols


SF Symbols 是iOS 13中引入的一項(xiàng)非常重要的新特性，由于Dark Mode下所有圖標(biāo)都會需要兩套顏色，使用靜態(tài)的圖片切圖會讓圖片素材數(shù)量激增，因此蘋果干脆做了這一整套1500多個圖標(biāo)的矢量圖標(biāo)庫，配合iOS中的基底層與架高層、語義化顏色、Vibrancy（鮮亮化）等動態(tài)的顏色處理，使用SF Symbols可以在深淺模式中都能自動獲得完美的展示效果。


SF Symbols的原理和Iconfont很類似，都是將SVG矢量圖形以Unicode字符的形式打包在字體文件中。SF Symbols是內(nèi)置集成在蘋果目前的系統(tǒng)默認(rèn)字體San Francisco字體系列里的，開發(fā)者只需引用Symbol的名稱就可以迅速調(diào)用出SF Symbols提供的圖標(biāo)。同時設(shè)計師也可以利用SF Symbols官方提供的SVG模板制作自定義的圖標(biāo)共App調(diào)用。
為您的應(yīng)用創(chuàng)建自定義符號圖像

+ (nullable UIImage *)imageNamed:(NSString *)name inBundle:(nullable NSBundle *)bundle withConfiguration:(nullable UIImageConfiguration *)configuration
  • 自定義圖片: 通過 Assets.xcassets
    在 Assets.xcassets 中新建 New Image Set。通過[UIImage imageNamed:@""] 方法使用。

5. 模糊效果：

在 iOS 13 中，我們需要讓這些模糊效果隨著系統(tǒng)模式的切換而切換。UIKit 提供了新的模糊樣式且是動態(tài)的，會隨著系統(tǒng)模式的改版而自動匹配。

利用 UIVisualEffectView 來創(chuàng)建一些類似模糊的效果時，不要設(shè)置類似 UIBlurEffectStyleExtraLight 這樣帶有明確顏色的效果，而是設(shè)置 UIKit 中新提供的動態(tài)樣式的效果，比如 UIBlurEffectStyleSystemThinMaterialLight 或 UIBlurEffectStyleSystemThinMaterialDark。

UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleSystemMaterial];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];

6. webView頁面：

多數(shù)流行的瀏覽器新版本都已經(jīng)支持了“prefers-color-scheme”參數(shù)來檢測系統(tǒng)當(dāng)前的外觀是淺色還是深色模式。配合利用類似Semantic Color的方法來定義網(wǎng)頁樣式表中同一個顏色在深淺兩種模式下的色值，Web內(nèi)容也可以獲得同原生App一樣的自動適配深淺模式效果。


Dark Mode Support in WebKit

7. 封裝適配工具：

針對iOS13暗黑模式的適配工作，寫了幾個分類，方便項(xiàng)目統(tǒng)一管理適配工作，可以通過 pod 'QYTheme' 導(dǎo)入到項(xiàng)目中。
功能如下：

    1. UIWindow+QYTheme.h
      當(dāng) UIUserInterfaceStyle 發(fā)生變化時的通知，可用于無法準(zhǔn)確獲取 TraitCollection 的地方
if (@available(iOS 13.0, *)) {
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(qy_doSomething:)
                                                 name:QYUserInterfaceStyleWillChangeNotification
                                               object:nil];
}
    1. UIColor+QYTheme.h
      統(tǒng)一處理顏色的分類，iOS13以前取 anyColor。
/// 獲取動態(tài)顏色
/// @param anyColor 默認(rèn)顏色
/// @param darkColor 暗黑顏色
+ (UIColor *)qy_setColorWithAny:(UIColor *)anyColor dark:(UIColor *)darkColor;

// 使用方法：
self.view.backgroundColor = [UIColor qy_setColorWithAny:[UIColor whiteColor] dark:[UIColor blackColor]];
    1. UIImageView+QYTheme.h
      統(tǒng)一處理圖片的分類，可處理本地和網(wǎng)絡(luò)圖片，網(wǎng)絡(luò)圖片依賴 SDWebImage 框架。
/// 設(shè)置圖片 [處理本地圖片]
/// @param anyImage 默認(rèn)圖片
/// @param darkImage 暗黑圖片
- (void)qy_setImageWithAny:(UIImage *)anyImage darkIamge:(UIImage *)darkImage;

/// 設(shè)置圖片 [處理網(wǎng)絡(luò)圖片]
/// @param anyUrl 默認(rèn)url
/// @param darkUrl 暗黑圖片url
/// @param placeholder 通用占位圖
- (void)qy_setImageWithURL:(NSURL *)anyUrl darkImageWithURL:(NSURL *)darkUrl placeholderImage:(UIImage *)placeholder;

/// 設(shè)置圖片 [處理網(wǎng)絡(luò)圖片]
/// @param anyUrl 默認(rèn)url
/// @param placeholder 默認(rèn)占位圖
/// @param darkUrl 暗黑圖片url
/// @param darkPlaceholder 暗黑占位圖
- (void)qy_setImageWithURL:(NSURL *)anyUrl placeholderImage:(UIImage *)placeholder darkImageWithURL:(NSURL *)darkUrl darkPlaceholderImage:(UIImage *)darkPlaceholder;

// 使用方法：
// 本地圖片
[self.imgView qy_setImageWithAny:[UIImage imageNamed:@"anyImage"] darkIamge:[UIImage imageNamed:@"darkImage"]];
// 網(wǎng)絡(luò)圖片
[self.imgView qy_setImageWithURL:[NSURL URLWithString:@"https://xxx"]
                darkImageWithURL:[NSURL URLWithString:@"https://xxx"]
                placeholderImage:[UIImage imageNamed:@"image"]];

目前工具正在完善，如有不足，歡迎指正~

源碼放在GitHub上了，想查看的小伙伴可以->戳這里。

千里之行，始于足下。

參考文檔:

寫給設(shè)計師的指南：iOS 13 Dark Mode 深度解析
Apple Design Resources

Submit Your iPhone Apps to the App Store
Supporting Dark Mode in Your Interface
How To Adopt Dark Mode In Your iOS App
使用 QMUITheme 實(shí)現(xiàn)換膚并適配 iOS 13 Dark Mode

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • iOS 13終于引來了暗黑模式。 每當(dāng)新特性的到來，iOS開發(fā)者們既緊張又有點(diǎn)小興奮，懷揣著被虐的心態(tài)，讓我們來看...
    koin447閱讀 64,242評論 16贊 106
  • iOS 13 支持適配的機(jī)型 iPhone X、iPhone XR、iPhone XS、iPhone XS Max...
    你買票嗎閱讀 8,309評論 2贊 18
  • 最近公司業(yè)務(wù)需求要更換APP主題。最開始是一個地方一個地方去改，而且項(xiàng)目中很多老代碼是用xib寫的，習(xí)慣純代碼編程...
    抓魚貓L閱讀 6,445評論 0贊 10
  • 原文博客地址: iOS13適配深色模式(Dark Mode) 好像大概也許是一年前, Mac OS系統(tǒng)發(fā)布了深色模...
    iOS猿_員閱讀 1,116評論 0贊 12
  • 從砸門發(fā)泄到大哭，到情緒穩(wěn)定制定好計劃，并且堅持實(shí)現(xiàn)。小目標(biāo)已經(jīng)實(shí)現(xiàn)了，今天可以完成，接著就是這個月底前要完成的事...
    樹莓有點(diǎn)兒酸閱讀 86評論 0贊 0

友情鏈接更多精彩內(nèi)容