web-dev-qa-db-ja.com

グレースケールの配色はUXにどのような影響を与えますか?

黒、グレー、白(リンクを含む)以外の色がないウェブサイトのデザインを考えています。

青、緑などの色がないと、デザインのユーザーエクスペリエンスに影響しますか?はいの場合、どのように?

80
user4662

黒、グレー、白以外の色がないウェブサイトのデザインを考えています。

この決定の根拠は何ですか?私が尋ねる理由は、クライアントのブランディングがそのスキームに適合しない限り、純粋なB/G/Wがほとんどの商用デザインに適しているとは思えないからです。したがって、この方法を選択する前に、設計上の決定が現在の目的に適していることを確認してください。

そうは言っても、B/Wサイトは美しいかもしれません!

色が不足しているため、いくつかの要素は通常のアフォーダンスを失う可能性があります。したがって、スタイリングに関しては、それらを考慮する必要があります。

テキストリンク

カラーリンクを使用すると、下線を引かなくても済むようになります。黒のリンクでは、それらに下線を引くか(これにより、大きなリンクでテキストの大きなブロックに読みやすさの問題が生じる可能性があります)、または異なるスタイルを設定する必要があります。私が見た典型的な解決策は、薄い灰色の背景色、または明るい色の点線の下線をリンクに与えることです。

ボタン

ほとんどのミニマリストのB/Wサイトには、「フラットな」インターフェースがあります。したがって、一般的な3D泡ボタンは、全体的なデザインでは正しく表示されない場合があります。全体をフラットな見た目にする場合は、「フラット」なドロップシャドウも使用できます。このようにして、デザインの一貫性を維持し、ボタンのアフォーダンスを実現します。

読みやすさ

一部の芸術的なサイトでは、黒い背景に白いテキストを使用しています。通常、コピーは短く、読み取り用ではなくスキャン用であるため、これで問題ありません。これらのサイトの性質は、写真やその他の種類のアート作品のショーケースに近いものです。ただし、テキストが多いサイトの場合は、暗いテーマは避けます。 難しい方法 を学びました。圧倒的に否定的なフィードバックがあったため、私はデザインを引き出さなければなりませんでした。

画像

コンテンツがユーザーの生成したものである場合(制御不能)、サイトのデザインの他の部分でコンテンツが正しく表示されるかどうかを検討する必要があります。しかし、通常、これはそれほど大きな問題ではありません。

まだもっと問題があると思いますが、今考えられるのはそれだけです。


白黒デザインに関しては、いくつかのテクニックを使用できます。

空白とグループ化

www.rodrigogalindez.com

サイトの要素の階層を強調する色がないので、印刷上の扱いと空白の使用に頼る必要があります。私は The Gestalt Principles を読むことをお勧めします。

色としての白

metro gallery

ClearType Press

これは私のお気に入りのテクニックの1つです。サイトまたはコンテンツ領域の背景をグレーまたはライトグレーにすると、白をアクセントカラーとして使用できます。これはあなたにもう一つの色を買います。また、ホワイトとライトグレーの微妙な違いもレイアウト構造を確立します。

太字の写真ステートメント

Subtraction.com

もちろん、カラフルなサイトでもこれを行うことができます。典型的なモノクロサイトに付属するミニマリストのデザインでは、写真がさらに注目されます。それらは通常、サイトの主要部分、または特定のコンテンツ記事です。

グレーには温度があります

cool gray #e8ecec warm gray #ecece8 mikemcquade.com/

グレーは不思議な色です。その中間色は、周囲の色に基づいて錯覚のように変化します。純粋な白黒デザインの場合でも、暖色系または冷たい灰色を選択することで、サイトの雰囲気に影響を与えることができます。もちろん、純粋なグレースケールにはならないので、これは技術的に不正行為です。

パターンを使用する

Erratic Wisdom

いくつかの無地で遊んでいるからといって、サイトが裸である必要があるわけではありません。微妙な幾何学模様を使用して、サイトをより視覚的に磨くことができます。もちろん、邪魔にならないように適切に使用してください。 http://www.squidfingers.com/patterns/ には、グレースケールに簡単に変換できる優れた幾何学模様がいくつかあります。


以下は、B/Wミニマリストのデザインを紹介するかなり良いサイトです。 (ただし、すべてのデザインが純粋な白黒であるとは限りません)

117
Jin

正しく設計されていれば、ナビゲートがずっと簡単で簡単になる可能性があります。色を使用することは、注意を向けるのに最適な方法ですが、必須ではありません。優れたユーザーインターフェイスのデザインは、白黒で独立できる必要があります。それは素晴らしいデザインの真のテストです。

編集:シンプルだが非常にクリーンで洗練されたサイトは Jin Yangのブログです

また、白黒のみのサイトのこの大規模なギャラリーもご覧ください: これらすべてが優れたUXデザインを備えているとは言えませんが、ほとんどはかなり古く、古くて古くはありません。

7
Matt Rockwell

私は1つの問題があると思う:色なしオブジェクトの状態を十分に明確にすることは非常に困難です(たとえば、アクティブと非アクティブ、またはリンクとアクセス済みリンク)。不可能だとは言いませんが、賢いグラフィックデザインのコンセプトが必要になります。

あなたが思いつくものを見て素晴らしいと思います!

7
Phil

色彩効果の科学的証拠はほとんどありませんでしたが、ほとんどは文化的、経済的、社会的です。したがって、この点で、あなたの質問への答えはあなたのユーザーを知ることです。

視覚的な注意という点では、単色のデザインがUXに影響を与えることはないと主張します。顕著性は、デザインを検討する際の重要な要素です。そして、顕著性には多くの側面があります。あなたが言及したものの一つ。

色は、色相、明度、彩度の3つの統合された次元です。黒の値を変更すると、グレーの範囲が生成されます。作成されたコントラストは、顕著性の非常に効果的な側面です。その他には、空白、パターン、サイズがあります。

実際、さまざまな色相をデザインで使用できますが、視覚的なフローを指示するための値の範囲と比較して何もしません。生物学的には、視野全体の2度だけが色相を検出できます。残りは明るい、暗い、パターンを検出します。

典型的な例として、ユーザーは鮮やかで派手な色の完全なサイドバーに参加しないことをすぐに学びます。ドットコムブームの最中にオンラインだった人は誰でもその目撃者です。

6
ashley

それは間違いなくユーザーエクスペリエンスに影響を与えます。私は悪い影響を与えるとは言いません。ただし、ルックアンドフィールの点でエクスペリエンスに影響します。多分フィルムノワールまたはいくつかの純粋なバウハウスタッチ?たとえば、白黒写真は常に「私は年を取っている」ことを示唆しています。それらの「色」を使用するスタイルによって異なります。それは確かに挑戦であり、あなたは結果を共有する必要があります。 :)

アクティブな要素の設計に非常に一貫性を持たせるようにしてください。たとえば、リンク、ボタンなどです。色を使用しないので、白黒で機能し、ユーザーに「ちょっと私を使って、私はアクティブです」と叫ぶ視覚的な言語が必要です。

4
erikrojo

実際には、よりバランスの取れたインターフェースを追求し、単にカラーリングするのではなく、全体的なUXに焦点を当てるために、カラーを手放すことを考えている場合、それはインターフェースの改善になるかもしれません。そうでないと主張する人々にとっては、バウハウス、構成主義、および関連する運動からいくつかのテキストを読むことは有益かもしれません。

現代の印刷では、ほとんどの場合Webデザインで色が「安く」なっているため、これによりデザイナーは、モノクロレイアウトを使用しても同じ(またはおそらくそれ以上)の結果を得ることができないと考えるようになりました。正直なところ、十分な才能があれば、サイトのデザインでメッセージを伝えるのに色は必要ありません。色は、あなたが伝えようとしている意味のあるメッセージを強調するかもしれませんが、繰り返しになります-デザインがうまくいっていても、色はエンハンサーとしてのみ機能し、メインメッセージには影響しません。これは、サイトにrealデザイナーの採用を検討する理由でもある可能性があります。デザインは、書体とレイアウトだけではありません。十分な数のサイト/印刷物を見ていて、ごくわずかな常識があるブロークは、あちこちからコピーできます。モノクロサイトなどの制限付きで同じメッセージを伝えるには、通常、もう少し知識/洞察が必要です。

別のトピックでは、#e8ececと#ecece8(前の回答の1つで述べた)が実際にはグレーの色合いではないことに注意する必要があります。真のグレーシェードになるには、3つの基本的なWebカラーのそれぞれに同じ値を設定する必要があります。

#ecece8は青の色合い、#e8ececは赤の色合いです。真の灰色は#xxyyzzパターンに従います。ここで、xx == yy == zzです。

3
Luis

色がないことは、多くの点でユーザーエクスペリエンスに明らかに影響します。他のデザイナーが述べたように、色はインターフェイスの状態を示し、ユーザーに特定の要素に注意を向けさせるのに役立ちます。さらに、色もサイトの雰囲気や雰囲気を作り出します。例青色が好きなので、配色が青色のサイトが好きです。

ただし、黒、白、グレーだけで言及されたエクスペリエンスを生成することは確かに可能です。その例を見るのは素晴らしいことです。

探索する時間です。

2
Poyi

黒/白/灰色は私にはいいように聞こえますが、テキストリンクが従来の青色ではない場合、必要なクリックスルーが得られない可能性があります。

コンセプトをテストする1つの方法は、モニターをグレースケールモードにすることです。私のサムスンはこれをサポートしています-モニターにはそのメニュー設定がないかもしれませんが、それはあなたに色のないウェブがどのように見えるかのアイデアを与えます。

IEユーザーに青いリンクを、Macユーザー(既にモノクロインターフェイスを持っている)に灰色の外観を与えるために、異なるスタイルシートを使用することもできます。

2
ʍǝɥʇɐɯ

私は個人的に、ハイライト用にパステル調の小さなスプリンクルを備えた白黒(読み:グレースケール)が好きでした。ページが主にグレースケールである場合、ハイライトをカラーで配置することにより、特定の要素に注目を集めることがはるかに容易になるためです。一方、フルカラーページのカラフルなハイライトやフルカラーページの白黒のハイライトは、見落とされがちです。

0
Lie Ryan

私のデスクトップアプリケーションでは、さまざまなタイプのデータをすばやく識別するために色分けを使用しています。例:すべての正の通貨金額は緑、負の金額は左側に負の記号が付いた赤、点滅する赤のデータは警告、重要なデータは明るい黄色、日付はシアン、フィールドキャプションはすべて白など。

また、ユーザーの目を休ませながらデータをすばやく見つけやすくするために、黒の背景を「ハイコントラスト」として使用しています。

以下のスクリーンショットでは、金やプラチナなどの貴金属を表すために色分けを使用しています。

enter image description here

0
Frank R.