WWDC 已經(jīng)落幕，這是近 10 年來(lái)最激動(dòng)人心的一次開發(fā)者大會(huì)。我們先不討論這次上的硬件，以及 iPad OS 等內(nèi)容，畢竟其它媒體該寫也寫差不多了。就講講和 UI 設(shè)計(jì)師密切相關(guān)的 iOS 13 更新的規(guī)范內(nèi)容，很快我們?cè)O(shè)計(jì)界面的時(shí)候就有新的東西需要遵守了。

一.Dark Mode

首先不得不提的，就是大家望眼欲穿的黑暗模式終于來(lái)了！作為 iOS13 中最最最重量級(jí)的更新，黑暗模式在帶給人全新的視覺體驗(yàn)之外，也帶來(lái)了一套與淺色模式相對(duì)應(yīng)的色彩規(guī)范系統(tǒng)，本文會(huì)花一半左右的篇幅來(lái)解釋作為 UI 設(shè)計(jì)師，我們對(duì)這個(gè)系統(tǒng)級(jí)的 Dark Mode 需要有哪些了解。

1. 基礎(chǔ)色彩

iOS 的設(shè)計(jì)師對(duì)之前混亂的色彩規(guī)范做了更為詳細(xì)的修改、分類和整理，并為每一種系統(tǒng)色都專門進(jìn)行了針對(duì) Dark Mode 的調(diào)整，確保這些色彩在淺色和深色模式中都能擁有比較好的可讀性、協(xié)調(diào)性和美觀性。iOS 的官方規(guī)范中已經(jīng)放出了這一部分色彩的對(duì)應(yīng)表。

- 系統(tǒng)彩色

蘋果為官方組件中的彩色做了黑暗模式的適配，使得色彩與背景的對(duì)比度在深淺模式中能夠保持一致。當(dāng)然，蘋果也強(qiáng)調(diào)了這些色彩并不是強(qiáng)制使用的，按需取用即可。

下圖是應(yīng)用新色彩后的效果圖，下面兩張是兩種色彩分別在全淺和全深背景下的對(duì)比，能夠看出來(lái)它們之間有著細(xì)微的差異：

- 中性色

iOS 應(yīng)用中存在大量的中性色，包括背景色、文字色、分割線等等，這些色彩在 iOS13 中重新進(jìn)行了分類和規(guī)范，且已經(jīng)應(yīng)全面用在系統(tǒng)組件之中。

背景色有三個(gè)層級(jí)，淺色模式下三個(gè)層級(jí)分別為白→淺灰→白，而深色模式則是依次變淺的黑色。

成組背景色主要應(yīng)用于存在大量列表項(xiàng)的頁(yè)面中，最典型的案例就是設(shè)置頁(yè)，淺色模式下成組背景色稍有不同，三個(gè)層級(jí)依次為淺灰→白→淺灰，具體見下圖：

文字色除了一級(jí)色彩使用的全黑和全白之外，其余三個(gè)層級(jí)均為同一色彩的不同透明度。

- 填充色和分割線

另外，蘋果還提供了一組帶透明度的「填充色」(Fill Color) ，這組填充色能夠在 RGB 色值保持一致的情況下，僅僅通過(guò)微調(diào)不透明度就能在淺色和深色背景中達(dá)到相似的對(duì)比度，設(shè)計(jì)中如有需要，可以直接調(diào)用。

而分割線，蘋果也給出了深淺模式下各一組帶透明和不透明的色彩，正常情況下使用帶透明度的即可，只有當(dāng)出現(xiàn)交叉分割線時(shí)才需要用到第一列實(shí)色。

2. 系統(tǒng)級(jí)組件的適配

- 陰影→浮層

需要注意的是在白色背景下能夠輕而易舉突出頁(yè)面/卡片縱向?qū)蛹?jí)關(guān)系的「陰影」，在 Dark Mode 的純黑色背景下已經(jīng)不適用了，所以 iOS 建議利用「浮層」(Elevated) 來(lái)表達(dá)頁(yè)面的縱向關(guān)系。Elevated 層只在黑暗模式中起作用，所以對(duì)應(yīng)的色彩規(guī)范也全是以深色模式為準(zhǔn)。

說(shuō)人話就是在 Dark mode 中去掉陰影，把卡片顏色做淡。

- Material 卡片

Material 卡片是在 iOS 中大量使用的帶磨砂玻璃質(zhì)感的卡片，沒錯(cuò)打開自己的 iphone 就能看到一屏這種材質(zhì)的通知卡片，其余地方包括負(fù)一屏、3D touch 呼出的快捷菜單、Action sheet、Activity Views、部分應(yīng)用的 Tab Bar 等等地方都有 Material 卡片的應(yīng)用。

之前的 iOS 版本中都沒有確切地表述這種卡片該如何使用，但這次蘋果給出了相當(dāng)明確的規(guī)范。該材質(zhì)有四種不同的「厚度」，也就是四種不同程度的背景模糊，在深色模式中同樣有四種對(duì)應(yīng)的樣式，具體如下：

- 其他組件

當(dāng)然為了適應(yīng) Dark Mode 的視覺需要，其他一些組件也有一定程度的微調(diào)，我們將它們都列在這里，并以 iOS12 中的組件作為對(duì)比。這些組件在 iOS13 官方組件庫(kù)以及 sketch Library 中都已經(jīng)更新，詳細(xì)參數(shù)就不列了，我們會(huì)提供這一部分資源的下載鏈接。

3. 自定義色彩如何適配 Dark Mode

當(dāng)然，除了系統(tǒng)已經(jīng)給你備好的這么點(diǎn)顏色，大量的第三方 APP 都擁有自己的色彩規(guī)范，這時(shí)候就需要發(fā)揮設(shè)計(jì)師的主觀能動(dòng)性了。但是自定義色彩也不能亂設(shè)，為了在 Dark Mode 中更加和諧統(tǒng)一，構(gòu)建更加整體一致的 iOS 生態(tài)，官方建議自定義色彩與背景的對(duì)比度不小于 4.5。

二.情景菜單

蘋果在 iOS13 中新增了一種控件 —— 情景菜單 (Context Menu)，該菜單可以由長(zhǎng)按項(xiàng)目或者 3D touch 呼出，此控件兼顧了無(wú) 3D touch 的設(shè)備如 iPhone XR ，保持 iOS 設(shè)備操作的統(tǒng)一性。

情景菜單與原 3D touch 控件 Peek & Pop 有以下兩點(diǎn)區(qū)別：

- 所有運(yùn)行 iOS13 的設(shè)備都可使用情景菜單；而 Peek & Pop 僅適用于支持 3D Touch 的設(shè)備。

- 情景菜單立即顯示項(xiàng)目相關(guān)的操作命令；Peek & Pop 需要向上滑動(dòng)才能查看命令。

針對(duì)該控件，官方規(guī)范文檔中還有更加具體的建議，這里不細(xì)說(shuō)，有時(shí)間會(huì)把 iOS13 新增的內(nèi)容翻譯出來(lái)。

三.SF Symbols

iOS13 重繪了大量的系統(tǒng)級(jí)圖標(biāo)，原先粗粗細(xì)細(xì)大大小小割裂感嚴(yán)重的圖標(biāo)們?cè)谶@次更新中終于改頭換面變得和諧了起來(lái)，對(duì)比一下 iOS12 與iOS13 的 Toolbar 就可以很直觀地體會(huì)到這一點(diǎn)：

除了重繪圖標(biāo)之外，蘋果這次還將這些圖標(biāo)整合進(jìn)了 San Francisco 字體中，有大、中、小三種尺寸，并同步擁有與 SF 字體一樣的七種字重，與字體搭配可以得到更加和諧的效果。

這里要增加實(shí)際圖文粗細(xì)的案例，文字要配對(duì)演

這些圖標(biāo)可以在 SF symbols beta 這個(gè)應(yīng)用中查看名稱， 以及直接拖入 sketch 修改，但目前僅提供了 Mac 版，步驟如下：

步驟1. 關(guān)注我們的公眾號(hào)并回復(fù)“iOS13”獲得資源大禮包；

步驟2. 下載并安裝「SF symbols.dmg」應(yīng)用；

步驟3. 打開應(yīng)用尋找需要使用的圖標(biāo)，比如分享；

步驟4. 將分享拖入 sketch 中；

步驟5. 快樂(lè)地在后面添加文字；

四.其他更新

- 卡片式的模態(tài)頁(yè)面

之前對(duì)模態(tài)的應(yīng)用還僅僅停留在彈出的警告、通知那樣的小件兒模態(tài)框上，而這次 iOS13 增加了一種全新的模態(tài)樣式——卡片式的模態(tài)頁(yè)面。

實(shí)際上 iOS12 中已經(jīng)存在這種模態(tài)頁(yè)的雛形，Music 應(yīng)用中的歌曲播放頁(yè)與這次的模態(tài)頁(yè)有著類似的形式。

但是 iOS13 將卡片式模態(tài)頁(yè)納入了交互指南之中，并做出了更為詳細(xì)的規(guī)范，比如規(guī)范了頁(yè)面中頭部的布局，規(guī)范了退出該頁(yè)面的交互形式等等。

在之后設(shè)計(jì)界面時(shí)，對(duì)于一些使用彈窗覺得太小，跳轉(zhuǎn)又沒必要的頁(yè)面，或許可以考慮一下使用卡片式的模態(tài)頁(yè)了。

- New York 字體

繼舊金山 (San Francisco) 字體之后，蘋果又推出了自家的襯線字體——紐約 (New York)，還給出了該字體在 APP 界面中的使用規(guī)范。這意味著 iOS 的界面可以融入更加古典的襯線字體，讓一些具備古典風(fēng)格的 APP 能夠更輕松貼切地表達(dá)自己的氣質(zhì)。

現(xiàn)階段 New York 字體僅包含英文，無(wú)中文，對(duì)中文應(yīng)用設(shè)計(jì)的影響不大。

作者：酸梅干超人

公眾號(hào)：超人的電話亭