• ホームページ
  • 記事
  • 全般的
  • フレーマーチュートリアル：プロトタイプを改善するための7つのシンプルなマイクロインタラクション

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

公開: 2022-03-11

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

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

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

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

  • マイクロインタラクションの例
  • マイクロインタラクションの例
  • マイクロインタラクションの例

7つのプロトタイプ

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

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

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

1.アクションボタン

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

画像

ステップ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：デザインモードでプロトタイプを作成する

Framerでアイテムインタラクションデザインを削除する

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

ステップ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」に変更することを示しています。 Framer Studioのドキュメントでifステートメントについて読むことができます：https：//framer.com/getstarted/programming/#conditional

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

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

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

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

ステップ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つ目は、回転してローダーアイコンを表示することです。
  • 最後は、チェックアイコンの表示と拡大縮小です。

これらのアニメーションごとに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つが必要です。 ここで重要なことは、不透明度のある更新アイコンを非表示にして、リストに追加することです。

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

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

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

 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

「アニメーション」を使用してリストを210ピクセル下に移動し、更新アイコンを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：タイルを使用して単純なグリッドを設計する

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

Framerでプロトタイプデザインをドラッグする

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

「forloop」 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 = [] 。

ステップ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

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

ファイナルノート

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

•••

Toptal Designブログでさらに読む：

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