Avatar + Badge (アバター + バッジ)
Avatar + Badge パターンは、ユーザーとその業績や役割を表すために多くのデジタル プラットフォームで一般的に使用されています。Avatar は、ユーザーの小さなグラフィック表現であり、多くの場合、プロフィール写真やアイコンですが、Badge は、達成、警告、または状態を表す短い微妙なメッセージまたは表示とともに使用される小さな視覚要素です。
![](../images/avatar_badge_demo.png)
Avatar + Badge パターンは、レイアウトに含まれる Avatar および Badge のスタイル設定をカスタマイズできます。
サイズ
Avatar + Badge パターンは Avatar と同じサイズをサポートします:
- Large - プロフィール ページに適しています。
- Medium - カスタム メニューや可視化に適しています。
- Small - コンタクト リストや繰り返しのシナリオに簡単に組み込めます。
![](../images/avatar_badge_large.png)
![](../images/avatar_badge_medium.png)
![](../images/avatar_badge_small.png)
位置
Badge は Avatar の 4 つ角のいずれかに配置できます。
- Bottom Left (左下)
- Bottom Right (右下)
- Top Left (左上)
- Top Right (右上)
![](../images/avatar_badge_position.png)
詳細
Avatar + Badge パターンでは、使用されている Avatar のサイズに基づいて、さまざまなレベルの詳細が提供されます。
![](../images/avatar_badge_details_large.png)
![](../images/avatar_badge_details_medium.png)
![](../images/avatar_badge_details_small.png)
Facepile (フェイスパイル)
Facepile は、ユーザーまたは人々のグループを視覚的に表す、デジタル プラットフォームで広く使用されているデザイン要素です。通常、Avatar コンポーネントのセットがコンパクトで美しい形式で表示されます。特に、Facepile は Avatar と同じサイズ Large (大)、Medium (中)、Small (小) をサポートしています。
![](../images/avatar_facepile_large.png)
![](../images/avatar_facepile_medium.png)
![](../images/avatar_facepile_small.png)
その他のリソース
関連トピック:
コミュニティに参加して新しいアイデアをご提案ください。
ページを開く:
GitHub