如何創建自定義加載動畫以降低跳出率

最初稱為 throbber，加載動畫用於指示數據收集或界面渲染的進度。 雖然您曾經可以通過使用沉悶的進度條來指示這一點，但那些日子已經一去不復返了。

今天，利用 CSS、jQuery 或簡單的動畫 GIF 製作精心製作的動畫是一個讓您的界面活躍起來並為您的產品增添個性的機會。

周到的動畫可以在您的用戶等待您的內容加載時娛樂他們。 一個好的加載動畫有助於管理期望並通過保持興趣來改善用戶體驗。

在本教程中，我們將使用 Sketch 創建基本形狀，並使用 Principle 快速創建簡單的自定義加載動畫。 （這兩個應用程序都適用於 Mac。）您將學習如何創建 Trello、Flickr、Slack 等使用的彩色加載動畫。

讓我們開始吧。

鬆弛加載動畫

在 Sketch 上，繪製四個邊長為 50 像素或每個半徑為 100 像素的圓角正方形。 它們應該看起來像完美的圓形，但我們使用圓角的正方形來創建動畫中的線條拉伸效果。

以這樣的方式放置四個形狀，以創建一個假想的正方形，每邊之間有 150 像素的空間。 應用四種不同的顏色（#35BA90 綠色、#69CADD 藍色、#EBA900 黃色和#E20661 粉色）。

將形狀導入到 Principle，將它們分組，然後單擊“創建組件”以嵌套組。

進入嵌套組並將畫板旋轉 15 度。 然後選擇每個單獨的圓圈並將其旋轉回其原始位置（向後 15 度）。 這會在直線上產生拉伸效果。

將“自動”觸發器應用到畫板，然後將每個圓角矩形拉伸到畫板的另一側，長度為 295 像素。 為兩個畫板上的每個形狀設置 75% 的不透明度。

將另一個“自動”觸發器應用到第二個畫板。 在新畫板上，將每行縮小到原來的 50px 寬度，但在原來位置的另一側。

使用“自動”觸發器將最後一個畫板鏈接到第一個畫板。 單擊“返回父級”按鈕以預覽最終結果。

提示：當您轉到“Back to Parent”時，您可以將主組旋轉 -30 度以看起來更像 Slack。 此外，您可以在“動畫”面板中更改動畫速度，並應用“同時緩和”效果來平滑過渡。

Trello 加載動畫

使用 Sketch，繪製一個 100 像素的藍色正方形。 繪製一個 60px 寬 x 140px 高的白色矩形。 將其與前一個正方形的左上角對齊，頂部和左邊距為 30 像素。 複製那個白色矩形，將其與正方形的右側對齊，右邊距為 30px，然後將其高度減小到 70px。

將畫板導入 Principle 並應用“自動”觸發器來創建新的關鍵幀。 在新的畫板上，反轉白色矩形的高度（使左側矩形 70 像素高，右側矩形 140 像素）。 在“Animate”面板中應用“Ease-Both”效果來平滑過渡。

滾圈

在 Sketch 上畫一個圓圈。 使用“Dash”和“Gap”值應用 10px 邊框且無填充。 為邊框使用“角漸變”顏色，以突出您稍後將創建的旋轉效果。

打開一個新的 Principle 文件並使用“Import”按鈕從 Sketch 中傳輸圓。 連續應用兩個“自動”觸發器。

要創建旋轉效果，請選擇中間畫板中的圓圈並將其“角度”值更改為 360 度。 然後選擇第三個圓圈並在左側面板中給它一個不同的名稱（即“複製”）。 這將偽造無限旋轉。

最後，用另一個“自動”觸發器將第三個畫板鏈接回第一個畫板。 對畫板 1 和 2 之間的時間線應用“線性”過渡。檢查您剛剛在預覽窗口中創建的動畫。

Flickr 加載動畫

並排繪製一個藍色圓圈和一個粉紅色圓圈。 將它們導入 Principle 並應用“自動”觸發器來創建新畫板。

反轉圓圈的位置並應用新的“自動”觸發器來創建第三個畫板。 在那個新的畫板上，反轉左側面板上圓圈圖層的順序。

應用第三個“自動”觸發器來創建第四個畫板。 在最後一個畫板上，再次反轉圓圈的位置，並將最後一個畫板的“自動”觸發器應用回初始畫板。

裝載類型

在 Principle 上創建一個新項目，並使用文本工具編寫“LOADING”。 將文本左對齊並在畫板中垂直居中。

連續五次應用“自動”觸發器。 讓最後一個畫板的第五個觸發器循環回初始畫板。

從初始畫板開始向右移動，編輯每個畫板上的文本，分別在原始“加載”文本旁邊添加零、一、二、三、二和一個句點。 畫板的進程應該是這樣的：

加載加載。 加載中..加載中...加載中..加載中。

現在您可以預覽剛剛創建的動畫。

脈動點

跟踪一個 60 像素的點。 再复制並粘貼一個點並將其放置在右側 60 像素處。 確保兩個點，包括 60 像素的間隙，都在你的畫板中完全居中。

連續四次應用“自動”觸發器。

在第二個畫板上，將第二個點縮小到 30 像素。

在第三個畫板上，將第二個點縮小到 0 像素，將第一個點縮小到 30 像素。

在第四個畫板上，將第二個點放大到 30 像素，將第一個點縮小到 0 像素。

在第五個畫板上，將第一個點縮小到 30 像素，然後使用“自動”觸發器將畫板鏈接回第一個畫板。

滾點

在六面骰子上的排列中放置五個點。 將畫板導入到 Principle 並將其居中。

在畫板上應用“自動”觸發器。

在新畫板上，將這組點旋轉 360 度。

使用“自動”觸發器將第二個畫板鏈接回第一個畫板。

脈動圈

從一個 50 像素的圓開始，在一個 150 像素的圓內居中對齊，該圓有 5 像素的邊框但沒有填充。

連續三次應用“自動”觸發器。

在第一個畫板上，將線圈縮小到 50 像素，將內圈縮小到 10 像素。

在第三個畫板上，將線圈縮放到 200 像素，並為其設置 0% 的不透明度。 將內圈縮放至 150 像素，並為其設置 50% 的不透明度。

在最後一個畫板上，將內圈縮放至 200 像素，並為其設置 0% 的不透明度。 將線圈縮小到 50 像素，並給它 25% 的不透明度。

將“自動”觸發器應用於最後一個畫板。 將內圈縮小到 10 像素，不透明度為 50%。

使用“自動”觸發器將最後一個畫板鏈接到第一個畫板。

跳點

將三個高度為 50 像素、間距為 50 像素的完美圓圈排成一行。

應用“自動”觸發器。 在第二個畫板上，將第一個圓圈向上移動 50 像素。

將“自動”觸發器應用到第二塊板上。 在第三個畫板上，選擇前兩個圓圈並將它們向上移動 50 像素。 這三個圓圈應該在對角線上。

將“自動”觸發器應用於第三塊板。 在第四個畫板上，將第一個圓圈向下移動 50 像素。 選擇最後兩個圓圈並將它們向上移動 50 像素。

在第四塊板上應用“自動”觸發器。 在第五個畫板上，將前兩個圓圈向下移動 50 像素。 選擇最後一個圓圈並將其向上移動 50 像素。

在第五塊板上應用“自動”觸發器。 在第六個畫板上，將最後兩個圓圈向下移動 50 像素。

最後，回到第一個畫板，將第一個點向上移動 50 像素，然後使用“自動”觸發器將最後一個畫板鏈接到第一個畫板。 您可以預覽最終結果。

經典加載器

在 Sketch 中畫一個圓，給它一個 20px 的灰色邊框，沒有填充。

將相同圓圈的副本粘貼在其上，並將副本填充更改為不同的顏色。 對於這個例子，我們將使用藍色。

跟踪一個正方形，重疊藍色圓圈的四分之一。 將矩形圖層移動到圓形圖層下方，並將“蒙版”應用於矩形圖層。

移至 Principle 並使用“Import”按鈕導入 Sketch 圖稿。

將“自動”觸發器應用於第一個畫板並將藍色圓圈旋轉 360 度。

將第二個“自動”觸發器應用於第二個畫板。 將生成的第三個圓形圖層重命名為“複製”，並使用“自動”觸發器將其鏈接回第一個畫板。

結論

一旦您練習了創建其中一些經過驗證的加載動畫，您應該對使用此處學到的技能為您自己的應用程序創建獨特動畫的能力充滿信心。

借助 Sketch 和 Principle 中的一些想像力和方便的工具，您可以在幾分鐘內創建與您的應用程序設計相匹配的獨特加載動畫。 您的用戶將欣賞您的應用程序在努力工作的專業外觀和友好指示。

• • •

進一步閱讀 Toptal 設計博客：

• 電子商務用戶體驗——最佳實踐概述（附信息圖）
• 以人為本的設計在產品設計中的重要性
• 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
• 移動界面的啟發式原則
• 預期設計：如何創造神奇的用戶體驗