Rating (レーティング)

Rating コンポーネントを使用すると、ユーザーは製品、サービス、ページ、その他のエンティティなどの項目またはエクスペリエンスに評価を適用できます。Rating には、単一ユーザーまたは集計されたスター レーティングを表示でき、ユーザーが独自のスター レーティングを設定できるようにするために使用されます。Rating は、Ignite UI for Angular Rating コンポーネントと視覚的に同じものです。

Rating のデモ

Figma での Rating の使用

Rating はラベルと値から構築されます。値はレーティングのスケールの数値です。ラベルはブール値プロパティを使用してオン/オフを切り替えることができます。レーティングのスケール内のアイコンの数は合計 5 つ星に事前定義されていますが、より多くのレーティングのアイコンを含む Rating をデザインする必要がある場合、最も簡単な方法は、コンポーネントをワークスペースに挿入することです。その後、コンポーネントを右クリックするとコンテキスト メニューが開き、Detach instance が選択され、次のデタッチされたレイヤー構造が表示されます。

レイヤー	使用
🚫 componentVersion	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
🚫 metadata	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
Label	不要な場合は変更または非表示にできるテキスト レイヤー。
Value	すべてのレーティング アイコンが含まれています。

デタッチした後、Value フレームにネストされている既存のレーティング アイコンのいずれかを複製することでレーティング アイコンの数を増やすことができ、自動レイアウトのおかげでサイズが調整されます。

レーティング アイコンの数を減らすために、コンポーネントをデタッチする必要はありません。[レイヤー] パネルから不要なアイコンを非表示にすることができます。

操作状態

Figma では、挿入時に Rating コンポーネントがデフォルトで常に有効になります。プロパティ パネルから無効にできます。

状態

Rating コンポーネントには Empty State (空の状態) があり、Figma のブール値プロパティからオンとオフを切り替えることができます。さらに、Figma には、Empty State とは逆の Value プロパティがあり、0 ～ 5 の事前定義されたオプションから Value の達成を選択できます (星半分もサポート)。

サイズ

Rating には、小、中、大の 3 つのサイズがあります。

スタイル設定

Rating には、値アイコンの色とタイプ、およびラベルのテキストの色の変更に使用できるオプションを通じて、スタイルを柔軟に設定できます。ただし、テキストの読みやすさを最適化するために、テーマの明度に基づいて、事前定義された色とアイコン タイプを使用することをお勧めします。

使用方法

星は非常に認識しやすいランキングのシンボルであり、人々は他のシンボルをレーティング　スケールと関連付けないかもしれません。星をカスタム シンボルに置き換える場合は、その目的が明確であることを確認してください。同色の似た色合いや色収差を生じる組み合わせなど、コントラストの低い色は避けるようにします。アイコンの選択は強調され、視覚的に明確な外観を持つ必要があります。

良い例	悪い例

コミュニティに参加して新しいアイデアをご提案ください。