web-dev-qa-db-ja.com

長時間の作業が必要なアプリケーションにはどの配色を選択しますか?

私はERP/Accounting(lots of tables and data)web app)に取り組んでいて、このタイプのアプリケーションに適したカラースキームは何かと思っていましたか?ユーザーは自分の前に座っています。コンピューターが8時間以上、毎日大量のデータを監視しているので、私はその経験をできるだけ快適にしたいと考えています。

私が見たこれらのアプリケーションのほとんどは、白が支配的な何らかの白/グレー/青のスキームを使用していますが、この色が特にモニターの異なる明るさや暗闇での作業を考慮すると、目が疲れるのではないかと心配しています。

任意の助けいただければ幸いです。

46
Mirko Filipovic

良い配色が役立ちますが、ここで注意すべき重要な点は、読みやすさを向上させるためのコントラストの必要性です。これを引用するには eyemagzineの記事

白い背景に薄い灰色のテキストと小さなテキストサイズは、どちらも眼輪筋活動の増加と瞬きの減少につながります。これら2つの条件はテキストの品質に関連しており、フォントの品質が悪い、または文字の間隔が狭い場合に、目の疲労の同様の指標が見つかると予想されます。

十分なコントラストを備えた良い色の組み合わせの例については、これを読むことをお勧めします Xの問題に関する記事 これは、目の疲れを最小限に抑えるためにどのコントラストを選択するかを示すものです。

コントラストによるテキストの可読性の確保

テキストの背景の背景には、単色の対照的な色を使用し、テクスチャやパターンの使用を避けます。これにより、レターフォームの区別が困難になったり、読みにくくなったりする可能性があります。テキストの色と背景色の組み合わせは注意して選択してください。本文とその背景色の値のコントラストは、最低でも約80%にする必要があります。

白い背景とのコントラスト

白い背景に黒いテキストを使用すると、コントラストが最大になり、本文のテキストが読みやすくなります。チャコールグレー(#333333)のテキストと白い背景のコントラストは約80%です。このため、コントラストの値は最小限に抑えられます。 -

次の濃い色は、白地のテキストのコントラストと読みやすさを示しています。

enter image description here

眼精疲労の軽減に関するコントラストの重要性については、以下の記事で詳しく説明しています。

コントラストと読みやすさ「最高の読みやすさを提供するには、テキストが背景の色相と明度の両方で適切に対比されていることを確認してください。」

最高の読みやすさを提供するために、テキストが色相と価値の両方でその背景と十分に対照的であることを確認してください。テキストの色相または値とその背景色のコントラストが不十分である場合、テキストはぼやけて見えるか、その周囲にハロー効果があり、読みにくくなり、目の疲れを引き起こします。

とはいえ、テキストとサイズの選択も重要です。上記のr eferenced eye Magazineサイト 記事を引用するには

デザイナーは通常、読者が一定期間読むことが期待される場合に高品質のテキストを使用しようとしますが、快適なテキストサイズを使用することが常に可能であるとは限りません。印刷では、タイプサイズとページに収まるテキストの量との間にトレードオフがあります。費用対効果が高いため、9点タイプを選択できますが、11点タイプは視覚的に識別しやすく、目の疲れを軽減します。読者は印刷されたページよりも画面から離れていることが多いため、12ポイントのテキストがコンピュータ画面の文字を適切に定義するために必要になる場合があります。ページ。デザイナーは、目の疲れの影響を減らすために、テキストサイズを大きくする必要があると主張する必要があります。

アクセシビリティの観点から、 推奨コントラストレベルに関するW3Cガイドライン も参照することをお勧めします。

1.4.3コントラスト(最小):次の場合を除いて、テキストとテキストの画像の視覚的表現は、少なくとも4.5:1のコントラスト比を持っています。 :(レベルAA)

  • 大規模テキスト:大規模テキストと大規模テキストの画像のコントラスト比は少なくとも3:1です。

  • 付随的:非アクティブなユーザーインターフェイスコンポーネントの一部であるテキストまたはテキストの画像、純粋な装飾、誰からも見えない、または他の重要な視覚的コンテンツを含む画像の一部である場合、コントラスト要件はありません。

  • ロゴタイプ:ロゴまたはブランド名の一部であるテキストには、最低限のコントラスト要件はありません。

また、ユーザーが暗い場所でも快適に作業できるようにするハイコントラストオプションの提供も検討する必要があります。以下に示すように、Kindleでの処理方法など、複数のオプションを提供することをお勧めします。

enter image description here 暗い部屋でハイコントラストモードを使用する利点については、このスニペットをこちらからご覧になることをお勧めします 記事

ただし、暗い背景に明るいテキストを使用すると、暗い部屋でより少ない光を引き付けるという利点もあります。

とはいえ、色を逆にしながら これにより、読みやすさが向上することを確認してください

色を反転させるとき(たとえば、黒の背景に白のテキスト)は、フォントの太さを調整し、追跡を増やし、減らすようにしてください。これは、メジャーのすべての幅に適用されます。黒い背景に白いテキストを使用すると、対照的にコントラストが高くなります。そのため、文字の間隔を広くし、重量を減らし、線の間隔を広げる必要があります。

最後に、最終的な決定を下すのに役立つ可能性のある、コーディングに適したカラースキームに関する記事をいくつか紹介します(アプリケーションはコーディングを行うユーザーを処理しませんが、使用例はここで同様です)。

ソラライズされたカラースキームは、コードを長くするのに役立ちます :記事を引用します

ただし、Solarizedは、デザイナーの個人的な好みに基づいて読みやすいと主張しているだけではありません。プロジェクトの責任者であるEthan Schoonoverは、プロジェクトサイトでの決定の背後にある根拠を明確に説明しています。最も目立つのは、選択的コントラストの使用です。

「晴れた夏の日、私は外で本を読むのが大好きです。太陽の下では正しくありません。明るすぎます。木の下の日陰の場所を探します。網掛けされた紙は、くっきりとしたテキストとうまく対照しています。 2つの間のコントラストを実際に測定すると、選択したディスプレイデバイスの白い背景に黒のテキスト(または黒に白)のテキストよりもはるかに低いことがわかります。コンピュータディスプレイからの白地に黒のテキストは、直射日光の下で本を読むのと同じで、目を疲れさせます。ソラリゼーションは、明るさのコントラストを減らしますが、多くの低コントラストのカラースキームとは異なり、構文を強調表示して読みやすくするために、(カラーホイールの関係に基づいて)対照的な色相を保持します。目の疲れを軽減したい開発者の間で人気のある白地に黒のテーマは、白地に黒のテーマを改善したものですが、コントラストはまだ非常に優れています。

ここにチェックする価値のあるいくつかのリンクがあります

vimの配色

良いものIDE配色

48
Mervin

最近、データを集中的に使用するプロジェクト管理アプリで作業しているときに、薄い灰色の背景(#f3f3f3)、非常に微妙なボックスシャドウのある白い(#fff)「カード」、そして薄い黒(#333の#585858)を使用することを選択しましたカード上のテキスト。ユーザーが読む必要のある領域は目立ちますが、まだ白いです。文字と背景のコントラストが目に優しいです。リンクやその他の色には、「パステル」タイプの色合いを使用したので、暗すぎず、明るすぎません。

このアイデアは、Google +、LinkedIn、PodioなどのWebアプリケーションを見るとわかりました。これらのUIキットのスクリーンショットを確認してください。この傾向はごく一般的なようです。

enter image description hereenter image description hereenter image description hereenter image description hereenter image description here

問題は、これはトレンドか、それとも実際にユーザーにとって良いのかということです。私の経験では(暗い要素とすべて白い背景を持つWebアプリケーションを取り、それを「フラット」にし、灰色の背景と「カード」を追加する)、これはより良いルートのように思えます。これは、再設計の前後にアプリを頻繁に使用しているユーザーからのフィードバックに基づいています。

5
avi

長いコピーでは、反転したテキストを読むのは本当に難しいといつも感じていましたが、長い間、それは天の恵みです。ほとんどのプログラマーが自分の環境をどのように見ているかを検討してください。これには十分な理由があります。

PHPStorm Darcula theme

JetBrains Darculaテーマはハイコントラストデサチュレートの両方であるため、非常に人気があります。あなたは同様に目に楽しいミッドナイトブルースで同様のオプションを提供することができます。明度スケールの上部と下部の20%も削除することに注意してください。

このような小説を読んでみませんか。おそらく違います。このスタイルのインターフェイスは、情報ブロックを何時間も消化するのに最適です。段落にはひどいです。

2
Imperative

白または別の明るい色のライトグレーと他の明るい色合いは、一部の人にとっては純粋に悪です。読めません。誰もがただ愛する甘草エキスアイスクリームあなたはそれが素晴らしい味だと思います。

人々がさまざまなモニターでこれらの組み合わせを調整せずに試して、一部で許容できるものが実際には存在しないことを確認するのは良いことですその他。 Googleマップのコントラストを下げる動きの1つが実際にroadsをいくつかのモニター設定に持っていることを知ったとき、私は実際に圧倒されました。

個人的には、上記のaviの画像の約3/4が、煩わしすぎるので失敗します。

0
Mike