web-dev-qa-db-ja.com

バッジ、ラベル、タグに違いはありますか？

リストでのプロジェクトの分類に役立つ一連のデザインパターンを検討しています。バッジ、ラベル、タグの違いについては、いくつかの強力な議論があるようです。

私の考えは、バッジ（通知など）は小さく、通常は画像ベースの識別子であり、ラベルは非インタラクティブな識別子であり、タグは以前の2つのオプションのインタラクティブな組み合わせです。

gui-designdesign-patternslabelstags
4
Eliot Hill

バッジは、要素（リンク）に関連付けられているアイテムの数を示す数値インジケーターであり、ラベルは、何かに関する追加情報を提供するために使用されます。タグは、SEOツールであるアイテムに一時的に付けられた単語または単語のグループです。

Atlassian Design Guidelines のこの説明を参照してください。

Badgesは、集計やその他の数量などの数値をすばやく視覚的に識別できるようにします。整数以外には使用されません。 tagsまたはその他の視認性の高い属性を呼び出すには、Labelsを使用します。メンションやロゼンジなどのラベルは、UIオブジェクトに視覚的にタグを付けて、すばやく認識してナビゲーションできるようにする方法です。これらは分類（タグ）で使用され、分類および検索のためのアドホックなユーザー生成スキームを提供します。または、すでに選択されている要素を示す複数選択コントロールで使用されます。

ラベルにはアクションアイコンを含めることができます（通常は「削除」）。特に他の視覚タグ要素と組み合わせて、視覚ノイズの量が増えることを覚えておいてください。それらは短く、行の折り返しは必要ありません。

4
Madalina Taina

この機能にはさまざまな名前が関連付けられているようです。それらを適切に分類するために、機能性を考慮に入れる必要があります。通常、4つのタイプがあります。

  1. データセットの関連付けに使用されるキーワード
  2. uIコンポーネントの横に追加情報を表示する
  3. 数値カウンター
  4. 新しいコンポーネントまたは機能の呼び出しとして使用されるUI要素。

したがって、これらの機能に基づいて使用されている名前は次のとおりです。

  1. タグ、チップ、ブレッドボックス、トークン、ナビゲーションピル
  2. 錠剤、ラベル、バブル、トローチ、スタンプ
  3. バッジ
  4. リボン、コーナートライアングルリボン

お役に立てれば。

1
Sooraj MV

小売eコマースのコンテキストでは、ここが2セントです。

ユーザーにアピールする静的な作品情報にバッジを付ける

  • 新着
  • 無料の返品/交換
  • 代金引換
  • 同日配達

ラベル

  • ケアラベル
  • 信頼性ラベル100％本革

タグは価格に関連付けることができます。通常動的

  • 値札
  • 割引タグ

次に、これらの定義はだれがそれらを使用するかに基づいて大まかに放棄される可能性があります

0
Ameen Akbar