色分けとデフォルトのボタンの色
コンテキスト：ゲーミフィケーションを使用した社会調査に関するウェブプロジェクト。
7つの主要なプロジェクトモジュール（投票、分析、ゲームなど）があり、それぞれに対応する色があります。背景、ウィジェット、アイコンなどで使用されるその色。ボタンでも使用されます。
開発の途中で問題が発生した。カラーコーディングの衝突を明らかにします。モジュールベースとデフォルトのアクションボタンの色（削除の場合は赤、保存の場合は緑または青）。
したがって、いくつかのオプションが表示されます（すべてどういうわけか弱い）。
デフォルトのアクションボタンの色を無視して、色を使用します。
弱点：ユーザーは黄色の「保存」ボタンと混同される可能性があります。混合色コーディングを使用：モジュールベースのコーディングから緑、赤、青を除外する。
弱点：意味のある色が多すぎる。すべてのボタンに単一のニュートラルカラーを使用します。たとえば白や灰色。
弱点：プライマリアクションボタンは、セカンダリボタンと視覚的に区別されません。モジュールの色分けの使用を大幅に減らします。たとえば、ヘッダーの背景のみに使用します。
弱点：混合色コーディング、モジュール認識の弱化、モジュールへのリンクまたは対応する機能をその色で強調するための適切なオプションの喪失。
それで、私たちが見逃している他のオプションはありますか、そしてどちらがより良いと思われますか、そしてなぜですか？
すべてのデザインに弱点があるのは正しいです。これに対して万能のソリューションがあるかどうかはわかりません。つまり、テーマに組み込む色が多いほど、各色の意味が少なくなります。
しかし、あなたが豊富な色を持っている必要があるなら、私はこれを可能な解決策と見なします：
- 背景-セクションカラーの明るく薄いバージョン
- プライマリボタン-白色のテキストを含むセクションカラーの鮮やかなフルバージョン
- セカンダリボタン-セクションカラーの鮮やかなバージョンのライトグレーボタン
たとえば、オレンジ色のテーマのセクションがある場合は、次を使用してプライマリボタンとセカンダリボタンを通信できます。
このパターンを使用すると、「どこでも緑が主である」という考えは失われますが、より強力でより特徴的なセクションテーマを作成できます。すべてのボタンの視覚的な重みがほぼ同じになるまで、各メインボタンの色を微調整することは可能だと思います。
まず、テキストやアイコンをサポートしない色分けはアクセシビリティにとって非常に悪いことを指摘しなければなりません。
元の色のミュートバージョンのセカンダリパレットを生成することをお勧めします。背景にはミュートバージョンを使用し、インタラクションポイントにはストロングバージョンを使用します。
多くのアクションがあるので、すべてのアクションを区別するのではなく、アクションの重要性を示すために色を使用します。
- メインカラーを使用して、アクションが割り当てられているメインの相互作用要素を示します。または、インタラクティブな要素の状態を強調します。
- セカンダリアクションに、またはヘッダーなどのサイトのセクションを示すために、セカンダリカラーを使用します。
したがって、あなたのケースでは、4に似た解決策です。メインアクションボタンにはメインカラーを使用し、他のアクションにはセカンダリカラーを使用します。
いくつかの情報源：
個々のモジュールに対して行うのではなく、UI全体にわたって視覚的な一貫性を維持するために、すべてのモジュールのカラーパレットをすべて再設計できるとよいでしょう。視覚的な一貫性を維持することは、暗黙のルールを定義することに似ています。そのため、ボタンのデフォルトのカラーコードは、削除と保存の場合はそれぞれ赤と緑になります。
「自宅に近い例を考えてみましょう。台所でフォークやスプーンを探すのに何時間も費やさないでしょうか。何故なの？彼らは同じ場所にいるため、先週とその前の週でした。それは論理的です。あなたは思いません、あなたはただします。ある意味で、一貫性は私たちの日常的なタスクを潜在的なものにします。」 ---（UXブース ）
ユーザーは、自分の家に戻るように、アプリやWebサイトに再度アクセスしたときと同じように感じる必要があります。カラーコードの調和により、ユーザー間の学習曲線が最小限に抑えられ、ユーザーエクスペリエンスが向上します。