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