フロントエンドのカラーデザインのヒント
「1日予約しないと、ペプシは不毛です」
01序文
最近、フロントエンドのインタビューに関する記事「色についての研究はありますか？」を突然見ました。一見、これは設計者が考慮すべき問題ではありませんか？インタビュアーの質問方法も予想の範囲内です。フロントエンドのタスクは、デザイナーの設計図をコードで実装することであると考えます。また、ユーザーエクスペリエンスに関連するカラーマッチングの問題についての意見や意見も提示できます。
色理論の観点から、色の選択は、人の個性、感情、感情、あるいは記憶さえも明らかにすることができます。したがって、ウェブサイトのデザインに色彩理論を使用する場合は、特に一部の公式ウェブサイトのデザインは注意深くする必要があり、製品、企業哲学、または企業の特性に適合している必要があります。
02カラーソース
すべての色は、基本的に3つの原色から派生しています。これは、フロントエンドが使い慣れているRGBカラーマッチングです。三原色は赤、青、黄色を指します。説明を始める前に、次の情報を見てみましょう。
- 原色インターカラー3段階カラー
- 補色と類似色の3つの役割
- 散乱補色
- 暖かくてクールな色
原色：RGB、フロントエンドでおなじみ。すべての色のソースは原色から生成されます。たとえば、テレビ画面のピクセル数が多いほど、表示されるカラーポイントが多くなり、高解像度になります。
インターカラー：
インターカラーは、実際には赤、青、赤、黄、黄、青の混合であり、紫、オレンジ、緑が表示されます。
3色：
3つのレベルの色は、原色と中間色の融合で、一般的な青緑、黄緑などのさまざまな色を生成します。
補色：
カラーホイールから見える2つの反対色は補色と呼ばれます。たとえば、赤と緑は、強い色のコントラストが特徴です。つまり、対立と協調の感覚があります。
同系色：
これらは、カラーホイールの3つの類似色です。
3つの役割：
カラーホイールに正三角形を描くと、対応する色は3つの文字になります。
補色を分散させる：
補色と比較すると、実際には補色の両側の色です。色はより対照的で豊かです。
四方色：
カラーホイール上に正方形を描画します。対応する色は正方形の色です。
カルテット補色：
正方形の補色は長方形の形状を採用し、対応するのは正方形の補色です。
明るい色と暗い色：
色の濃淡によるものです。結果の色は非常に豊かで、一部のテキストまたは背景画像に使用できますが、あまり目立たないようにする必要があります。リラックス感を与えます。
暖かい色：
温かみを感じさせます。たとえば、夏に赤いドレスを着ると、より温かくなります。
クールな色：
冷たい色には、悲観論、秋、夜など、多くの意味があります。しかし、それは静かな、静かな感じかもしれません。
03まとめ
カラーマッチングのために私たちが守らなければならないことは、調和と安定の原則です。衝撃的な色を使用する場合は注意してください。たとえば、ポスターに赤と緑のコントラストを使用すると、目がくらむことがあります。だから私たちのカラーマッチングは優しい優雅さに基づいています。
カラーバランス
- シェーディングによる単色
- メインカラーの周りにいくつかの補助色を使用する
- 低彩度で高彩度
遷移色
補色などのコントラストの強い色を使用する必要がある場合は、中間色を使用してバッファリング、バランスの取れた移行を行い、バランスの取れたバッファリングの感覚を与える必要があります。
同系色
同系色を適切に使用すると、QQのダウンロードページなど、ページレイアウトが調和のとれた外観になり、優しくエレガントでシンプルな感じになります。
ホワイトコロケーション
白はすっきりとしたシンプルな感じがしますが、あまり変更を加えずにシンプルな感じが好きな人も多いと思います。ただし、補助カラーマッチングも使用する必要があります。そうしないと、単調な感じになります。
ケース1：香港の地下鉄の駅はすべて未使用の色で、原色と他の色を混ぜて作られているのがわかります。
ケース2：ドイツのベルリン消防署の色は赤で、警察署の色は緑です。赤と緑の2つの補色が巧みにブレンドされています。
04まとめ
色合わせは、服の色の合わせ方、室内の家のデザイン、壁紙のデザインなど、生活の中身でもあり、色の範囲です。カラーマッチングをある程度理解できて初めて、美的インスピレーションを豊かにすることができます。
カラーデザインやマッチングの問題については、国内の大手企業の公式ウェブサイトを参照してください。デザインのインスピレーションを得ることができます。結局のところ、この記事を書くことは知識を豊かにすることを求めているだけです。フロントエンドはそれについて知る必要があるだけです。慎重に検討する必要はありません。残りはUI部門の設計者に任せることができます。多くの大企業の分業は非常に明確です。
