デジタルガーデン
高次元の美しさは細部に宿る:三つのマイクロインタラクション
大きな演出は誰でもできる。細部が rank を分ける
ヒーローの巨大なタイポ、粒子の惑星、スクロールのナラティブ——それが舞台だ。しかし観客が退場する時に覚えているのは、廊下の照明であることが多い。
この日、三つのマイクロインタラクションを作った。場所はどれも目立たない。基準はひとつ:もし Apple なら、気にするか?
一、数字は転がって来るべき
お問い合わせセクションの 8+ REPOS · 214+ STARS · 25+ FOLLOWERS の行は、以前は静的なテキストだった。今はビューポートに滚り込む時、三つの数字が 0 から各自の終点まで転がる——1.4 秒、power3 曲線。Apple の基調講演の成績ページと同じ演出。
工学的に体面のある細部がひとつ:数字はまず真の値でレンダリングされ、ビューポートに入って初めてゼロに戻って転がり始める。**JS が死んでも、ネットが遅くても、モーション減でも——数字は常に完全だ。**アニメーションは増分であり、依存ではない。
二、入力フィールドには光輪が要る
検索ボックスがフォーカスされると:ボーダーは髪の毛ほどのグレーからブルーへスプリングし、周囲に 4px の淡いブルーの光輪が広がり、虫眼鏡が点灯して微かに拡大する。
iOS の入力言語の本質は、ユーザーに告げることだ:**今、あなたはここにいる。**キャレットは視線の家であり、光輪は家の表札だ。
三、タグには重さが要る
デジタルガーデンのタグピルの列:ホバーで各自 2 ピクセル浮かび、ボーダーと塗りが淡いブルーに染まる。小さな位移だが、指先はそれが自分を「受け止めた」と感じられる。
締めの軍規ひとつ
**マイクロインタラクションの予算は、2 ピクセルと 0.3 秒。**超えればパフォーマンス、収まれば応答。
コメント