產品設計師不能不知道的 iOS 13 （上）— Dark Mode
Hello，我是 Samuel，目前在 Hahow 好學校擔任 Product Owner & Software Developer。新版本的 iOS 對於產品設計師而言算是帶來了幾個有趣的挑戰。透過這篇文章，希望能夠帶著各位產品設計師們認識即將正式發佈的 iOS 13 ，並且提早開始進行規劃！在（上）、（下）兩篇文章中會分別和大家介紹底下幾個主題：
- （上）Dark Mode 馬上就要來了，在設計上需要注意些什麼？
- （上）iOS 13 Design System 中的 Materials 是什麼？難道是 Google 的設計規範嗎？
- （下）全新的 SF Symbol
- （下）Modal 新類型「Sheet」，如果沒注意到就麻煩啦！
- （下）Context Menu 的新互動
- （下）最後讓我們來聊聊 iPad UI 吧
Dark Mode 馬上就要來了，在設計上需要注意些什麼呢？
麻…先別急，在開始介紹 Dark Mode 之前，我們先來看看這支在 WWDC19 中潮到不行的影片，這樣等等讀完文章之後可能比較不會崩潰（笑）：
有在關注 Apple 的朋友大概都知道，iOS 13 會在系統內支援「Dark Mode」主題，而所有系統內建的 App （備忘錄、行事曆、通訊錄…etc）也都會同步支援在 Dark Mode 底下的操作介面，系統將會在螢幕（Screen）、視圖（View）、清單（Menu）和各種控制元件（Controls）上套用 Apple 新定義的「darker color palette」，這套 Color Palette 的主要目的，在於透過調整顏色的明度 & 透明度做出視覺階層，提升顏色的對比性讓所有元件能夠清楚的在 Dark Mode 中進行操作；聽起來很簡單，但有經驗的設計師們應該都知道…這一切肯定沒有那麼簡單（淚），基於 Dark Mode 進行的介面設計並不是一個顏色調整一下就可以快速解決的任務，由於暗色系的一些特性，原本用來建立視圖階層（例如陰影）或者色彩對比（白底黑字）的概念都需要被重新設計，設計師們需要抱著全新介面的思維去應對視覺上的每個細節；也因為 Dark Mode 這大幅度的改動，Apple 也耗費心力重新定義了自家 Design System 的數個項目，除了強調設計師們應該「更專注於內容」，更提出底下 5 個原則基於原有的設計（Light Mode）進行調整：
- 維持操作上的熟悉性
- 維持平台上的一致性
- 清楚的資訊階層
- 無障礙操作
- 保持簡單 — Keep it simple
重點補充：在 iOS 13 當中，使用者將可以設置 Dark Mode 做為預設模式，或者可以設定當環境變暗時（室內、晚上）自動轉換成 Dark Mode 的切換模式；這兩種狀態整合起來意味著…身為設計師的我們或多或少都該考慮些 Dark Mode 的使用場景。
iOS 的 Human Interface Guideline 中針對 Dark Mode 有不少的說明，有興趣的夥伴可以花些時間閱讀，在這邊我們先來簡單看看在 Dark Mode 的影響下，iOS 系統上做了哪些調整。
首先，iOS 13 中支援了所謂「Semantic Color」；還記得我們以前在進行介面設計時會使用所謂的「系統藍」或者「系統紅」嗎？
為了應對 Light / Dark Mode 兩種模式，現在 iOS 中內建了這些「系統顏色」提供開發者 / 設計師使用，這些顏色會根據 Light / Dark Mode 自動進行切換，讓你不需要耗費心力重新設計，如下圖：
不論有沒有使用到這些系統色，在 iOS 13 正式改版之前，各位產品設計師們請記得 3件重要的事情：
- 如果自家工程師原本是使用像是 #123456 這種 Hex 色碼設定系統顏色的（應該都是啦🙄），記得統一修改成使用
UIColor.systemBlue這種 Semantic Color 的宣告型態。iOS 13 其實內建了非常多的 Semantic Color，也包含像是 systemBackground 背景色、各類型的文字、icon Tint Color，如下圖：
- 如果原本產品中使用各式各樣的自定義色彩，可以考慮開始使用 Semantic Color ，藉此同步支援 Light / Dark Mode，或者透過 Color Asset （不知道是什麼的話可以問你家工程師 🤣）自己來定義產品的 Dark Mode Color Palette。
- 如果你的產品有使用「系統的原生元件」，例如 Switch、Tab bar、Navigation Bar 之類的（圖二），假如使用者切換到 Dark Mode 的話，這些元件將會自動「將顏色套用 Dark Mode Color Palette」，也就是說…如果完全不調整的情況下，你的 App 畫面可能會變得黑黑白白一團糟啦哈哈哈哈哈哈，就類似圖一中的介面， Tabbar 已經被轉成 Dark Mode 的樣式，但畫面上方的元件、文字因為都是自定義顏色、樣式的關係，並沒有隨著模式切換而自動調整，這也讓整個畫面看起來上下似乎不太協調。但不用擔心！如果真的很痛苦，就是不想要（沒有時間）支援 Dark Mode ，可以請工程師幫你在 App 的 Info.plist 裡面加上一個參數說明「只支援 Light or Dark Mode」，就可以擺脫 Dark Mode 的夢魘了（笑）。
那…在規劃 Dark Mode Color Palette 時有什麼特別需要注意的嗎？有的！我們需要特別注意在不同模式底下的 Color Contrast Ratio（色彩對比），簡單來說就是在不同背景下，由於文字 / Symbol 的顏色對比值會嚴重影響它的易讀 / 可辨識性，設計師應該針對不同模式進行調整，而非直接套用一個「乍看之下」可以兼容的色彩，以下圖的橘色為例：
小補充：可以使用像是 Contract 這樣的工具測試你的顏色是否符合標準喔！
iOS 13 所說的 Material 是什麼？是 Google 的設計規範嗎？
在開始介紹 Material 之前，我們先來聊聊 Apple 在 Session 中介紹的「Base and Elevated」概念，Apple 之所以提出這樣的概念，主要是由於「陰影」的效果在 Dark Mode 底下相對不明顯，因此 Apple 透過灰階的調整建立出視圖的階層：
Apple 也建議設計師們也都應該透過明暗程度來建立視圖的階層，如果完全沒有概念的夥伴，iOS 13 中內建的 System Gray（系統灰）會是設計師們可以先嘗試看看的顏色（同時支援 Light / Dark Mode）：
來到正題！iOS 13 提供了「Materials（材質）」的設計，某種程度其實非常類似 iOS 7 導入的毛玻璃（模糊）效果，但早期並沒有那麼多層（笑）。iOS 13 透過 Materials，不同程度的模糊、透明效果來建立畫面上視覺的階層深度（Depth），Material 藉由讓背景模糊來讓畫面上的「背景」和「前景」拆分開來，背景的顏色由於透明的關係能夠穿透到前景，但又因為模糊的設計並不容易影響前景的辨識性（當然也要搭配文字的對比啦🤣）。iOS 13 支援四種深度（Thick、Regular、Thin、Ultrathin）的 Material 效果，透過下圖應該可以清楚地看到 Thick 的 Material 效果可以提供視圖更多的文字、圖片對比性，而這些效果現在都可以請工程師輕鬆的透過程式直接設置：
如果允許的話，Apple 建議設計師們在「自定義的視圖（Custom View）」上也能夠套用類似的規範；除此之外，基於這些 Material 效果上的文字色彩也被重新定義，透過調整效果的 Vibrant 類型，在 iOS 13 中會自動產生如下圖的文字色彩：
當然，在 iOS 13 中除了顏色可以進行調整之外，所有的圖片也都可以根據 Light / Dark Mode 進行變更喔 ！
喝口水，光 Dark Mode 就有這麼多要注意的重點了！（上）的部分我們就先講到這裡吧，如果各位夥伴有興趣瞭解在設計上 iOS 13 到底還改了些什麼，除了這篇文章之外也可以參考 2019 WWDC Session ，文章中的截圖也都是來自 WWDC Session 提供的 Keynote 簡報 😎
如果喜歡這篇文章，反正鼓掌不需要花錢🙏，用力地按下50次鼓掌給予一些鼓勵吧！
您好，我是Samuel，目前任職於Hahow，擔任Product Owner & Software Developer，TEAMUP和Kapi的共同創辦人;正在努力培養跨領域的思維，認為分享和傳遞資訊這個行為能夠改變整個環境與業界氛圍。熱愛設計，技術實作，創業和攝影，有任何想法或者合作的機會都歡迎一起喝杯咖啡。Website：www.samuel-kao.com
Facebook：https：//www.facebook.com/citysite1025
Instagram：https://www.instagram.com/citysite1025/
