UI界面設計

完整的iOS 13 官方下載及設計指南更新

44400

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

iOS 13官方Sketch UI文件下載

iOS Apple UI設計資源為Sketch模板，這些資源為使用iOS SDK的開發(fā)人員提供了可以使用的全部控件，視圖和符號。這些資源可幫助您設計符合iOS設計語言的應用程序。（截止到6月12日，僅提供 Sketch 的 iOS 13 UI模板，其他版本還需要等待。）

	下載sketch圖庫? iOS 13
	下載Sketch格式文件 iOS 13（28.2 MB）

注意：由于 iOS 13 把部分圖標通過全新的 SF Symbols 技術呈現(xiàn)，如果沒有做一些設置，首次打開 Sketch 模板會出現(xiàn)圖標亂碼的情況。

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

必須先安裝 SF Symbols 程序后，通過程序內的指引刪除老的 San Francisco 字體后， Sketch 模板才顯示正常。

下載SF Symbols測試版 (76.6 MB)

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

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

△ 新增Dark Mode的控件樣式

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

△ 分段選擇器 Segmented Control

設計指南內容更新

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

1. 新增內容

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

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

2）Dark Mode（深色模式）

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

3）Materials（材質）

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

△ 背景Materials

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

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

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

5）Context Menus（上下文菜單）

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

△ Context Menus（上下文菜單）

2. 老內容修改

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

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

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

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

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

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

3）新增卡片風格的模態(tài)

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

△ Alert對話框

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

△ 全屏的Modal View

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