@龍爪槐守望者 ：蘋果在6月4日凌晨 WWDC（Worldwide Developers Conference 蘋果全球開(kāi)發(fā)者大會(huì)）公布 iOS 13 之后，隨即提供 iOS 13 的 Sketch UI 模板，Human Interface Guidelines（界面設(shè)計(jì)指南）內(nèi)容也有很多更新。

iOS 13官方Sketch UI文件下載

大家可以在 https://developer.apple.com/design/resources/，下載到最新的 iOS、macOS、macOS、tvOS 等UI模板，提供 Sketch、Photoshop、Adobe XD 甚至是 Keynote 的源文件。截止到6月9日，僅提供 Sketch 的 iOS 13 UI模板，其他版本還需要等待。

△ iOS 13 UI模板下載

注意：由于 iOS 13 把部分圖標(biāo)通過(guò)全新的 SF Symbols 技術(shù)呈現(xiàn)，如果沒(méi)有做一些設(shè)置，首次打開(kāi) Sketch 模板會(huì)出現(xiàn)圖標(biāo)亂碼的情況。

△ 沒(méi)安裝SF Symbols程序?qū)е虏糠謭D標(biāo)顯示不全

必須先安裝 SF Symbols 程序（下載地址： https://developer.apple.com/design/downloads/SF-Font-Pro.dmg）后，通過(guò)程序內(nèi)的指引刪除老的 San Francisco 字體后， Sketch 模板才顯示正常。

△ 在SF Symbols程序內(nèi)查看指引刪除老的字體

新的 UI 模板新增深色模式（Dark Mode）的樣式、iPad OS 版式模板等。

△ 新增Dark Mode的控件樣式

還有一些有趣的地方，比如分段選擇器（Segmented Control）的選中狀態(tài)更有質(zhì)感，像凸出的按鈕。

△ 分段選擇器 Segmented Control

我整理了一份包含： Sketch UI 模板、組件庫(kù)、新的 SF Symbols 程序和 San Francisco Pro 字體的文件，可供下載。

• 下載鏈接：https://pan.baidu.com/s/1qkZbToUFE7GYaH11r0uyag
• 提取碼：bwtp
• 備用鏈接：https://share.weiyun.com/5iYa2gk

設(shè)計(jì)指南內(nèi)容更新

設(shè)計(jì)指南更新包含兩部分：新增內(nèi)容和老內(nèi)容修改。

1. 新增內(nèi)容

iPad Apps for Mac（適用于Mac的iPad App）

上一屆 WWDC 就提到支持將 iOS App 移植到 Mac 上，這屆 WWDC 提供了詳細(xì)的移植技術(shù)和設(shè)計(jì)方案。這部分內(nèi)容主要是囑咐開(kāi)發(fā)者移植過(guò)程中注意大屏幕 Mac 的界面適配、支持鼠標(biāo)和鍵盤快捷鍵操作等。

Dark Mode（深色模式）

啟用深色模式后，iOS 系統(tǒng)會(huì)自動(dòng)適配背景、主色調(diào)等。但是設(shè)計(jì)師仍要檢查顏色、圖標(biāo)和文字顏色在深色模式的顯示情況。

Materials（材質(zhì)）

iOS Materials 和 Google 的 Material Design 不一樣。iOS 的 Materials 是指為控件本身或者背景增加一個(gè)半透明的效果，讓界面有景深感。既能讓用戶意識(shí)到控件和背景的關(guān)系，也不會(huì)分散用戶的注意力。其實(shí)這就是 iOS 7 毛玻璃效果，只不過(guò)以前從來(lái)沒(méi)有在設(shè)計(jì)指南里強(qiáng)調(diào)過(guò)。

△ 背景Materials

Multiwindow on iPad（iPad支持多窗口）

iPad OS 支持單個(gè)應(yīng)用打開(kāi)多個(gè)窗口。iPad App 的窗口可分為主窗口和副窗口，副窗口要提供「關(guān)閉」或者「完成」按鈕，點(diǎn)擊按鈕后會(huì)關(guān)閉副窗口回到主窗口，不能用「返回」按鈕代替關(guān)閉功能，因?yàn)橛脩艨赡芾斫獠涣朔祷厥顷P(guān)閉副窗口還是返回副窗口里前一個(gè)頁(yè)面。

△ Multiwindow on iPad（iPad支持多窗口）

Context Menus（上下文菜單）

Context Menus 是 3D Touch中 Peek and Pop 的改進(jìn)版，以后既可以用 3D Touch 喚起 Context Menus，也可以用其他操作或者手勢(shì)（比如長(zhǎng)按）打開(kāi)。這意味著沒(méi)有 3D Touch 的 iOS 設(shè)備也間接地獲得了 3D Touch 的功能。

△ Context Menus（上下文菜單）

2. 老內(nèi)容修改

新增Custom haptic pattern（自定義觸感模式）

自從 iPhone 7 開(kāi)始加入了線性馬達(dá)后，我們?cè)诨瑒?dòng) Picker 等控件的時(shí)候，能感覺(jué)到手機(jī)在輕微震動(dòng)，這讓用戶產(chǎn)生在真實(shí)世界撥輪的觸感。iOS 13 允許自定義觸感，比如游戲中人物角色從樹(shù)上跳下來(lái)，用自定義觸感模擬出跳下來(lái)地板震動(dòng)的效果，讓體驗(yàn)更加真實(shí)和強(qiáng)烈。

新增System Color（系統(tǒng)顏色）和Dynamic System Color（動(dòng)態(tài)系統(tǒng)顏色）

如果使用某個(gè)具體的 RGB 色值進(jìn)行界面設(shè)計(jì)，當(dāng)用戶使用深色模式或者殘疾人打開(kāi)了無(wú)障礙模式后，原來(lái)的顏色可能變得丑或者殘疾人看不清楚。而 System Color 提供的顏色會(huì)在深色模式和無(wú)障礙模式下自動(dòng)改為合適的色值，讓顏色在這些特殊模式下更舒適和清晰。

△ 系統(tǒng)顏色自帶深色模式和無(wú)障礙下的變體

Dynamic System Color 可以為某類控件定義一組顏色，以自動(dòng)適應(yīng)明亮模式和深色模式。例如給標(biāo)題設(shè)置一組顏色，那么整個(gè) App 的所有標(biāo)題明亮模式時(shí)都是同一種顏色，切換到深色模式后顏色都會(huì)變成另一種顏色。

新增卡片風(fēng)格的模態(tài)

提起模態(tài)，最常見(jiàn)的是界面中間彈出一個(gè)對(duì)話框。

△ Alert對(duì)話框

或者全屏的模態(tài)，通過(guò)導(dǎo)航欄的取消或完成按鈕退出模態(tài)。

△ 全屏的Modal View

其實(shí)在 iOS 13 之前，系統(tǒng)郵件 App 還提供介于對(duì)話框和全屏模態(tài)之間的模態(tài)樣式，這種模態(tài)卡片既占據(jù)非常大的屏幕空間，又能通過(guò)卡片頂部隱約看到原來(lái)頁(yè)面的導(dǎo)航欄，讓用戶意識(shí)到模態(tài)與之前頁(yè)面的關(guān)系。iOS 13 更新后，卡片風(fēng)格的模態(tài)被正式寫入到 iOS 設(shè)計(jì)指南中，相信以后會(huì)有越來(lái)越多的 App 采用這種風(fēng)格。

△ 卡片風(fēng)格的模態(tài)

大標(biāo)題導(dǎo)航欄可隱藏底部邊框

隱藏大標(biāo)題導(dǎo)航欄底部邊框線，讓標(biāo)題和內(nèi)容聯(lián)系更緊密，當(dāng)然如果滾動(dòng)的時(shí)候底部邊框線還是會(huì)顯示的，否則就分不清導(dǎo)航欄和內(nèi)容的邊界了。

△ iOS 12對(duì)比iOS 13大標(biāo)題導(dǎo)航欄