產品設計師不能不知道的 iOS 13 (上)— Dark Mode

評論
評論

本篇原文刊登於 Medium,INSIDE 獲授權轉載。關於作者 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
1_Kji6PNEgb6pQ7zLG_i9-2A
兩種模式下的介面差別

重點補充:在 iOS 13 當中,使用者將可以設置 Dark Mode 做為預設模式,或者可以設定當環境變暗時(室內、晚上)自動轉換成 Dark Mode 的切換模式;這兩種狀態整合起來意味著…身為設計師的我們或多或少都該考慮些 Dark Mode 的使用場景。

iOS 的 Human Interface Guideline 中針對 Dark Mode 有不少的說明,有興趣的夥伴可以花些時間閱讀,在這邊我們先來簡單看看在 Dark Mode 的影響下,iOS 系統上做了哪些調整。

首先,iOS 13 中支援了所謂「Semantic Color」;還記得我們以前在進行介面設計時會使用所謂的「系統藍」或者「系統紅」嗎?

0_own2XJFlSlNbDzE9
系統藍:返回按鈕、選取等

為了應對 Light / Dark Mode 兩種模式,現在 iOS 中內建了這些「系統顏色」提供開發者 / 設計師使用,這些顏色會根據 Light / Dark Mode 自動進行切換,讓你不需要耗費心力重新設計,如下圖:

1_p5Rj46c61h8h7Ce4UuVkPA

不論有沒有使用到這些系統色,在 iOS 13 正式改版之前,各位產品設計師們請記得 3件重要的事情:

如果自家工程師原本是使用像是 #123456 這種 Hex 色碼設定系統顏色的(應該都是啦),記得統一修改成使用 UIColor.systemBlue 這種 Semantic Color 的宣告型態。iOS 13 其實內建了非常多的 Semantic Color,也包含像是 systemBackground 背景色、各類型的文字、icon Tint Color,如下圖:

1_ESSUCujHYrkLm-yrvp8rRg

如果原本產品中使用各式各樣的自定義色彩,可以考慮開始使用 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 的夢魘了(笑)。

1_nLTdERwU4J5p47en1torxQ
1_4f85sBGw2HevZbq0OV4QOg
系統元件自動轉換

那…在規劃 Dark Mode Color Palette 時有什麼特別需要注意的嗎?有的!我們需要特別注意在不同模式底下的 Color Contrast Ratio(色彩對比),簡單來說就是在不同背景下,由於文字 / Symbol 的顏色對比值會嚴重影響它的易讀 / 可辨識性,設計師應該針對不同模式進行調整,而非直接套用一個「乍看之下」可以兼容的色彩,以下圖的橘色為例:

1_Z5QnV9rGS-FgIUkR1liESA
辨識性差異

小補充:可以使用像是 Contract 這樣的工具測試你的顏色是否符合標準喔!

1_VPO9lOJ0g1puRC7p810bdw

iOS 13 所說的 Material 是什麼?是 Google 的設計規範嗎?

在開始介紹 Material 之前,我們先來聊聊 Apple 在 Session 中介紹的「Base and Elevated」概念,Apple 之所以提出這樣的概念,主要是由於「陰影」的效果在 Dark Mode 底下相對不明顯,因此 Apple 透過灰階的調整建立出視圖的階層:

1_Az1f-gZx7PXNROPz--q7NQ

Apple 也建議設計師們也都應該透過明暗程度來建立視圖的階層,如果完全沒有概念的夥伴,iOS 13 中內建的 System Gray(系統灰)會是設計師們可以先嘗試看看的顏色(同時支援 Light / Dark Mode):

1_8GxRjSQsBnj7FDTBZMkcmA

來到正題!iOS 13 提供了「Materials(材質)」的設計,某種程度其實非常類似 iOS 7 導入的毛玻璃(模糊)效果,但早期並沒有那麼多層(笑)。iOS 13 透過 Materials,不同程度的模糊、透明效果來建立畫面上視覺的階層深度(Depth),Material 藉由讓背景模糊來讓畫面上的「背景」和「前景」拆分開來,背景的顏色由於透明的關係能夠穿透到前景,但又因為模糊的設計並不容易影響前景的辨識性(當然也要搭配文字的對比啦)。iOS 13 支援四種深度(Thick、Regular、Thin、Ultrathin)的 Material 效果,透過下圖應該可以清楚地看到 Thick 的 Material 效果可以提供視圖更多的文字、圖片對比性,而這些效果現在都可以請工程師輕鬆的透過程式直接設置:

1_W4S-V-y6uzvul98oaQRu5A

如果允許的話,Apple 建議設計師們在「自定義的視圖(Custom View)」上也能夠套用類似的規範;除此之外,基於這些 Material 效果上的文字色彩也被重新定義,透過調整效果的 Vibrant 類型,在 iOS 13 中會自動產生如下圖的文字色彩:

1_djax0qF9EzGPzk9qNBrJAg

當然,在 iOS 13 中除了顏色可以進行調整之外,所有的圖片也都可以根據 Light / Dark Mode 進行變更喔 !

喝口水,光 Dark Mode 就有這麼多要注意的重點了!(上)的部分我們就先講到這裡吧,如果各位夥伴有興趣瞭解在設計上 iOS 13 到底還改了些什麼,除了這篇文章之外也可以參考 2019 WWDC Session ,文章中的截圖也都是來自 WWDC Session 提供的 Keynote 簡報。

下篇:產品設計師不能不知道的 iOS 13 (下 )

責任編輯:Anny

延伸閱讀:



精選熱門好工作

遊戲美術 Game Artist

Orangenose Studio 易銘有限公司
臺北市.台灣

獎勵 NT$20,000

Product Manager

PicCollage 拼貼趣
臺北市.台灣

獎勵 NT$20,000

行銷企劃主管

安力國際開發股份有限公司
臺北市.台灣

獎勵 NT$20,000

評論