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

Samuel
Hahow Tech
Published in
9 min readJun 23, 2019

--

Hello,我是 Samuel,目前在 Hahow 好學校擔任 Product Owner & Software Developer。在(上)篇中和各位夥伴介紹了 Dark Mode 以及衍生的 Material 設計;在(下)篇中會再和大家聊聊更多 iOS 13 在設計上帶來的改變,如果還沒有讀過(上)篇的文章可以透過這個連結前往閱讀。

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

20190624 補充說明:

感謝好友 Tommy 提出,WWDC 的講者針對 iPad Split Screen 這點的說明是「We are going to expect that “MOST” of the applications, “UNLESS you want to provide a truly immersive experience”, are going to support split screen multitasking.」,看起來似乎沒有強制要求,但是強烈建議,強制要求的是一定要使用 Launch Screen 和不再接受 letterboxing。

但實際上 Apple 到底會怎麼做呢?我們等正式上線來好好看看,因為這個問題比較嚴重,在 Apple Developer Forum 已有相關討論進行中,會持續追蹤回覆給各位夥伴:)

全新的 SF Symbol

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

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

隨著文字大小變更保持對齊狀態

如果你想要建立客製化的 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 之前會是完整覆蓋的畫面 →

讓我們放大些來看:

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

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

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

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

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

Context Menu 的新互動

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

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

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

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

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

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

最後讓我們來聊聊 iPad UI 吧

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

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

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

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

感謝好友 Tommy 提出,WWDC 的講者針對 iPad Split Screen 這點的說明是「We are going to expect that “MOST” of the applications, “UNLESS you want to provide a truly immersive experience”, are going to support split screen multitasking.」,看起來似乎沒有強制要求,但是強烈建議,強制要求的是一定要使用 Launch Screen 和不再接受 letterboxing。

但實際上 Apple 到底會怎麼做呢?我們等正式上線來好好看看,因為這個問題比較嚴重,在 Apple Developer Forum 已有相關討論進行中,會持續追蹤回覆給各位夥伴:)

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

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

希望能夠幫助各位在 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/

--

--