Hi! im product designer. Im here to make your knowledge about design design process more remarkable
Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.
The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.
インターフェイスの色を選択するプロセスは、特にさまざまなボタンの状態、フォント、その他の UI 要素を考慮する場合、複雑になる場合があります。この記事では、プロジェクトの配色を適切に選択するのに役立つ私の方法と原則を共有します。
Web サイトをデザインするとき、多くの場合、配色を選択する必要があります。場合によっては、クライアントがすでに主要なブランドカラーを持っている場合もあります。この場合、あなたの仕事は、原色を補う追加の色と色合いを選択することです。サイトでは、メインの色とは別に、エラー状態、リンク、イラスト、アイコンの表示、グラフィックやダッシュボードでの使用など、さまざまな目的で追加の色が使用されます。
色をうまく調和させるには、単色、補色、三角形などのさまざまな色の調和スキームを使用すると有益です。これらは、プロジェクトの原色を補う調和のとれたカラー パレットを作成するのに役立ちます。現在、私たちはテクノロジーが急速に進歩している世界に住んでおり、簡単に配色を生成する特別なサービスがあります。たとえば、私はcolor.adobe.com を使用します。
私のやり方は次のとおりです。
1つ。ドロップダウン リストから目的のスキームを選択します。
1つ
二。基本色として示されているフィールドに必要な色の値を入力します。
二
三つ。どの色が自分のニーズに合うかを判断します。
四。私の場合は Figma を使用して、それらをワークスペースに転送します。
次に、選択した各色の色合いを決定する必要があります。選択した色の色合いを選択するには、このプロセスを支援する特定のサービスを使用できます。色の色合いを決定するには 2 つの方法があります。
最初の方法
1つ。希望する色の値を入力します。
1つ
二。色合いとステップ数を選択します(私は5を使用しました)。
二
三つ。色合いとステップ数を選択します。
三つ
4 。その結果、1つの色について次の表を作成しました
P = プライマリ、
P 60 = これは私たちの原色です、
P 10 から P 50 = これらはティントで収集した明るいトーンです。
P 60 から P 100 = これらは、[シェード] パネルで収集した暗い色合いです。
四
他の色、テキスト、およびエラー状態についても同じプロセスを繰り返します。
選択した色が、能力が制限されているユーザーを含むすべてのユーザーがアクセスできるようにすることが重要です。 Web コンテンツ アクセシビリティ ガイドライン ( WCAG ) など、インターフェイスを作成するときに従うことができるガイドラインがあります。色のアクセシビリティを確認するには、選択した色のコントラストとアクセシビリティを検証するプラグインや Web サービスなどの特定のツールを使用できます。
Figma プラグイン –コントラスト
Webサービス – Coolers
カラーアクセシビリティのチェック
Web プロジェクトのカラー パレットを設計する最終段階では、特定の要素の状態に必要なステップ数を決定する必要があります。通常、次の 4 つの主要な状態が特定されます。
州
ステップ数を決定するには、カラー パネルを使用し、メイン カラー値 (プライム) を固定します。次に、ホバー状態とアクティブ状態の歩数をカウントします。その後、さまざまな状態のアクセシビリティをテストして、ボタンとボタン内のテキストが読みやすいことを確認します。
たとえば、 IBM のガイドラインでは次のアプローチが説明されています。ホバー状態は初期色から 1.5 ステップですが、アクティブ状態はメイン カラーから 2 ステップです。同様にメインカラーから一歩進んだ状態が選択状態となります。この方法により、カラー パレットを定義し、能力が限られたユーザーを含む幅広いユーザーがそのカラー パレットにアクセスできるようにすることができます。同じアプローチがテキストにも適用され、ホバー状態とアクティブ状態が識別されます。
メインカラーが黒から 70 の間の場合は、半段階上げて明るい色合いにする必要があります。
ホバリング
メインカラーが60と白の間の場合は、半音下げて暗い色調にする必要があります。
ホバリング
100 ~ 70 の値では、アクティブ状態が 2 段階軽くなります。
値が60 ~ 10の場合、アクティブ状態は 2 段階暗くなります。
アクティブ / 押す
100~70の場合、選択状態が1段階明るくなります
選択された
値が 60 ~ 10 の場合、選択状態が 1 段階暗くなります。
選択された
デザインとテキストをテストして、読みやすく、正しく表示されることを確認することも重要です。作業が完了したら、さまざまなインターフェイスの状態とテキストが正しく表示され、機能することを確認します。
これらは私の経験に基づいたヒントであることに注意してください。独自の手順を追加したり、順序を変更したりできますが、テキストのコントラストやさまざまなインターフェイスの状態がどのユーザーにも読みやすいように、アクセシビリティ テストを行うことを忘れないでください。
配色を正しく選択することは、ユーザーフレンドリーで魅力的なユーザー インターフェイスを作成する上で重要な役割を果たします。これらの簡単な手順に従い、利用可能なツールを使用することで、プロジェクトの色を選択して最適化することができます。
私の記事を楽しんでいただければ幸いです。ご質問がある場合、またはさらに詳しい情報が必要な場合は、お気軽にコメントを残してください。
色を選択し、さまざまな状態の色合いを決定する方法: ホバー、アクティブ、プレス、無効 | HackerNoon