スクロールフェードの基礎
スクロールフェードがユーザブルというよりも気が散るものになるかどうかは、その持続性、応答性、ページ上の要素への控えめな適用といった要素に左右される。このデザインパターンを正しく用いれば、ブランド認知を向上させ、ページの読み込みを最適化し、コンテンツをより理解しやすくすることができる。 Scroll Fading 101 by Sara Ramaswamy on December 8, 2023 日本語版2024年4月11日公開 はじめに スクロールフェードは新しいデザインパターンだ。これは、スクロールによってトリガーされるアニメーションを指し、ユーザーがページ上の特定の地点までスクロールすると、新しい要素やコンテンツがフェードインしたり、フェードアウトするというものである。 動き（つまり、アニメーション）というものは前注意的に処理される。すなわち、ユーザーの目は自動的にアニメーションに引き
Scroll Fading 101
Summary: Whether scroll fading is more distracting than usable depends on the following factors: its persistence, responsiveness, and how sparingly it is applied to elements on the page. When used right, this design pattern can improve brand perception, optimize page loading, and make content more digestible. Introduction Scroll fade is a new design pattern. It refers to an animation that is trigg
UXデザインにアニメーションを導入するときに注意すべきこと
Jolinaは、アメリカやイギリス、オーストラリアの複数のスタートアップを相手にしているデジタルマーケティングの戦略家です。 長いアニメーションの歴史の中で明らかになったものがあるとすれば、それは動く画像はいつだってユーザーの心を掴めるということです。アニメーションの目新しさは薄れたものの、今ではエンターテイメント以外の目的でも使われることが多くなりました。実際、時代を問わない魅力と汎用性を最大限に活用することで、Webサイトのユーザーに好ましく魅力的な体験を作り出すことができます。 しかし、特にUXデザインの立場から見ると、アニメーションはすべてが同様に作られているわけではありません。いくつかのアニメーションは、問題を解決せず、むしろ新たに生み出してしまっています。善意から作られていても、間違ったアニメーションはユーザーの目的の邪魔をし、インターフェイスを乱し、Webサイトに悪影響を与え
Webフロントエンドでアニメーションを実装する時になにを考えるか - Qiita
明けましておめでとうございます。 アニメーションの実装に抵抗を覚えている方、多いのではないでしょうか？ 特に昨今ではサーバサイド出身で最近フロントエンドを触り始めたという方も多いと思います。私が属している組織でもそんな流れは少なからずあるのですが、そういったバックグラウンドの方の声として聞くことが多い声はやはり「CSSは触りたくない、アニメーション怖い」というものです。 私も少し前まではちょっと複雑なアニメーションを見ると「えぇ…」と思っていたものですが、今ではCoolなアニメーションを見ると「どうやって実現しよう」とワクワクするようになりました(とても正直に言うとあまりに激しめなことされると今でも「えぇ…」とはなります)。 この記事ではあるアニメーション要求がある時に、どうやってそれを実装に落とし込むか、その考え方を私なりに整理したものをまとめてみました。アニメーションに抵抗がある方や、
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
The ultimate guide to proper use of animation in UX
Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerni
アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
エクスペリエンスデザインの基礎知識：モバイルアプリのアニメーション付きマイクロインタラクション | Adobe Blog
かつて、有名な手品師Dariel Fitzkee氏は「マジックは細部と演じられるパフォーマンス、それら両方にあるのです」と言いました。インタラクションデザインもそれに似ています。デザイナーは全体像を正しくしようと努力するかもしれません。しかし、細部が適切なものからほど遠ければ、結果は失敗に終わるでしょう。マジックは細部にあります。それが、丁寧にデザインされたマイクロインタラクションが、体験の満足度を高める理由です。 この記事では、モバイルアプリに見られるアニメーション付きのマイクロインタラクションが、使い易さに加えて、否定しがたい楽しさももたらす理由を探求します。もし、まだ未読であれば、前回の記事”マイクロインタラクションのユーザー体験への大きな影響”を最初にお読みください。 マイクロインタラクションは、モバイルアプリ体験の中で起き得るあらゆる行為の周辺の様々な場所で使用されます。一般的に
モーションデザインはUIの未来 | POSTD
最近、「モーションデザイン」という言葉がデザイン業界で急に出てきていることに気づいていますか？大小様々な企業が、これに特化した肩書きを持つデザイナーたちを雇いはじめています。最近ではGoogleが I/Oカンファレンス で、Googleの製品で統一化されているモーションランゲージの概要について話していました。 この騒ぎは何でしょうか？そして何の意味があるのでしょうか？ モーションはストーリーを語ります。 アプリにおける全ての物事は連鎖になっていて、モーションはあなたのガイドになります。ボタンをクリックして、画面が変わる度に、そこにはストーリーがついてきます。例えば、アイテムを作ったり削除する時、アニメーションがどのように役に立つかを見ていきましょう。 アイテムを消すことは劇的で破壊的な作業ですので、適切に反応するようにしましょう。アイテムをただ画面から消すだけということはしないようにしまし
Smart Transitions In User Experience Design — Smashing Magazine
Some websites outperform others, whether in their content, usability, design, features, and so on. Details of interaction design and animation make a fundamental difference on modern websites. We’ll share some lessons drawn from various models and analyze why these simple patterns work so well. When we design digital products, we often use design applications such as Photoshop and Sketch. Most peo
Belajar Bahasa Inggeris Online 2022 (Kelas English 1-to-1)
Kalau anda teringin nak fasih English, boleh belajar Bahasa Inggeris online dengan kami. Kelas dijalankan menggunakan Zoom / Google Meet. Kelas Bahasa Inggeris Online Ini Khas Untuk Orang Dewasa Yang Faham English, Tapi Bila Speaking: Ayat Berterabur, Grammar Hancur Dalam proses nak fluent English, kenapa mesti malu? Kami di JomEnglish Academy faham, anda nak sangat cakap smooth dan rasa confident
ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？ イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
テキストの切り替えを面白く印象的にできるjQueryプラグイン「Textualizer」
twitter facebook hatena google pocket 画像の切り替えJavaScriptを多く出回っていますが、テキストはあまり見ませんでした。 jQueryプラグインのTextualizerを利用すると、かなり面白い切り替えを行うことが可能になります。 sponsors 使用方法 krisk/textualizer - GitHubからファイルをダウンロード。 jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="textualizer.js"></script> <script type="text/javascript"> $(function(){ va
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
