実務のためのマイクロインタラクション入門 @ Friends of Figma Shonan｜鈴木慎吾 / TSUMIKI INC.
2023.11.29にFriends of Figma Shonanで発表した内容を紹介します。当日使用したスライドは以下から確認いただけます。 はじめに今回のテーマは「実務のためのマイクロインタラクション」です。 オライリーから出版されている『マイクロインタラクション』では以下のように説明されています。 最小単位のインタラクション 「愛される製品」と「許容範囲の製品」の違いを生む トリガー、ルール、フィードバック、ループとモードの構造を持つ マイクロインタラクション、特にアニメーションやモーションをともなった社内での事例を元に実務に取り入れる方法について説明していきます。 制作事例Filmarksは映画・ドラマ・アニメのレビューサービスです。(株)つみきで自社サービスとして運営しています。作品一覧から画像をダブルタップすると、見たい映画に登録できます。マイページのタブに格納されるモーショ
CSSアニメーションもこれなら手軽！DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron
ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。 実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。 インタラクションを与える 要素に「data-micron」を加えるだけで、インタラクションを与えることができます。 バインド インタラクション 「data-micron-bind="true"」で、他の要素にも簡単にバインドできます。 コントロール インタラクション エフェクト、スピード、イージングなどは、data属性で簡単に変更できます。 Micron.jsのデモ ライブラリを実際に使用して、Micron.jsをボタンに適用してみました。 ボタンをクリックすると、基本となる12種類のアニメーションを楽しめます。
インタラクションへの共通認識をどう持つか？スマホ時代のデザインプロセスの進化とは | SELECK [セレック]
今回のソリューション：【Pixate/ピクスエイト】 ネイティブアプリの世界における、インタラクションデザインの重要性は高まるばかりだ。デザイン対象となる製品やサービスが、そのユーザーに対してどのように振る舞うかを定義していくインタラクションデザイン。 ネイティブアプリの領域では、いかにスムーズで心地良いユーザー体験を実現するか、ということが重要になる。 「ボタンを押すと画面が切り替わる」ということだけではなく、「ボタンを押すとまずはボタンのサイズが変わり、画面全体の各パーツがシームレスに変化し画面が切り替わる」といった、細部に及ぶデザインが求められる時代になった。 インタラクションデザインにおける課題は、細かい挙動に関して実装前にチーム内で共通認識を持つことが難しく、「作ってみたら想像していたものと違った…」ということが起こりやすい点だ。 そういった事態を避けるために、株式会社サイバーエ
![インタラクションへの共通認識をどう持つか？スマホ時代のデザインプロセスの進化とは | SELECK [セレック]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5aaabf7b60ecc7f3b4202cc922c3bce235ae11fd/height=288;version=1;width=512/https%3A%2F%2Fdpd29bjwmgbr8.cloudfront.net%2Fwp-content%2Fuploads%2F2015%2F10%2F22001359%2F18660a74-ada1-46da-8cd9-002b9f55e587.jpg)
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック(Adobe MAX JAPAN 2018発表資料) - ICS MEDIA
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るための ズルいAdobe CC活用テクニック （Adobe MAX JAPAN 2018発表資料） ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。 2018年11月20日（火）に開催されたAdobe MAX JAPAN 2018（場所：パシフィコ横浜）にて、「マイクロインタラクションを作るためのズルいCC活用テクニック」と題して登壇してきました。本記事では、スライド資料をフォローアップとして共有します。 アーカイブビデオ 公式サイトにてアーカイブビデオも公開されています。50分の内容ですが、スライド資料から読み取れないことも解説してますので、公
より良いUIのためのマイクロインタラクション入門 | Goodpatch Blog
この記事はGoodpatch Advent Calendar 2018 14日目の記事です。また、2018/10/08に開催された技術書典5にGoodpatchの有志で出展したブックパッチの内容を省略・改変した内容となっています。 今回はマイクロインタラクションはよく知らない方やマイクロインタラクションは知っているけど実際にコードを書いたことが無い方向けにマイクロインタラクションの基本的な知識と実装方法についてご紹介します。 マイクロインタラクションの理解 マイクロインタラクションとはどういう意味なのでしょうか。Dan Saffer氏の著書「マイクロインタラクション ー UI/UXデザインの神が宿る細部」によると、マイクロインタラクションについて以下のように書かれています。 マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのことです。
Lottie
Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Get Started Learn more › Why Lottie? Flexible After Effects features We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
