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

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

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

始めましょう。

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

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

• 無料のPrincipleトライアルをダウンロードする ここに 。

• 無料のSketchトライアルをダウンロードする ここに 。

• 無料のチュートリアルソースファイルをダウンロードする ここに 。

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

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

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

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

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

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

A.トリガーと移行

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

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

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

B.アニメーションの長さとイージング効果

デフォルトでは、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秒に延長します。タイムラインに「両方を緩和」効果を適用します（すべてのひし形のポイントを選択していることを確認し、青い線をクリックしてすべてに効果を適用します）。
4. アニメーションをプレビューし、視差効果が見栄えがするまでシェイプを移動します。

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

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

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

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

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

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

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

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

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

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

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