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

新版本的 iOS 對於產品設計師而言算是帶來了幾個有趣的挑戰,本篇帶著各位產品設計師們認識即將正式發佈的 iOS 13
評論
評論

本篇原文刊登於 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
兩種模式下的介面差別

重點補充:在 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 簡報。

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

責任編輯:Anny

延伸閱讀:



總價值一千萬獎項!「挖貝提案者大賽」提供完整顧問與行銷資源,目標助 40 組提案團隊圓夢

第一屆「挖貝提案者大賽」,不僅祭出總價值高達一千萬的豐厚獎項,更運用貝殼放大過往協助無數破千萬集資專案的強大專業優勢,提供獲選提案團隊完整顧問與行銷資源,力求讓好提案能在台灣遍地開花。
評論
Photo Credit:貝殼放大
評論

群眾集資產業在台灣邁向第 10 年,產業又有新變革!由台灣最大群眾集資顧問公司「貝殼放大」成立的「挖貝 WaBay」群眾集資平台於 1 月 14 日正式宣布,舉辦第一屆「挖貝提案者大賽」,不僅祭出總價值高達一千萬的豐厚獎項,更運用貝殼放大過往協助無數破千萬集資專案的強大專業優勢,提供最多 40 組獲選提案團隊完整顧問與行銷資源,力求讓好提案能在台灣遍地開花。

徵件對象包含原創產品、社會參與、文化內容等各類型提案,並於即日起至 3 月 31 日開放報名,首獎可獲得挖貝 WaBay 提供價值 300 萬元的專案推廣、行銷、顧問資源,而且只要入選決賽便可擁有價值 10 萬元的行銷資源挹注!歡迎所有符合資格的提案團隊報名參賽

從根本改善產業,提供完整顧問資源、提升群眾集資原創動能

「挖貝 WaBay」群眾集資平台於 2021 年 4 月正式成立,由於看見群眾集資原創性日益降低,以及層出不窮的爭議事件,漸漸讓大眾對產業失去信心,因此挖貝秉持群眾集資「信任」與「責任」原則,鼓勵「原創」和「社會倡議」類型專案,致力和提案團隊與贊助者共創良好的集資環境,希望重建群眾集資產業最美好的的初始信念,成為原創、文化及社會參與團隊最青睞的平台。

適逢整體群眾集資產業在台灣邁向第 10 年里程碑,也是挖貝平台在成立將滿一週年之際,特別舉辦「挖貝提案者大賽」,以史上最豐厚、總價值高達一千萬的獎項,鼓勵全台與挖貝一樣懷抱著美好理想的團隊,將心中的原創提案實現成真,讓社會產生正向改變,並帶動群眾集資產業正向發展。

總獎項價值千萬!首獎獨得 300 萬、入選決賽即獲 10 萬行銷資源

「挖貝提案者大賽」共分為三個組別,包含「原創產品」(具備全新概念的生活原創設計品、3C 科技、活動等)、「社會參與」(具有社會公益價值,例如:社會議題倡議、空間再造、教育、在地等)、「文化內容」(影視娛樂、藝文出版、遊戲等),期望凸顯提案團隊本身的原創性以及對社會文化的關注與理念實踐,初賽不限報名組數,最多取 40 組入選決賽。

在獎項的部分,為了鼓勵更多團隊藉由群眾集資實現理想,「挖貝提案者大賽」跳脫一般平台僅能提供基礎上架指導的限制,透過母公司「貝殼放大」成立以來奠基的紮實群眾集資執行專業,期望在過程中讓提案團隊獲得完整的專業支持,對群眾集資產業具備正確理念;本次祭出總價值一千萬的豐厚獎項,除了專案推廣費用挹注之外,更包含一對一顧問諮詢、對外宣傳資源、海外平台上架評估與輔導等實際支持;「首獎」可獨得價值 300 萬獎項、「優勝」每組兩名 50 萬獎項、「入選決賽」最多取 40 組各獲得價值 10 萬獎項。

敬請提案團隊把握機會報名參賽,挖貝提案者大賽報名資訊詳見:https://backme.tw/ref/XcxOl/

Photo Credit:貝殼放大

第一屆「挖貝提案者大賽」報名資訊

▶報名時間:即日起至 3 月 31 日

▶初賽結果公告:2022 年 4 月 20 日

▶報名資格

  • 設籍台灣
  • 具備完全行為能力之自然人或合法登記之法人、團體,未成年提案人則須提供法定代理人同意書
  • 報名期間內繳交提案資訊

▶提案組別

  • 原創產品組:生活原創產品(設計、餐飲、美妝保養、服飾)、3C 科技(3C、科技)、活動(活動、運動、旅行)等提案
  • 社會參與組:社會、空間再造、教育、在地等提案
  • 文化內容組:影視娛樂(表演、音樂、影視動畫)、藝文出版(印刷出版、攝影、插畫漫畫、藝術)、遊戲(桌遊、紙牌、電動、遊戲設計)等提案

▶獎項福利(總價值一千萬)

  • 「首獎」:一名,獎項總價值 300 萬
    • 專案推廣費 100 萬
    • 行銷、顧問資源 200 萬
  • 「優勝」:每組兩名,每名獎項總價值 50 萬
    • 專案推廣費 15 萬
    • 行銷、顧問資源 35 萬
  • 「入選決賽」:最多取 40 名,每名獎項總價值 10 萬
    • 行銷、顧問資源 10 萬

▶線上報名連結:https://backme.tw/ref/XcxOl/

本文章內容由「貝殼放大」提供,經關鍵評論網媒體集團廣編企劃編審。