これらのアイコンを選択して表示するためのより良い方法は何ですか？
これらは、製品の1つに対して作成したアイコンであり、これらは最終的なものです。
。
しかし、選択したものを表示するためのより良い方法を得ることができないため、問題があります。
これを行う1つの方法は、色を反転させることですが、問題は全体で50を超えるアイコンがあり、開発の観点から、1つのアイコンに対して2つのSVGを開発者に提供する必要があるため、アプリが重くなります。
だから私の問題は：
（a）これらのアイコン（一般的には長い影付きのアイコン）を選択するためのより良い方法。
（b）そして、暗い背景にそれらを表示する方法
。
[〜＃〜] edit [〜＃〜]：対応担当者に感謝しますが、これが私の懸念事項です。暗い背景で選択したものを表示するのは困難です（不透明度を90〜80〜70％に保ちます）。これは私が可視性の問題によって意味したものです。
暗いBGに白いアイコンを追加してみましたが、見栄えが良くありません。
何か提案してください。カードを表示する方法を提案することもできます（現在、背景に黒いオーバーレイ70％のガウスぼかし画像を使用しています）。
「選択済み」を表すには色を使用し、「未選択」を表すにはグレースケールを使用します。暗い背景に対してもこれを行うことができます（「選択された」と「選択されていない」がその暗い背景に対して十分な視覚的コントラストと視覚的調和を持っている限り）。
背景色とアイコン選択用の直線の2つのオプションを提供しています。
- 背景色：灰色のアイコンの一貫性を保つために、奥行きの少ない背景色を試すことができます。これには影があるため、アイコンにも適しています。
- 直線：選択したアイコン領域を示している可能性があります
- カラーオプションの場合：どこかで一貫性が損なわれると思うので、どちらも同意しないと確信していません。選択されていることを示すアプリケーションのどこかに色を使用していますか？はいの場合、一貫性を保つために、このオプションを検討することもできます。
他に何も操作する必要がない場合、状態参照の色は常に役に立ちました。したがって、背景が異なる影付きの境界線であるので、どの背景でも機能する必要があります。
ここでは、単色の濃淡の色合いの組み合わせが便利です。
あなたが述べたとき：
"これを行う1つの方法は、色を反転させることですが、問題は、全体で50を超えるアイコンがあり、開発の観点から、1つのアイコンに対して2つのSVGを開発者に提供する必要があることです。アプリが重い。」
しばらく前に同じような挑戦を思い出しました。だから、これはあなたに役立つと思います。
注：ここの赤い色（背景+枠）は、テーマの色に置き換える必要があります。
ありがとうございました！
代わりにWebフォントの使用を提案してください。 SVGアイコンのロードの負荷が軽減され、コードを使用してアイコンに色を付けることができます。
色を使用してこれを実現できます。使用している環境/言語に応じて。あなたはウェブベースのアプリケーションを開発していると思います。アイコンが選択されている場合は、アイコンの元の色を使用します。それ以外の場合は、クラスが選択されていないアイコンをターゲットにします。これは最も使用されるテクニックであり、認知負荷を軽減します。
これがどのように実装されているかを確認します。選択したアイコンの背景を透明な白いものにし、わずかな影を付けて、アイコンを少し大きくすることができます。このようにして、セクションの背景を気にする必要はありません。スタイルを大幅に変更することなく、アイコンが明確に表示されます。