正しい入力ボックスに関連するエラーを確認します。
セルが欠落しているフォームを送信し、キーボードを使用して編集します。ラベルを表示したままにし、リクエストを入力する前にリクエストを説明し、どのフィールドを修正する必要があるかを正確に把握できるようにエラーを十分近くに配置します。
入力フィールド デザインシステム
情報フィールドに正しく入力し、エラーを修正するのに役立ちます。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
03
支店を確認する必要があります
タスクを開始、変更、完了するときに特定のシナリオを試してください。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
メールアドレスの形式が正しくありません
「電子メール」というラベルの付いたボックスと「電子メールを name@vidu.com として入力してください」というエラー。入力した内容は、ユーザーが 1 文字編集するために保持されます。
バリエーションと利用場面
入力ボックス枠
フレームは入力領域を背景から分離し、両方のテーマでコンテンツとカーソルを表示したままにします。
フォーカス、自動入力、テキストズームを試してください。フレームはテキストをカバーしたり、サイズを変更したりしません。
例 フォーカスすると、行の高さは変わりませんが、メール ボックスの境界線が暗くなります。
ラベルと説明書
ラベルはユーザーが入力した後に存在します。知っておくべき追加のフォーマット手順または条件。
データを入力し、スクリーン リーダーを使用してセル名を読み戻します。ラベルとヒントは引き続き正しくリンクされています。
例 「注文コード」に「例: DZ-2048」というヒントを付けてラベルを付けます。
有効なメールアドレスが必要です
セル内のアイコンとアクション
イラストアイコンと、パスワードの表示やキーワードの削除などのアクションを区別します。
Tab キーでセルとサブボタンに移動します。アクションには明確な名前があり、意図せずにデータが削除されることはありません。
例 装飾的な虫眼鏡アイコン。 [検索のクリア] ボタンにはフォーカスがあり、ラベルが付けられます。
データの状態
空、データ、フォーカス、読み取り専用、無効、エラーの定義も同じルールに従います。
エラーから再エントリに切り替えます。エラーは時間通りに更新され、データは失われません。
例 読み取り専用の確認コード ボックスは引き続きコピーできます。送信セルは待ち状態です。
デフォルト
入力中
選択中
エラーを表示電子メールの形式が正しくありません。
利用できません
入力ボックスのサイズ
セル サイズは密度のコンテキストに従いますが、フォント サイズとタッチ エリアは引き続き使いやすくなっています。
コンパクトなセルをテーブルに配置し、大きなセルをモバイルに配置します。文字が縦に切れません。
例 管理パネルにはきちんとしたフィルターボックスがあります。ログイン画面では上部のボックスが使用されます。
複数行入力エリア
コンテンツを折り返す必要がある場合にのみ複数行を使用し、スクロールと境界を明確に保ちます。
長い段落を貼り付けてキーボードを開きます。ユーザーには入力場所と送信ボタンが引き続き表示されます。
例 応答セルはコンテンツを限界まで拡張し、セル内をスクロールします。