バウンス率を下げるためのカスタム読み込みアニメーションを作成する方法
公開: 2022-03-11もともとはスロバーとして知られていましたが、読み込みアニメーションは、データ収集またはインターフェイスレンダリングの進行状況を示すために使用されます。 鈍いプログレスバーを使用してこれを示すことでかつては得ることができましたが、それらの時代は過ぎ去りました。
今日、CSS、jQuery、または単純なアニメーションGIFを活用した巧妙に作成されたアニメーションは、インターフェイスを活気づけ、製品に個性を加える機会です。
思いやりのあるアニメーションは、コンテンツが読み込まれるのを待つ間、ユーザーを楽しませることができます。 優れた読み込みアニメーションは、関心を維持することで期待を管理し、ユーザーエクスペリエンスを向上させるのに役立ちます。
このチュートリアルでは、Sketchを使用して基本的な形状を作成し、Principleを使用して簡単なカスタム読み込みアニメーションをすばやく作成します。 （これらのアプリはどちらもMac用です。）Trello、Flickr、Slackなどで使用されるカラフルな読み込みアニメーションを作成する方法を学習します。
それを手に入れましょう。
Slackローディングアニメーション
スケッチで、辺が50ピクセル、または半径がそれぞれ100ピクセルの4つの丸い正方形をトレースします。 完全な円のように見えるはずですが、アニメーションで線を伸ばす効果を作成するために、角が丸い正方形を使用しています。
各辺の間に150pxのスペースがある架空の正方形を作成するように、4つの形状を配置します。 4つの異なる色（＃35BA90緑、＃69CADD青、＃EBA900黄色、および＃E20661ピンク）を適用します。
図形をPrincipleにインポートしてグループ化し、[コンポーネントの作成]をクリックしてグループをネストします。
ネストされたグループ内に入り、アートボードを15度回転します。 次に、個々の円を選択し、元の位置（後方15度）に回転させます。 これにより、直線的にストレッチ効果が生まれます。
アートボードに「自動」トリガーを適用してから、丸みを帯びた各長方形をアートボードの反対側に295pxの長さまで伸ばします。 両方のアートボードの各形状に75％の不透明度を与えます。
別の「自動」トリガーを2番目のアートボードに適用します。 新しいアートボードで、各線を元の50ピクセル幅に縮小しますが、元の位置とは反対側にします。
「自動」トリガーを使用して、最後のアートボードを最初のアートボードにリンクします。 「親に戻る」ボタンをクリックして、最終結果をプレビューします。
ヒント：「親に戻る」に移動すると、メイングループを-30度回転して、Slackのように見せることができます。 また、「アニメーション」パネル内でアニメーションのペースを変更し、「両方を簡単にする」効果を適用して、トランジションをスムーズにすることができます。
Trello読み込みアニメーション
Sketchを使用して、100ピクセルの青い正方形をトレースします。 幅60px、高さ140pxの白い長方形を描きます。 前の正方形の左上に30pxの上下の余白を合わせます。 その白い長方形を複製し、30ピクセルの右マージンで正方形の右側に揃え、高さを70ピクセルに減らします。
アートボードをPrincipleにインポートし、「自動」トリガーを適用して新しいキーフレームを作成します。 新しいアートボードで、白い長方形の高さを逆にします（左側の長方形の高さを70ピクセル、右側の長方形を140ピクセルにします）。 「アニメーション」パネルで「Ease-Both」エフェクトを適用して、トランジションをスムーズにします。
ローリングサークル
Sketchで円をトレースします。 「ダッシュ」と「ギャップ」の値を使用し、塗りつぶしを行わない10pxの境界線を適用します。 後で作成する回転効果を強調する境界線に「角度グラデーション」カラーを使用します。
新しいPrincipleファイルを開き、[インポート]ボタンを使用してSketchから円を転送します。 2つの「自動」トリガーを続けて適用します。
回転効果を作成するには、中央のアートボードで円を選択し、その「角度」の値を360度に変更します。 次に、3番目の円を選択し、左側のパネル内で別の名前（つまり、「コピー」）を付けます。 これは無限の回転を偽造します。
最後に、別の「自動」トリガーを使用して、3番目のアートボードを最初のアートボードにリンクします。 アートボード1と2の間のタイムラインに「線形」トランジションを適用します。プレビューウィンドウで作成したアニメーションを確認します。
Flickrのアニメーションの読み込み
青い円とピンクの円を並べてトレースします。 それらをPrincipleにインポートし、「自動」トリガーを適用して新しいアートボードを作成します。
円の位置を反転し、新しい「自動」トリガーを適用して3番目のアートボードを作成します。 その新しいアートボードで、左側のパネルの円のレイヤーの順序を逆にします。
3番目の「自動」トリガーを適用して4番目のアートボードを作成します。 その最後のアートボードで、円の位置をもう一度反転し、最後のアートボードから最初のアートボードに最後の「自動」トリガーを適用します。
ローディングタイプ
Principleで新しいプロジェクトを作成し、テキストツールを使用して「LOADING」と記述します。 テキストを左揃えにし、アートボードの垂直方向の中央に配置します。
「自動」トリガーを5回続けて適用します。 最後のアートボードループから最初のアートボードに戻る5番目のトリガーがあります。
最初のアートボードから始めて右に移動し、各アートボードのテキストを編集して、元の「LOADING」テキストの横にそれぞれ0、1、2、3、2、および1つのピリオドを追加します。 アートボードの進行は次のようになります。
ローディングローディング。 LOADING..LOADING…LOADING..LOADING。
これで、作成したアニメーションをプレビューできます。
脈動ドット
60pxのドットをトレースします。 もう1つのドットをコピーして貼り付け、60px右に配置します。 60pxのギャップを含む両方のドットが、アートボードの中央に完全に配置されていることを確認してください。
「自動」トリガーを4回続けて適用します。
2番目のアートボードで、2番目のドットを30pxに減らします。
3番目のアートボードで、2番目のドットを0pxに減らし、最初のドットを30pxに減らします。
4番目のアートボードで、2番目のドットを30ピクセルに縮小し、最初のドットを0ピクセルに縮小します。
5番目のアートボードで、最初のドットを30ピクセルに縮小し、「自動」トリガーを使用してアートボードを最初のボードにリンクします。
ローリングドット
6面のサイコロにある配置に5つのドットを配置します。 アートボードをPrincipleにインポートし、中央に配置します。
アートボードに「自動」トリガーを適用します。
新しいアートボードで、ドットのグループを360度回転します。
「自動」トリガーを使用して、2番目のアートボードを最初のアートボードにリンクします。
脈動円
50pxの円から始めます。これは、5pxの境界線があり、塗りつぶしがない150pxの円内に中央揃えで配置されています。
「自動」トリガーを3回続けて適用します。
最初のアートボードで、線の円を50ピクセルに縮小し、内側の円を10ピクセルに縮小します。
3番目のアートボードで、線の円を200ピクセルまで拡大し、不透明度を0％にします。 内側の円を150pxまで拡大縮小し、不透明度を50％にします。
最後のアートボードで、内側の円を200ピクセルまで拡大縮小し、不透明度を0％にします。 線の円を50pxに縮小し、不透明度を25％にします。
最後のアートボードに「自動」トリガーを適用します。 内側の円を不透明度50％で10pxに縮小します。
「自動」トリガーを使用して、最後のアートボードを最初のアートボードにリンクします。
ジャンプドット
高さ50pxの完全な円を50px間隔で3つ並べます。
「自動」トリガーを適用します。 2番目のアートボードで、最初の円を50ピクセル上に移動します。
2番目のボードに「自動」トリガーを適用します。 3番目のアートボードで、最初の2つの円を選択し、それらを50ピクセル上に移動します。 3つの円は対角線上にある必要があります。
3番目のボードに「自動」トリガーを適用します。 4番目のアートボードで、最初の円を50ピクセル下に移動します。 最後の2つの円を選択し、それらを50ピクセル上に移動します。
4番目のボードに「自動」トリガーを適用します。 5番目のアートボードで、最初の2つの円を50ピクセル下に移動します。 最後の円を選択して、50px上に移動します。
5番目のボードに「自動」トリガーを適用します。 6番目のアートボードで、最後の2つの円を50ピクセル下に移動します。
最後に、最初のアートボードに戻り、最初のドットを50ピクセル上に移動し、「自動」トリガーを使用して最後のアートボードを最初のアートボードにリンクします。 最終結果をプレビューできます。
クラシックローダー
Sketchで円をトレースし、塗りつぶしのない20pxの灰色の境界線を付けます。
その上に同じ円のコピーを貼り付け、コピーの塗りつぶしを別の色に変更します。 この例では、青を使用します。
青い円の4分の1に重なる正方形をトレースします。 長方形レイヤーを円レイヤーの下に移動し、長方形レイヤーに「マスク」を適用します。
Principleに移動し、「インポート」ボタンを使用してスケッチアートワークをインポートします。
最初のアートボードに「自動」トリガーを適用し、青い円を360度回転させます。
2番目の「自動」トリガーを2番目のアートボードに適用します。 生成された3番目の円レイヤーの名前を「コピー」に変更し、「自動」トリガーを使用して最初のアートボードにリンクします。
結論
これらの実証済みの読み込みアニメーションのいくつかを作成する練習をしたら、ここで学んだスキルを使用して、独自のアプリ用の独自のアニメーションを作成する能力に自信を持ってください。
少し想像力とSketchandPrincipleにある便利なツールを使用すると、アプリのデザインに一致する独自の読み込みアニメーションを数分で作成できます。 ユーザーは、アプリが一生懸命働いていることを示すプロフェッショナルな外観とフレンドリーなインジケーターを高く評価します。
•••
Toptal Designブログでさらに読む：
- eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
- 製品設計における人間中心の設計の重要性
- 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
- モバイルインターフェースのヒューリスティック原則
- 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法