今年的WWDC 內容多且深且廣，許多開發(fā)者都認為遭到密集的資訊轟炸；而設計方面，除了新的「深色模式」外，第一眼似乎沒有什么巨大的改變，但其實iOS 13所著重的，本來就不是帶來「全新的官方設計」，而是一系列更有組織、更有效率的「設計方法」。

簡而言之，iOS 13 的目的并不是讓使用者看到新的系統(tǒng)UI 外觀，而是讓設計師有更高的自由度、讓開發(fā)者有更高的效率，兩者結合，自然就會帶給使用者更多變的體驗。

這邊統(tǒng)整出UX/UI 設計師最需要了解的iOS 13 設計重點，現(xiàn)在就讓我們詳細了解WWDC 2019 所帶來的全新設計系統(tǒng)。

深色模式(Dark Mode) 與配色方法

developer.apple.com

深色模式能夠讓某些內容更加突出、對于OLED 的螢幕來說更加省電，有些人則是認為深色模式的閱讀舒適度更高、更能保護眼睛，或者純粹只是一種審美偏好。無論如何，有許多使用者相當期待這項功能，因此能夠讓你的產(chǎn)品適當?shù)刂г畷禽^好的選擇。

而iOS 深色模式的設計方法顯然移植自去年的macOS Mojave，如果你讀過macOS 的設計規(guī)范，應該就不會感到陌生。深色模式的運作方式如下：

動態(tài)色彩(Dynamic Color)

深色模式并非只是把背景改成深色就算完成，某些顏色放在白色背景或許OK，但放在黑色上就顯得對比度不足，因此你需要把全部配色都另外配一份深色版本。

developer.apple.com

或者更精確地說：

一個顏色除了要有深色版本，深淺色最好還分別提供高對比版本及廣色域(Display-P3) 版本。理想狀況下，一個顏色共計要提供八種變化來滿足各種類型的使用者。

一個顏色，在各種狀態(tài)下(例如使用者切換到深色模式、或是開啟了高對比模式)，能夠自動切換到適當?shù)淖兓姹?，稱之為「動態(tài)色彩(Dynamic Color)」。設計師定義好色彩的各種變化后，開發(fā)者可直接將該組色彩在Xcode 的Asset Catalog 內制作成Color Set，系統(tǒng)即會視狀況自行挑選適當版本，這個就是所謂「動態(tài)」的意義。

語意化色彩命名(Semantic Color)

麻煩的地方在于，設計師該如何有效地管理兩套配色路線、并且在未來都能夠方便調整呢？

舉個例子來說，你為你的設計制定了色彩規(guī)范，并且為之命名：

blue: R0 G0 B255

blueDark: R28 G64 B255

white: R255 G255 B255

black: R0 G0 B0

開發(fā)者寫程式時也照著你的方式替色彩變數(shù)命名，這時候麻煩就來了：如果原本UI 為白底，使用者切換到深色模式需要換成黑底，那么用來控制背景色的變數(shù)就要改變，前景的藍色也要改成深色版本；色彩一多，必定產(chǎn)生編寫程式和設計管理的不便。

解決的方法是這樣的，如果我們將深淺版本的藍色統(tǒng)稱為「Primary」，不提及色彩本身，只單純以用途來命名，開發(fā)者將「兩種藍」打包為一個Color Set 后，訂為「UIColor.primary」，系統(tǒng)就會依照深淺色模式自動挑選(即前述的動態(tài)色彩)，因此開發(fā)者不需跟著設計師細究到底什么時候該用哪個顏色版本。將深淺版本的藍色統(tǒng)稱為「Primary」，不提及色彩本身，只單純以用途來命名，開發(fā)者將「兩種藍」打包為一個Color Set 后，訂為「UIColor.primary」，系統(tǒng)就會依照深淺色模式自動挑選(即前述的動態(tài)色彩)，因此開發(fā)者不需跟著設計師細究到底什么時候該用哪個顏色版本。

同理，雖然黑白兩色差距甚大，但可統(tǒng)稱為「UIColor.myBackground」，系統(tǒng)也會自動選擇黑或白來作為底色，這個設計方法就稱為「語意化色彩命名(Semantic Color)」。

如果過去沒有這種替色彩命名的習慣，可能一下子會覺得無法消化，好消息是，如果不需要太多自訂配色，蘋果在系統(tǒng)層級也提供了現(xiàn)成的語意化色彩，供設計師選用：

developer.apple.com

鑒于語意化配色是設計師本應具備的良好習慣，我們的UI 設計課程所提供的進階設計套件，則是在前年就已經(jīng)率先引入語意化色彩：

設計策略

設計系統(tǒng)的管理本身就非易事，現(xiàn)在有了上述的Dynamic Color 與Semantic Color，該如何將這些原則引入設計師的工作流程呢？可參考我們的設計課程所使用的方法，概述如下：

1.選定基本標準色

2.應用至UI (邊制作UI、邊做變化，并加入常用輔助色)

3.累積一定的畫面數(shù)量后，將顏色統(tǒng)整，并進行語意化命名

4.變化出暗色模式，以及高對比模式，甚至是廣色域模式

了解了深色模式與系統(tǒng)化的配色方法，讓我們接著看如何利用iOS 13 的新特性來優(yōu)化你的產(chǎn)品視覺層次。

層次(Hierarchy)

操作態(tài)(Modality)

在UI 中的「Modal」意指暫時性的操作畫面，中斷使用者當下的操作，先處理另一件(無論是與當下操作相關的或無關的) 事情，即操作態(tài)的轉換。

在網(wǎng)頁設計中，其樣式就是你我熟悉的「浮動面板/對話框」；而在iOS 里，則是一個由下往上升起、完整覆蓋螢幕的畫面。

到了iOS 13，預設的Modal 樣式將改為卡片式，就如同iOS 12 里的音樂App 播放畫面、或是Email 的編寫畫面，讓使用者能夠更清楚的意識到，目前的畫面是脫離原先操作的。

developer.apple.com

以前想要這種設計，開發(fā)者可能要花點力氣，現(xiàn)在可輕易做到這個效果。當然，對于一些比較適合全螢幕的操作(例如圖片編輯或影片播放) 你也可以選擇使用舊有的全畫面(Full-screen) Modal。

Material 與Vibrancy

這兩個名詞在中文里沒有適當?shù)姆g，姑且就先使用原文說明。

iOS 中的「Material」意指會將后方物件虛化的毛玻璃背景(注意，此處的Material 與Material Design 的意義不同)；而「Vibrancy」則是一種能夠在毛玻璃背景上，讓文字或形狀看起來更加突出的視覺效果：

這種設計語言從iOS 7 開始出現(xiàn)，到了iOS 8 開放API 供設計師與開發(fā)者使用，但只有少數(shù)選項；直到今年的iOS 13，設計師終于有更多的模糊效果可供選擇。

Navigation Bar 的底部分隔線

iOS 11 引入了帶有大型標題(Large Title) 的Navigation Bar，但標題的大小本身就已經(jīng)使其與下方內容有顯著的層次區(qū)隔，底下的分隔線因而顯得多余，Apple 自iOS 11 開始就在各個官方App 內不斷地在拔除這條線。

在iOS 13，設計師現(xiàn)在可以選擇不帶分隔線的Navigation Bar，背景也會無縫地連在一起，讓畫面更有一體性，如下圖。

developer.apple.com

Context Menu

在macOS 中，你可以對某物件點滑鼠右鍵，叫出與該物件相關的操作選單。

developer.apple.com

過去在iOS 中，若要滿足此類需求，通常是以長按搭配Action Sheet View，在配備3D Touch 的行動裝置則可使用Peek & Pop，而iOS 13 則提供了更好的選擇：Context Menu。

developer.apple.com

長按物件，不只會彈出選單，連帶還附有一個預覽窗口，內容可自由設計，能夠讓使用者更清楚當下操作的對象。

此互動在沒有3D Touch 的裝置上由長按觸發(fā)，具備3D Touch 的裝置則可用力按下立刻叫出，但Apple 這樣做無異于弱化了3D Touch 在觸控螢幕上的存在必要性，推測有可能在未來機種會全數(shù)拔除。

值得一提的是，Context Menu 可支援一階巢狀選單，就像電腦的右鍵選單可進入下一層一樣，相當方便。

小結

當然iOS 13 帶來的改變遠不只如此，若有興趣搶先了解，可注冊成為Apple 的付費開發(fā)者，擔心影響穩(wěn)定性的也可等到Public Beta 釋出再嘗鮮。

作者：Taylor Hu?

原文連接：https://medium.com/uxabc/ios-13-8227dc9bcbb8