UI范 - 快看！靈動島和 iOS 16 實時活動設計規範來了！－鑽石舞台

Oct 10 Mon 2022 19:00
UI范 - 快看！靈動島和 iOS 16 實時活動設計規範來了！

靈動島和 iOS 實時活動推送界面的設計規範終於出來了，做設計和開發的同學記得看看。建議大家收藏並轉發，以備需要之日調用！

實時活動顯示的是來自 APP 最新的信息，讓人一目了然地看到最新的事件或者任務的進度。

實時活動幫助用戶跟蹤他們關心的任務和事件，在固定的位置持續地更新信息。例如送餐 APP 可以顯示剩餘的抵達時間，或者體育 APP 會顯示正在進行中的比賽的得分。

除了在鎖屏狀態下藉助實時活動之外，支持實時活動顯示功能的設備可以以不同的形式來呈現信息，這主要取決於設備是否支持靈動島功能。

在支持靈動島的設備上，系統會在前置攝像頭周圍的固定位置上顯示實時活動。

在不支持靈動島的設備上，系統會在主屏幕或者其他 APP 運行過程中，在頂部彈出橫幅中短暫顯示實時活動，前提條件是 APP 推送的信息足夠重要。

在靈動島當中，系統將會以三種形態呈現實時活動：

緊湊型。在當前只有一個實時活動狀態的時候，系統會使用緊湊型視圖，整個視圖會由前後兩個部分構成，兩者將中間的攝像頭區域包裹起來。儘管兩者其實是兩個獨立區域，但是在視覺和信息上會明確給人是來自同一個 APP 的信息推送。用戶可以通過點擊，跳轉到這個 APP。

最小型。當有多個 APP 有實時活動推送的時候，靈動島會使用最小型視圖來呈現其中的2個，系統會選擇讓其中一個附着到靈動島上，另外一個則以圓形小圖標的形式存在，用戶同樣能夠通過點擊跳轉到對應的 APP 上。

擴展型。當用戶在緊湊型視圖和最小型視圖中，長按會觸發擴展型視圖。

靈動島和實時活動界面最佳實踐

▼

為有明確開始和結束的實時事件定義實時活動。

用戶需要藉助實時活動來追蹤行進中的、涉及頻繁更新的事件和任務，所以最好不要超過 8 個小時。並且始終在實時任務結束之後立刻結束實時活動的呈現。

只呈現最重要的內容。

用戶喜歡獲取行進中的任務和時間的摘要和關鍵信息，他們不希望收到過多詳細信息，或者在實時活動區域中進行交互。用戶需要通過點擊實時活動跳轉到相應的 APP。

僅在有新內容時提供實時活動的更新，僅在有必要引起用戶注意的時候才提供提醒。

實時活動會打斷用戶當前的任務，過於頻繁的提醒可能會對用戶造成困擾，可能會導致用戶徹底關閉你的 APP 的實時活動推送。請注意，系統會以不同的方式提醒用戶有實時活動正在發生，但是具體取決於硬件是否具有靈動島功能。

避免在實時活動中顯示敏感的信息。

實時活動在視覺上很突出，很容易被人不經意看到。所以如果你的 APP 推送的信息涉及到敏感的內容，請在其中提供一個無害的摘要，並且讓用戶通過點擊透過實時活動抵達 APP 的特定頁面，讓用戶詳細查看。

避免在實時活動中顯示廣告或促銷。

實時活動可以幫助用戶了解正在發生的事情，因此僅用來顯示和用戶高度相關的內容即可。

讓用戶有權限控制實時活動的開始和結束。

為了幫助用戶更好地管理實時活動，最好在實時活動所鏈接的頁面當中，提供按鈕允許用戶按照自己的需求，提前結束實時活動的推送。而下單了外賣之後，透過實時活動告訴你你的外賣到哪了則是有意義的推送信息。在設置中，你應當允許用戶控制哪些實時活動能推送，哪些不用推送或者提前結束等等。

確保點擊實時活動的時候，會打開 APP 中對的頁面或位置。

當用戶透過實時活動打開應用程序的時候，應當將用戶直接帶到 APP 相應的頁面，而無需用戶再手動導航找到位置。有關的鏈接功能你需要查看 SwiftUI 相關的說明。

儘量在實時活動結束後，從鎖屏界面中將其移除。

在靈動島功能中，實時活動結束之後將會被直接移除。但是在鎖屏和通知當中，實時活動的結果默認會保留 4 個小時，方便用戶回去查看。不過如果你的 APP 當中實時活動的時間相關度不算高，你也可以設置在 4 小時內的任何一個時間周期內結束。比如，拼車 APP 會在行程結束後 15 分鐘內可以在鎖屏通知上顯示，方便用戶在這個時間段內查看最終的支付結果。

讓實時活動具備可用性

▼

確保靈動島中緊湊型視圖下信息和設計的統一性。

雖然相機的區域將前後兩個區域分開，但是在緊湊視圖下，應當被視作為一體的，並且無論點擊哪個區域，都將會將兩者帶到同一 APP 的同一頁面當中。使用色彩、圖標和文本來確保靈動島中的內容和 APP 的關聯。

緊湊型視圖和擴展型視圖之間應當保持一致性。

擴展型視圖是前者的放大擴展版，確保兩者之間信息和布局的可預測性。

鎖屏通知界面和擴展型視圖中的設計應當保持一致性。

這兩者在內容和樣式上理應保持相似性和共通性，確保用戶對他們兩者熟悉且有關聯感，方便跟蹤進度。

實時活動樣式設計應該適應不同的屏幕尺寸。

實時活動應該通過縮放適應不同的屏幕尺寸，通過提供不同大小的內容確保它們在不同設備上看起來都很棒。請遵循以下規範來進行創建。

規範鏈接：https://developer.apple.com/design/human-interface-guidelines/components/system-experiences/live-activities#specifications

在鎖屏通知上使用自定義顏色和不透明度時請深思熟慮。

在鎖屏通知界面上使用實時活動窗口時候，如果想要設置背景顏色或者圖像，請記得測試兩者的對比度，尤其需要考慮在「全天候顯示」界面上的效果。另外，靈動島界面的實時活動界面背景為了確保沉浸效果，是不允許自定義背景顏色的。但是其中的文本和圖標是可以自定義的。具體請參考以下規範。

規範鏈接：https://developer.apple.com/documentation/activitykit/displaying-live-data-with-live-activities

內容的圓角半徑和實時活動界面圓角半徑保持協調。

內容和實時活動窗口邊距要保持一致，為了確保其中圓角看起來不錯，讓 SwiftUI 容器內的圓角半徑儘量準確，開發者請參閱：ContainerRelativeShape（https://developer.apple.com/documentation/swiftui/containerrelativeshape）

通常情況下，請使用標準邊距確保內容清晰易讀。

通常情況下，對於實時活動擴展型視圖和鎖屏界面下的視圖，應當採用標準寬度 20 pt，某些特殊情況可能會更加擁擠，具體情況請參閱以下文檔：padding( _:_:)（https://developer.apple.com/documentation/swiftui/view/padding(_:_:)）

選擇適合個性化鎖屏的色彩。

考慮到用戶自定義屏幕、壁紙和小組件，謹慎自定義你的實時活動在鎖屏通知界面下的顏色和透明度，確保內容的清晰易讀。

支持深色模式和全天候顯示。

實時活動的顏色在深色和全天候顯示的模式下，顏色會發生改變，你需要調整其顏色，確保不會影響可讀性。具體可以參考「深色模式」和「全天候顯示」的章節內容。

謹慎使用動畫，僅在引起用戶關注時使用。

實時活動僅會調用系統動畫功能的子集，在全天候顯示模式下，動畫不會顯示。具體請參考「動畫內容更新」。

靈動島尺寸規格

▼

靈動島使用 44 pt 圓角，其圓角形狀應當同物理前置相機圓角保持一致。