11

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

 3 years ago
source link: https://tech.hahow.in/%E7%94%A2%E5%93%81%E8%A8%AD%E8%A8%88%E5%B8%AB%E6%87%89%E8%A9%B2%E8%A6%81%E8%AA%8D%E8%AD%98%E7%9A%84-ios-13-%E4%B8%8A-dark-mode-1c5018ecbd69
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

Image for post
Image for post

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
Image for post
Image for post
兩種模式下的介面差別

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

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

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

Image for post
Image for post
系統藍:返回按鈕、選取等等

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

Image for post
Image for post

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

  • 如果自家工程師原本是使用像是 #123456 這種 Hex 色碼設定系統顏色的(應該都是啦🙄),記得統一修改成使用 UIColor.systemBlue 這種 Semantic Color 的宣告型態。iOS 13 其實內建了非常多的 Semantic Color,也包含像是 systemBackground 背景色、各類型的文字、icon Tint Color,如下圖:
Image for post
Image for post
  • 如果原本產品中使用各式各樣的自定義色彩,可以考慮開始使用 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 的夢魘了(笑)。
Image for post
Image for post
Image for post
Image for post
系統元件自動轉換

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

Image for post
Image for post
Image for post
Image for post
辨識性差異

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

Image for post
Image for post

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

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

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

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

如果喜歡這篇文章,反正鼓掌不需要花錢🙏,用力地按下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/

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK