絶妙なUIインタラクションデザイン：誇示するのではなく、優(yōu)雅さで勝ちます

キーポイント

• UIインタラクションデザインの優(yōu)雅さは、空想的で気を散らすものではなく、ユーザー操作をサポートするためのスムーズでユーザーフレンドリーな移行を確保することです。
ドロップダウンメニューや製品の詳細(xì)の表示などのマイクロインタラクションは、ユーザビリティを向上させ、ユーザーからの肯定的な感情的反応を引き起こすように慎重に設(shè)計(jì)する必要があります。
• UI相互作用が現(xiàn)実の世界の物理的法則に準(zhǔn)拠するほど、より自然でエレガントな感じがします。これらの相互作用をテストおよび調(diào)整して、直感的で一貫性があり、効率的であり、ユーザーに適切なフィードバックを提供することが重要です。
新しい用語(yǔ)「インタラクティブデザイン」は、UX設(shè)計(jì)プロセスに密接にリンクされています。 2015年以降、2つの靜的狀態(tài)間のインターフェイス要素間のインスタントスイッチは、もはや十分ではありません。今日、「スライド」、「バウンス」、「バウンスバック」などの言葉は、ユーザーインターフェイスがどのように機(jī)能するかについての議論の一部になりました。

しかし、「高価な時(shí)計(jì)のように」相互作用の分野では、「魅力的」は必ずしも「優(yōu)雅さ」を意味するわけではありません。以下のこの派手な時(shí)計(jì)（寫真）の複雑さに興味があるかもしれませんが、私たちのほとんどは本當(dāng)にそれを著たいと思うと思います。私たちのインターフェースデザインでは、自然な優(yōu)雅さはほとんど常に裝飾を上回ります。

あなたが私と同じくらい創(chuàng)造的であれば、あなたのウェブサイトをよりモダンで魅力的に感じさせるためだけに、派手な相互作用を作成することに魅了されるのは簡(jiǎn)単です。もちろん、このアプローチは、ユーザーエクスペリエンス全體を混亂させる最も信頼できる方法の1つである可能性があることを私たちの心で知っています。

だから、ユーザーがほとんど気付かないスムーズで心地よいアニメーションに集中することが非常に重要だと思いました。當(dāng)時(shí)、私たちのアニメーションはスポットライトから離れ、ユーザーが実行しようとしているものをサポートします。

なぜこれが重要なのですか？

なぜAppleは、多くの場(chǎng)合、ビンを非常に迅速にリサイクルすることが多いパッケージに多くの時(shí)間とお金を費(fèi)やすのですか？なぜ高級(jí)自動(dòng)車會(huì)社はドアの音を閉じる音を調(diào)整するのですか？

これは、微妙で一見(jiàn)重要でない詳細(xì)が、優(yōu)れたデザインに不均衡な影響を與え、UXを「良い」から「優(yōu)れた」に引き上げることができると感じるからです。

使用が容易になるだけでなく、ユーザー間で肯定的な感情を引き起こす美しく設(shè)計(jì)された「マイクロインタラクション」でウェブサイトを豊かにします（Apple Boxを開(kāi)くのと同じように）。この感情を體験することは、より多くのドーパミンを消費(fèi)することを意味します。これは、実際にあなたのウェブサイト/アプリに夢(mèng)中になるのに役立ちます。

では、「マイクロ相互作用」とは何ですか？

ユーザーが入力すると（たとえば、クリック、ドラッグ、タイプコンテンツ）、Webサイトが反応します。これは相互作用です。これは、ユーザーがウェブサイトと通信する方法であるため、會(huì)話の一部です。あなたのウェブサイトでユーザーの動(dòng)作の流れを設(shè)計(jì)するとき、あなたはいつでもいくつかの異なるタイプのインタラクションを使用することができます：

1. ナビゲーションインタラクション：ユーザーが最終的に新しいページ/狀態(tài)を入力したとき。
2. モーダルインタラクション：Webサイトの現(xiàn)在の狀態(tài)が凍結(jié)され、その上にいくつかの一時(shí)的な狀態(tài)が表示されている場(chǎng)合（たとえば、「Lightbox」ギャラリーまたは確認(rèn)ダイアログ）。
3. マイクロインターアクション：ページ內(nèi)の個(gè)々の要素のみがユーザー入力に反応する場(chǎng)合は、ドロップダウンメニューを表示したり、製品の詳細(xì)を表示したりします。

これらのマイクロインターアクションをよりエレガントにするにはどうすればよいですか？

ウェブサイトは、インタラクティブなインターフェイス要素のコンサートのように感じ、あなたを感動(dòng)させるために協(xié)力する必要があります。優(yōu)雅さは、この印象を與えるための重要な基準(zhǔn)です。純粋に技術(shù)的な用語(yǔ)で優(yōu)雅さを定義することは困難ですが、いくつかの論理的なトリックを使用して、エレガントな相互作用を作成するのに役立ちます。 キールール＃1 - インスタントジャンプなし

アイデアはシンプルです - ページ上の要素を変更するときは常にトランジションを使用してください。これは、GUIにクイックカットが必要ではないことを意味します。表示、消滅、または変換される各要素は、緩和またはアニメーションを使用して実裝する必要があります。

これは、ユーザーが焦點(diǎn)を合わせたい領(lǐng)域に集中するのに役立ちます。もちろん、これはエレガントで一貫した流れの感覚も生み出します。

###ルール＃2：トグルスイッチはボタンよりも優(yōu)れています

自宅では、通常同じスイッチを使用してライトをオンとオフにします。同じ概念が、ウェブサイトのトグルコントロールに適用されます。トグル制御が特定の要素の新しい狀態(tài)をトリガーする場(chǎng)合、同じ

を使用したコントロールはその狀態(tài)をロールバックする必要があります。

さらに、フィッツの法律によると、そのような管理は、州のオンとオフ州を迅速に切り替えるためにほとんど努力を必要とするはずです。 ###ルール＃3：トリガーは近くにある必要があります

遷移には常に何らかのトリガーが必要です。相互作用するとき、ユーザーは通常、このトリガー要素に集中します。これは、遷移が

または非常に近いトリガーで開(kāi)始する必要があることを意味します。トリガー要素から遠(yuǎn)くに移行を開(kāi)始すると、ユーザーがそれを見(jiàn)逃すのは簡(jiǎn)単で、プロセスが中斷されます。

さらに、遷移は通常、トリガーからユーザーの注意を集中したい場(chǎng)所に伝播する必要があります。トリックはシンプルです - ユーザーの目をトリガーから次のステップに進(jìn)むべき場(chǎng)所に導(dǎo)きます。このようにして、ユーザーはフォーカスを失うことはなく、行きたい場(chǎng)所にまっすぐになります。

###ルール＃4：自然遷移時(shí)間を使用

移行時(shí)間は、再生するアニメーションの期間を定義します。時(shí)間の主な問(wèn)題は、これを行うことができる杖がないことです。移行を長(zhǎng)くしすぎると、同じ相互作用を頻繁にまたは迅速に繰り返すユーザーに問(wèn)題が発生します。

一方、

短すぎると不自然に感じるか、ユーザーが完全に逃す可能性があります。殘念ながら、あなたができることは、あなたのイグナイト?アイと直感を使って移行を評(píng)価することだけです。私が見(jiàn)つけた最良のアドバイスは、すべての移行が同じ時(shí)間を持たないことです。さりげなく試して、適切なバランスポイントを見(jiàn)つけてください。また、0.05秒の差も重要であることに注意してください。

###ルール＃5：トランジションロールバックは、ユーザーの制御感覚を破壊するべきではありません

時(shí)々、ユーザーは移行プロセス中に心をすばやく変えることがあります。これらの場(chǎng)合、移行の応答性は非常に重要です。ユーザーが最後のインタラクションをキャンセルした場(chǎng)合（トリガーボタンを2回クリックするなど）、トランジションアニメーションをすぐに逆にする必要があります。そうでない場(chǎng)合、ユーザーはすぐにコントロールを失います。さらに、ユーザーに何か間違ったことをしていると思わせます。

###ルール＃6：一連の操作の次の操作に常に自動(dòng)的に焦點(diǎn)を當(dāng)てます

この手法は、一連のアクションを?qū)g行するユーザーの相互作用を目的としています。このようなシーケンスを設(shè)計(jì)するときは、常に不必要な相互作用を避け、常にシーケンスの次のコントロールに焦點(diǎn)を合わせる必要があります。この相互作用の最も基本的な例は、 [編集]ボタンです。これはフォームを開(kāi)き、最初のフィールドに魔法のように焦點(diǎn)を當(dāng)て、ユーザーが手動(dòng)でクリックする必要がないようにします。

###ルール＃7：いつでもいつ完了するかをユーザーに伝えてください

ユーザーは、インタラクションが完了したときに常に識(shí)別できる必要があります。インタラクションが完了したときに何らかの明白な方法で変更されない場(chǎng)合は、常に視覚的なフィードバックの実裝を検討し、ユーザーに「ねえ、完了です！」に伝える必要があります。これをスキップすると、ユーザーは同じアクションを複數(shù)回繰り返し、間違いを犯し、価値のあるものを破壊する傾向があります。

これらのヒントを適用します 要するに、これらのヒントをウェブサイトでマイクロインタラクションにチートシートとして使用できます。マイクロインタラクションを?qū)g裝する前に、相互作用の詳細(xì)を設(shè)計(jì)するのに役立ちます。

ただし、初めて完璧を達(dá)成できない可能性が高いです。この場(chǎng)合、自分の狀況に合わせて適応する必要があります。したがって、それを少し與えてください。 そして...最後に、あなたには別の提案があります。一般的に言えば、あなたの相互作用が現(xiàn)実世界の物理學(xué)の法則に従うほど、彼らはより自然でエレガントです。

幸せなアニメーション制作をお祈りします！

エレガントなUI相互作用の作成に関するよくある質(zhì)問(wèn)

UIインタラクションを設(shè)計(jì)する際には、どのような重要な原則を考慮する必要がありますか？

UIインタラクションを設(shè)計(jì)するときは、ユーザーを念頭に置いてください。相互作用は直感的で理解しやすい必要があります。一貫性も重要です。ユーザーは、インターフェイスと対話する方法を推測(cè)してはなりません。相互作用はまた、ユーザーにフィードバックを提供し、彼らの操作が特定され、処理されていることを彼らに知らせる必要があります。最後に、相互作用は効率的である必要があり、ユーザーが目標(biāo)を達(dá)成するために必要なステップを最小限に抑える必要があります。

私のUIインタラクションをより魅力的にする方法は？

UIインタラクションをより魅力的にするには、アニメーションを追加することを検討してください。アニメーションは、インタラクションをよりエネルギッシュに感じさせることができ、ユーザーに貴重なフィードバックを提供することもできます。ただし、アニメーションを慎重に使用して、メインタスクから気を散らさないようにしてください。さらに、音聲または觸覚フィードバックを使用して相互作用を強(qiáng)化すると考える場(chǎng)合があります。

UIインタラクションを設(shè)計(jì)する際には、どのような一般的な間違いを避けるべきですか？

UIインタラクションを設(shè)計(jì)する際に避けるべき一般的な間違いは、インタラクションを複雑すぎるようにすること、ユーザーに十分なフィードバックを提供しないこと、矛盾が含まれます。複雑すぎるインタラクションは、ユーザーを混亂させ、インターフェイスの使用を困難にすることができます。フィードバックの欠如は、ユーザーが自分のアクションが特定されているかどうかを確信している可能性があります。矛盾は、インターフェイスを予測(cè)不可能でイライラさせる可能性があります。

UIインタラクションの有効性をテストする方法は？

ユーザーテストを介してUI相互作用の有効性をテストできます。これには、ユーザーのインターフェイスとの相互作用の観察とフィードバックの収集が含まれます。また、分析ツールを使用して、ユーザーがインターフェイスと対話する方法を追跡し、困難な領(lǐng)域や混亂した領(lǐng)域を識(shí)別することもできます。

UI相互作用のアクセシビリティを改善する方法は？

UIインタラクションのアクセシビリティを改善するには、さまざまな機(jī)能を持つユーザーがインターフェイスとどのように対話するかを検討します。たとえば、マウスを使用できないユーザーも使用できるように、インタラクションがキーボードを使用できることを確認(rèn)してください。また、インタラクションがスクリーンリーダーやその他の支援技術(shù)と互換性があることを確認(rèn)してください。

私のUIインタラクションにストーリーテリングを組み込む方法は？

ストーリーテリングは、ユーザーの旅を中心に物語(yǔ)を作成することにより、UIインタラクションに組み込むことができます。これは、アニメーション、サウンド、視覚的な手がかりを使用して、ユーザーをインタラクションをガイドすることで実現(xiàn)できます。

UIインタラクションの詳細(xì)を?qū)Wぶためのリソースは何ですか？

UIインタラクションについて詳しく知るために利用できるリソースがたくさんあります。一部の一般的なリソースには、オンラインコース、ブログ、トピックに関する本が含まれます。また、人気のあるアプリケーションやWebサイトのUIインタラクションを研究することで、多くのことを?qū)Wぶこともできます。

UIインタラクションの速度はどのくらい重要ですか？

速度はUI相互作用において非常に重要です。ユーザーは、インタラクションが応答性が高く速くなることを期待しています。遅延はフラストレーションにつながる可能性があり、ユーザーにタスクを放棄する可能性があります。

色を使用してUIの相互作用を強(qiáng)化する方法は？

色を使用して、重要な要素に注意を引き、ステータスを示し、フィードバックを提供することにより、UIの相互作用を強(qiáng)化できます。ただし、色を注意深く一貫して使用し、デザインで色覚異常を検討することが重要です。

UI相互作用の傾向に追いつく方法は？

UIインタラクションの傾向に追いつくには、業(yè)界のブログをフォローし、デザイン會(huì)議に參加し、UIデザイナーのオンラインコミュニティに參加することをお?jiǎng)幛幛筏蓼?。また、新しいアプリと人気のあるアプリとWebサイトの間のUIインタラクションを研究することで、多くのことを?qū)Wぶことができます。

以上がエレガントなUIインタラクションを作成するための7つの簡(jiǎn)単なルールの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。