產品設計師不能不知道的 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 吧

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

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 上線前進行修改(笑)。

不知道各位夥伴有沒有注意到配合「 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 啦(笑)。

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 啊(眼神死)。

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

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

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

責任編輯:Anny

延伸閱讀:



引領疫後科技業徵才新趨勢!緯創資通打造幸福職場平衡工作與生活

一場疫情改變了生活模式,也改變了無數人對於工作的想像。哈佛商學院 2021 年調查顯示,許多美國科技業人才轉職時除了薪資福利,更在乎工作的意義與自由度,希望從中獲得更多的自主性與自我價值提升。
評論
評論

深耕全球 20 年的緯創資通以全球為基礎,從設計製造服務,到專注於發展5G 通訊、AIoT 技術、專業顯示技術,結合工業物聯網 (IIoT) 與數位轉型等前瞻性發展,深耕智慧交通、智慧製造、智慧家庭、智慧醫療,打造未來智能生活。緯創順應國際趨勢,持續創建數位轉型文化及創新管理思維,透過「賦能員工」凝聚團隊向心力,共創兼顧工作效率與生活品質的環境,吸引年後轉職人才加入。

緯創全球總共25個營運據點,遍佈歐美及亞太地區 25 個國家,跨域與跨國管理的經驗,讓緯創在人才選用育留的觀念上更具有前瞻性,打造符合未來趨勢的友善職場,全方位提升同仁幸福感。

「DnA 數位學院」培育千名數位轉型專家,高效工作才有品質生活

如何擁有生活品質又能高效工作?「熱情工作、快樂生活」是緯創資通人力資源團隊的期許。緯創特別設計彈性上下班、有薪活力假、旅遊補助及生育獎勵金等福利,並提供交通車,讓同仁能大幅節省通勤時間,同時能達到節能減碳,善盡地球公民之責。

身為全球具有影響力的企業,緯創為落實數位轉型,企業內部辦學「DnA數位學院」成為一大亮點,邀請全體同仁參與「數位轉型微學習課程」,建立全員基礎數位思維,並且建立數據共享平台,協助同仁透過共享數據提高溝通效率。此外,具潛力的同仁完訓之後,有機會親自規劃課程傳承知識與經驗,在企業內部創造自己的舞台,進一步凝聚團隊向心力。

DnA 數位學院特地融入實際案例分享與模擬情境練習,幫助同仁學以致用,將知識落地為實際戰力;課程完訓後的同仁能獲得認證肯定與獎金,一步步成為專業數位專案領導者。緯創提供高度信任與尊重,以及實質獎勵,讓全員親身感受工作的意義與成就感,樂於主動參與,形塑特有的企業文化與自由風氣。

緯創資通「DnA學院」建立全員數位基礎思維,提升工作效率也形塑主動參與的團隊風氣/ Photo Credit :緯創資通

智能專題線上分享會,攜手人才打造國家戰略產業

除了數位轉型強化同仁創新思維,緯創資通也透過校園深耕等方式,培育更多即戰力。緯創總經理沈慶堯表示:「人才是未來發展的關鍵,我希望同仁能有協同作戰的特質,以及國際化的思維與能力。」

因應全球發展與科技趨勢,緯創將於 1/22(六) 推出「智能專題分享會」系列影片,分享智能場域實務經驗與未來趨勢,涵括智慧車載、智能製造、智慧交通等專業領域,歡迎跨領域人才踴躍參與,一起打世界盃,成為國際頂尖人才。

緯創資通「智能專題分享會」,暢談全球未來趨勢,邀請跨領域人才共襄盛舉/ Photo Credit :緯創資通

本文章內容由「緯創資通」提供,經關鍵評論網媒體集團廣編企劃編審。