可觀測(cè)性后端【免費(fèi)下載鏈接】highlighthighlight.io: The open source, full-stack monitoring platform. Error monitoring, session replay, logging, distributed tracing, and more.項(xiàng)目地址https://gitcode.com/gh_mirrors/hi/highlight點(diǎn)擊查看免費(fèi)下載產(chǎn)品更新Product Updates是 SaaS 團(tuán)隊(duì)與用戶溝通的重要觸點(diǎn)但靜態(tài)截圖往往只能展示結(jié)果無(wú)法講述操作背后的完整故事。在開(kāi)源全?？捎^測(cè)性平臺(tái) Highlighthighlight.io中工程師們采用屏幕錄制 關(guān)鍵幀動(dòng)畫(huà)的方式把每次功能更新制作成幾秒的動(dòng)態(tài)演示視頻并分發(fā)到社交媒體、客戶溝通與產(chǎn)品內(nèi)部。本文完整還原 Highlight 在 blog-content/product-updates.md 中公開(kāi)的這一套制作流程從腳本規(guī)劃、屏幕錄制、視頻編輯到導(dǎo)出分發(fā)并補(bǔ)充倉(cāng)庫(kù)中與產(chǎn)品更新展示相關(guān)的源碼實(shí)現(xiàn)幫助你為自己的產(chǎn)品打造同樣吸睛的動(dòng)畫(huà)更新。為什么選擇動(dòng)畫(huà)而非靜態(tài)圖片Highlight 團(tuán)隊(duì)的目標(biāo)是在產(chǎn)品更新中加入閃光點(diǎn)add sparkles。相比靜態(tài)圖片動(dòng)態(tài)動(dòng)畫(huà)的優(yōu)勢(shì)在于敘事完整性動(dòng)畫(huà)能夠在幾秒內(nèi)把用戶如何操作、界面如何響應(yīng)的完整過(guò)程呈現(xiàn)出來(lái)靜態(tài)圖片只能捕捉某一瞬間多平臺(tái)分發(fā)這些動(dòng)畫(huà)故事被用于分享到 Twitter、LinkedIn 等社交媒體渠道也會(huì)直接嵌入產(chǎn)品內(nèi)部展示給客戶借鑒成熟范式這種做法并非 Highlight 首創(chuàng)而是受到 Retool 官網(wǎng)組件展示、GitHub 官方發(fā)布動(dòng)態(tài)等案例的啟發(fā)Highlight 將這一形式系統(tǒng)化為一套可復(fù)制的流程。在 Highlight 倉(cāng)庫(kù)中產(chǎn)品更新并非一次性內(nèi)容而是有獨(dú)立的展示體系docs-content/general/changelog/1_overview.md 以周報(bào)形式組織了一期期 Changelog從 Changelog 12 到 Changelog 29每期用一句話概括新增能力例如 Changelog 12 的 Open Source, Smoother UX, New SDKs!、Changelog 16 的 Logging is in Alpha!而 highlight.io/components/Changelog/ChangelogEntry/ChangelogEntry.tsx 則是渲染單條更新條目的 React 組件它把slug、title、createdAt、content組合成可點(diǎn)擊的卡片直接鏈向/changelog/{slug}詳情頁(yè)。由此可見(jiàn)動(dòng)畫(huà)只是產(chǎn)品更新敘事的一環(huán)配套的文字 Changelog 與代碼組件共同構(gòu)成了完整的更新發(fā)布體系。工具與前置要求制作一個(gè)動(dòng)畫(huà)故事并不需要昂貴的專業(yè)設(shè)備。Highlight 團(tuán)隊(duì)給出的最低要求如下屏幕錄制器團(tuán)隊(duì)使用 macOS 自帶的 QuickTime Player其他操作系統(tǒng)只需安裝任意等效錄屏軟件即可支持關(guān)鍵幀keyframes的視頻編輯器團(tuán)隊(duì)使用 Adobe After Effects輕量替代方案After Effects 對(duì)這類需求通常殺雞用牛刀可選替代品包括 Descript屏幕錄制與編輯一體、Blender其視頻編輯工作區(qū)、Shotcut免費(fèi)開(kāi)源剪輯器。腳本規(guī)劃先想清楚要講什么動(dòng)手錄制之前第一步是為要展示的故事制定腳本The Script。規(guī)劃時(shí)有兩條硬性指標(biāo)原始素材的錄制時(shí)長(zhǎng)控制在15 秒以內(nèi)經(jīng)過(guò)剪輯cut與速度斜坡speed ramp處理后最終成片目標(biāo)時(shí)長(zhǎng)約為5 秒。之所以強(qiáng)調(diào)短是因?yàn)樯缃幻襟w信息流中的注意力窗口極短5 秒的節(jié)奏既能把核心操作講清楚又不會(huì)讓觀眾失去耐心。剪輯與加速速度斜坡是壓縮時(shí)長(zhǎng)的主要手段。錄制技巧素材質(zhì)量決定成片上限錄制階段要始終圍繞觀眾需要看到什么來(lái)決定取景視角。Highlight 團(tuán)隊(duì)總結(jié)了三組實(shí)戰(zhàn)經(jīng)驗(yàn)錄制開(kāi)頭與結(jié)尾便于制作循環(huán)視頻首尾呼應(yīng)的循環(huán)動(dòng)畫(huà)會(huì)帶來(lái)莫名舒適的觀看體驗(yàn)也讓發(fā)布在時(shí)間線上的內(nèi)容更具設(shè)計(jì)感使用鼠標(biāo)而非觸控板鼠標(biāo)的移動(dòng)軌跡更精確、更平滑減少錄制素材中的抖動(dòng)與突兀感確保沒(méi)有錄制到敏感信息發(fā)布前務(wù)必檢查畫(huà)面中是否存在密鑰、個(gè)人數(shù)據(jù)、內(nèi)部 URL 等不應(yīng)外泄的內(nèi)容尤其對(duì)于可觀測(cè)性類產(chǎn)品演示時(shí)避免錄到真實(shí)客戶的會(huì)話或日志。編輯流程最關(guān)鍵的一步編輯是整套流程中最后一步卻可能是最重要的一步。Highlight 團(tuán)隊(duì)在 After Effects 中的標(biāo)準(zhǔn)操作如下導(dǎo)入錄屏素材到視頻編輯器設(shè)置畫(huà)布分辨率團(tuán)隊(duì)默認(rèn)使用500x500的方形畫(huà)布。分辨率的選擇取決于動(dòng)畫(huà)故事最終的展示位置——不同平臺(tái)的 UI 對(duì)媒體渲染尺寸有不同優(yōu)化例如信息流卡片、產(chǎn)品內(nèi)彈窗對(duì)畫(huà)面比例各有偏好應(yīng)根據(jù)投放渠道決定畫(huà)布尺寸可選開(kāi)啟 3D 模式若想添加 3D 效果可將錄制圖層切換為 3D 模式添加速度斜坡Speed Ramps速度斜坡用于加速視頻的某些段落。Highlight 團(tuán)隊(duì)通常將速度提升至200%因?yàn)殇浧習(xí)r鼠標(biāo)移動(dòng)與鍵盤(pán)輸入偏慢根據(jù)畫(huà)面內(nèi)容有時(shí)會(huì)提升到400%。這既能壓縮時(shí)長(zhǎng)又能讓操作顯得干凈利落添加關(guān)鍵幀動(dòng)畫(huà)高頻使用的變換屬性是縮放scale、位置position、不透明度opacity與旋轉(zhuǎn)rotation通過(guò)關(guān)鍵幀讓畫(huà)面在縮放、平移、淡入淡出與輕微旋轉(zhuǎn)間切換形成動(dòng)態(tài)敘事同時(shí)導(dǎo)出 .gif 與 .mp4 兩種格式為何導(dǎo)出兩份原因有三——優(yōu)先在支持視頻的平臺(tái)使用 .mp4.gif 作為兜底格式大多數(shù)平臺(tái)會(huì)對(duì) .mp4 提供播放量等分析數(shù)據(jù)而對(duì) .gif 不提供且 .mp4 的文件體積通常遠(yuǎn)小于 .gif。上述屬性動(dòng)畫(huà)思路在 Highlight 自己的前端代碼中也有對(duì)應(yīng)實(shí)踐highlight.io/components/Animate.tsx 中封裝了基于 framer-motion 的一組入場(chǎng)動(dòng)畫(huà)組件例如AnimateIn通過(guò)bottom位移配合 spring 彈性過(guò)渡實(shí)現(xiàn)從底部滑入AnimateBugLeft/AnimateBugRight使用left/right/top/opacity的 keyframe 組合讓裝飾元素以帶回彈的軌跡落位。可以看到位移 透明度 彈性過(guò)渡正是 Highlight 團(tuán)隊(duì)在產(chǎn)品界面與更新敘事中反復(fù)使用的動(dòng)效語(yǔ)言。提升參與度的技巧給平淡的鏡頭加閃光點(diǎn)關(guān)于剪輯風(fēng)格Highlight 團(tuán)隊(duì)強(qiáng)調(diào)沒(méi)有唯一的正確剪輯方式——每次剪輯都取決于錄制內(nèi)容有些必要的鏡頭天然平淡。面對(duì)這類必要但無(wú)聊的鏡頭有一個(gè)簡(jiǎn)單有效的技巧通過(guò)旋轉(zhuǎn)改變畫(huà)面透視。一個(gè)簡(jiǎn)單的旋轉(zhuǎn)例如 30° 傾斜就能讓平淡的平移鏡頭瞬間增加視覺(jué)張力。原文示例對(duì)比了無(wú) 30° 傾斜與有 30° 傾斜的成片效果同樣的操作內(nèi)容后者明顯更有wow感。這與 After Effects 中旋轉(zhuǎn)rotation關(guān)鍵幀的應(yīng)用完全一致——傾斜角度不需要很大一點(diǎn)點(diǎn)透視變化就足以讓觀眾的目光停留。在 Highlight 產(chǎn)品更新體系中的落地回到 Highlight 倉(cāng)庫(kù)可以看到這套動(dòng)畫(huà)敘事 文字記錄 代碼組件的完整產(chǎn)品更新鏈路周更 Changelogdocs-content/general/changelog/ 目錄下按編號(hào)存放每一期的更新說(shuō)明changelog-12.md至changelog-29.mddocs-content/general/changelog/1_overview.md 以卡片組形式匯總各期要點(diǎn)方便用戶每周跟進(jìn)我們?cè)谧鍪裁辞岸苏故窘M件highlight.io/components/Changelog/ChangelogEntry/ChangelogEntry.tsx 將每條更新的標(biāo)題、日期與詳情鏈接渲染為卡片點(diǎn)擊進(jìn)入對(duì)應(yīng)詳情頁(yè)動(dòng)效實(shí)現(xiàn)highlight.io/components/Animate.tsx 提供可復(fù)用的 framer-motion 動(dòng)畫(huà)組件頁(yè)面加載、元素入場(chǎng)時(shí)以彈性過(guò)渡增強(qiáng)視覺(jué)反饋。動(dòng)畫(huà)視頻負(fù)責(zé)在社交媒體上 5 秒抓住注意力Changelog 頁(yè)面負(fù)責(zé)沉淀結(jié)構(gòu)化信息供用戶檢索兩者配合正是 Highlight 產(chǎn)品更新體系的全貌。結(jié)語(yǔ)整套流程可以濃縮為四步寫(xiě)腳本15 秒素材、5 秒成片→ 錄屏鼠標(biāo)操作、循環(huán)首尾、避開(kāi)敏感信息→ 剪輯500x500 畫(huà)布、200%–400% 速度斜坡、縮放/位移/透明度/旋轉(zhuǎn)關(guān)鍵幀→ 雙格式導(dǎo)出.mp4 優(yōu)先 .gif 兜底。工具層面After Effects 是 Highlight 團(tuán)隊(duì)的選擇但 Descript、Blender、Shotcut 等免費(fèi)或輕量工具完全可以勝任同樣的工作。下一次發(fā)布產(chǎn)品更新時(shí)不妨用同樣的方法為你的功能演示加一點(diǎn)旋轉(zhuǎn)、一點(diǎn)縮放——這些閃光點(diǎn)會(huì)讓用戶更愿意停下來(lái)看完你的故事。贊分享可觀測(cè)性后端【免費(fèi)下載鏈接】highlighthighlight.io: The open source, full-stack monitoring platform. Error monitoring, session replay, logging, distributed tracing, and more.項(xiàng)目地址https://gitcode.com/gh_mirrors/hi/highlight點(diǎn)擊查看免費(fèi)下載相關(guān)推薦ANIMATED TAB BAR動(dòng)態(tài)內(nèi)容更新無(wú)需重啟應(yīng)用的動(dòng)畫(huà)切換ANIMATED TAB BAR動(dòng)態(tài)內(nèi)容更新無(wú)需重啟應(yīng)用的動(dòng)畫(huà)切換 你是否遇到過(guò)這樣的困擾在開(kāi)發(fā)iOS應(yīng)用時(shí)想要更新底部標(biāo)簽欄 Tab Bar 的內(nèi)容或切移動(dòng)開(kāi)發(fā)UI組件前端Shader Park Core源代碼解析GLSL生成器與渲染目標(biāo)的實(shí)現(xiàn)原理Shader Park Core源代碼解析GLSL生成器與渲染目標(biāo)的實(shí)現(xiàn)原理 Shader Park Core是一個(gè)強(qiáng)大的JavaScript著色器庫(kù)它允許Product updatesProduct updates Local New providers You can now use Amazon Bedrock as a chat proAI 應(yīng)用人工智能大模型數(shù)字人AI Agent語(yǔ)音前端后端桌面應(yīng)用移動(dòng)開(kāi)發(fā)即時(shí)通訊3D渲染創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考