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

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 把部分圖標通過全新的 SF Symbols 技術呈現，如果沒有做一些設置，首次打開 Sketch 模板會出現圖標亂碼的情況。

△ 沒安裝SF Symbols程序導致部分圖標顯示不全

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

△ 在SF Symbols程序內查看指引刪除老的字體

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

△ 新增Dark Mode的控件樣式

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

△ 分段選擇器 Segmented Control

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

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

設計指南內容更新

設計指南更新包含兩部分：新增內容和老內容修改。

1. 新增內容

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

上一屆 WWDC 就提到支持將 iOS App 移植到 Mac 上，這屆 WWDC 提供了詳細的移植技術和設計方案。這部分內容主要是囑咐開發者移植過程中注意大屏幕 Mac 的界面適配、支持鼠標和鍵盤快捷鍵操作等。

Dark Mode（深色模式）

啟用深色模式后，iOS 系統會自動適配背景、主色調等。但是設計師仍要檢查顏色、圖標和文字顏色在深色模式的顯示情況。

Materials（材質）

iOS Materials 和 Google 的 Material Design 不一樣。iOS 的 Materials 是指為控件本身或者背景增加一個半透明的效果，讓界面有景深感。既能讓用戶意識到控件和背景的關系，也不會分散用戶的注意力。其實這就是 iOS 7 毛玻璃效果，只不過以前從來沒有在設計指南里強調過。

△ 背景Materials

Multiwindow on iPad（iPad支持多窗口）

iPad OS 支持單個應用打開多個窗口。iPad App 的窗口可分為主窗口和副窗口，副窗口要提供「關閉」或者「完成」按鈕，點擊按鈕后會關閉副窗口回到主窗口，不能用「返回」按鈕代替關閉功能，因為用戶可能理解不了返回是關閉副窗口還是返回副窗口里前一個頁面。

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

Context Menus（上下文菜單）

Context Menus 是 3D Touch中 Peek and Pop 的改進版，以后既可以用 3D Touch 喚起 Context Menus，也可以用其他操作或者手勢（比如長按）打開。這意味著沒有 3D Touch 的 iOS 設備也間接地獲得了 3D Touch 的功能。

△ Context Menus（上下文菜單）

2. 老內容修改

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

自從 iPhone 7 開始加入了線性馬達后，我們在滑動 Picker 等控件的時候，能感覺到手機在輕微震動，這讓用戶產生在真實世界撥輪的觸感。iOS 13 允許自定義觸感，比如游戲中人物角色從樹上跳下來，用自定義觸感模擬出跳下來地板震動的效果，讓體驗更加真實和強烈。

新增System Color（系統顏色）和Dynamic System Color（動態系統顏色）

如果使用某個具體的 RGB 色值進行界面設計，當用戶使用深色模式或者殘疾人打開了無障礙模式后，原來的顏色可能變得丑或者殘疾人看不清楚。而 System Color 提供的顏色會在深色模式和無障礙模式下自動改為合適的色值，讓顏色在這些特殊模式下更舒適和清晰。

△ 系統顏色自帶深色模式和無障礙下的變體

Dynamic System Color 可以為某類控件定義一組顏色，以自動適應明亮模式和深色模式。例如給標題設置一組顏色，那么整個 App 的所有標題明亮模式時都是同一種顏色，切換到深色模式后顏色都會變成另一種顏色。

新增卡片風格的模態

提起模態，最常見的是界面中間彈出一個對話框。

△ Alert對話框

或者全屏的模態，通過導航欄的取消或完成按鈕退出模態。

△ 全屏的Modal View

其實在 iOS 13 之前，系統郵件 App 還提供介于對話框和全屏模態之間的模態樣式，這種模態卡片既占據非常大的屏幕空間，又能通過卡片頂部隱約看到原來頁面的導航欄，讓用戶意識到模態與之前頁面的關系。iOS 13 更新后，卡片風格的模態被正式寫入到 iOS 設計指南中，相信以后會有越來越多的 App 采用這種風格。

△ 卡片風格的模態

大標題導航欄可隱藏底部邊框

隱藏大標題導航欄底部邊框線，讓標題和內容聯系更緊密，當然如果滾動的時候底部邊框線還是會顯示的，否則就分不清導航欄和內容的邊界了。

△ iOS 12對比iOS 13大標題導航欄