成長期產品如何做加載動效的統(tǒng)一？4步教你用最小成本達到目標。

加載動效的價值

著名的Seo公司Kissmetrics，得出一個報表結論：網頁反應延遲一秒鐘會導致訪問量下降7%，這也就意味著一家每天可賺10萬的電子商務網站，每延遲一秒，一年將會損失255萬！要知道，阿里巴巴每天收入就達到了6億多！

在web時代，用戶能夠忍受加載的最長時間是：8秒。8秒是一個臨界值，如果加載時間超過8秒，大部分訪問者最終會選擇放棄。到了移動端這個體驗至上的時代，用戶就變得更加“不耐煩”了。這時候，一個能安撫用戶情緒的加載動效，意義不言而喻。

成長期產品的加載開展

如果探索期產品，有經驗的設計師可以對加載內容進行清晰定義，但對于成長期的產品，經驗不足的設計師對加載場景大部分都是沒有定義清楚的。這時單憑“不好看”、“想要統(tǒng)一樣式”這樣武斷的想法太過淺層，難以在團隊內進行推動。

面對這樣的境況，設計師需要明確在適合的時機、具備明確的價值與完整的方案，才可以推動團隊執(zhí)行。這里著重說下，我在公司進行推動的方案及遇到的一些問題。

總體分為4個步驟：先定出大方向，再倒推去拆解大方向，定出小目標和時間節(jié)點，流程如下：

確定場景及類型

產品在成長期中，是已經存在各種不同的用戶場景了，不同的用戶場景下使用的加載動效可能會不同。這好比貓眼使用的智能卡片，當距離電影開始前15分鐘會推送提醒卡片，當定位到用戶到達電影院時，會推送取票的卡片。

因此，在這個階段，率先要確認的就是存在當前產品下各個使用場景，做好收集統(tǒng)計，再考慮對應場景下適合使用什么加載樣式。而確定場景及類型的方法，可以按以下3個步驟進行（不同平臺要分開收集，再考慮是否可以用統(tǒng)一樣式）：

1. 把所有出現(xiàn)了加載的頁面進行了收集統(tǒng)計；

2. 梳理和歸納所有加載場景，分析場景，總結出總共需要多少個類型的加載狀態(tài)（這里的關鍵思維：加載樣式是否合適當前的場景？同一場景下的多個樣式是否能合并？為什么能合并？為什么不能合并？等）；

3. 將梳理出的場景和類型與產品等其他同事討論確認，是否有錯漏。

進行竟品分析總結

此處的竟品調研并非為了找視覺上的參考，而是旨在通過多個竟品和類竟品的調研，來確定當前市場上各類應用在使用加載動效的場景和加載方式的。這個加載場景和方法的歸納為后續(xù)自身做加載方案給出了明確的方向。

1. 梳理場景，選對方法

要做調研，率先的就要選取一定數(shù)量的調研對象，調研對象越多得出的結果越趨向真實，這跟問卷調查是一個道理。這時你也許會疑問，這么多竟品要如何做收集分析呢？

調研的竟品，要分竟品和類竟品兩類。竟品當然是跟自己產品類型相近的App，而類竟品是市面上做得出彩的app，分別對他們的加載樣式做各種錄屏和截圖。比如，這次調研中，總共調研了126個竟品和類竟品，保存了136個錄屏和130個關鍵截圖。

這時，我們不難發(fā)現(xiàn)加載動效的2個重點是：a. 加載場景；b. 加載方法。

a. 加載場景

經過多個調研對象的總結，常見的加載場景一般分為以下6種：下拉刷新、上拉刷新、切換新頁面的數(shù)據(jù)加載、頁面局部模塊的加載、啟動頁加載、按鈕加載。因業(yè)務不同，不排除有產品有特殊場景。所以總結出較通用的場景即可，便于多項目并行復用。

這里使用我工作中使用的案例說明，作為思路開拓，大家可以舉一反三。

b. 加載方法

當梳理完后，接下來我們針對不同的加載場景采取對應的解決方法（即加載方法）即可。加載方法的選取要根據(jù)通過不同的場景搭配不同的加載樣式，才能更好的做到緩解用戶的等待焦慮。

比如：華爾街日報的分步加載。在切換頁面時，由于頁面內容多，為了減少用戶等待時間，優(yōu)先加載占網絡資源較小的元素。如先文字和默認圖標后圖片，或是選擇優(yōu)先加載文字，圖片加載完成前使用占位符顯示，后加載圖片和視屏，最終等待圖片加載完成。

再比如：大眾點評的tab采用的同級加載。在同一頁面內加載完所有tab的內容，當同級頁面間切換時就會非常的流暢。

可以看出，根據(jù)不同的場景選擇合適的加載方法，不僅能最大限度的降低焦慮，也能讓用戶有個更好的使用體驗，降低了用戶的頁面跳出率。這在后續(xù)的工作中用戶跳出率數(shù)據(jù)反饋上從8%降低到3%，很好的證實統(tǒng)一加載的設計價值。

其余詳細的加載場景和加載方法線上也有不少資料，這里就不做詳細的羅列了，有興趣的請閱讀：

https://www.uisdc.com/5000-word-app-loading-design-summary

2. 分析加載樣式

我們可以通過3個緯度去分析竟品中加載樣式：a.動效形態(tài)；b. 動效動態(tài)；c. 風格顏色。它可做設計參考，但更多還是需要創(chuàng)新的。

a.動效形態(tài)

加載動效的形態(tài)主要分為：形象物、logo、slogan、轉圈等非品牌樣式。

b.加載動態(tài)

加載效果以這5種為主：形象物出現(xiàn)、形象物動態(tài)、轉圈、logo出現(xiàn)、logo動態(tài)。

c.風格顏色

最后，就是加載的風格分扁平和立體，顏色分主題色和非主題色。

單場景設計-多場景驗證

在有限的資源配置下，設計師需要把精力放在量入為出的價值輸出上。方案實施前，先用較小成本在小渠道做AB測試驗證。保證在其他變量不變，只改變設計變量的情況下，證明設計的價值。經過多次調整后，再復用到多場景、多業(yè)務中。

如何做到提升效率而降低成本？可以采用輻射思維的方法，即挑選單一場景下進行樣式設計，方案得到部門同事支持后，可復用到多個不同場景下，檢驗它是否適用于對應下的每一個場景。

1. 單場景設計

挑選不同場景下不同樣式以單場景的形式分別設計。挑選單場景的前提是，必須已經做好前文提及到的兩大步驟，自身項目的加載場景已經按不同的樣式分類好，在同樣樣式下分別挑出對應的一個場景，作為一種樣式的單場景進行設計。

比如：在列表用戶需要下拉更新數(shù)據(jù)的場景、用戶在進入詳情頁的場景。這兩個場景可以提取為下拉加載一個樣式，詳情頁內子模塊的加載一個樣式，分別輸出設計后，去跟產品確認樣式是否合理。

2. 多場景復用

單場景的加載樣式得到確立后，把樣式的手法進行復用，代入到各個場景中去驗證。

可以通過自問自答的方式進行自我走查，確保每一個場景對應的每一個樣式都是合理的。比如，在tab頁切換時下拉的樣式是否合適？假如用了形象物做加載，他的動態(tài)在場景中是否合適？在賬單數(shù)據(jù)的子模塊用同樣的模塊加載樣式是否合適？場景A和場景B為什么要用不同的樣式？等等。

3. A/B測試

最后，便是進行用戶場景測試了。提供最優(yōu)的方案A和方案B分別對用戶進行測試，收集他們對加載效果的反饋，根據(jù)反饋做最后細節(jié)的調整，最終敲下設計稿。

△ 圖片來自網絡

以上可以看出，用輻射思維的方式，把單一場景復用到多場景驗證，是用最小成本的控制資源。快速驗證出具有價值的加載方案，既能提升設計的效能，也能節(jié)省產品資源。

制作組件并總結

當驗證了所有場景的樣式都適用后，敲定了設計方案，最后一步就是把整套規(guī)范完整的輸出，制作好組件和說明文檔，交付好給開發(fā)小哥哥。建議使用sketch做成symbol，標明使用場景和類型，方便日后在多產品線并行的情況下，能直接復用組件，包括代碼或樣式，會大大提升設計和開發(fā)的效率。

總的來說，“規(guī)范化”意味著對團隊合作的統(tǒng)一指標，對細節(jié)的細致追求。我們可以不被規(guī)范所約束，可以去創(chuàng)造新的東西，但卻不能完全脫離規(guī)范思維。在創(chuàng)新的前提下，團隊的合作需要規(guī)范的確立，才能在多人協(xié)作的項目里，防止產品設計走樣。就像造房子一樣，得有地基，才能在上面搭建房子。

作者：高點點_ko

公眾號：片點Uidea?