如何設計iOS平台上的Live Activities實時活動：UI/UX規範、技術要求統整

在叫外送、使用地圖導航的時候，你有留意過iPhone上會出現外觀長得和一般通知不太一樣的通知嗎？這些色彩豐富、外觀獨特、視覺吸睛的通知被稱作「實時活動（Live Activities）」，它的設計目的是為了幫助使用者快速地概覽當下相關的資訊，並與一般的資訊區分開來。現在，就讓我們一起來看看該如何正確地設計實時活動，替App創造更纖細的使用體驗吧！

推進實時活動前的須知

• 實時活動功能依賴於WidgetKit、App Intents和ActivityKit。
  • WidgetKit的最低版本要求為iOS 14/ iPadOS 14（2020）。
  • App Intents的最低版本要求為iOS 16/ iPadOS 16（2022）。
  • ActivityKit的最低版本要求為iOS 16.1/ iPadOS 16.1（2022）。
• 如果你希望實時活動包含按鈕、打勾等互動功能，有以下額外的版本要求。這裡我只列出幾個常見的，如果沒有你需要的內容，請自行至開發者文件查詢。
  • LiveActivityIntent可令實時活動包含按鈕、打勾等UI元素，最低版本要求為iOS 17/ iPadOS 17（2023）。
  • AudioStartingIntent可令實時活動包含控制音樂播放、暫停、下一首、上一首等UI元素，最低版本要求為iOS 16/ iPadOS 16（2022）。自iOS 17/ iPadOS 17起，需要改用AudioPlaybackIntent。
  • AudioRecordingIntent適合包含錄音功能的App開始實時活動，最低版本要求為iOS 18/ iPadOS18（2024）。

設計原則

以下內容彙整自Human Interface Guideline與相關開發者文件，這裡我只摘錄了幾個比較重要的：

實時活動用於顯示即時資訊，讓使用者能夠輕鬆查看進行中的事項、活動、任務的進度。

通用

1. 針對有明確「開始」與「結束」的任務或活動才使用「實時活動」。可接受的任務及活動長度是不超過8個小時，如果超過，實時活動會被系統強制結束。
2. 「實時活動」會顯示於系統的多個位置、且不同機型上的顯示外觀亦有差異，因此，設計時需妥善規劃每種變體。
3. 突出與強調重要資訊，讓使用者一眼就能看懂、理解。
4. 不要用於顯示廣告、推廣性內容。同時，避免在上頭顯示敏感、和使用者隱私相關的資訊。
5. 如果App擅自開始「實時活動」，會令使用者感到驚嚇、困惑。因此，只在使用者明確進行相關操作後，才開始「實時活動」。不過某些情況下，App自動開始「實時活動」是合理、可接受的，例如：點外送後自動顯示餐點外送情況、自動更新每場運動比賽的比分……等。
6. 只在相關資訊更新時，才更新「實時活動」上的內容。同理，只在資訊迫切需要使用者的注意時，才觸發「實時活動」的醒目提示樣式（expanded presentation）。

設計

1. 使用和你的品牌調性一致的視覺外觀設計「實時活動」，並考慮淺色、深色模式下的外觀。
2. 如果你需要在「實時活動」中顯示logo，直接把logo放上去即可，不要直接把整個app icon放上去。
3. 如果你的品牌有一個明顯的強調色，考慮使用該色作為「實時活動」的底色。
4. 不要模仿系統通知的外觀樣式。
5. 盡可能地使「實時活動」佔用最小的顯示空間。
6. 依據顯示資訊多寡的需要，使用不同的「實時活動」高度。
7. 不要使用觸及「實時活動」邊緣的底色來切割版面，考慮使用內縮的細線替代。
8. 使內容版面與「實時活動」的外緣呈同心圓角狀。
9. 「實時活動」中使用的圖像尺寸大小，不可以超過實時活動本身，否則會造成系統無法啟動實時活動。詳情請看下文相關段落。
10. 具體的設計尺寸，請參考Human Interface Guideline或Apple提供的Figma設計範本。

其他

1. 「實時活動」無法存取網路、位置資訊，上頭的顯示內容僅能透過Activity Kit中的push notification更新，且大小不可以超過4kb。

外觀

實時通知共有Lockscreen presentation、Compact presentation、Minimal presentation、Expanded presentation四種顯示模式，分別應對不同的情況。無論你所需顯示的內容多寡，都需要針對所有顯示模式做設計。只要缺一個，App就無法啟用本功能。

資訊顯示區域

在沒有動態島的機型上，實時活動的顯示模式只有Lockscreen presentation一種，出現於通知中心。這個顯示模式同時也應用於動態島機型，但僅限裝置未解鎖時（出現位置不變）。這個模式下，實時活動的背景顏色可自定義、版面也沒有特別的限制，所以只要正常設計即可。一般來說，底色選用白色、黑色或是品牌自己的代表色是最為常見的。

另外，這個模式會以2x縮放的比例顯示於StandBy中，因此建議背景使用純色，以防縮放後出現破圖。

在配備動態島的機型上，實時活動的版面設計會受到更多限制。這是因為，雖然視覺上看起來是一整塊黑色區域，但其實中間偏上的位置是前置鏡頭和感測器的空間，並不是螢幕的一部分，因此必須特意避開。

Compact presentation是實時活動的預設樣式。在這個模式下，顯示空間被硬體切割為 leading 和 trailing 兩側，兩側各僅有約一個方框大小的空間。最常見的設計是 leading 側顯示 icon，trailing 側用來顯示具體細節。例如，在手機內建的倒計時中，leading 側顯示了倒數動畫，而 trailing 側則用於顯示剩餘秒數。值得注意的是，不必硬要將兩側都填滿資訊。舉例來說，Google map的導航實時活動僅在 leading 側顯示了icon。

當同時有兩個以上的實時活動正在執行時，系統會以Minimal presentation樣式來呈現資訊。根據實時活動的先後順序，會分為attached和detached兩種位置。在這種模式下，無論是位於哪個位置，每個實時活動都只有一個方框大小的空間可用來顯示資訊，因此建議僅保留最重要的一項資訊進行顯示。

考慮到使用者可能會先看到Compact presentation，而後再加入別的實時活動導致觸發Minimal presentation，因此建議兩模式的顯示內容要有部分相同，避免使用者感到困惑。舉例來說，手機內建的倒計時在Compact presentation下顯示倒計時動畫與具體秒數，在Minimal presentation下僅保留倒計時動畫。

當使用者長按Minimal presentation或Compact presentation時，動態島會展開，觸發Expanded presentation。這個模式下，顯示區域被系統定義為leading、trailing、center、bottom四個區域，版面劃分情形如下圖。設計時，請依照區域劃分將資訊分別填入。值得一提的是，將設計切割成四個區域不是強制性的，你也可以只提供其中幾項（例如只提供leading和trailing），系統會自動依照你給予的區域將版面填滿。

整體來說，關於動態島上實時活動的設計訣竅就是大膽地將資訊「塞」進去，擁抱版面不規則的特性。若是真的放不下，才考慮將資訊下移，避開動態島區塊。

使用圖像時需要注意的重點

開發者文件中提及，在實時活動中使用的圖像素材，大小不可以超過實時活動顯示模式（前面提到的各種presentation）本身的大小，否則系統可能無法正常開始實時活動。

善用動畫，告知使用者內容已更新

實時活動可用預設、自訂動畫（不超過2秒）來提示使用者內容已更新。一般來說，只有資訊本身需要加上動畫。當版面因「實時活動」大小改變而需要變動時，也可加上動畫來表現。具體動畫範例可以參考上述影片的5:43秒或6:57秒處，儘管影片中的示範對象是Widget小工具，但兩者的動畫邏輯是可通用的。

點擊範圍與頁面導覽行為

當使用者點擊實時活動時，正確的做法是帶使用者到App中對應資訊的頁面，協助使用者追蹤正在進行的事項。例如：點擊顯示導航剩餘時間的實時活動，App會顯示路線的導航畫面。

自iOS 17（2023）開始，系統允許實時活動中包含按鈕、開關等UI元素，讓使用者快速執行特定操作。然而，顯示這些UI元素會令本就不多的顯示空間更加狹小，所以使用時要謹慎衡量利弊。

實際範例

以下為系統內建時鐘、Nike Run、Fighty三個App在支援實時活動時的截圖：

相關文章

設計

• Human Interface Guideline: Live Activities
• WWDC23: Design dynamic Live Activities | Apple

開發

• Displaying live data with Live Activities | Apple Developers
• App intents | Apple Developer Documentation