マイクロインタラクション: 15 の例とその設計方法
マイクロインタラクションの説明: 定義、Dan Saffer の 4 つのパート、タイプ別にグループ化された 15 の実例、設計ルール、および CSS、Framer Motion、GSAP、または ExodeUI でのビルド方法。
核心
マイクロインタラクションとは、投稿に「いいね！」する、設定を切り替える、フォームを確認する、ジェスチャーを完了するなど、1 つのことを行うインターフェイス内の小さな内包された瞬間です。この用語とその構造は、4 つの部分を定義する Dan Saffer に由来しています。トリガーがそれを開始し、ルールが何が起こるかを決定し、フィードバックが結果を示し、ループまたはモードが時間の経過とともに何を行うかを制御します。優れたマイクロインタラクションは短く、ユーザー自身の入力に応答し、割り込み可能です。
マイクロインタラクションとは何ですか?
マイクロインタラクションは、製品内の最小の完全なインタラクションであり、開始、変更、および終了を伴う単一のタスクです。それは全体の流れではありません。投稿への「いいね！」はマイクロインタラクションです。コメントを書いて公開するという流れです。このアイデアとその構造は、Dan Saffer の著書『Microinteractions』から来ており、すべてが 4 つの部分に分かれています。
マイクロインタラクションの 4 つの部分
Dan Saffer のフレームワークは、マイクロインタラクションを 4 つのコンポーネントに分割します。ほとんどのバグや悪いモーションは全体ではなく 4 つのうちの 1 つに存在するため、名前を付けると便利です。
トリガー
それを始めるイベント。ユーザー開始 (タップ、ホバー、長押し、ドラッグ) またはシステム開始 (ダウンロードの終了、ネットワーク エラーの発生)。クレジット: ダン・サファー。
ルール
開始すると何が起こるか: 有効な状態、ドラッグ境界や最小値と最大値などの制約、およびイベントのシーケンス。クレジット: ダン・サファー。
フィードバック
製品がユーザーに何が起こったかをどのように伝えるか: 春の定着、色の変化、アイコンの変化、テキストの更新。これはモーション デザインのほとんどが行われる場所です。クレジット: ダン・サファー。
ループとモード
インタラクションが時間の経過とともにどのような影響を与えるか、またモードによってインタラクションがどのように変化するか。同じトグルは、ロジックを変更することなく、ダーク モードまたはコンパクト レイアウトで異なる動作をすることができます。クレジット: ダン・サファー。
マイクロインタラクションが重要な理由
マイクロインタラクションとは、テキストの段落なしでインターフェイスがユーザーに応答する方法です。アクションが受信されたことを確認し、何かがまだ機能していることを示し、何が変更されたのかを説明します。これらが欠けていると、同じ製品がより重く感じられます。最初のタップでは何も通知されなかったためにユーザーが 2 回タップしたり、何も進んでいる気配のない画面で待機したりすることがあります。良いものは気づくよりも感じられる、それがポイントです。
15 のマイクロインタラクションの例
これらは通信内容ごとにグループ化されています。 ExodeUI が一致するサンプルを同梱している場合は、開いて編集できるように名前が付けられています。
ボタンとトグル (押して状態)
1. ボタンを押す: ポインターを下に置くと約 0.92 にスケールされ、放すと元に戻ります (ExodeUI の例: ゼリー ボタン)。 2. トグルスイッチ: コミット時に色が変わるスプリングベースの変換 (Gooey Toggle)。 3. モード スイッチ: インジケーターをスライドさせてアクティブなラベルを変形させるセグメント コントロール (モーション スイッチ)。
フォームのフィードバック (検証と送信)
4. 無効な入力シェイク: ダイアログなしで「このフィールドをチェックしてください」という短い水平ナッジ (ウィグル テキスト入力)。 5. 送信中: ボタンが進行状況インジケーターになるため、ユーザーは場所を失うことはありません (アニメーション送信ボタン)。 6. 成功の確認: アクションが着地すると、ボタンに小さなお祝いのバーストが表示されます (ロケット発射ボタン)。
読み込みと進行状況
7. 円形の進行: 実際の値まで満たされ、スプリングで落ち着くリング (ラジアル ゲージ)。 8. レベルまたはアクティビティ メーター: オーディオ レベル (サウンド ウェーブ) などの受信データにライブで反応するバー。
ナビゲーション
9. メニュー切り替え: 2 つの状態の間でモーフィングし、所定の位置にメニューが表示されるアイコン (モーフ ナビゲーション)。 10. ドックの拡大: カーソル近くのアイテムが上昇して成長し、その後落ち着きます (磁気ドック)。 11. タブの選択: 点滅する代わりにタブ間をスライドするインジケーター (リキッド タブ バー)。
空の状態と成功状態
12. 空の状態: 空白の画面を柔らかくするために一度にアニメーション化される小さなイラスト。 13. 報酬の公開: マイルストーンに到達すると期待とともに開くギフトまたはバッジ (サプライズ ギフト ボックス)。
プルしてリフレッシュ
14. プルしてリフレッシュ: ドラッグに追従し、放すと元に戻り、落ち着く弾力性のあるオーバースクロール。フィードバックはスピナーではなくストレッチです。
触覚スタイルのフィードバック
15. 確認パルス: モバイル上の触覚タップを反映する要素上の短いスケールと発光により、振動モーターのないデバイスでも同じアクションが同じように感じられます。
良い状態を保つための設計ルール
役立つマイクロインタラクションと迷惑なマイクロインタラクションは、いくつかのルールによって区別されます。
- 短くしてください。ほとんどの場合、約 200 ～ 400 ミリ秒で完了します。小さな要素での長い動きは遅く感じる
- 入力と同じフレームで開始します。スタートが遅れると原因と結果の感覚が壊れる
- 割り込み可能にしておく: ユーザーがモーションの途中でアクションを反転した場合、ゼロから再開するのではなく、速度を上げてリダイレクトします。
- prefers-reduced-motion を尊重する: 変更を伝え続ける静的またはクロスフェードのフォールバックを提供します。
- ジョブを 1 つ与える: インタラクションに複数の決定が必要な場合、それはフローになります
マイクロインタラクションを構築する方法
適切なツールは、同じインタラクションを実行する必要があるプラットフォームの数によって異なります。
CSSのみ
シンプルで自己完結型のケースに適しています。ホバーリフト、フォーカスリング、:checked またはクラス変更によって駆動されるトグルなどです。トランジションと @keyframe だけで十分であり、スタイルシート以外に提供するものは何もありません。
Framer Motion または GSAP (ウェブ)
モーションにスプリング、ジェスチャ、またはオーケストレーションが必要で、Web 上でのみ実行する必要がある場合に適しています。どちらも中断可能なスプリングを提供し、React 状態によって駆動できます。
ExodeUI (Web、iOS、Android を 1 つのファイルから)
React アプリ、SwiftUI アプリ、および Flutter で同じインタラクションが同じように動作する必要がある場合にこれを使用します。 .exode ファイルに一度作成すると、ランタイムが各プラットフォームで再生するため、プラットフォームごとに書き直す必要はありません。
実装コード例
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}覚えておきたい原則
- マイクロインタラクションは、トリガー、ルール、フィードバック、ループまたはモードを備えた 1 つの小さなタスクであり、Dan Saffer によって名付けられた 4 つの部分です。
- ほとんどの優れたものは約 200 ～ 400 ミリ秒で完了し、入力と同じフレームで開始され、割り込み可能のままです。
- フィードバックは機能します。アクションを確認し、何が変更されたかを説明します。多くの場合、テキストはありません。
- モーションなしで同じ情報を伝える優先モーション削減フォールバックを常に提供します。