成長(zhǎng)期產(chǎn)品如何做加載動(dòng)效的統(tǒng)一？4步教你用最小成本達(dá)到目標(biāo)。

加載動(dòng)效的價(jià)值

著名的Seo公司Kissmetrics，得出一個(gè)報(bào)表結(jié)論：網(wǎng)頁(yè)反應(yīng)延遲一秒鐘會(huì)導(dǎo)致訪問(wèn)量下降7%，這也就意味著一家每天可賺10萬(wàn)的電子商務(wù)網(wǎng)站，每延遲一秒，一年將會(huì)損失255萬(wàn)！要知道，阿里巴巴每天收入就達(dá)到了6億多！

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

成長(zhǎng)期產(chǎn)品的加載開展

如果探索期產(chǎn)品，有經(jīng)驗(yàn)的設(shè)計(jì)師可以對(duì)加載內(nèi)容進(jìn)行清晰定義，但對(duì)于成長(zhǎng)期的產(chǎn)品，經(jīng)驗(yàn)不足的設(shè)計(jì)師對(duì)加載場(chǎng)景大部分都是沒(méi)有定義清楚的。這時(shí)單憑“不好看”、“想要統(tǒng)一樣式”這樣武斷的想法太過(guò)淺層，難以在團(tuán)隊(duì)內(nèi)進(jìn)行推動(dòng)。

面對(duì)這樣的境況，設(shè)計(jì)師需要明確在適合的時(shí)機(jī)、具備明確的價(jià)值與完整的方案，才可以推動(dòng)團(tuán)隊(duì)執(zhí)行。這里著重說(shuō)下，我在公司進(jìn)行推動(dòng)的方案及遇到的一些問(wèn)題。

總體分為4個(gè)步驟：先定出大方向，再倒推去拆解大方向，定出小目標(biāo)和時(shí)間節(jié)點(diǎn)，流程如下：

確定場(chǎng)景及類型

產(chǎn)品在成長(zhǎng)期中，是已經(jīng)存在各種不同的用戶場(chǎng)景了，不同的用戶場(chǎng)景下使用的加載動(dòng)效可能會(huì)不同。這好比貓眼使用的智能卡片，當(dāng)距離電影開始前15分鐘會(huì)推送提醒卡片，當(dāng)定位到用戶到達(dá)電影院時(shí)，會(huì)推送取票的卡片。

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

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

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

3. 將梳理出的場(chǎng)景和類型與產(chǎn)品等其他同事討論確認(rèn)，是否有錯(cuò)漏。

進(jìn)行竟品分析總結(jié)

此處的竟品調(diào)研并非為了找視覺(jué)上的參考，而是旨在通過(guò)多個(gè)竟品和類竟品的調(diào)研，來(lái)確定當(dāng)前市場(chǎng)上各類應(yīng)用在使用加載動(dòng)效的場(chǎng)景和加載方式的。這個(gè)加載場(chǎng)景和方法的歸納為后續(xù)自身做加載方案給出了明確的方向。

1. 梳理場(chǎng)景，選對(duì)方法

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

調(diào)研的竟品，要分竟品和類竟品兩類。竟品當(dāng)然是跟自己產(chǎn)品類型相近的App，而類竟品是市面上做得出彩的app，分別對(duì)他們的加載樣式做各種錄屏和截圖。比如，這次調(diào)研中，總共調(diào)研了126個(gè)竟品和類竟品，保存了136個(gè)錄屏和130個(gè)關(guān)鍵截圖。

這時(shí)，我們不難發(fā)現(xiàn)加載動(dòng)效的2個(gè)重點(diǎn)是：a. 加載場(chǎng)景；b. 加載方法。

a. 加載場(chǎng)景

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

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

b. 加載方法

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

比如：華爾街日?qǐng)?bào)的分步加載。在切換頁(yè)面時(shí)，由于頁(yè)面內(nèi)容多，為了減少用戶等待時(shí)間，優(yōu)先加載占網(wǎng)絡(luò)資源較小的元素。如先文字和默認(rèn)圖標(biāo)后圖片，或是選擇優(yōu)先加載文字，圖片加載完成前使用占位符顯示，后加載圖片和視屏，最終等待圖片加載完成。

再比如：大眾點(diǎn)評(píng)的tab采用的同級(jí)加載。在同一頁(yè)面內(nèi)加載完所有tab的內(nèi)容，當(dāng)同級(jí)頁(yè)面間切換時(shí)就會(huì)非常的流暢。

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

其余詳細(xì)的加載場(chǎng)景和加載方法線上也有不少資料，這里就不做詳細(xì)的羅列了，有興趣的請(qǐng)閱讀：

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

2. 分析加載樣式

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

a.動(dòng)效形態(tài)

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

b.加載動(dòng)態(tài)

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

c.風(fēng)格顏色

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

單場(chǎng)景設(shè)計(jì)-多場(chǎng)景驗(yàn)證

在有限的資源配置下，設(shè)計(jì)師需要把精力放在量入為出的價(jià)值輸出上。方案實(shí)施前，先用較小成本在小渠道做AB測(cè)試驗(yàn)證。保證在其他變量不變，只改變?cè)O(shè)計(jì)變量的情況下，證明設(shè)計(jì)的價(jià)值。經(jīng)過(guò)多次調(diào)整后，再?gòu)?fù)用到多場(chǎng)景、多業(yè)務(wù)中。

如何做到提升效率而降低成本？可以采用輻射思維的方法，即挑選單一場(chǎng)景下進(jìn)行樣式設(shè)計(jì)，方案得到部門同事支持后，可復(fù)用到多個(gè)不同場(chǎng)景下，檢驗(yàn)它是否適用于對(duì)應(yīng)下的每一個(gè)場(chǎng)景。

1. 單場(chǎng)景設(shè)計(jì)

挑選不同場(chǎng)景下不同樣式以單場(chǎng)景的形式分別設(shè)計(jì)。挑選單場(chǎng)景的前提是，必須已經(jīng)做好前文提及到的兩大步驟，自身項(xiàng)目的加載場(chǎng)景已經(jīng)按不同的樣式分類好，在同樣樣式下分別挑出對(duì)應(yīng)的一個(gè)場(chǎng)景，作為一種樣式的單場(chǎng)景進(jìn)行設(shè)計(jì)。

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

2. 多場(chǎng)景復(fù)用

單場(chǎng)景的加載樣式得到確立后，把樣式的手法進(jìn)行復(fù)用，代入到各個(gè)場(chǎng)景中去驗(yàn)證。

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

3. A/B測(cè)試

最后，便是進(jìn)行用戶場(chǎng)景測(cè)試了。提供最優(yōu)的方案A和方案B分別對(duì)用戶進(jìn)行測(cè)試，收集他們對(duì)加載效果的反饋，根據(jù)反饋?zhàn)鲎詈蠹?xì)節(jié)的調(diào)整，最終敲下設(shè)計(jì)稿。

△ 圖片來(lái)自網(wǎng)絡(luò)

以上可以看出，用輻射思維的方式，把單一場(chǎng)景復(fù)用到多場(chǎng)景驗(yàn)證，是用最小成本的控制資源?？焖衮?yàn)證出具有價(jià)值的加載方案，既能提升設(shè)計(jì)的效能，也能節(jié)省產(chǎn)品資源。

制作組件并總結(jié)

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

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

作者：高點(diǎn)點(diǎn)_ko

公眾號(hào)：片點(diǎn)Uidea?