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

一.Dark Mode

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

1. 基礎色彩

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

- 系統(tǒng)彩色

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

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

- 中性色

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

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

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

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

- 填充色和分割線

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

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

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

- 陰影→浮層

需要注意的是在白色背景下能夠輕而易舉突出頁面/卡片縱向層級關系的「陰影」，在 Dark Mode 的純黑色背景下已經不適用了，所以 iOS 建議利用「浮層」(Elevated) 來表達頁面的縱向關系。Elevated 層只在黑暗模式中起作用，所以對應的色彩規(guī)范也全是以深色模式為準。

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

- Material 卡片

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

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

- 其他組件

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

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

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

二.情景菜單

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

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

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

- 情景菜單立即顯示項目相關的操作命令；Peek & Pop 需要向上滑動才能查看命令。

針對該控件，官方規(guī)范文檔中還有更加具體的建議，這里不細說，有時間會把 iOS13 新增的內容翻譯出來。

三.SF Symbols

iOS13 重繪了大量的系統(tǒng)級圖標，原先粗粗細細大大小小割裂感嚴重的圖標們在這次更新中終于改頭換面變得和諧了起來，對比一下 iOS12 與iOS13 的 Toolbar 就可以很直觀地體會到這一點：

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

這里要增加實際圖文粗細的案例，文字要配對演

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

步驟1. 關注我們的公眾號并回復“iOS13”獲得資源大禮包；

步驟2. 下載并安裝「SF symbols.dmg」應用；

步驟3. 打開應用尋找需要使用的圖標，比如分享；

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

步驟5. 快樂地在后面添加文字；

四.其他更新

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

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

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

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

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

- New York 字體

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

現(xiàn)階段 New York 字體僅包含英文，無中文，對中文應用設計的影響不大。

作者：酸梅干超人

公眾號：超人的電話亭