ツールとチュートリアル

フレーマーチュートリアル：プロトタイプを改善するための7つの簡単なマイクロインタラクション

Framerチュートリアルシリーズの第2回へようこそ。の中に前回の記事、デザインモードでフレーマーを使用するための基本と、デザインを実現するための簡単なコードの書き方について学びました。この記事では、フレーマーを使用してマイクロインタラクションとアニメーショントランジションを作成することに焦点を当てます。プロトタイプに役立つ7つのインタラクションを作成する方法について説明します。

なぜ小さな相互作用のプロトタイプを作成する必要があるのですか？

スムーズな動き、状態の変化、微妙な遷移により、ユーザーは特定のアクションに関するフィードバックを提供することで、インターフェースの使用方法を理解できます。多くの場合、これらの遷移は、実際のアナログ（スイッチコントロールのスライドなど）をエコーするか、一般的なデバイスの相互作用パターン（タップから拡張など）を利用します。このチュートリアルでは、インターフェースに最後の仕上げを追加して、ユーザーの理解と喜びを刺激するインタラクションに焦点を当てます。

以下の例を見てください。世界中のデザイナーがさまざまな製品でこれらのマイクロインタラクションを作成しています。

7つのプロトタイプ

このチュートリアルでは、各マイクロインタラクションといくつかのコードスニペットの概要を説明します。いくつかの異なる手法を使用するため、製品に最適な手法を選択できます。 Framer Studio内で何かを作成する「正しい」方法はありません。前回の記事で述べたように、Framerを使用すると、自由に自由に作成できます。

すべてのインタラクションデザインを備えたフレーマーのアートボード

このような相互作用を見たことがありますか？確かに、あなたは持っています！あなたはスマートフォンでそれらを毎日見ます。自分で作成する時が来ました。

1.アクションボタン

アクションボタンは、多くの場合、現在の画面のメインアクションを表します。内部にいくつかのアクションが含まれている場合があります。 2番目のケースのインタラクションを作成します。ここから実用的なプロトタイプをダウンロードします。 https://framer.cloud/ShBnH

javascriptは現在の日時を取得します

ステップ1：3つの円形ボタンを作成する

まず、アイコンが内側にある1つのメインの円形ボタンと、メインボタンの下に配置された2つの小さなボタンを作成します。デザインモードでは、これらすべてのレイヤーをインタラクティブとしてマークすることを忘れないでください（ターゲットインジケーターを使用）。

フレーマーデザインモードでの作成プロセス

ステップ2：すべてのレイヤーに対して2つの状態を設計する

レイヤーに2つの異なる状態を作成します。以下のコードを使用して、小さいボタンをメインボタンの上に移動し、アイコンを45°回転させます。

button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

ステップ3：イベントを追加する

このプロトタイプをアニメーション化するには、イベントを追加する必要があります。アクションボタンをタップした後、すべてのレイヤーの状態を変更します。

button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

ステップ4：春のアニメーション

デフォルトと春のアニメーションカーブの違い

この時点で、アニメーションは非常に機械的に見えます。人間味を加えるために、すべてのレイヤーに春のアニメーションを追加します。

button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

アクションボタンの準備ができました！

2.インタラクティブスイッチ

以下の手順により、独自のスイッチインタラクションを作成できます。ここから実用的なプロトタイプをダウンロードします。 https://framer.cloud/ieypV

iPhone7プロトタイプでのスイッチの相互作用

ステップ1：スイッチの遊び場を設計する

フレーマーのスイッチ設計

必要なものは2つだけです。少なくとも2つのレイヤー（背景とドット）を含むスイッチ自体と、スイッチの使用後にアニメーション化するいくつかのレイヤーです。

独自の気象観測所を構築する

ステップ2：状態を作成する

から覚えていますか最初の記事 Framer Studioで直接状態を設計する方法は？州を好きなようにデザインするか、私の設定を使用してください。

dot.states.a = x: 50 backgroundColor: 'rgba(5,106,161,1)' switch_bg.states.a = backgroundColor: 'rgba(0,136,205,1)' icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

ステップ3：イベントを追加する

プロトタイプを機能させるには、スイッチにイベントを追加する必要があります。スイッチをタップした後、すべてのレイヤーの状態を変更します。

switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

ステップ4：タイミングを調整する

すべてをより自然にするには、すべての状態の時間と遅延を調整します。

dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

これでプロトタイプが完成しました。

3.アイテムのスワイプアクションを一覧表示します

これは、リストからアイテムを削除、アーカイブ、または保存するための一般的な操作です。左または右にスワイプすると、アイテムがクリアされます。ここからプロトタイプをダウンロードします。 https://framer.cloud/rzMWP

iPhone7モックアップでアイテムの相互作用を削除する

ステップ1：デザインモードでプロトタイプを作成する

フレーマーのアイテムインタラクションデザインを削除する

必要に応じて、独自のデザインを使用できます。レイヤーの構造を同じに保つ必要があります。上の画像でわかるように、すべてのリストアイテムの下に「元に戻す」ボタンがあります。

ステップ2：アイテムをドラッグ可能にする

簡単にするために、最初のリストアイテムに対してのみインタラクションを作成します。まず、リストアイテムをドラッグ可能にします：item.draggable = true。

次に、垂直軸をロックします：item.draggable.vertical = false。

ドラッグ可能な領域の制約を設定します：item.draggable.constraints

最後に、サイズをアイテムサイズに設定します：size: item。

コード全体は次のようになります。

item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

これで、左右にスワイプでき、アイテムは常に元の位置に戻ります。

ステップ3：状態を作成する

次に、リストアイテムが削除されたときの状態を作成します。 x軸を使用して画面の外に移動しただけです。

item.states.a = x: -360

ステップ4：スワイプ後に状態を変更する

最後に、インタラクションを開始するためのトリガーを作成する必要があります。アイテムを画面の左側にドラッグすると、削除する必要があります。コードは次のようになります。

item.onMove -> if item.x <-70 item.stateCycle('a')

この場合、「if」ステートメントを使用しています。上記のコードは基本的に、アイテムレイヤーを70pxを超えて移動すると、アイテムの状態を状態「a」に変更することを示しています。FramerStudioのドキュメントでifステートメントについて読むことができます。 https://framer.com/getstarted/programming/#conditional

ステップ5：タップ後にアクションを元に戻す

この相互作用はほぼ完了しています。残っているのは、このアクションを元に戻すことだけです。

item_bg.onTap -> item.stateCycle('default')

前のチュートリアルのこのコードに精通している必要があります。

s corp c corpllcの違い

ステップ6（オプション）：アニメーションのタイミングを調整する

必要に応じて、アニメーションのタイミングを調整できます。

item.animationOptions = time: 0.75 curve: Spring

4.ボタンローダー

これは、ユーザーの読み込みまたは待機時間を必要とするアクションにとって非常に便利なインタラクションです。このインタラクションを作成するときに、発生している多くのアニメーションを1つずつ管理する方法を学習します。ここからプロトタイプをダウンロードします。 https://framer.cloud/FxmHN

ステップ1：デザインモードでプロトタイプを作成する

プログレスバーとさまざまな状態の3つのアイコンの4つのサブレイヤーを持つシンプルなボタンを作成します。アップロードアイコンが表示され、下部に幅0のプログレスバーがあり、さらに2つの非表示アイコンが表示されるようにボタンを設計しました。

フレーマーのボタンデザイン

ステップ2：イベントを追加する

このプロトタイプ全体は、Framerの自動コード機能を使用するだけで、コードを1行も記述せずに作成できます。

まず、イベントを追加します。ボタンレイヤーをタップするだけで、インタラクション全体がトリガーされます。

これはFramerがあなたのために書いたコードです：

button.onTap (event, layer) ->

ステップ3：アニメーションをデザインする

Framerの自動コード機能を使用して、すべてのアニメーションを設計します。

Framerの自動コード機能を使用したアニメーションの設計

タイミングの異なる4つのアニメーションをデザインしました。

最初のアニメーションは、プログレスバーの幅を変更することです。
2つ目は、アップロードアイコンを不透明にして非表示にすることです。
3つ目は、回転してローダーアイコンを表示することです。
最後の1つは、チェックアイコンの表示と拡大縮小です。

これらのアニメーションごとにFramerが記述したコードは次のとおりです。

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

ステップ4：読み込みアニメーションをリセットする

お気づきかもしれませんが、アニメーションの終了後にローダーアイコンを非表示にしませんでした。このプロトタイプを終了するには、次のイベントを使用して別のアニメーションをトリガーします：load.onAnimationEnd ->

load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5.引っ張ってリフレッシュします

リストを含むほとんどすべての製品は、このタイプの相互作用を使用します。ユーザーはリスト全体をプルダウンして更新します。作成はとても簡単です。ここからプロトタイプをダウンロードします。 https://framer.cloud/DgMDw

iPhone7モックアップのプルトゥリフレッシュプロトタイプ

ステップ1：更新アイコンを使用して簡単なリストを設計する

デザインモードに直接ジャンプできます。リストと更新アイコンの2つが必要です。ここで重要なことは、更新アイコンを不透明にして非表示にし、リストに追加することです。

フレーマーのプルツーリフレッシュプロトタイプデザイン

ステップ2：スクロールコンポーネントを作成する

リストをスクロール可能にしたい。これを行うには、スクロールコンポーネントを使用して、リストレイヤーを追加します。

アップルはAndroidユーザーに支払う

scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

手順3：更新アイコンを表示する

アイコンの単純な状態を作成します。

icon.states.a = opacity: 1

ステップ4：プルダウン後にイベントを追加する

私たちのリストは現在スクロール可能です。つまり、上下にスクロールすると、スクロールコンテンツ全体が「y」軸上を移動します。この知識があれば、イベントを作成できます。

scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle('a')

ここでも、「if」ステートメントを使用しています。リストが180pxを超えてプルダウン（y軸上で移動）された場合、アクションがトリガーされます。この場合、リストと更新アイコンの2つのレイヤーをアニメーション化します。

scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle('a') list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

「animate」を使用してリストを210px下に移動し、更新アイコンを360°回転させます。

ステップ5：すべての状態をリセットする

プロトタイプはほぼ機能していますが、アニメーションの更新後にすべてのレイヤーをリセットする必要があります。これを行うには、アニメーションの終了後にイベントを使用します。

icon.onAnimationEnd ->

更新アイコンの回転をアニメーション化して元の位置に戻し、状態サイクルを使用して、リストとアイコンの背景状態をリセットします。

scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle('a') list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle('default') icon.stateCycle('default')

それでおしまい！

6.相互作用のドラッグ

アプリ内でアイテムをドラッグしているときに、アイテム自体に常に何かが起こっていることに気づいたことがありますか？アイテムが縮小したり、他のアイテムがぼやけたり、不透明度が変化したりすることがあります。この種のインタラクションを作成する方法を学びましょう。ここから実用的なプロトタイプをダウンロードします。 https://framer.cloud/YstiW

フレーマーでのドラッグインタラクションデザイン

ステップ1：タイルを使用して単純なグリッドを設計する

タイルのグリッドを作成し、それらが親要素内にあることを確認します。

フレーマーでプロトタイプデザインをドラッグ

ステップ2：「for」ループを使用してすべてのタイルをターゲットにする

「forループ」は怖いように聞こえるかもしれませんが、それは本当に簡単です。 forに精通していない場合ループ、最初に背景を少し読むことができます： https://framer.com/getstarted/programming/#loops-and-arrays

forを使用しますグリッド内のすべてのタイルをターゲットにするループ：

for item in grid.subLayers

この単純なコード行で、グリッドレイヤー内のすべてのレイヤーをターゲットにしました。

ステップ3：タイルをドラッグ可能にする

グリッド内の各アイテムをドラッグ可能にします。

for item in grid.subLayers item.draggable = true

ステップ4：ドラッグ状態を設計する

すべてのアイテムは、ドラッグされている間は状態になっている必要があります。コードから開始する必要がありますが、後でレイヤーエディターでこの状態を編集できるようになります。

for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

ステップ5：イベントをドラッグする

アイテムがドラッグされている間にさまざまな状態をトリガーするイベントを作成する必要があります。最初のイベントは、ドラッグを開始するときにアクションをトリガーします。

for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle('a')

this.bringToFront()を使用しましたアイテムが常に他のレイヤーの上にあることを確認します。

2番目のトリガーは、アイテムの状態をリセットします。

for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle('a') item.onDragEnd -> this.sendToBack() this.stateCycle('default')

この時点で、実用的なプロトタイプができました。

ステップ6（オプション）：タイミングで遊ぶ

相互作用は常にタイムラインに沿って発生します。完璧な効果を実現するには、タイムラインを調整することをお勧めします。

for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle('a') item.onDragEnd -> this.sendToBack() this.stateCycle('default') item.animationOptions = time: 0.3 curve: Spring

7.複数の「いいね」ボタン（詳細）

このプロトタイプでは、より高度な手法を使用して、Framer Studioでレイヤーをターゲティングするさまざまな方法を示します。これにより、より短時間で応答性の高いインタラクションが構築されます。基本的なコーディングに慣れていない場合は、最初にこの記事を読むことをお勧めします。 https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

このインタラクションでは、設計部分をスキップして、この記事のために特別に作成したプロトタイプを使用します。 https://framer.cloud/SZMCH

iPhone7モックアップでのインタラクションが好き

ステップ1：アレイを作成する

FramerStudio内のレイヤーの構造を見てください。

フレーマーのインタラクションデザインが好き

「リスト」グループの「行」内に「ボタン」があります。ボタンレイヤーでインタラクションを作成するので、それらをターゲットにする必要があります。ただし、最初に、すべての行レイヤーを見つけて、それらを配列内に配置する必要があります。

rows = list.children buttons = []

また、すべての「ボタン」レイヤー用に空の配列を作成しました：buttons = []。

ノードjsとは何ですか

ステップ2：サブレイヤーをアレイに追加する

「forループ」から始めましょう。

for i in rows buttons.push(i.children[0])

配列にレイヤーを追加するには、buttons.push()を使用します。これは、各「行」グループの最初のレイヤーを配列内に配置することを意味します。

ステップ3：状態とイベントを作成する

次に、「いいね」ボタンの状態を作成し、タップしながらイベントを追加します。

for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

この手法を使用して、以前のすべてのプロトタイプを再作成し、それらをより複雑にすることができます。

ファイナルノート

マイクロインタラクションを作成するときは、細部に焦点を合わせます。あらゆるタイプのアクションによってトリガーされるアニメーションを作成し、それらを完全に完璧にすることができます。同じプロトタイプを作成するには何百もの方法があることに注意してください。スキルと製品設計のニーズに合った方法を使用する必要があります。

•••