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

在(上)篇中和各位夥伴介紹了 Dark Mode 以及衍生的 Material 設計;在(下)篇中會再和大家聊聊更多 iOS 13 在設計上帶來的改變
評論
評論

本篇原文刊登於 Medium,INSIDE 獲授權轉載。關於作者 Samuel,目前在 Hahow 好學校擔任 Product Owner & Software Developer。

(上)篇中和各位夥伴介紹了 Dark Mode 以及衍生的 Material 設計;在(下)篇中會再和大家聊聊更多 iOS 13 在設計上帶來的改變,如果還沒有讀過(上)篇的文章可以透過這個連結前往閱讀。

  • 全新的 SF Symbol
  • Modal 新類型「Sheet」,如果沒注意到就麻煩啦!
  • Context Menu 的新互動
  • 最後讓我們來聊聊 iPad UI 吧

全新的 SF Symbol

1_DJb4rA7GjaXZzF2q5QHZYQ

iOS 13 支援了 SF Symbol,提供超過 1500 個高識別、一致性、同時與系統字體 San Francisco 無縫整合的 Icon。

1_plXFcuiiqV7OiZBrw0aIMQ

更棒的是它還同步支援各種尺寸、重量型態,也讓工程師、設計師們再也不需要垂直置中的問題,不需要擔心模糊的問題;對於不懂設計的工程師或者需要快速開發產品的團隊而言,根本就是佛心來的啦!

1_-4Av7UF_tDbVrZnyA7Rg9w
1_9T86ffOh-MO9T017lRdrpA
隨著文字大小變更保持對齊狀態

如果你想要建立客製化的 Symbol,隨著 MacOS 更新提供的 Mac App — SF Symbols 讓你可以用 Sketch 或者 illustrator 自己客製化需要的 icon,並匯入 SF Symbols App 後進行使用。想瞭解更多夥伴可以參考 iOS Human Interface Guildline — SF Symbol

Modal 新類型「Sheet」,如果沒注意到就麻煩啦!

Yap!iOS 13 中「系統預設」的 Modal 跳出頁面將會轉變為下圖的型態(已經實際測試過),稱為「Sheet」,操作的視圖會被縮小同時淡化至於新跳出視圖的下方,而不像 iOS 13 之前會是完整覆蓋的畫面 →

1_ob1ZlLIEpft88CIzAlXeCQ

讓我們放大些來看:

1__kVTQSytBkAuIAgGF2qyHg

新版本的 Sheet 採用卡片式的設計風格(整個 Dark Mode 都是一個卡片式的概念啊),透過淡化卻仍然存在的概念,幫助使用者記得上一個視圖的樣貌與行為,同時,新版本的 Sheet 也提供使用者一些系統預設的行為或者「自定義的行為(點擊按鈕)」跳出這張卡片:

  1. 從卡片上方往下滑動
  2. 當卡片(如果內容是 ScrollView)滑至內容最上方時,從卡片的任何一個方向往下滑動
  3. 點擊按鈕

根據 Human Interface Guideline 中的堅毅,如果跳出來的 Sheet 中有「修改未儲存的資料」這類型的行為,應該要提醒使用者有「未儲存的資訊」,結合 Alert 視窗與使用者進行互動,同時透過程式關閉掉「從卡片上方往下滑動」這類型的離開行為,畢竟…如果使用者沒有儲存不小心關閉畫面就尷尬了(笑)。Apple 表示 Sheet 的使用情境在於「非沈浸式(nonimmersive)」的操作介面,請確保 Sheet 上「至少有」關閉的按鈕提供使用者使用(不應該仰賴 Swipe 的的預設關閉行為),彈出的任務不應該過於複雜,使用者也不應該被輕易綁在畫面當中。以 Calendar 為例,編輯和新增事件這種事件任務就非常適合使用 Sheet:

1_ob1ZlLIEpft88CIzAlXeCQ

但像拍照、錄影、照片編修、文件編輯這種需要沈浸式、較複雜的使用場景就適合維持 Fullscreen 的呈現型態(原本的 Modal):

1_7MYKhIkiLzu6HvOOI4G4og

當然,即使 Apple 強烈推薦我們採用新的 Modal Presentation Mode,但原本覆蓋的視圖呈現型態仍然可以透過程式碼去修改,但務必記得「預設的已經改成上圖的樣式」、「預設的已經改成上圖的樣式」、「預設的已經改成上圖的樣式」很重要所以說三次!如果各位的 App 不希望透過上圖的樣式跳出頁面,請務必提醒自己工程師在 iOS 13 上線前進行修改(笑)。

Context Menu 的新互動

不知道各位夥伴有沒有注意到配合「 Force Touch + 上滑」在 iOS 的相簿中可以產生底下的互動(Peak and Pop):

1_ZvwoZIB0gNMUe2LjADuTGg

在 iOS 13 新增了一個非常類似的互動行為 — Context Menu

1_10gWSsCs7Z7U_eW0rxS5wA
  • 支援不同的裝置
  • 更直覺的操作(不需上滑),同時不再只支援 Force Touch 這種手勢
  • 支援更多的排版樣式(包含分隔線)
1_CkzRBvvlcngkcNBviOM_Qg_(1)

Context Menu 最主要的價值除了提供更多的互動型態之外,Apple 在 Human Interface Guideline 中也特別提出幾個重點:

  • 避免和 Edit Menu(下圖)合用,會讓使用者混淆
1_WGQtUoN3qZTNhTG2rP7Ldg
  • 擺放最常用的行為在 Context Menu 中
  • 使用Submenus 來處理複雜的行為,但 Submenus 不要超過一層

其實…Context Menu 某種程度就是在模仿 MacOS 上「右鍵」的操作行為,使用者可以透過這個快速彈出的 Menu 在畫面中進行更多的操作,Apple 建議 Me畢竟…接下來 iPadOS 的 App 快要可以無痛轉移到 MacOS 的 App 啦(笑)。

1_KzJyHuLC9tafTdX5bVD81Q

最後讓我們來聊聊 iPad UI 吧

iPhone 的部分大致上告一個段落(終於),我們最後來聊聊 iPad 的部分吧(笑),竟然還有?!好啦我們簡單整理一下就好!首先,Apple 在今年的 WWDC 中將 iPad 獨立出一個「iPadOS」:

1_qM8RBUzNhuan_04KF6UBIQ

除了主頁面的 UI 調整之外,也支援首頁釘選 App 的功能。但 iPadOS 最主要的特色在於所謂「滑動置前與分割顯示」 →

1_TSr3OIJnFmEKTcFzsY4fKQ

針對 iPadOS,Apple 耗費了大量的心力在多視窗的互動上面,就如同在 MacOS 上可以有多個視窗的操作一樣。更多的細節可以直接上 Apple 網站上面看,但這邊我想和大家多聊聊的是由於 Split Screen 分屏所產生的特性,Apple 特別建議「你需要讓你的 App 變得 Resizable」。

1_tcBNWQ5yvYNewiCOegpywQ

在 iOS 13 之前,iPad 的 App 可以關閉掉 Split Screen 的特性,讓你的 App 不能同時和其他 App 一起使用,但這一切都將在 2020 年 4 月停止!你的 App 「一定要支援 Split Screen」,這就是 Apple 啊(眼神死)。

這大概是唯一一個讓我想特別拿出來提的調整,讓我們一起…攜手努力吧哈哈哈哈哈哈啊。

感謝大家願意花時間閱讀小弟的文章,我想…iOS 13 在設計上面改動的重點幾乎都整理在這兩篇裡面囉!更詳細的內容請參考:

希望能夠幫助各位在 iOS 13 來臨之前提前做好準備,避免被這些設計上面的改動給影響(淚水)。

責任編輯:Anny

延伸閱讀:



精選熱門好工作

樂趣買Web Designer(Rakuma)

台灣樂天市場
臺北市.台灣

獎勵 NT$20,000

產品經理 (PM, PO)

VeryBuy非常勸敗
臺北市.台灣

獎勵 NT$20,000

Front-End Developer 前端工程師

Infocast
臺北市.台灣

獎勵 NT$20,000

評論