iOS 13的深色模式配色方法及層次設計

今年的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

每天更新,
全站高品質素材免費下載!