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

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

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

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

developer.apple.com

深色模式能夠讓某些內(nèi)容更加突出、對于OLED 的螢?zāi)粊碚f更加省電，有些人則是認(rèn)為深色模式的閱讀舒適度更高、更能保護(hù)眼睛，或者純粹只是一種審美偏好。無論如何，有許多使用者相當(dāng)期待這項(xiàng)功能，因此能夠讓你的產(chǎn)品適當(dāng)?shù)刂г畷?huì)是較好的選擇。

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

動(dòng)態(tài)色彩(Dynamic Color)

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

developer.apple.com

或者更精確地說：

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

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

語意化色彩命名(Semantic Color)

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

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

blue: R0 G0 B255

blueDark: R28 G64 B255

white: R255 G255 B255

black: R0 G0 B0

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

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

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

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

developer.apple.com

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

設(shè)計(jì)策略

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

1.選定基本標(biāo)準(zhǔn)色

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

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

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

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

層次(Hierarchy)

操作態(tài)(Modality)

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

在網(wǎng)頁設(shè)計(jì)中，其樣式就是你我熟悉的「浮動(dòng)面板/對話框」；而在iOS 里，則是一個(gè)由下往上升起、完整覆蓋螢?zāi)坏漠嬅妗?

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

developer.apple.com

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

Material 與Vibrancy

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

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

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

Navigation Bar 的底部分隔線

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

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

developer.apple.com

Context Menu

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

developer.apple.com

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

developer.apple.com

長按物件，不只會(huì)彈出選單，連帶還附有一個(gè)預(yù)覽窗口，內(nèi)容可自由設(shè)計(jì)，能夠讓使用者更清楚當(dāng)下操作的對象。

此互動(dòng)在沒有3D Touch 的裝置上由長按觸發(fā)，具備3D Touch 的裝置則可用力按下立刻叫出，但Apple 這樣做無異于弱化了3D Touch 在觸控螢?zāi)簧系拇嬖诒匾?，推測有可能在未來機(jī)種會(huì)全數(shù)拔除。

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

小結(jié)

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

作者：Taylor Hu?

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