一貫した視覚的言語を使用する
アイコン名は図を説明するものでなければなりません。操作上の意味は制御ラベルにあります。
アイコン デザインシステム
アイコンはどのサイズでも認識可能で意味のあるものにしてください。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
03
体験を完了する
デザインを実用化する際に見落としがちな細部を確認してください。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
一貫した視覚的言語を使用する
同じ「ゴミ箱」画像には、コンテキストに応じて「ドラフトの削除」または「メンバーの削除」というラベルが付けられます。
バリエーションと利用場面
アイコンのスタイル
同じ役割および同じ画面上のアイコンには、ラインまたはブロック システムを使用します。
新しいアイコンを古いアイコンの隣に同じサイズで配置します。密度と空間は均一でなければなりません。
例 メール、ビデオ、ドキュメントのボタンは同じ 1.6 ピクセルの SVG セットを使用します。
サイズとインタラクションエリア
ストローク サイズをクリック領域から分離します。小さなアイコンでも適切なタッチ領域が必要です。
モバイルボタンで 16 ピクセルのアイコンを試してください。ユーザーはストロークを正確にタッチする必要はありません。
例 18 ピクセルのアイコンは、44 ピクセルのクリック領域の中央にあります。
意味に応じた名前をつける
関数に明確な名前を付け、ユーザーが図から意味を推測できないようにします。
スクリーン リーダーはアクション名を読み取ることができる必要があります。装飾アイコンはラベルを繰り返しません。
例 ボタンのベルアイコンは「通知を開く」という名前で、テキストの横のアイコンはアクセスツリーから非表示になります。
通知
アカウント
検索