原理とスケッチを使用したUIアニメーションのステップバイステップガイド

公開: 2022-03-11

アニメーションとトランジションを念頭に置いてUIインターフェイスを設計することは、次のアプリのユーザーエクスペリエンス（UX）を向上させるための優れた方法です。 アニメーション化されたマイクロインタラクションは、注意力が短い世界で、ユーザーのエンゲージメントを刺激するのに最適な方法です。 これが、Airbnbが最近Lottieを導入した理由です。これは、「ネイティブアプリにアニメーションを簡単に追加できる新しいオープンソースツール」です。

Lottieのようなプロジェクトは、アプリとWebサイトの両方で拡張UXを作成するための新しい要素としてモーションを追加することの重要性が増していることを示しています。

このチュートリアルでは、PrincipleforMacを使用して効果的なUIアニメーション手法を学習します。 このガイドを読み終えると、鈍くて静的なモックアップをインタラクティブなプロトタイプに変えて、作業をより適切に紹介できるようになります。 ここで学習した内容を適用して、次のUIピッチとドリブルショットを改善できます。

始めましょう。

これらの無料のリソースをダウンロードしてフォローしてください。

従う必要があるのは、PrincipleアプリとSketchアプリだけです。 まだお持ちでない場合は、以下のリンクを使用して無料トライアルをダウンロードできます。

  • ここから無料のPrincipleトライアルをダウンロードしてください。

  • こちらから無料のSketchトライアルをダウンロードしてください。

  • こちらから無料のチュートリアルソースファイルをダウンロードしてください。

プリンシパルインターフェイスの概要

PrincipleとSketchを使用してUIをアニメーション化するためのガイド

Mac OSに慣れている場合は、Principleのインターフェイスは非常に馴染み深いものになります。 サイドバー、アートボードを表示するデザインエリア、サイズ変更や移動が可能なプレビューウィンドウの3つの主要なセクションがあります。

原則として基本的なアニメーションの概念を理解する

Principleでアニメートするのは比較的簡単です。 開始するのにアニメーションの背景は必要ありません。 実際、手間のかかる作業のほとんどはPrincipleによって自動化されており、アニメーションを開始するもの（つまり、ボタン、リンク、スクロールイベント）、アニメーションの開始方法、および終了方法にのみ焦点を当てる必要があります。

わかりやすくするために、ガイド全体に表示される用語の簡単な用語集を次に示します。

  • コンポーネント：コンポーネントは、要素やアニメーションを含めるのに役立つ一種のグループです。 これは、Photoshopの「スマートオブジェクト」またはIllustratorの「シンボル」に相当します。
  • トリガー：アニメーションを開始する方法-つまり、タップ、スクロール、ホバリングなど。原則として、トリガーは、原則内の任意の要素を選択し、右側に稲妻アイコンで表示されるアイコンをクリックすることで定義できます。
  • 遷移：あるアートボードから別のアートボードへの状態の変化、つまり左または右にスライドします。
  • イージング効果：アニメーションの開始方法と終了方法に基づく遷移の滑らかさのレベル。

A.トリガーと移行

PrincipleとSketchを使用してUIをアニメーション化するためのガイド

Principleを使用してアニメーション化する最初のステップは、要素（つまり、ボタンまたはリンク）にトリガー（アニメーションを開始する動作またはアクション）を設定し、その初期および/または最終状態（つまり、その位置またはスケール）を変更することです。アニメーションの最初から最後まで）。

  1. 初期状態を定義します。アニメーションが実行される前に、UI要素が最初にどのように見えるかを定義します。
  2. トリガーを定義します。インタラクション要素と、アニメーションをアクティブにするアクションを選択します。
  3. 最終状態を定義します。アニメーションの最後に要素がどのように表示されるかです。

アニメーションを設定したら、プレビューウィンドウでプレビューできます。

B.アニメーションの長さと緩和効果

PrincipleとSketchを使用してUIをアニメーション化するためのチュートリアル

デフォルトでは、Principleは0.5秒のアニメーションを作成します。 遷移効果を詳細に確認するには、それだけでは不十分な場合があります。 次の3つの手順に従って、アニメーションパネルから継続時間と「イージング」効果を変更できます。

  1. アニメーションパネルを開きます。2つのアートボードの間の黒い矢印を選択し、トップバーにある[アニメーション]ボタンをクリックします。
  2. アニメーションの長さを延長する：青い線の端点を移動します。
  3. イージングの適用：すべてのひし形のポイントを選択し、ドロップダウンから[両方をイージング]を選択して、遷移をスムーズにします。

あなたが得るもの

このビデオでは、このチュートリアルを完了すると、何を作成できるかを示します。 デモアプリは、Googleのマテリアルデザインカラーパレットを紹介し、色を選択すると詳細が表示されます。 読み込みアニメーション、スムーズな視差効果を備えたいくつかのページ遷移、およびメニュースライダーを作成します。

ここから無料のチュートリアルソースファイルをダウンロードしたことを確認してください。

始めましょう。

スケッチファイルから原則への移行

  1. アートボードを移動して、アートボード間の自然な遷移に備えます。たとえば、右からスライドする画面は、アニメーション上で置き換えられる画面の右端に接触している必要があります。
  2. スケッチファイルがすべて設定されたら、Principleにジャンプし、360x640の比率に一致する空白のドキュメントを作成して、[インポート]ボタンをクリックします。

シームレスなスクロールのための画面ヘッダーの削除

ページ間のシームレスな遷移を作成するために、最初のヘッダーを除く各ヘッダーを削除できます。 ヘッダーは当初、アプリのルックアンドフィールを紹介するためだけに追加されました。 ヘッダーは「ようこそ」画面にのみ表示され、メニューとアプリのタイトルを表示するためのスティッキーとして機能します。

読み込みアニメーションの作成-シェイプ

  1. 荷重形状グループを選択し、荷重形状とテキストを含む「コンポーネントの作成」をクリックします。 最初のシンボル内のテキストのコンポーネントを作成します。 直後にテキストを個別にアニメーション化します。
  2. グループ化された形状を選択します。 「タップ」トリガーを選択し、同じアートボードの上にドラッグアンドドロップして複製を作成します。
  3. 2番目のアートボードはアニメーションの最終状態を表し、angleプロパティを使用してグループを回転させることができます。 「塗りつぶし」と「アウトライン」に異なる角度の値を指定して、より興味深い効果を作成します。
  4. 終了するには、アートボード間の矢印を選択し、[アニメーション]をクリックして[アニメーションパネル]を開き、終点を約1.00秒にスライドして期間を変更します。

読み込みアニメーションの作成-テキスト

  1. まず、スライドアップアニメーションを作成します。 ボタンの形状を選択し、「タップ」トリガーイベントを適用します。 新しいアートボードで、すべての画面を640px（現在のアートボードの高さに等しい）上に移動します。
  2. それでは、視差を作成しましょう。 前のアートボードに移動し、ウェルカム画面で、幾何学的形状とテキストをさまざまなY値で下に移動します。
  3. 最後に、アニメーションパネル内で、タイムラインを1秒に延長します。 タイムラインに「EaseBoth」効果を適用します（すべてのひし形のポイントを選択していることを確認し、青い線をクリックしてすべてに効果を適用します）。
  4. アニメーションをプレビューし、視差効果が見栄えがするまでシェイプを移動します。

視差効果の作成-ウェルカムページ

  1. ロードコンポーネントを選択し、アートボードの任意の場所から矢印をドラッグして「タップ」トリガーを適用します。
  2. （マスターグループから）すべての画面を選択し、640px上に移動します。 この手順により、ウェルカム画面が表示されます。
  3. 前のアートボードに戻り、「ようこそ」画面の図形を下に移動します。 これにより、視差と呼ばれる非同期スライド効果が作成されます。
  4. アニメーションパネル内のトランジションに時間を追加して、アニメーションを調整します。アートボード間の矢印を選択し、青い線の端点を約1秒にドラッグします。

視差効果の作成-ページについて

  1. 下矢印ボタンを選択し（グループ全体を選択していることを確認してください）、アートボードの任意の場所から矢印をドラッグして「タップ」トリガーを適用します。
  2. （マスターグループから）すべての画面を選択し、すべてを640px上に移動します。 この手順により、[バージョン情報]画面が表示されます。
  3. 前のアートボードに戻り、「About」画面の図形を下に移動します。 これにより、視差と呼ばれる非同期スライド効果が作成されます。

視差効果の作成-カラーページ

  1. 下矢印ボタンに「タップ」トリガーを適用すると（グループ全体を選択していることを確認してください）、新しいアートボードが作成されます。
  2. 新しいアートボードで、すべての画面を選択し、640ピクセル上に移動します。
  3. 前のアートボードで、色とテキストを下に移動します。 オブジェクトを下に動かすほど、上にスライドするのに時間がかかることに注意してください。より動的な効果を作成するには、必ず別の配置を使用してください。
  4. 最後に、アニメーションを拡張し、アニメーションパネル内のすべての青いタイムラインに「両方を緩和」を適用します。

ページを横からスライドさせる-色の選択ページ

  1. 「色」画面の「さらに読み込む」ボタンに「タップ」トリガーを適用します。
  2. 新しいアートボードで、「色」と「選択」のコンテンツを360px（アートボードの幅）だけ左に移動します
  3. 前のアートボードに戻り、画面のコンテンツを反対方向（右）に移動します。
  4. 画面の不透明度をゼロパーセントから100パーセントまでスライドインすることもできることに注意してください。
  5. アニメーションの長さとイージング効果を試して、トランジション効果を微調整します。

メニューアイコンのアニメーション

  1. Sketchの元のファイルから効果（影など）があったレイヤーとシェイプは、画像としてPrincipleにインポートされることに注意してください。 Principle内で形状を編集する必要がある場合は、インポートが完了するまで特殊効果を追加しないようにしてください。
  2. そうは言っても、既存のアイコンをガイドとして使用して、3つの細い長方形を描き、それらをグループ化してハンバーガーメニューアイコンを作成します。 これで、前のメニューアイコンを削除または非表示にできます。
  3. 新しく作成したアイコンを選択し、それに「タップ」トリガーを適用します。
  4. 新しいアートボードで、メニューアイコンの上下の長方形を回転させ、中央に配置されていることを確認し、中央の長方形の不透明度を0パーセントにします。
  5. 作成したアニメーションを表示するには、変更したメニューアイコンを「タップ」トリガーを使用してプレビューアートボードにリンクし、テストします。

メニュースライダー効果の作成

  1. エンドステートアートボードで、メニューリンクが終了メニューアイコンの左側に配置されるまで、画面を右に移動します。
  2. メニューの内容と明るい灰色の背景を除いて、「色」フォルダ内のすべてを選択し、不透明度を25％に減らします。 アニメーションはページコンテンツをフェードアウトしてメニューに焦点を合わせます。
  3. アニメーションの長さを延長し、前のアートボードに移動してメニューコンテンツを少し動かし、スムーズな効果を作成します。

連絡先画面への移動

  1. 開いているメニューで、[お問い合わせ]ボタンに[タップ]トリガーを適用します。
  2. 新しく作成したアートボードで、すべての画面を640ピクセル上に移動します。
  3. 次に、プレビューアートボードに戻り、「フォーム」ページから要素を下に移動します。
  4. 異なるY値で要素を移動して、視差効果を作成します。
  5. 最後に、アートボード間の矢印を選択し、アニメーションの長さを延長して、青いタイムラインに「EaseBoth」を適用します。

ありがとうページで終わる

  1. 「メッセージの送信」ボタンに「タップ」トリガーを適用します。
  2. 新しいアートボードで、すべての画面を640ピクセル上に移動します。
  3. 次に、プレビューアートボードに戻り、「確認」ページから要素を下に移動します。
  4. 色付きのアイコンのスケールと回転を試して、よりダイナミックな効果を作成します。
  5. トランジション効果をよりよく認識できるように、アニメーションの長さに必ず追加してください。

原則を使用してアニメーションを追加することの単純さ。

Principleは、UIインタラクションのアイデアを実現するための素晴らしいツールです。

インターフェイスはMacに対応しており、Sketchファイルとシームレスに連携するように構築されています。

Principleは、ほとんどのアニメーションとトランジション効果を自動化します。 1つのアートボードの形状にトリガーを適用し、最終的なアートボードでアニメーション化する要素のプロパティを変更するだけです。

以下のコメントに質問を残してください。 喜んでお答えします。