![]() まず、キャンセルの概念を理解する必要があります。 キャンセル: 質問、選択肢、進行状況、または情報を送信するときに、確認アクションを要求する必要があります。このとき、多くの場合、「OK」と「キャンセル」の 2 つのボタンが表示されます。 「キャンセル」ボタンは、通常単独では表示されず、「OK」や「保存」などの操作と一緒に表示されます。 ![]() 2番目は、「キャンセル」キーを設計して使用します。ページ上の「キャンセル」ボタンの位置。「キャンセル」ボタン(または操作確認ページ)を設計する場合、「確認」ボタンと「保存」ボタンは左側に配置され、目立つ形式でマークされているか、デフォルトで項目が選択されていることがよくあります。 「キャンセル」ボタンは右側に配置されることが多いです。 「確認」と「キャンセル」は離れすぎないようにしてください。図 a の 2 つのボタン間の距離が長すぎるため、視覚的な移動距離が増加し、読み取りに負担がかかります。図 b の読み取り効率は図 a よりもはるかに高いです。 ![]() ![]() 「キャンセル」を他のボタンと区別して弱める方法は、製品の操作上の考慮のためです。ユーザーに実行を促すいくつかの操作が実装され、「キャンセル」操作が強調されなくなります。たとえば、次のソリューションでは、[OK] ボタンと [キャンセル] ボタンがさまざまな程度に区別されています。 ![]() ボタンを設計するときに、表現される実際のコンテンツに基づいて、プライマリ関係とセカンダリ関係を強調できます。ユーザーを適切にガイドし、誤った操作を回避し、操作をより便利で明確にします。また、人間味のある説明語を使用してボタンを強調し、「キャンセル」の語を弱めることもできます。「キャンセル」の機能は、ユーザーが前の操作に戻れるようにすることです。しかし、インターフェースの主な意図に過度な影響を与えることはできません。人間味のある説明的な言葉は、ユーザーの注目を集め、思いやりと親しみを感じさせることができます。下の写真のDoubanの映画レビュー投稿ページでは、青灰色の小さなフォントが使用されており、形式も他のボタンと異なります。ページ全体では、「OK、コメントを追加」ボタンが1つだけ強調表示されています。 ![]() ダイアログ ボックスで「OK」と「キャンセル」を使用します。 メインタイトルテキストが「...してもよろしいですか?」のような文章である質問ダイアログボックスの場合は、「OK」と「キャンセル」の組み合わせを使用できます。ただし、はい/いいえの質問に答える場合は、「OK」と「キャンセル」を使用しないでください。図aはエラーの例です。上記の状況に加えて、「OK」と「キャンセル」が組み合わされている場合、「OK」の意味は「送信」と同等になります。たとえば、図 b のオプションは、実際には「OK」が送信を意味します。 図 c: エラーや警告メッセージに過度に重い警告アイコンを使用しないでください。ユーザーが圧倒されてしまう可能性があります。エラーや警告のプロンプトを設計するときは、黄色の「!」を使用できます。 ![]() 「…ですか?」と尋ねるときは、「はい」と「いいえ」の組み合わせを直接使用できます。図d ![]() たとえば、下の図では、保存されていないドキュメントを閉じるときに、このプロンプトのデフォルトの項目は「保存」ボタンにあります。保存すると他の 2 つのボタンよりもロスが少なくなるためです。 ![]() ![]() 3. ケース分析: 元の設計では、プレーヤーがゲーム アイテム バー内のアイテムをクリックすると、ダイアログ ボックスがポップアップ表示され、「購入」と「キャンセル」の 2 つのボタンが表示されます。 ![]() 問題: ボタンには優先順位がないようです。操作の観点から、プレイヤーに購入を促す意図を強調することはできません。プレイヤーは購入したアイテムと購入していないアイテムを区別できません。ニーズに応じて、ボタンの優先順位を確立し、パフォーマンスで区別する必要があります。このとき、「キャンセル」ボタンを弱め、購入ボタンの注目度を高め、プレイヤーに購入を促す必要があります。 最適化後は「キャンセル」ボタンを削除し、購入ボタンと非購入ボタンの効果を差別化して差別化されたデザインを実現しました。下の写真は修正後のデザインです。以前の内容よりもわかりやすくなったと思いませんか? ![]() プライマリボタンとセカンダリボタンを明確に区別し、テーマを強調します。キャンセルボタンは、表現の内容に応じて適切に弱めることができます。 アクションの結果を説明する言葉を使用し、ユーザーにそれを読ませます。 はい/いいえの質問に答える場合は、「OK」と「キャンセル」を使用しないでください。 「キャンセル」をデフォルトのオプションとして使用したり、場合によっては害のないボタンを選択したりすることもできます。 まとめると、「キャンセル」は主要なボタン要素ではありませんが、そこに配置するのが正しいというわけではありません。実際の状況に応じて合理的に設計し、標準化する必要があります。目立たないからといって、このボタンを無視しないでください。インタラクション デザインでは、成功または失敗を決定する詳細が重要になることがよくあります。 出典: テンセント GDC |
>>: CSS により、子コンテナが親要素を超えます (子コンテナは親コンテナ内で浮動します)
zabbix を利用する上での最大のボトルネックはデータベースです。zabbix のデータストレージ...
序文この記事は主にMySQLコマンド階層検索ヘルプの使用に関する内容を紹介します。この記事のサンプル...
CSS には多くの属性があります。特に複数の値を設定する必要がある属性は、長期間使用しないと忘れられ...
プロファイルを使用して遅いSQLを分析するMySQL の SQL パフォーマンス アナライザーの主な...
ウェブデザインでは、ウェブページを美しく見せるために矢印を装飾としてよく使用します。現在、多くのウェ...
ルートジャンプ this.$router.push('/course'); this...
目次シナリオ効果コード要約するシナリオ登録ページに携帯電話番号を入力し、登録インターフェイスを要求す...
上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...
序文最近、弊社では mbp の設定をしており、ssh を使うことが多くなりました。複雑なコマンドを書...
MySQLの起動失敗の解決策MySQLを起動できませんmysqlを停止した後、いくつかの操作(ホスト...
目次まとめ問題の説明問題を分析する問題を解決するまとめ複雑な知識をシンプルに説明できることは重要です...
目次導入効果のデモンストレーションは次のとおりです。 MChat コンポーネントのレンダリング: I...
コードをコピーコードは次のとおりです。 @文字セット "utf-8"; /* @...
目次MySQL スレーブ ライブラリ Seconds_Behind_Master 遅延の概要1. 遅...
目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...