蘋果在6月4日凌晨 WWDC（Worldwide Developers Conference 蘋果全球開發(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 模板伯铣，其他版本還需要等待。

image

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

image

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

image

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

image

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

image

對(duì)于訪問國外網(wǎng)絡(luò)不夠方便的朋友，我在百度云傳了一份可供下載，包含： Sketch UI 模板虫几、組件庫锤灿、新的 SF Symbols 程序和 San Francisco Pro 字體。

鏈接: https://pan.baidu.com/s/1qkZbToUFE7GYaH11r0uyag 提取碼: bwtp 復(fù)制這段內(nèi)容后打開百度網(wǎng)盤手機(jī)App辆脸，操作更方便哦

image

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

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

新增內(nèi)容

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

上一屆 WWDC 就提到支持將 iOS App 移植到 Mac 上但校，這屆 WWDC 提供了詳細(xì)的移植技術(shù)和設(shè)計(jì)方案。這部分內(nèi)容主要是囑咐開發(fā)者移植過程中注意 大屏幕 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 毛玻璃效果轰传，只不過以前從來沒有在設(shè)計(jì)指南里強(qiáng)調(diào)過驴党。

image

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

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

image

• Context Menus（上下文菜單）

Context Menus是 3D Touch 中 Peek and Pop 的改進(jìn)版，以后既可以用 3D Touch 喚起 Context Menus 码俩，也可以用其他操作或者手勢(shì)（比如長按）打開度帮。這意味著沒有 3D Touch 的 iOS 設(shè)備也間接的獲得了 3D Touch 的功能。（據(jù)新聞爆料稿存，以后的 iPhone 會(huì)砍掉 3D Touch）

image

老內(nèi)容修改

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

自從 iPhone 7 開始加入了線性馬達(dá)后，我們?cè)诨瑒?dòng) Picker 等控件的時(shí)候瞳秽，能感覺到手機(jī)在輕微震動(dòng)瓣履，這讓用戶產(chǎn)生在真實(shí)世界撥輪的觸感。iOS 13 允許自定義觸感练俐，比如游戲中人物角色從樹上跳下來袖迎，用自定義觸感模擬出跳下來地板震動(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)用戶使用深色墓脊螅或者殘疾人打開了無障礙模式后，原來的顏色可能變得丑或者殘疾人看不清楚归形。而
System Color 提供的顏色會(huì)在深色模式和無障礙模式下自動(dòng)改為為合適的色值托慨，讓顏色在這些特殊模式下更舒適和清晰。

image

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

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

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

image

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

image

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

image

號(hào)外：模態(tài)的定義和使用場景解釋起來比較復(fù)雜虚茶，我后續(xù)會(huì)在《這個(gè)控件叫什么》
專門寫一篇來解讀。

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

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

image

作者：龍爪槐守望者
鏈接：http://www.reibang.com/p/d74170129ac2
來源：簡書
簡書著作權(quán)歸作者所有罩扇，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。