眾所周知，「用戶體驗(yàn)五要素」出自Jesse James Garrett 的《用戶體驗(yàn)要素》一書：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。
產(chǎn)品設(shè)計(jì)者和開發(fā)者的角度可以對(duì)應(yīng)理解為：為什么做、做到什么程度、這些東西如何組成、規(guī)劃用戶操作行為、如何呈現(xiàn)這些東西。

「Live Activities設(shè)計(jì)規(guī)范」由蘋果出品，原文為英文，上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個(gè)人對(duì)其內(nèi)容的敘述方式存在一點(diǎn)意見。為了更好的記住&理解「Live Activities設(shè)計(jì)規(guī)范」，使用比較熟悉的「用戶體驗(yàn)五要素」對(duì)內(nèi)容進(jìn)行整理。

1. 戰(zhàn)略層——為什么做

原文提供的Live Activity定義如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”

從原文可以提煉出Live Activity顯示特點(diǎn)：

1. 內(nèi)容是頻繁更新的、有進(jìn)度/狀態(tài)顯示的、用戶關(guān)心的。

2. 內(nèi)容的信息量是一眼就能看完的程度。

但上述仍是表象，并非實(shí)質(zhì)，接下來思考這幾個(gè)問題：

1. 為什么顯示的是進(jìn)度/狀態(tài)頻繁更新的內(nèi)容？

2. 為什么要強(qiáng)調(diào)用戶關(guān)心的？

3. 為什么信息量是一眼就能看完的程度？

沒有Live Activity時(shí)，頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋，且隨著各種APP的頻繁使用，用戶獲取關(guān)鍵信息的效率和通過push打開APP的次數(shù)反而在下降。

進(jìn)度/狀態(tài)頻繁更新的內(nèi)容，說明每個(gè)狀態(tài)存在的時(shí)間短，如果被覆蓋/忽略，同一狀態(tài)就不再?gòu)?fù)現(xiàn)，用戶所關(guān)心的，或APP所希望用戶關(guān)心的，就看不到了。比如：什么時(shí)候取外賣、待付款、上傳成功等等。

當(dāng)下我們所處的時(shí)代是信息泛濫的時(shí)代，需要對(duì)信息作精簡(jiǎn)，但用戶的操作是可以多條線進(jìn)行的，比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時(shí)候?qū)懽鳌?

信息內(nèi)容和量是官網(wǎng)一直在強(qiáng)調(diào)的，需要精簡(jiǎn)，只展示用戶需要的，基本達(dá)到一眼看完的程度，目的就是知道變化的是什么，當(dāng)前狀態(tài)是什么。

分析了這么多，大膽推測(cè)一下Live Activity的設(shè)計(jì)初衷是：快&準(zhǔn)確&輕。而終極目的是打動(dòng)用戶，形成好體驗(yàn)，進(jìn)而推動(dòng)口碑和銷售；為各APP提供新的通知形式，互惠互利。當(dāng)然Live Activity在一定程度上也彌補(bǔ)了硬件上的缺憾。

2. 范圍層——做到什么程度

關(guān)于這個(gè)層次相當(dāng)于規(guī)定功能范圍&信息邊界限制，就是什么要，什么不能要。這部分的信息官網(wǎng)給出許多，在此將其分類梳理如下，為避免大家不好查找官網(wǎng)/譯文對(duì)應(yīng)出處，在句未已標(biāo)注。

1）硬性限制

1. 僅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平臺(tái)注意事項(xiàng)）

2. 非iPhone14的僅針對(duì)iOS16有鎖屏Live Activity展示。（源自：什么是Live Activity-鎖屏）

3. 支持用戶手動(dòng)清除鎖屏狀態(tài)下的Live Activity。（源自：實(shí)際操作）

4. 支持用戶直接關(guān)閉對(duì)應(yīng)APP的Live Activity。（源自：最佳實(shí)踐方式第3/c條）

5. 支持Live Activity自動(dòng)開始&結(jié)束。（源自：最佳實(shí)踐方式第6/f條）

6. 限制跟蹤活動(dòng)/狀態(tài)時(shí)長(zhǎng)不超過8小時(shí)。（源自：最佳實(shí)踐方式第1/a條）

7. 限制活動(dòng)/進(jìn)程結(jié)束后展示時(shí)長(zhǎng)不超過4小時(shí)。（源自：最佳實(shí)踐方式第8/h條）

8. 支持更改背景顏色&不透明度。（源自：設(shè)計(jì)有用的Live Activity第5/e條）

9. 限制內(nèi)容布局。（源自：設(shè)計(jì)有用的Live Activity第5/e條）

10. 限制不同設(shè)備的展示尺寸。（源自：規(guī)范）

2）非硬性限制

1. 避免在Live Activity中顯示敏感信息。（源自：最佳實(shí)踐方式第4/d條）

2. 避免在Live Activity中顯示廣告和促銷活動(dòng)。（源自：最佳實(shí)踐方式第5/e條）

3. 只提供正在進(jìn)行的任務(wù)/事件的關(guān)鍵摘要。（源自：最佳實(shí)踐方式第2/b條）

4. 在任務(wù)/活動(dòng)結(jié)束前，給用戶提供關(guān)閉Live Activity按鈕。（源自：最佳實(shí)踐方式第6/f條）

5. 點(diǎn)擊Live Activity直接定位到對(duì)應(yīng)頁面，無需用戶二次導(dǎo)航。（源自：最佳實(shí)踐方式第7/g條）

6. 考慮在活動(dòng)結(jié)束后，鎖屏上在合理時(shí)段后自動(dòng)刪除Live Activity。（源自：最佳實(shí)踐方式第8/g條）

3. 結(jié)構(gòu)層——這些東西如何組成？

（個(gè)人猜測(cè)）由于是提供一個(gè)展示區(qū)域，且展示區(qū)域有限，所以對(duì)于層級(jí)架構(gòu)，一級(jí)展示什么，二級(jí)展示什么，各階段展示什么，這些都沒有做明確規(guī)定&建議。各家APP可以根據(jù)自身實(shí)際情況進(jìn)行設(shè)計(jì)。

4. 框架層——規(guī)劃用戶操作行為

通過Live Activity的展示形式，可以總結(jié)為2點(diǎn)：吸引、查看（摘要&詳情）。

1）吸引

1. 一般是在原深感攝像頭兩側(cè)展示（電話會(huì)直接展示擴(kuò)展型），分為緊湊型和最小化。

2. 緊湊型在僅有一個(gè)活動(dòng)/事件的時(shí)候展示，雖被原深感攝像頭分割兩端，但僅作為一條信息展示，為了視覺上的統(tǒng)一，這里的顏色不支持開發(fā)設(shè)置，使用的是系統(tǒng)默認(rèn)色值。

3. 最小化在存在多個(gè)活動(dòng)的時(shí)候展現(xiàn)，左側(cè)和原深感攝像頭粘連，右側(cè)獨(dú)立成島。

4. 不管是緊湊型，還是最小化，都可以通過點(diǎn)擊原深感攝像頭區(qū)域，進(jìn)入APP內(nèi)頁，或者長(zhǎng)按喚出擴(kuò)展型。

2）查看

1. 進(jìn)入內(nèi)頁的查看基本就是各家顯神通了，這里主要講擴(kuò)展型和鎖屏。

2. 原則上是不支持在擴(kuò)展型和鎖屏做復(fù)雜操作的，基本點(diǎn)擊是進(jìn)入APP。

3. 擴(kuò)展型是用戶長(zhǎng)按緊湊型/最小化喚起的展示區(qū)域，內(nèi)容是可以自定義的，當(dāng)然官方也給了相應(yīng)的建議，具體如下。內(nèi)容信息種類多的可以采用這種信息左中右排布，底部預(yù)留大按鈕。內(nèi)容信息少的可以采用左內(nèi)容右操作的方式。

4. 根據(jù)一致性原則，鎖屏展示的布局框架應(yīng)該與擴(kuò)展型差不多，同樣可以點(diǎn)擊打開APP。只是在鎖屏狀態(tài)如果有多個(gè)任務(wù)同時(shí)進(jìn)行，是會(huì)全部展示的，所以要注意品牌的傳遞，避免用戶混淆服務(wù)方。

5. 表現(xiàn)層——如何呈現(xiàn)這些東西

對(duì)于如何呈現(xiàn)這些東西，蘋果還是寫了很多建議，確保視覺上的一致性和美觀。

1）顏色

1. 緊湊型狀態(tài)下，為了保證兩側(cè)信息的連貫，除了語句閱讀連貫，還需要在圖形和顏色上具有一致性，視覺上連貫。

2. 鎖屏狀態(tài)下的背景是可以自定義顏色、圖像、不透明度的，當(dāng)然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對(duì)比度對(duì)信息閱讀的影響。

3. 設(shè)計(jì)師不僅要考慮最佳狀態(tài)，還有深色&淺色模式下的，以及不同環(huán)境光、設(shè)備亮度下的顯示。還有一點(diǎn)很容易忽視的，就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取，還需要考慮美感問題。

2）間距布局

1. 緊湊型和擴(kuò)展型之間的布局要保持一致，兩者間的變化過渡效果是可以預(yù)測(cè)的。

2. 一般來說，擴(kuò)展型和鎖屏狀態(tài)下的信息間標(biāo)準(zhǔn)間距是20pt。

3. 在某些情況下，例如圖形和按鈕，您可能需要使用更緊湊的邊距，以避免擠滿邊緣或形成混亂的外觀。

3）圓角

1. 內(nèi)容和Live Activity邊緣之間的邊距需要保持一致，請(qǐng)遵循SwiftUI規(guī)則。

1內(nèi)容和Live Activity邊緣之間的邊距需要保持一致，，發(fā)現(xiàn)以圓角邊界為測(cè)距點(diǎn)得到的間距關(guān)系較為舒適。即：圓形/大致為圓形的圖形保持上下，3. 以及左側(cè)或者右側(cè)間距一致即可；方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對(duì)齊即可。同一位置的多個(gè)圖形圓角需要相對(duì)統(tǒng)一，才能確保間距的一致性。

4）尺寸

需要適應(yīng)不同機(jī)型的尺寸。具體的尺寸規(guī)范如下。

a. 靈動(dòng)島

動(dòng)態(tài)島使用44個(gè)點(diǎn)的角半徑，其圓角形狀與原深感攝像頭相匹配。

b. Live Activity大小

下表中列出的所有值均以pt為單位。
ps：左側(cè)為寬度，右側(cè)為高度。

以上就是整理分析的全部。

在整理分析過程中加強(qiáng)了對(duì)「用戶體驗(yàn)5要素」各個(gè)層劃分的理解，也對(duì)Live Activity在各個(gè)層次上的要求更加明確。

作者：Viola_1241
鏈接：https://www.zcool.com.cn/article/ZMTUxMTIzNg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。