細微之處見真章——逐幀分析方法的產(chǎn)生與應用
導語:逐幀分析方法是一種針對動態(tài)的、短暫的過程對象進行對比分析的方法,該方法可幫助設計師以微觀視角完成差異分析并得出相應結論;與傳統(tǒng)的靜態(tài)截圖、動態(tài)錄屏方法相比,其優(yōu)勢是可以看到過程的全貌,對動態(tài)細節(jié)一覽無余,具有較高的分析可控性。
一、背景
逐幀分析方法的產(chǎn)生源于一次針對加載場景的體驗調(diào)研項目。
百度百科對于加載的定義是:所有軟件要運行必須加載到內(nèi)存,加載就是把需要的文件及信息讀取到內(nèi)存里。
簡單說來,所有從服務器讀取信息并顯示在手機屏幕上的過程都屬于加載;以百度APP舉例,加載的典型場景有:啟動、打開FEED落地頁、打開搜索落地頁等;這些場景都有一個共同的特點是:動態(tài)的過程,且過程較為短暫。
基于以上特點,運用對比分析里最常見的靜態(tài)截圖或動態(tài)錄屏方法,是無法完成分析的。
原因是,靜態(tài)截圖對于一個動態(tài)過程來說,無法看到過程的全貌,可對比點較少,分析要素不可控(一張靜態(tài)截圖中,無法做到涵蓋所有分析元素);而采用動態(tài)錄屏的方法進行分析時,問題也同樣明顯:過程太快,無法看清細節(jié);不同視頻節(jié)奏不同,對比起來比較困難;因此針對加載這種特殊的場景,就需要采用一種全新的方法既能看到過程全貌,又可以對細節(jié)一覽無余。
二、方法的產(chǎn)生
小時候我們都玩過跑馬燈的游戲,即一系列靜態(tài)圖片通過快速輪轉,由于視覺滯留效應,便可看到一段動態(tài)影像。如果把產(chǎn)生動畫的過程翻轉過來,也就是說如果可以把一段動態(tài)影像拆成一系列序列幀,那么是否可以更好的完成影像觀察?
以百度APP打開小視頻落地頁的加載場景為例,當我嘗試將這段300ms的過程錄屏拆分為18張序列幀后發(fā)現(xiàn),除了可以清楚的看到過程全貌外,對于過程中的所有細節(jié)也可以一覽無余;同時,序列幀可以進行任意拆分,以便完成多角度觀察。
到此為止,逐幀分析方法的雛形已經(jīng)產(chǎn)生。在之后的章節(jié),我將為大家具體介紹如何完成序列幀分析以及如何導出序列幀。
三、如何進行逐幀分析
面對一系列序列幀,我們可以通過“序列幀三要素”來導出關鍵數(shù)據(jù)及結論。
要素1:序列幀全流程
首先,我們進行序列幀觀察的時候,需要明確定義目標對象的起點與終點。由于逐幀對比方法適用的觀察對象均為短暫的動態(tài)過程,明確定義全流程的起點與終點是為了讓觀察過程和結論更加精準。
以百度APP打開搜索落地頁為例,起點與終點分別是:點擊搜索結果手指松開的第一幀與搜索落地頁首屏內(nèi)容全部加載完成的最后一幀(可以通過觀察前后幀是否有變化得出結論);這一要素中,可以采集到的關鍵數(shù)據(jù)為時長,時長可以幫助我們觀察加載性能的好壞,甚至在進行競品對比的時候,快速找出與競品在時長方面的差異從而得出優(yōu)化建議。
結論輸出時,需要將幀數(shù)轉換成為時間單位(如何將幀數(shù)轉化成時間會在后續(xù)文章中為大家講解)。
要素2:序列幀子流程
在前文中提到,逐幀分析法的一個優(yōu)勢是,逐幀序列可以進行任意拆分,以便完成多角度分析;在分析的第2要素中,我們可以最大限度拆分子流程,同時需要明確每一個子流程的起點與終點;這一要素的分析中,可以采集到的關鍵數(shù)據(jù)為子流程時長,缺失或多出的子流程,以及子流程內(nèi)部的差異。
例如在百度APP Android端熱啟動過程中,全流程被拆分為:啟動至全屏、持續(xù)白屏態(tài)、內(nèi)容加載3個子流程。
通過換算,可以看到每個子流程的時長。并且在和競品的對比中發(fā)現(xiàn),百度APP缺失了持續(xù)白屏態(tài)這個子流程;而在啟動至全屏的子流程中,百度APP因為沒有添加過渡動畫,與多數(shù)競品是有差異的。
要素3:用戶體驗節(jié)點
用戶體驗節(jié)點的對比是逐幀分析法的第三要素,這一要素進一步深入到過程的微觀視角,使得分析結論更為全面;而用戶體驗節(jié)點是逐幀分析法所提出的一個全新概念,其定義是:產(chǎn)品界面上任何一次用戶可感知的變化,都叫做用戶體驗節(jié)點。
以百度APP Android打開搜索結果頁為例,整個過程的用戶體驗結點有5個;通過用戶體驗節(jié)點可以采集到的關鍵數(shù)據(jù)有:用戶體驗節(jié)點的數(shù)量以及用戶體驗節(jié)點的順序。
我們以Android打開搜索落地頁為例為大家進一步講解如何完成用戶體驗節(jié)點數(shù)量的分析。
通過對比發(fā)現(xiàn),百度APP在整個加載過程中的用戶體驗節(jié)點數(shù)量多于競品,多出的節(jié)點為:白屏節(jié)點、文字加載節(jié)點;雖然百度APP加載時長與競品相差無幾,但是由于節(jié)點數(shù)量較多,導致用戶在等待過程中經(jīng)歷了過多的頁面狀態(tài)變化,形成了較強的視覺閃跳感,從而引發(fā)用戶感知層面的錯覺,認為百度的加載時長較長。
因此我們可以通過減少非必要的用戶體驗節(jié)點,從而提升加載場景的流暢感。但是,用戶體驗節(jié)點的數(shù)量并非越少越好,這還要根據(jù)實際業(yè)務與優(yōu)化方向來輸出具體結論。
用戶體驗節(jié)點順序的分析,可以參考百度APP iOS FEED打開圖文落地頁的示例。
在這一示例中,百度APP圖文落地頁內(nèi)容加載節(jié)點位于框架轉場節(jié)點之后;但是對比競品發(fā)現(xiàn),多數(shù)競品在這個過程中,內(nèi)容加載是先于框架轉場的。
而這種節(jié)點順序的優(yōu)勢是,轉場完成后,用戶即可開始瀏覽內(nèi)容,整體感知較為流暢;這種導致閱讀流暢感體驗差異的原因很難通過肉眼或常規(guī)競品對比法觀察得出,由此可見逐幀分析方法針對特殊場景的分析優(yōu)勢非常明顯。
四、序列幀三要素總結
在此,我們回顧一下逐幀分析方法的“序列幀三要素”。
- 序列幀全流程,可采集的關鍵數(shù)據(jù)有:全流程時長。
- 序列幀子流程,可采集的關鍵數(shù)據(jù)有:子流程時長、子流程是否缺失、子流程內(nèi)部的差異。
- 用戶體驗節(jié)點,可采集的關鍵數(shù)據(jù)有:用戶體驗節(jié)點的數(shù)量與順序。
五、如何導出逐幀序列
工欲善其事,必先利其器。進行逐幀分析前,我們首先要將錄制好的視頻轉化成序列幀,以下章節(jié)將為大家講解如何導出逐幀序列。
整個過程可分為:錄制、創(chuàng)建合成、輸出3個環(huán)節(jié)。
1. 錄制
由于系統(tǒng)特性,iOS和Android手機雙端建議采用不同的錄制手段。iOS手機可直接通過數(shù)據(jù)線連接到電腦,并使用電腦的QuickTime進行錄制。
這樣的好處是保證了錄屏的幀數(shù)基本穩(wěn)定在60FPS(每秒傳輸幀數(shù));Android手機建議采用機內(nèi)功能或其他錄屏應用完成錄制;但是安卓中低端手機很容易出現(xiàn)掉幀的現(xiàn)象,因此就需要我們在合成和輸出階段制定一個合理的輸出幀數(shù),讓分析的結果更加接近真實。另外,建議錄制的起始點適當延長,這樣便于素材在合成階段精準切割。
這里要為大家講解一下如何將幀數(shù)換算成時長,以iOS的輸出幀數(shù)為例,換算公式為:iOS時長= N(幀數(shù)) x 16.6ms;例如:在iOS打開圖文落地頁的加載過程中,百度APP總時長為:73(幀數(shù))x16.6ms= 1217ms(約等于)。
2. 創(chuàng)建合成
創(chuàng)建合成階段所使用的工具是AE。AE的好處是:
- 方便查看原視頻幀速率,對不穩(wěn)定的幀速率進行統(tǒng)一處理;
- 可以將視頻轉換為圖片序列,便于后續(xù)的逐幀分析;
- AE也可以將多個視頻進行同步播放來進行對比驗證。
第一步:打開AE>合成>新建合成。
這一步的目的是通過合成設置,統(tǒng)一幀速率;通過一系列實驗,我在新建合成時,將iOS錄屏的幀速率設置為60幀/秒,Android錄屏的幀速率設置為30幀/秒,這樣可以保證最大化的減少空白幀,使分析結果更加準確。
第二步:導入錄屏
第三步:截取起止點關鍵幀。
在進行素材處理的時候,需要精確到每一幀,由于逐幀分析所針對場景的時長極為短暫,很可能由于一幀的差距,導致分析結果相差甚遠。
以百度APP iOS端熱啟動過程為例,我們將錄屏中手指抬起的前一幀(即icon顯示出點擊態(tài))做為起點,將APP啟動后填滿手機屏幕的第一幀(可通過觀察法,在AE中查看前后幀是否有變化)做為終點完成素材處理。
3. 輸出
輸出的路徑為:菜單欄 文件>導出>添加到渲染隊列,在渲染隊列中找到待渲染視頻,再在 輸出模塊>格式選擇JPEG或PNG以序列導出;這一步的目的是,將一段視頻文件拆分成可提取對比的逐幀畫面。
最終導出的序列幀如下:
在完成分析對象序列幀導出工作后,便可開始進行逐幀分析了。
六、結語
逐幀分析法是在實際項目中總結并提煉出的一種全新的分析方法;該方法對于短暫的、動態(tài)的過程非常適用,可以幫助我們從微觀視角發(fā)現(xiàn)問題、驗證問題、得出優(yōu)化結論,極大的提升了分析效率和精準度。
逐幀分析法也在后續(xù)的多個項目中也得到了推廣和驗證,希望可以幫助到大家。
作者:百度MEUX,百度移動生態(tài)用戶體驗設計中心,負責百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗設計。
本文由@百度MEUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉載。
題圖來自Unsplash,基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!