UIデザインにおける色の重み(視覚的に説明)

Rima Gerhard
Rima Gerhard

Follow
10/8, 2018 – 4 min read

色には、それぞれのナチュラルウエイトがあります。 黄色は自然に「軽い」色であり、青と赤は自然に「重い」とみなされます。

一般に暗い色は重いものとして認識されます。 そのため、このような「色」は、「黒」「白」「青」「緑」「赤」「黄」「オレンジ」の5色に分類されます。 また、色相が濃くなると(つまり、色に白が加わると)、より明るく見えます。

色は彩度が高いほど重く見える。

さて、これはどういう意味で、デザインにどう影響するのでしょうか。 簡単に言うと…

上記の理論がよくわかるケース スタディを以下に紹介します。 すべてのテクスチャ、図形、および色は、中央の完全に飽和した赤い再生ボタンにはかないません (放射状のバランスも役に立っています)。 また、背景をぼかすことで、画面への集中力を高めています。 吹き出しの色の濃淡が、ボタンから注意を奪っていないことに注目してください。 下のボタンは、明るい色のターコイズとイエローで、競合することなく、明らかに二次的なものです。 よくやった、Airdrop UI デザイナー!

次は下のデザインについて考えてみましょう。 3行のテキストと、値札を含む1行のテキストです。 どの要素に最も目が行きますか? ビンゴ! 極端に暗いシェードは、明るい活字を明らかに圧倒し、また、色を使って3行と1行のバランスをうまくとっています。 このデザインは左右のバランスも良いのですが、それはまた別の記事でご紹介します。 彩度の高いホット ピンクの背景は、中央の暗い要素と少し競合していますが、中央の位置と重いウェイト (色合い) のおかげで際立っています。 背景にはいろいろなことが起こっていますが(その上、ウェブサイトには動きがあります)、背景のすべてのテクスチャと繰り返されるパターンにもかかわらず、視線はまだ明確な焦点を持っています。

下の構図を見てみてください。 赤と黄色のカップルは、左のカップルよりもはるかに強い視覚的な吸引力を持っており、グリルさえも赤い陰影のために二次的な焦点になることがわかりますか? その強い色彩に、グリーンは太刀打ちできません。 実際、赤いシャツとグリルと赤いアイコンの間には、ちょっとした視覚的競合があります。 もちろん、ライブサイトでは、アイコンにアニメーションをつけて、訪問者がアイコンにもっと注意を払うように促しています。 http://yadrenakopot.ru/

これが、色の太さが UI デザインにどのように影響するかを簡単に説明したものです。 デザイナー ツールキットの多くのツールの 1 つとして、次のデザインで色の太さを考慮に入れていただければと思います。

コメントを残す

メールアドレスが公開されることはありません。