ユーザーのインタラクション行動から判断すると、モーダルポップアップは現在のポップアップページから飛び出す前に少なくとも1つのステップをユーザーに要求し、非モーダルポップアップはタッチやその他のインタラクションをユーザーに要求しません。振る舞い。インターネット製品の開発と反復を通じて、ポップアップコンポーネントは大きく以下の形態に分けることができます。
- 対話
ダイアログボックスは、一般的に非常に重要または危険な操作を実行しているユーザーを促すために使用され、最も一般的な2番目の確認の削除は、ポップアップダイアログボックスを介してユーザーにプロンプトを与えるために、ユーザーが判断を下すためにプロンプトに応じてユーザーです。一般的に画面の中央に表示され、インターフェイスのメインコンテンツが見えなくなります。
ダイアログは、単純対非選択に加えて、データ入力をサポートする形で一般的です。内容やスタイルのバリエーションを通じて、ダイアログは操作コンテンツとしても一般的に使用されます。ボタンは、直感とインタラクションの慣性を利用して、操作目的のために巧妙に設計することができます。
図4のように、ユーザーが「馬場牧場」を終了したい場合、左上の戻るボタンをクリックすると、ダイアログのポップアップウィンドウがポップアップします。ここでのボタン群は、レイアウトとパディング効果を利用して、ユーザが直感的に「もう一度再生」ボタンをクリックして親ページに留まるように誘導しています。また、3つ目のボタンである「閉じる」も「もう一度再生」と同じ指示を持っており、クリックするとポップアップを閉じて親ページに留まります。では、なぜここに機能が重複する2つのボタンがあるのでしょうか？私は、操作目的を達成するための「二重の保険」だと考えています。一部のユーザーは、高速連続クリックの下で、右側の無地のボタンをクリックするでしょう。一方、多くのユーザーは、この種の操作ポップアップに抵抗があり、フォークを見てクリックするでしょう。これは、「もう少し再生する」の意味を理解するのに必要な反応時間よりも多くの反応時間を要します。これは、「もう少し遊ぶ」の意味を理解するのに必要な反応時間よりもずっと短い時間で済みます。ユーザーのタイプに関係なく、このようなガイダンスによって「保持」されるのです。
デザイナーとしては、最初の経験は「注意」を得ることですが、二度目は騙されないでしょうし、このような「マインド」は、製品のビジネスフローで繰り返し使うことはできないと思いますし、騙しの疑いがあります。また、ボタン群のデザインを重視しすぎると、ポップアップウィンドウで伝えるメッセージに影響を与えます。特に最近のネットユーザーは、イメージよりも文字、動画よりもイメージの方が感度が鈍く、例えば私はこの記事を書くまで、初めてイメージの内容を読みました。
- アクションパネル
ダイアログボックスを強化したアクションバーは、より多様な表示スタイルで複数の機能ボタンを提供できます。従来のアクションバーでは、ユーザーがクリックすると、下から機能のリストがポップアップ表示され、Appleの「写真を共有」パネルのように、ユーザーの次のアクションに複数の異なるパスオプションを提供します。Appleは、クリック後にアクションオブジェクトに追加できるトランジションアニメーションによって、アクションバーが実現できる機能を拡張します；
携帯電話の画面が大きくなるにつれて、片手操作の限界や障害が明らかになりつつあり、より多くのデザインが携帯画面の下部を活用することに注目し、アクションバーはGaode Mapsの検索ボックスの下方向への移動のように、より統合的で多様なインタラクション部品になっています。
下部のナビゲーションタブをクリックした後、ジャンプは下から上に大きなカードを起動するように変更され、「行きと帰りが同じ」の原則に従って、ユーザーは動的効果の誘導の下で、元の背面の左上隅をクリックする代わりに、下向きのジェスチャーで前のステップに戻ろうとします。画面左の境界線からスライドアウトするジェスチャーに比べて、画面上の任意の場所をスライドダウンするジェスチャーは、確かに大画面での片手操作に優しいです。
- /
フロートはバブルとも呼ばれ、ユーザーがコントロールやインターフェイスの領域をクリックすると表示される半透明の一時的なビューです。フローターは、ユーザーに複数の機能オプションを表示できるという点で、アクションバーと似たスタイルです。しかし、画面上のどこにでも表示することができ、ユーザーに方向性の手がかりを与えることができます。このようなポインティングバブルは、コンピュータソフトウェアでよく見られるウェブベースのツールチップを応用したもので、機能ボタンの「マウスオーバー」に続いて、それが指す機能を短い文章で説明するバブルが表示されます。モバイル端末ではホバーイベントは存在しませんが、バブルデザインの位置とスタイルから適用することができます。
デフォルトのスタイルは、フロートの端にポイントグラフィックを追加し、それが属するアイコンを指すことです。矢印はiosでは使用されませんが、他の要素の上にグレージングすることによって、グループ化を達成することができます。
ここでは、上記のポップアップフォームについて少しまとめてみました：
- 乾杯
軽量なフィードバック/プロンプトは、ページ遷移やデータインタラクションなどのシーンに適した、ユーザーの操作を中断させないコンテンツを表示するために使用できます。主に、ユーザーが操作を完了した後に、操作の結果や状態の変化をユーザーに伝えるために使用されます。利点は、ユーザーの現在の操作プロセスを中断することがなく、軽量なフィードバック方法であることです。デメリットは、ユーザーに無視されやすいこと、ユーザーが読み終わると消えてしまう可能性があり、あまり多くの情報を表示するのには適していないことです；
トーストは製品の現在の状態を即座にフィードバックするもので、その表示はバックグラウンドの信号に基づいているため、同時に複数のトーストが順次表示されます。
情報フィードバックもWYSIWYGの原則をサポートしているので、ユーザーの目は、コマンドの入力-実行-結果のフィードバックなどのすべての情報を残す必要はありません自然に、より効率的。ほとんどのアプリは、ユーザーがApp Storeを使用してアプリをダウンロードするとき、図9のような多形ボタンのトースト機能を適用し、 "操作のヒント" - "復号化" - "で識別" - "完了"、各ボタンをクリックします。"-"完了 "のように、各ステップの情報を同じ場所に、わかりやすくまとまりのあるダイナミックなアイコンで表示します。このデザインにより、ユーザーの操作効率を向上させ、一連の行動フローをシンプルな画面で実現しています。
- snackbar
Androidに存在し、情報コンテンツと機能ボタンで構成され、画面の上部に位置し、通常は画面の下部にあり、画面の外にスワイプすることができ、または自動的に消えるように他の画面領域をタッチします。;
トーストとは異なり、スナックバーは一度に1つしか表示できません。コンポーネントが表示された場合、ユーザーは操作を実行し、別の表示する必要がある場合は、下から2番目のスナックバーが表示された後、上から1番目のスナックバーが終了します;コンテンツにアイコンを含めないようにしてください、それを使用する必要がある場合は、プロンプトにポップアップウィンドウを使用するのが最適です;ボタンフォントは、ディスプレイを強調表示するのが最適です。
図10 スナックバーのデモ
概要
製品は、ポップアップのさまざまなスタイルの多くを持っている必要があります、製品のポップアップのビジネスフローの複雑さのために特に重要である、正確な情報を伝えることを前提に行を中断しないように、このバランスは、製品構造、ビジネスプロセスの事前完全な組み合わせで撮影する必要があります、すべてのポップアップの必要性は、優先順位の並べ替え、調整、設計を行うには、モジュールのフォームを表示するように、たとえそれがあるように。"割り込み "も問題解決と効率向上に効果的です。
