私は基本的に2(3)色を使用しているWebアプリケーションを開発しています:
アプリは、地元のアーティストやTherofreの登録であり、ユーザーはそれらを評価できます。
現在私は到達した星を灰色のフル/ハーフスターとして表示しています。
今、私はいくつかのサンプル行でそれを見て、彼らはまだ星を獲得していないように見えました(直感的に:灰色=悪い)。
5つの灰色の星すべてを背景に表示し、達成されたものをマゼンタで強調表示する必要があると思いますか?
テーマは全体的にフラットで無菌なので、これは煩わしすぎますか?
私が恐れているので、タグと評価スターが付いた行があるので、行の下部が残りを視覚的に支配します。
まず私はあなたが星評価システムのみを使用する準備ができていると信じています。 として、製品またはプロファイル(あなたの場合はアーティスト)を比較する他の方法があります。
補足:YouTubeはスターベースのシステムからバイナリのthumbs-up\thumbs-downに切り替わり、評価は何倍にもなりました。それはあなたのケースでも同じである可能性があります。詳細... リンク1 & リンク2
実際のポイントに来ています。アプリがグレースケールベースになっていることを考えると、星のマゼンタは他よりも確実に注目を集めます。
ソリューション:
星の評価システムについて言えば、おそらく1つのことしかできません。つまり、通常の状態(あなたに応じて達成されていないもの)では、灰色(またはあなたの灰色の色合いなら何でも) )スターへの境界線。
あなたがそれらをgrey(またはあなたの灰色の色合い)colorで満たすことができるアクティブな状態(あなたに応じて達成されたもの).
大まかな例:
黒色ではなく灰色
更新:開発側のソリューション
この星にfont-awesomeを使用している可能性があります。次の2つの回避策のいずれかを実行します。
HTML経由で埋め込まれた場合、クラスを変更できます。 Font-Awesomeは、2種類のスター(クラス)を提供しています。1つは色が塗りつぶされ、もう1つは境界線のみです。
CSSを使用すると、提供されたUnicodeを変更できます
これらの変更は、ホバー/アクティブ/フォーカス状態になります。
私の答えで行くならこれが必要だと思います。
アウトラインを使用してみてください。個人的には、ここでは2色が1色よりも良いと思います。これは、ユーザーが決定を下すときに、ある種の視覚的な階層を示しています。
多色の星の評価を使用することをお勧めします。これは、最初の例が単一の星である場合、最後の星の形式が不適切であるか、インターフェイスがバグが多い/終了していない)と最初に想定していたためです。。実は半分星でしたが間違って解釈しました。これにより、サイトが混乱し、信頼性が低下する可能性があります。
私の意見では、ほとんどのWebサイトはマルチカラーの星評価を使用しているので、これに固執する必要があります。情報をより高速に処理するために、ユーザーによく知られている必要があります。
ページの下の領域がより着色されているため、より多くの注目を集めるという懸念について、あなたは星の評価に低いコントラストの色を使用するまたはそれらを〜50%透明にすることができます。その他の方法としては、明るい灰色と灰色を使用して、星の評価を示します。
5つすべての星を表示することが重要な主な理由は、それ以外の場合の星の制限が明確でないためです。 (3つ星のページを表示している場合、それがトップマークであると考えることができます。)
また、白抜きの星を使用することをお勧めします。そうでない場合は、グレーの2つのシェードを使用して、1つは非常に明るいものにすることができます。
機能が豊富な星評価ウィジェットは、シナリオでの評価を視覚化するために常に最適です。
また、星を部分的に塗りつぶすことで表示される部分的な評価をサポートする必要があります。また、評価ウィジェット自体をまだ入力されていない評価を取得するための入力フィールドとして使用できるのが最適です。このようなコントロールの動作を見ることができます here 。
評価のアウトラインはうまく機能すると思いますが、そのスターを地理的位置の下の3行目に上に移動することを検討します。重要な情報のようです。
星については、私はほとんどDivyのアウトラインのアイデアに同意しますが、アウトラインの黒の灰色ではなく、マゼンタを使用します。また、両方がマゼンタであると、ボトムが残りのコンテンツを支配することに同意します。そのため、これに対抗するには、アーティストの名前もマゼンタに変更します。これにより、ほとんどのユーザーが最も重要な情報として見つけるものを強調しながら、いずれの部分にもあまり注意を引くことなく、残りのコンテンツの見栄えの良いコンテナが作成されます。