apeescape2.com
  • メイン
  • 収益性と効率性
  • モバイルデザイン
  • Webフロントエンド
  • 人とチーム
ツールとチュートリアル

直帰率を下げるためにカスタム読み込みアニメーションを作成する方法

元々はスロバーとして知られていましたが、読み込みアニメーションは、データ収集またはインターフェイスレンダリングの進行状況を示すために使用されます。鈍いプログレスバーを使用してこれを示すことで一度は取得できましたが、当時は過ぎ去りました。

今日、CSS、jQuery、または単純なアニメーションGIFを活用した巧妙に作成されたアニメーションは、インターフェイスを活性化し、製品に個性を加える機会です。

思いやりのあるアニメーションは、ユーザーがコンテンツの読み込みを待つ間、ユーザーを楽しませることができます。優れた読み込みアニメーションは、関心を維持することで期待を管理し、ユーザーエクスペリエンスを向上させるのに役立ちます。



このチュートリアルでは、Sketchを使用して基本的な形状を作成し、Principleを使用して簡単なカスタム読み込みアニメーションをすばやく作成します。 (これらのアプリはどちらもMac用です。)Trello、Flickr、Slackなどで使用されるカラフルな読み込みアニメーションを作成する方法を学習します。

それを手に入れましょう。

スラックローディングアニメーション

スラックローディングアニメーション

Slack読み込みアニメーションの作成

スケッチで、辺が50ピクセル、または半径がそれぞれ100ピクセルの4つの丸い正方形をトレースします。完全な円のように見えるはずですが、アニメーションで線を伸ばす効果を作成するために、角が丸い正方形を使用しています。

各辺の間に150pxのスペースがある架空の正方形を作成するように4つの形状を配置します。 4つの異なる色(#35BA90緑、#69CADD青、#EBA900黄色、および#E20661ピンク)を適用します。

Slack読み込みアニメーションの作成

シェイプをPrincipleにインポートしてグループ化し、[コンポーネントの作成]をクリックしてグループをネストします。

ネストされたグループ内に入り、アートボードを15度回転させます。次に、個々の円を選択し、元の位置(後方15度)に回転させます。これにより、直線でストレッチ効果が生まれます。

Slack読み込みアニメーションの作成

アートボードに「自動」トリガーを適用してから、丸みを帯びた各長方形をアートボードの反対側に295pxの長さに伸ばします。両方のアートボードの各形状に75%の不透明度を与えます。

Slack読み込みアニメーションの作成

別の「自動」トリガーを2番目のアートボードに適用します。新しいアートボードで、各線を元の50pxの幅に縮小しますが、元の位置とは反対側にします。

「自動」トリガーを使用して、最後のアートボードを最初のアートボードにリンクします。 「親に戻る」ボタンをクリックして、最終結果をプレビューします。

ヒント:「親に戻る」に移動すると、メイングループを-30度回転して、Slackのように見せることができます。また、「Animate」パネル内でアニメーションのペースを変更し、「EaseBoth」エフェクトを適用してトランジションをスムーズにすることもできます。


Trelloローディングアニメーション

Trello読み込みアニメーション

Trello読み込みアニメーションの作成

Sketchを使用して、100pxの青い正方形をトレースします。幅60px、高さ140pxの白い長方形を描きます。前の正方形の左上に30pxの上下の余白を合わせます。その白い長方形を複製し、30pxの右マージンで正方形の右側に揃え、高さを70pxに減らします。

Trello読み込みアニメーションの作成

アートボードをPrincipleにインポートし、「自動」トリガーを適用して新しいキーフレームを作成します。新しいアートボードで、白い長方形の高さを逆にします(左側の長方形の高さを70ピクセル、右側の長方形を140ピクセルにします)。 「アニメート」パネルで「イーズ-両方」エフェクトを適用して、トランジションをスムーズにします。


ローリングサークル

ローリングサークルローディングアニメーション

ローリングサークルローディングアニメーション

Sketchで円をトレースします。 「ダッシュ」と「ギャップ」の値を使用し、塗りつぶしを行わない10pxの境界線を適用します。後で作成する回転効果を強調する境界線に「角度グラデーション」カラーを使用します。

Sketchを使用したローリングサークルローディングアニメーション

新しいPrincipleファイルを開き、[インポート]ボタンを使用してSketchから円を転送します。 2つの「自動」トリガーを続けて適用します。

Principleを使用したローリングサークルローディングアニメーション

回転効果を作成するには、中央のアートボードで円を選択し、その「角度」の値を360度に変更します。次に、3番目の円を選択し、左側のパネル内で別の名前(つまり、「コピー」)を付けます。これは無限の回転を偽造します。

最後に、別の「自動」トリガーを使用して、3番目のアートボードを最初のアートボードにリンクバックします。アートボード1と2の間のタイムラインに「線形」トランジションを適用します。プレビューウィンドウで作成したアニメーションを確認します。


ApeeScapeデザインブログを購読して、eBookを受け取ります

Flickrの読み込みアニメーション

Flickrの読み込みアニメーションの例

Flickr読み込みアニメーションを作成する

青い円とピンクの円を並べてトレースします。それらをPrincipleにインポートし、「自動」トリガーを適用して新しいアートボードを作成します。

円の位置を反転し、新しい「自動」トリガーを適用して3番目のアートボードを作成します。その新しいアートボードで、左側のパネルの円のレイヤーの順序を逆にします。

Flickr読み込みアニメーションを作成する

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番目のドットを30pxに拡大縮小し、最初のドットを0pxに縮小します。

5番目のアートボードで、最初のドットを30pxに縮小し、「自動」トリガーを使用してアートボードを最初のボードにリンクします。


ローリングドット

ローリングドットアニメーション

ローリングドットアニメーションを作成する

6面のサイコロにある配置に5つのドットを配置します。アートボードをPrincipleにインポートし、中央に配置します。

原理によるローリングドットアニメーション

アートボードに「自動」トリガーを適用します。

新しいアートボードで、ドットのグループを360度回転します。

「自動」トリガーを使用して、2番目のアートボードを最初のアートボードにリンクします。


脈動円

脈動する円のアニメーション

脈動する円のアニメーションを作成する

50pxの円から始めます。これは、5pxの境界線があり、塗りつぶしがない150pxの円内に中央揃えで配置されています。

「自動」トリガーを3回続けて適用します。

脈動する円のアニメーション

最初のアートボードで、線の円を50ピクセルに縮小し、内側の円を10ピクセルに縮小します。

3番目のアートボードで、線の円を200ピクセルまで拡大し、不透明度を0%にします。内側の円を150pxまで拡大縮小し、不透明度を50%にします。

最後のアートボードで、内側の円を200pxまで拡大縮小し、不透明度を0%にします。線の円を50pxに縮小し、不透明度を25%にします。

脈動する円のアニメーション

最後のアートボードに「自動」トリガーを適用します。内側の円を50%の不透明度で10pxに縮小します。

「自動」トリガーを使用して、最後のアートボードを最初のアートボードにリンクします。


ジャンプドット

ジャンプドット読み込みアニメーションの例

ジャンプドット読み込みアニメーションを作成する

イオン2対イオン3

高さ50px、間隔50pxの完全な円を3つ並べます。

「自動」トリガーを適用します。 2番目のアートボードで、最初の円を50px上に移動します。

2番目のボードに「自動」トリガーを適用します。 3番目のアートボードで、最初の2つの円を選択し、それらを50px上に移動します。 3つの円は対角線上にある必要があります。

3番目のボードに「自動」トリガーを適用します。 4番目のアートボードで、最初の円を50px下に移動します。最後の2つの円を選択し、50px上に移動します。

Sketchでジャンプドット読み込みアニメーションを作成する

4番目のボードに「自動」トリガーを適用します。 5番目のアートボードで、最初の2つの円を50px下に移動します。最後の円を選択し、50px上に移動します。

5番目のボードに「自動」トリガーを適用します。 6番目のアートボードで、最後の2つの円を50px下に移動します。

ジャンプドット読み込みアニメーション

最後に、最初のアートボードに戻り、最初のドットを50ピクセル上に移動し、「自動」トリガーを使用して最後のアートボードを最初のアートボードにリンクします。最終結果をプレビューできます。


クラシックローダー

クラシックローダーアニメーションの例

クラシックローダーアニメーションを作成する

Sketchで円をトレースし、塗りつぶしのない20pxの灰色の境界線を付けます。

その上に同じ円のコピーを貼り付け、コピーの塗りつぶしを別の色に変更します。この例では、青を使用します。

青い円の4分の1に重なる正方形をトレースします。長方形レイヤーを円レイヤーの下に移動し、長方形レイヤーに「マスク」を適用します。

クラシックローダーアニメーションの使用

Principleに移動し、「インポート」ボタンを使用してスケッチアートワークをインポートします。

最初のアートボードに「自動」トリガーを適用し、青い円を360度回転させます。

2番目の「自動」トリガーを2番目のアートボードに適用します。生成された3番目の円レイヤーの名前を「コピー」に変更し、「自動」トリガーを使用して最初のアートボードにリンクします。


結論

これらの実証済みの読み込みアニメーションのいくつかを作成する練習をしたら、ここで学んだスキルを使用して、独自のアプリ用の独自のアニメーションを作成する能力に自信を持つ必要があります。

少し想像力とSketchand Principleにある便利なツールを使用すると、アプリのデザインに一致する独自の読み込みアニメーションを数分で作成できます。ユーザーは、プロフェッショナルな外観と、アプリが一生懸命働いていることを示すフレンドリーな指標を高く評価します。

•••

ApeeScapeデザインブログの詳細:

  • eコマースUX–ベストプラクティスの概要(インフォグラフィック付き)
  • 製品設計における人間中心の設計の重要性
  • 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
  • モバイルインターフェースのヒューリスティック原則
  • 予測的デザイン:魔法のユーザーエクスペリエンスを作成する方法

イーサリアムオラクル契約:セットアップとオリエンテーション

バックエンド

イーサリアムオラクル契約:セットアップとオリエンテーション
計算写真におけるPython画像処理の概要

計算写真におけるPython画像処理の概要

技術

人気の投稿
評価比率:財務専門家が知る必要のある主要な指標
評価比率:財務専門家が知る必要のある主要な指標
フリーランスのデザイナーとしてのリモートワーク
フリーランスのデザイナーとしてのリモートワーク
シニアフロントエンドエンジニア、スタッフポータルキャッシュチーム
シニアフロントエンドエンジニア、スタッフポータルキャッシュチーム
長年にわたるボタンデザイン:ドリブルタイムライン
長年にわたるボタンデザイン:ドリブルタイムライン
NvidiaShield-Androidゲームコンソールの別の見方
NvidiaShield-Androidゲームコンソールの別の見方
 
生成的敵対的ネットワークを使用してランダムノイズからデータを作成する
生成的敵対的ネットワークを使用してランダムノイズからデータを作成する
一度書けばどこにでも展開:いつネイティブに移行するか?
一度書けばどこにでも展開:いつネイティブに移行するか?
最適化されたソフトウェア統合:ApacheCamelチュートリアル
最適化されたソフトウェア統合:ApacheCamelチュートリアル
ページ速度101:モバイルUIデザイナーの基盤
ページ速度101:モバイルUIデザイナーの基盤
ブルータリストのWebデザイン、ミニマリストのWebデザイン、そしてWebUXの未来
ブルータリストのWebデザイン、ミニマリストのWebデザイン、そしてWebUXの未来
人気の投稿
  • 最も人気のある出会い系アプリ2017
  • グラフィックデザインvsファインアート
  • c法人とsの違い
  • nodejsレストクライアントの例
  • ページオブジェクトモデルseleniumjava
カテゴリー
技術 その他 Uiデザイン Uxデザイン トレンド 投資家と資金調達 人とチーム リモートの台頭 Webフロントエンド Kpiと分析

© 2021 | 全著作権所有

apeescape2.com