人やグループを認識するため
プロフィール写真だけがユーザーを特定する唯一の方法であってはなりません。
アバター デザインシステム
身元を示し、管理された写真の更新を提供します。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
人やグループを認識するため
メンバーリストにはアバターと「Linh Nguyen」という名前の両方が表示されます。
バリエーションと利用場面
代表的な画像形状
同じオブジェクト タイプに対して一貫した形状を選択し、トリミング時に重要な画像領域を維持します。
端から端までのポートレートや水平方向のロゴを試してください。オブジェクトを認識するのに役立つ部分を切り取らないでください。
例 ユーザーは円形の写真を持っています。組織は角が丸い正方形のフレームを持っています。
サイズスケール
画面に基づいて拡大縮小するのではなく、リスト、コメント、プロファイルのサイズを設定します。
太い行とプロフィールの上部のアバターを比較してください。画像が小さいからといって商品が異常に高くなるわけではありません。
例 同じトリミング方法でリストは 32 ピクセルを使用し、プロファイルは 80 ピクセルを使用します。
ステータスマーク
画像の横にステータスを配置し、ステータス名を追加すると、ユーザーが色を推測する必要がなくなります。
明るいテーマ、暗いテーマ、および色を非表示にする場合にテストします。オンラインマークにはまだ意味があります。
例 ユーザー情報の「オンライン」というラベルの付いた緑色の点。
写真がないときは
画像 URL が間違っている場合、欠落している場合、または読み込まれている場合でも、サイズと ID を保持します。
写真のリクエストをブロックします。行をジャンプすることはできませんが、ユーザーは引き続き認識されます。
例 エラー画像は、Anh Nguyen のアカウントの AN に変換されました。
AN
代替画像