逐幀分析方法是一種針對動態(tài)的、短暫的過程對象進(jìn)行對比分析的方法。該方法可幫助設(shè)計(jì)師以微觀視角完成差異分析并得出相應(yīng)結(jié)論。與傳統(tǒng)的靜態(tài)截圖、動態(tài)錄屏方法相比，其優(yōu)勢是可以看到過程的全貌，對動態(tài)細(xì)節(jié)一覽無余，具有較高的分析可控性。

背景

逐幀分析方法的產(chǎn)生源于一次針對加載場景的體驗(yàn)調(diào)研項(xiàng)目。百度百科對于加載的定義是：所有軟件要運(yùn)行必須加載到內(nèi)存，加載就是把需要的文件及信息讀取到內(nèi)存里。簡單說來，所有從服務(wù)器讀取信息并顯示在手機(jī)屏幕上的過程都屬于加載。以百度APP舉例，加載的典型場景有：啟動、打開FEED落地頁、打開搜索落地頁等。這些場景都有一個共同的特點(diǎn)是：動態(tài)的過程，且過程較為短暫。

基于以上特點(diǎn)，運(yùn)用對比分析里最常見的靜態(tài)截圖或動態(tài)錄屏方法，是無法完成分析的。原因是，靜態(tài)截圖對于一個動態(tài)過程來說，無法看到過程的全貌，可對比點(diǎn)較少，分析要素不可控（一張靜態(tài)截圖中，無法做到涵蓋所有分析元素）。而采用動態(tài)錄屏的方法進(jìn)行分析時(shí)，問題也同樣明顯：過程太快，無法看清細(xì)節(jié)；不同視頻節(jié)奏不同，對比起來比較困難。因此針對加載這種特殊的場景，就需要采用一種全新的方法既能看到過程全貌，又可以對細(xì)節(jié)一覽無余。

方法的產(chǎn)生

小時(shí)候我們都玩過跑馬燈的游戲，即一系列靜態(tài)圖片通過快速輪轉(zhuǎn)，由于視覺滯留效應(yīng)，便可看到一段動態(tài)影像。如果把產(chǎn)生動畫的過程翻轉(zhuǎn)過來，也就是說如果可以把一段動態(tài)影像拆成一系列序列幀，那么是否可以更好的完成影像觀察？

以百度APP打開小視頻落地頁的加載場景為例，當(dāng)我嘗試將這段300ms的過程錄屏拆分為18張序列幀后發(fā)現(xiàn)，除了可以清楚的看到過程全貌外，對于過程中的所有細(xì)節(jié)也可以一覽無余。同時(shí)，序列幀可以進(jìn)行任意拆分，以便完成多角度觀察。

到此為止，逐幀分析方法的雛形已經(jīng)產(chǎn)生。在之后的章節(jié)，我將為大家具體介紹如何完成序列幀分析以及如何導(dǎo)出序列幀。

如何進(jìn)行逐幀分析

面對一系列序列幀，我們可以通過“序列幀三要素”來導(dǎo)出關(guān)鍵數(shù)據(jù)及結(jié)論。

 

要素1：序列幀全流程

首先，我們進(jìn)行序列幀觀察的時(shí)候，需要明確定義目標(biāo)對象的起點(diǎn)與終點(diǎn)。由于逐幀對比方法適用的觀察對象均為短暫的動態(tài)過程，明確定義全流程的起點(diǎn)與終點(diǎn)是為了讓觀察過程和結(jié)論更加精準(zhǔn)。

以百度APP打開搜索落地頁為例，起點(diǎn)與終點(diǎn)分別是：點(diǎn)擊搜索結(jié)果手指松開的第一幀與搜索落地頁首屏內(nèi)容全部加載完成的最后一幀（可以通過觀察前后幀是否有變化得出結(jié)論）。這一要素中，可以采集到的關(guān)鍵數(shù)據(jù)為時(shí)長，時(shí)長可以幫助我們觀察加載性能的好壞，甚至在進(jìn)行競品對比的時(shí)候，快速找出與競品在時(shí)長方面的差異從而得出優(yōu)化建議。結(jié)論輸出時(shí)，需要將幀數(shù)轉(zhuǎn)換成為時(shí)間單位（如何將幀數(shù)轉(zhuǎn)化成時(shí)間會在后續(xù)文章中為大家講解）。

要素2：序列幀子流程

在前文中提到，逐幀分析法的一個優(yōu)勢是，逐幀序列可以進(jìn)行任意拆分，以便完成多角度分析。在分析的第2要素中，我們可以最大限度拆分子流程，同時(shí)需要明確每一個子流程的起點(diǎn)與終點(diǎn)。這一要素的分析中，可以采集到的關(guān)鍵數(shù)據(jù)為子流程時(shí)長，缺失或多出的子流程，以及子流程內(nèi)部的差異。

例如在百度APP Android端熱啟動過程中，全流程被拆分為：啟動至全屏、持續(xù)白屏態(tài)、內(nèi)容加載3個子流程。通過換算，可以看到每個子流程的時(shí)長。并且在和競品的對比中發(fā)現(xiàn)，百度APP缺失了持續(xù)白屏態(tài)這個子流程。而在啟動至全屏的子流程中，百度APP因?yàn)闆]有添加過渡動畫，與多數(shù)競品是有差異的。

要素3：用戶體驗(yàn)節(jié)點(diǎn)

用戶體驗(yàn)節(jié)點(diǎn)的對比是逐幀分析法的第三要素，這一要素進(jìn)一步深入到過程的微觀視角，使得分析結(jié)論更為全面。而用戶體驗(yàn)節(jié)點(diǎn)是逐幀分析法所提出的一個全新概念，其定義是：產(chǎn)品界面上任何一次用戶可感知的變化，都叫做用戶體驗(yàn)節(jié)點(diǎn)。以百度APP Android打開搜索結(jié)果頁為例，整個過程的用戶體驗(yàn)結(jié)點(diǎn)有5個。通過用戶體驗(yàn)節(jié)點(diǎn)可以采集到的關(guān)鍵數(shù)據(jù)有：用戶體驗(yàn)節(jié)點(diǎn)的數(shù)量以及用戶體驗(yàn)節(jié)點(diǎn)的順序。

我們以Android打開搜索落地頁為例為大家進(jìn)一步講解如何完成用戶體驗(yàn)節(jié)點(diǎn)數(shù)量的分析。通過對比發(fā)現(xiàn)，百度APP在整個加載過程中的用戶體驗(yàn)節(jié)點(diǎn)數(shù)量多于競品，多出的節(jié)點(diǎn)為：白屏節(jié)點(diǎn)、文字加載節(jié)點(diǎn)。雖然百度APP加載時(shí)長與競品相差無幾，但是由于節(jié)點(diǎn)數(shù)量較多，導(dǎo)致用戶在等待過程中經(jīng)歷了過多的頁面狀態(tài)變化，形成了較強(qiáng)的視覺閃跳感，從而引發(fā)用戶感知層面的錯覺，認(rèn)為百度的加載時(shí)長較長。因此我們可以通過減少非必要的用戶體驗(yàn)節(jié)點(diǎn)，從而提升加載場景的流暢感。但是，用戶體驗(yàn)節(jié)點(diǎn)的數(shù)量并非越少越好，這還要根據(jù)實(shí)際業(yè)務(wù)與優(yōu)化方向來輸出具體結(jié)論。

用戶體驗(yàn)節(jié)點(diǎn)順序的分析，可以參考百度APP iOS FEED打開圖文落地頁的示例。在這一示例中，百度APP圖文落地頁內(nèi)容加載節(jié)點(diǎn)位于框架轉(zhuǎn)場節(jié)點(diǎn)之后。但是對比競品發(fā)現(xiàn)，多數(shù)競品在這個過程中，內(nèi)容加載是先于框架轉(zhuǎn)場的，而這種節(jié)點(diǎn)順序的優(yōu)勢是，轉(zhuǎn)場完成后，用戶即可開始瀏覽內(nèi)容，整體感知較為流暢。這種導(dǎo)致閱讀流暢感體驗(yàn)差異的原因很難通過肉眼或常規(guī)競品對比法觀察得出，由此可見逐幀分析方法針對特殊場景的分析優(yōu)勢非常明顯。

序列幀三要素總結(jié)

 

在此，我們回顧一下逐幀分析方法的“序列幀三要素”。

要素1：序列幀全流程，可采集的關(guān)鍵數(shù)據(jù)有：全流程時(shí)長。

要素2：序列幀子流程，可采集的關(guān)鍵數(shù)據(jù)有：子流程時(shí)長、子流程是否缺失、子流程內(nèi)部的差異。

要素3：用戶體驗(yàn)節(jié)點(diǎn)，可采集的關(guān)鍵數(shù)據(jù)有：用戶體驗(yàn)節(jié)點(diǎn)的數(shù)量與順序。

如何導(dǎo)出逐幀序列

工欲善其事，必先利其器。進(jìn)行逐幀分析前，我們首先要將錄制好的視頻轉(zhuǎn)化成序列幀。以下章節(jié)將為大家講解如何導(dǎo)出逐幀序列。

整個過程可分為：錄制、創(chuàng)建合成、輸出3個環(huán)節(jié)。

1.錄制

由于系統(tǒng)特性，iOS和Android手機(jī)雙端建議采用不同的錄制手段。iOS手機(jī)可直接通過數(shù)據(jù)線連接到電腦，并使用電腦的QuickTime進(jìn)行錄制。這樣的好處是保證了錄屏的幀數(shù)基本穩(wěn)定在60FPS（每秒傳輸幀數(shù)）；Android手機(jī)建議采用機(jī)內(nèi)功能或其他錄屏應(yīng)用完成錄制，但是安卓中低端手機(jī)很容易出現(xiàn)掉幀的現(xiàn)象，因此就需要我們在合成和輸出階段制定一個合理的輸出幀數(shù)，讓分析的結(jié)果更加接近真實(shí)。另外，建議錄制的起始點(diǎn)適當(dāng)延長，這樣便于素材在合成階段精準(zhǔn)切割。

這里要為大家講解一下如何將幀數(shù)換算成時(shí)長。以iOS的輸出幀數(shù)為例，換算公式為：iOS時(shí)長= N（幀數(shù)） x 16.6ms。例如：在iOS打開圖文落地頁的加載過程中，百度APP總時(shí)長為：73（幀數(shù)）x16.6ms= 1217ms（約等于）。

2.創(chuàng)建合成

創(chuàng)建合成階段所使用的工具是AE。AE的好處是：

1.方便查看原視頻幀速率，對不穩(wěn)定的幀速率進(jìn)行統(tǒng)一處理；

2.可以將視頻轉(zhuǎn)換為圖片序列，便于后續(xù)的逐幀分析；

3.AE也可以將多個視頻進(jìn)行同步播放來進(jìn)行對比驗(yàn)證。

第一步：打開AE>合成>新建合成。

這一步的目的是通過合成設(shè)置，統(tǒng)一幀速率。通過一系列實(shí)驗(yàn)，我在新建合成時(shí)，將iOS錄屏的幀速率設(shè)置為60幀/秒，Android錄屏的幀速率設(shè)置為30幀/秒，這樣可以保證最大化的減少空白幀，使分析結(jié)果更加準(zhǔn)確。

第二步：導(dǎo)入錄屏

第三步：截取起止點(diǎn)關(guān)鍵幀。

在進(jìn)行素材處理的時(shí)候，需要精確到每一幀，由于逐幀分析所針對場景的時(shí)長極為短暫，很可能由于一幀的差距，導(dǎo)致分析結(jié)果相差甚遠(yuǎn)。

以百度APP iOS端熱啟動過程為例，我們將錄屏中手指抬起的前一幀（即icon顯示出點(diǎn)擊態(tài)）做為起點(diǎn)，將APP啟動后填滿手機(jī)屏幕的第一幀（可通過觀察法，在AE中查看前后幀是否有變化）做為終點(diǎn)完成素材處理。

3.輸出

        

輸出的路徑為：菜單欄 文件>導(dǎo)出>添加到渲染隊(duì)列，在渲染隊(duì)列中找到待渲染視頻，再在 輸出模塊>格式選擇JPEG或PNG以序列導(dǎo)出。這一步的目的是，將一段視頻文件拆分成可提取對比的逐幀畫面。

最終導(dǎo)出的序列幀如下：

在完成分析對象序列幀導(dǎo)出工作后，便可開始進(jìn)行逐幀分析了。

結(jié)語

逐幀分析法是在實(shí)際項(xiàng)目中總結(jié)并提煉出的一種全新的分析方法。該方法對于短暫的、動態(tài)的過程非常適用，可以幫助我們從微觀視角發(fā)現(xiàn)問題、驗(yàn)證問題、得出優(yōu)化結(jié)論，極大的提升了分析效率和精準(zhǔn)度。逐幀分析法也在后續(xù)的多個項(xiàng)目中也得到了推廣和驗(yàn)證，希望可以幫助到大家。

文章來源：站酷   作者：MEUX

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)