靈動(dòng)島和 iOS 實(shí)時(shí)活動(dòng)推送界面的設(shè)計(jì)規(guī)范終于出來了，原文在這里，做設(shè)計(jì)和開發(fā)的同學(xué)記得看看。

實(shí)時(shí)活動(dòng)顯示的是來自 APP 最新的信息，讓人一目了然地看到最新的事件或者任務(wù)的進(jìn)度。

實(shí)時(shí)活動(dòng)幫助用戶跟蹤他們關(guān)心的任務(wù)和事件，在固定的位置持續(xù)地更新信息。例如送餐 APP 可以顯示剩余的抵達(dá)時(shí)間，或者體育 APP 會(huì)顯示正在進(jìn)行中的比賽的得分。

除了在鎖屏狀態(tài)下借助實(shí)時(shí)活動(dòng)之外，支持實(shí)時(shí)活動(dòng)顯示功能的設(shè)備可以以不同的形式來呈現(xiàn)信息，這主要取決于設(shè)備是否支持靈動(dòng)島功能。

• 在支持靈動(dòng)島的設(shè)備上，系統(tǒng)會(huì)在前置攝像頭周圍的固定位置上顯示實(shí)時(shí)活動(dòng)。
• 在不支持靈動(dòng)島的設(shè)備上，系統(tǒng)會(huì)在主屏幕或者其他 APP 運(yùn)行過程中，在頂部彈出橫幅中短暫顯示實(shí)時(shí)活動(dòng)，前提條件是 APP 推送的信息足夠重要。

在靈動(dòng)島當(dāng)中，系統(tǒng)將會(huì)以三種形態(tài)呈現(xiàn)實(shí)時(shí)活動(dòng)：

• 緊湊型。在當(dāng)前只有一個(gè)實(shí)時(shí)活動(dòng)狀態(tài)的時(shí)候，系統(tǒng)會(huì)使用緊湊型視圖，整個(gè)視圖會(huì)由前后兩個(gè)部分構(gòu)成，兩者講中間的攝像頭區(qū)域包裹起來。盡管兩者其實(shí)是兩個(gè)獨(dú)立區(qū)域，但是在視覺和信息上會(huì)明確給人是來自同一個(gè) APP 的信息推送。用戶可以通過點(diǎn)擊，跳轉(zhuǎn)到這個(gè) APP。
• 最小型。當(dāng)有多個(gè) APP 有實(shí)時(shí)活動(dòng)推送的時(shí)候，靈動(dòng)島會(huì)使用最小型視圖來呈現(xiàn)其中的2個(gè)，系統(tǒng)會(huì)選擇讓其中一個(gè)附著到靈動(dòng)島上，另外一個(gè)則以圓形小圖標(biāo)的形式存在，用戶同樣能夠通過點(diǎn)擊跳轉(zhuǎn)到對(duì)應(yīng)的 APP 上。

• 擴(kuò)展型。當(dāng)用戶在緊湊型視圖和最小型視圖中，長按會(huì)觸發(fā)擴(kuò)展型視圖。

靈動(dòng)島和實(shí)時(shí)活動(dòng)界面最佳實(shí)踐

• 為有明確開始和結(jié)束的實(shí)時(shí)事件定義實(shí)時(shí)活動(dòng)。

用戶需要借助實(shí)時(shí)活動(dòng)來追蹤行進(jìn)中的、涉及頻繁更新的事件和任務(wù)，所以最好不要超過 8 個(gè)小時(shí)。并且始終在實(shí)時(shí)任務(wù)結(jié)束之后立刻結(jié)束實(shí)時(shí)活動(dòng)的呈現(xiàn)。

• 只呈現(xiàn)最重要的內(nèi)容。

用戶喜歡獲取行進(jìn)中的任務(wù)和時(shí)間的摘要和關(guān)鍵信息，他們不希望收到過多詳細(xì)信息，或者在實(shí)時(shí)活動(dòng)區(qū)域中進(jìn)行交互。用戶需要通過點(diǎn)擊實(shí)時(shí)活動(dòng)跳轉(zhuǎn)到相應(yīng)的 APP。

• 僅在有新內(nèi)容時(shí)提供實(shí)時(shí)活動(dòng)的更新，僅在有必要引起用戶注意的時(shí)候才提供提醒。

實(shí)時(shí)活動(dòng)會(huì)打斷用戶當(dāng)前的任務(wù)，過于頻繁的提醒可能會(huì)對(duì)用戶造成困擾，可能會(huì)導(dǎo)致用戶徹底關(guān)閉你的 APP 的實(shí)時(shí)活動(dòng)推送。請(qǐng)注意，系統(tǒng)會(huì)以不同的方式提醒用戶有實(shí)時(shí)活動(dòng)正在發(fā)生，但是具體取決于硬件是否具有靈動(dòng)島功能。

• 避免在實(shí)時(shí)活動(dòng)中顯示敏感的信息。

實(shí)時(shí)活動(dòng)在視覺上很突出，很容易被人不經(jīng)意看到。所以如果你的 APP 推送的信息涉及到敏感的內(nèi)容，請(qǐng)?jiān)谄渲刑峁┮粋€(gè)無害的摘要，并且讓用戶通過點(diǎn)擊透過實(shí)時(shí)活動(dòng)抵達(dá) APP 的特定頁面，讓用戶詳細(xì)查看。

• 避免在實(shí)時(shí)活動(dòng)中顯示廣告或促銷。

實(shí)時(shí)活動(dòng)可以幫助用戶了解正在發(fā)生的事情，因此僅用來顯示和用戶高度相關(guān)的內(nèi)容即可。

• 讓用戶有權(quán)限控制實(shí)時(shí)活動(dòng)的開始和結(jié)束。

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

• 確保點(diǎn)擊實(shí)時(shí)活動(dòng)的時(shí)候，會(huì)打開 APP 中對(duì)的頁面或位置。

當(dāng)用戶透過實(shí)時(shí)活動(dòng)打開應(yīng)用程序的時(shí)候，應(yīng)當(dāng)將用戶直接帶到 APP 相應(yīng)的頁面，而無需用戶再手動(dòng)導(dǎo)航找到位置。有關(guān)的鏈接功能你需要查看 SwiftUI 相關(guān)的說明。

• 盡量在實(shí)時(shí)活動(dòng)結(jié)束后，從鎖屏界面中將其移除。

在靈動(dòng)島功能中，實(shí)時(shí)活動(dòng)結(jié)束之后將會(huì)被直接移除。但是在鎖屏和通知當(dāng)中，實(shí)時(shí)活動(dòng)的結(jié)果默認(rèn)會(huì)保留 4 個(gè)小時(shí)，方便用戶回去查看。不過如果你的 APP 當(dāng)中實(shí)時(shí)活動(dòng)的時(shí)間相關(guān)度不算高，你也可以設(shè)置在 4 小時(shí)內(nèi)的任何一個(gè)時(shí)間周期內(nèi)結(jié)束。比如，拼車 APP 會(huì)在形成結(jié)束后 15 分鐘內(nèi)可以在鎖屏通知上顯示，方便用戶在這個(gè)時(shí)間段內(nèi)查看最終的支付結(jié)果。

讓實(shí)時(shí)活動(dòng)具備可用性

• 確保靈動(dòng)島中緊湊型視圖下信息和設(shè)計(jì)的統(tǒng)一性。

雖然相機(jī)的區(qū)域?qū)⑶昂髢蓚€(gè)區(qū)域分開，但是在緊湊視圖下，應(yīng)當(dāng)被視作為一體的，并且無論點(diǎn)擊哪個(gè)區(qū)域，都將會(huì)將兩者帶到同一 APP 的同一頁面當(dāng)中。使用色彩、圖標(biāo)和文本來確保靈動(dòng)島中的內(nèi)容和 APP 的關(guān)聯(lián)。

• 緊湊型視圖和擴(kuò)展型視圖之間應(yīng)當(dāng)保持一致性。

擴(kuò)展型視圖是前者的放大擴(kuò)展版，確保兩者之間信息和布局的可預(yù)測(cè)性。

• 鎖屏通知界面和擴(kuò)展型視圖中的設(shè)計(jì)應(yīng)當(dāng)保持一致性。

這兩者在內(nèi)容和樣式上理應(yīng)保持相似性和共通性，確保用戶對(duì)他們兩者熟悉且有關(guān)聯(lián)感，方便跟蹤進(jìn)度。

• 實(shí)時(shí)活動(dòng)樣式設(shè)計(jì)應(yīng)該適應(yīng)不同的屏幕尺寸。

實(shí)時(shí)活動(dòng)應(yīng)該通過縮放適應(yīng)不同的屏幕尺寸，通過提供不同大小的內(nèi)容確保它們?cè)诓煌O(shè)備上看起來都很棒。請(qǐng)遵循這一規(guī)范來進(jìn)行創(chuàng)建。

• 在鎖屏通知上使用自定義顏色和不透明度時(shí)請(qǐng)深思熟慮。

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

• 內(nèi)容的圓角半徑和實(shí)時(shí)活動(dòng)界面圓角半徑保持協(xié)調(diào)。

內(nèi)容和實(shí)時(shí)活動(dòng)窗口邊距要保持一直，為了確保其中圓角看起來不錯(cuò)，讓 SwiftUI 容器內(nèi)的圓角半徑盡量準(zhǔn)確，開發(fā)者請(qǐng)參閱：ContainerRelativeShape

• 通常情況下，請(qǐng)使用標(biāo)準(zhǔn)邊距確保內(nèi)容清晰易讀。

通常情況下，對(duì)于實(shí)時(shí)活動(dòng)擴(kuò)展型視圖和鎖屏界面下的視圖，應(yīng)當(dāng)采用標(biāo)準(zhǔn)寬度 20 pt，某些特殊情況可能會(huì)更加擁擠，具體情況請(qǐng)參閱以下文檔：padding( _:_:)

• 選擇適合個(gè)性化鎖屏的色彩。

考慮到用戶自定義屏幕、壁紙和小組件，謹(jǐn)慎自定義你的實(shí)時(shí)活動(dòng)在鎖屏通知界面下的顏色和透明度，確保內(nèi)容的清晰易讀。

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

實(shí)時(shí)活動(dòng)的顏色在深色和全天候顯示的模式下，顏色會(huì)發(fā)生改變，你需要調(diào)整其顏色，確保不會(huì)影響可讀性。具體可以參考「深色模式」和「全天候顯示」的章節(jié)內(nèi)容。

• 謹(jǐn)慎使用動(dòng)畫，僅在引起用戶關(guān)注時(shí)使用。

實(shí)時(shí)活動(dòng)僅會(huì)調(diào)用系統(tǒng)動(dòng)畫功能的子集，在全天候顯示模式下，動(dòng)畫不會(huì)顯示。具體請(qǐng)參考「動(dòng)畫內(nèi)容更新」。

靈動(dòng)島尺寸規(guī)格

靈動(dòng)島使用 44 pt 圓角，期圓角形狀應(yīng)當(dāng)同物理前置相機(jī)圓角保持一致。

實(shí)時(shí)活動(dòng)的規(guī)范尺寸也同樣使用 pt 為單位：

作者：陳子木