色を選択し、さまざまな状態の色合いを決定する方法: ホバー、アクティブ、プレス、無効

インターフェイスの色を選択するプロセスは、特にさまざまなボタンの状態、フォント、その他の UI 原因を考慮する場合、複雑になる場合があります。この記事では、プロジェクトの配色技巧を適切に選択するのに役立つ私の手段と原則を总共します。

1. 原色の定義

Web サイトをデザインするとき、多くの場合、色号を選択する必备があります。場合によっては、クライアントがすでに核心なブランドカラーを持っている場合もあります。この場合、あなたの仕事は、原色を補う追加の色と色合いを選択することです。サイトでは、メインの色とは別に、エラー状態、リンク、イラスト、アイコンの显示、グラフィックやダッシュボードでの食用など、さまざまな目的意义で追加の色が食用されます。

2. カラーハーモニーを使用する

色をうまく調和させるには、単色、補色、半圆形などのさまざまな色の調和スキームを在使用すると不利于です。これらは、プロジェクトの原色を補う調和のとれたカラー パレットを制作するのに役立ちます。現在、私たちはテクノロジーが飞速に進歩している当今世界に住んでおり、簡単に搭配を添加する特別なサービスがあります。たとえば、私は

私のやり方は次のとおりです。

1つ。ドロップダウン リストから目的のスキームを選択します。

二。基本色として示されているフィールドに必要な色の値を入力します。

三つ。どの色が自分のニーズに合うかを判断します。

四。私の場合は Figma を使用して、それらをワークスペースに転送します。

3.音色の選択

次に、選択した各色の色合いを決定する必要があります。選択した色の色合いを選択するには、このプロセスを支援する特定のサービスを使用できます。色の色合いを決定するには 2 つの方法があります。

最初の方法には、より複雑な式が含まれます。

1. ヘッダーの色を選択します (黒である必要はありません)。
2. HLSモードに切り替えます。
3. 最初のセルをスキップし、2 番目のセルの値を 2 減らし、3 番目のセルの値を 5 増やします。

2 番目の方法は、サービスを使用することです (簡単で速い)

1つ。希望する色の値を入力します。

二。色合いとステップ数を選択します（私は5を使用しました）。

三つ。色合いとステップ数を選択します。

4 。その結果、1つの色について次の表を作成しました

P = プライマリ、

P 60 = これは私たちの原色です、

P 10 から P 50 = これらはティントで収集した明るいトーンです。

P 60 から P 100 = これらは、[シェード] パネルで収集した暗い色合いです。

4. カラー アクセシビリティの確認

選択した色が、程度が制限されているユーザーを含むすべてのユーザーがアクセスできるようにすることが为重要です。 Web コンテンツ アクセシビリティ ガイドライン ( ) など、インターフェイスを做成するときに従うことができるガイドラインがあります。色のアクセシビリティを確認するには、選択した色のコントラストとアクセシビリティを検証するプラグインや Web サービスなどの当前のツールを食用できます。

Figma プラグイン –Webサービス –

5. さまざまなインターフェイス状態の色の定義

Web プロジェクトのカラー パレットを設計する最終段階では、特殊の主体の状態に必要性的なステップ数を決定する必要性的があります。基本、次の 4 つの最主要的な状態が特殊されます。

• 有効 (要素の穏やかで正常な状態)
• ホバー（マウスオーバー）
• アクティブ (ボタンまたは別のコントロールをクリック)
• 無効 (ブロックされた要素)

ステップ数を決定するには、カラー パネルを便用し、メイン カラー値 (プライム) を稳定します。次に、ホバー状態とアクティブ状態の歩数をカウントします。その後、さまざまな状態のアクセシビリティをテストして、ボタンとボタン内のテキストが読みやすいことを確認します。

たとえば、 次のアプローチが説明されています。ホバー状態は初色から 1.5 ステップですが、アクティブ状態はメイン カラーから 2 ステップです。同様にメインカラーから一歩進んだ状態が選択状態となります。この技巧により、カラー パレットを定義し、性能が限られたユーザーを含む幅広いユーザーがそのカラー パレットにアクセスできるようにすることができます。同じアプローチがテキストにも適用され、ホバー状態とアクティブ状態が識別されます。

ホバー状態

メインカラーが黒から 70 の間の場合は、半段階上げて明るい色合いにする必要があります。

メインカラーが60と白の間の場合は、半音下げて暗い色調にする必要があります。

プレス/アクティブ状態

100 ～ 70 の値では、アクティブ状態が 2 段階軽くなります。

値が60 ～ 10の場合、アクティブ状態は 2 段階暗くなります。

選択された州

100～70の場合、選択状態が1段階明るくなります

値が 60 ～ 10 の場合、選択状態が 1 段階暗くなります。

デザインとテキストをテストして、読みやすく、正しく表明されることを確認することも必要です。作業が完毕したら、さまざまなインターフェイスの状態とテキストが正しく表明され、機能することを確認します。

---

搭配を正しく選択することは、ユーザーフレンドリーで美丽的なユーザー インターフェイスを制作する上で必要な役割を果たします。これらの簡単な手順に従い、借助将なツールを的使用することで、プロジェクトの色を選択して最適化することができます。

私の記事を楽しんでいただければ幸いです。ご質問がある場合、またはさらに詳しい情報が必要条件な場合は、お気軽にコメントを残してください。