靈動島是專屬于 iPhone 14 Pro 系列交互UI，通過通知消息的展示和狀態(tài)的查看與硬件相結(jié)合，讓 iPhone 14 Pro 系列的前置攝像頭和傳感器的“感嘆號”，發(fā)生不同形狀的變化。這樣做的好處是讓虛擬軟件和硬件的交互變得更為流暢，以便讓用戶能夠更直觀地接收到這些信息。

更多關(guān)于靈動島信息：即時設(shè)計 - 可實(shí)時協(xié)作的專業(yè) UI 設(shè)計工具即時設(shè)計是一款支持在線協(xié)作的專業(yè)級 UI 設(shè)計工具，支持 Sketch、Figma、XD 格式導(dǎo)入，海量優(yōu)質(zhì)設(shè)計資源即拿即用。支持創(chuàng)建交互原型、獲取設(shè)計標(biāo)注，為產(chǎn)設(shè)研團(tuán)隊(duì)提供一站式協(xié)同辦公體驗(yàn)。https://js.design/practice?source=csdn&plan=yb6061

1、定時靈動島設(shè)計

• 主要展現(xiàn)信息：當(dāng)我們在 iPhone 上設(shè)置定時成功返回桌面后，會在靈動島展示當(dāng)前的定時信息。

• 制作定時靈動島：UI·復(fù)制右側(cè)的靈動島官方組件·在圖層內(nèi)里，依次擺放定時 icon 和右側(cè)文字，文字大小為「16px」，顏色為「輔助橘色 - #FF9F0A」，安全間 距為左右「10px」。
• 擺放關(guān)鍵幀位置：·復(fù)制過來一個「Default」尺寸的靈動島官方組件·像左圖一樣擺放，全選畫板，并點(diǎn)擊「創(chuàng)建多個組件」-「變體」·修改命名與左圖一致

• 添加動效：·選中第 1 個動效幀，原型 - 交互；·從上到下依次連線，并添加與左圖一致的參數(shù)；·類型「定時」，時長「500」，過渡動畫為「智能動畫」「自定義」（參考前文參數(shù)），「600」。

• 預(yù)覽效果：·復(fù)制「場景模板」到工作區(qū)·替換「場景模板」的靈動島組件為變體中的第一個組件·選擇「動效幀」圖層，然后點(diǎn)擊水平居中對齊+頂對齊·點(diǎn)擊右上角預(yù)覽即可查看動效 注：按下「R」鍵可以重新預(yù)覽

2、Airpods 靈動島設(shè)計

當(dāng)我們使用 Airpods 系列產(chǎn)品時，打開充電倉，即可在靈動島查看 Airpods 的電量狀態(tài)和連接狀態(tài)?！?/p>

• 擴(kuò)大變體范圍：我們在制作后續(xù)組件時，可以直接在變體里復(fù)制組件制作·拉框 擴(kuò)大變體的范圍

• 復(fù)制一個「Large」尺寸的靈動島官方組件，點(diǎn)擊「創(chuàng)建為引用組件」后拖到到變體里，注意命名與其他組件一致·在圖層內(nèi)里，依次擺放 AirPods icon以及電池狀態(tài)，左右安全間距為「10px」（可使用素材）

• 復(fù)制一個「 XLarge」尺寸的靈動島官方組件，點(diǎn)擊「創(chuàng)建為引用組件」后拖到到變體里注意命名與其他組件一致·在圖層內(nèi)里，依次擺放左圖信息·已連接字體顏色為「次要顏色 -#EBEBF5 60%」，字體大小為「13px」·耳機(jī)名稱字體顏色為「主要顏色 - #FFFFF 100%」，字體大小為「16px」，左右安全間距為「10px」（可使用素材）·AirPods icon 的大小為「46px」，按「K」使用縮放功能，放大提供的素材就可以~

• 復(fù)制一個動效幀組件·擺放位置參考左圖
• 添加動效：需要注意的是定時動效的最后一個關(guān)鍵幀需要連接AirPods 的第一個關(guān)鍵幀，如左圖；·其他流程和參數(shù)與定時動效一致；

• 預(yù)覽效果：按住 Alt+鼠標(biāo)左鍵，拖拽第 1 個組件，替換「場景模板」的靈動島組件·點(diǎn)擊右上角預(yù)覽即可查看動效注：按下「R」鍵可以重新預(yù)覽