web-dev-qa-db-ja.com

Dark on LightまたはLight on Dark?

コードを文書化し、コードスニペットを共有し、ドキュメントを作成する非常に技術的なサイトでは、明るい背景で暗いフォントを使用することをお勧めします。

私の目とデザインスキルでは、暗い背景と明るいテキストの方がうまくいきます。いくつかのクライアントは、私が作成した種類のサイトではまったく機能しないと述べています。

テクニカルサイトに適しています。明るい色のフォントを使用した暗い背景または暗いフォントを使用した明るい背景?

28
Traven

個人的な意見を表すだけの他の回答ではなく、 この記事 を紹介させてください。これは、ここでも引用する実際の研究を引用しています:

ただし、ほとんどの研究では、明るい背景の暗い文字は暗い背景の明るい文字よりも優れていることが示されています(リフレッシュレートがかなり高い場合)。たとえば、バウアーとカヴォニウス(1980)は、明るい背景に暗い文字を使ってテキストを読んだ場合、参加者はテキストを26%正確に読むことがわかった。

彼らが提供するこのための説明は

乱視を持つ人々(人口の約50%)は、白の黒のテキストより黒の白のテキストを読むのが難しいと感じています。これの一部は、光のレベルに関係しています。明るいディスプレイ(白い背景)では、アイリスがもう少し閉じ、「変形した」レンズの効果が減少します。暗いディスプレイ(黒の背景)では、アイリスが開いてより多くの光を受け取り、レンズの変形により、目にぼやけた焦点が作成されます。

これは私が軽い乱視を持っていて、それでもまだ黒地に白を好むので、驚いたことを認めなければなりません。確かにここにもいくつかの優先要素があります。白に黒を印刷する方が、以前よりも安く印刷できます。 (多くの場合、私のアプリケーションの1つは、Androidスタイル)で白地に黒です。

サイドノートを追加しました、50%統計は明らかに間違っています、私は見たところです atafairnumber 研究のそして私が今見たすべての情報源は35%以下の数字を与えています。それに加えて、乱視を持つすべての人がこれに問題があるわけではありません(例えば、私)、そしてあなたはおそらくあなたがあなたのユーザーの25%未満について話しているところまで行きます。たくさん?確かに、しかしそれはそれを展望に入れます。

全体的にユーザーに選択肢を与えることは良い考えかもしれませんが、2つの別々のデザインを維持することは決して楽しいことではありません。別の方法は、それらを 画面反転ツール に送ることです。確かに、これは最良の解決策ではありませんが、極度の乱視を持つ人々の問題を少なくとも解決できます。

33
David Mulder

これ 投票結果 約2/3の人が暗い背景に明るいコードを好むことがわかります。

1日8時間ほど光を凝視している場合、眼鏡技師は暗い色の配色を推奨しますが、目には暗い色の配色にする方が簡単です。

graphic design stack-exchange に関するこの投稿も読んでみてください。これは別の見方を示唆しています。

8
4dgaurav

私たちは薄い紙の上で濃いインクで読むことを学びます、そして日常でさえ、私たちの読書のほとんどはそのモードです。したがって、ほとんどの人はライトオンダークを好みます。コントラストが適度に高く、文字がくっきりしていて、白い背景が過度に明るくない(まぶしさ)限り、ほとんどの人が満足します。ライトオンダークは、初期のテキストのみの端末(IBM 3270など)の時代からのホールドオーバーであり、一部の人々はまだそれを好んでいます。構成可能性で両方の関係者を満足させることができれば、すばらしい。そうでない場合は、対象の視聴者からライトオンダークを好むというフィードバックを受け取らない限り、ダークオンライトを使用します。

あなたを好むからといって、ライトオンダークを好むからといって、他の人にそれを強制する言い訳にはなりません。ライトオンダークを好むのは少数派だと思います。設定可能な前景色と背景色が理想的で、白地に黒を設定するのが適切です。

5
Phil Perry

目には「より簡単」なだけでなく、ユーザーエクスペリエンスに関して考慮すべき要素が他にもあります。

白地に黒にはいくつかの利点があります。 1つはprintingです。本当に良いスニペットを見つけたら、それを印刷して、ワークステーションの隣の壁にピン留めして、簡単に参照できます。バス、飛行機、ベッドの中で、どこにいても、長い記事を印刷して、メモを取り、それを強調表示できるようにする場合もあります。これらは、ユーザーが印刷する理由の多くの使用例のほんの一部です。ただし、一般に、白地に黒を使用すると、使用するインクやトナーが大幅に少なくなります。黒の上に白を付けると、一部のブラウザはテキストを白の上に薄い灰色で印刷します(デフォルトでは背景色は印刷されないため)。判読できません。

それで、あなたは先に進んで、素晴らしい、私はそれをよりきれいに印刷したいので、反転色でprint stylesheetを作成します。画面上では黒地に白のみになります。印刷すると、色が逆転してうまく印刷されます。

2番目の使用例。私は実際にこれをたくさんします。特定のトピックに関する一連の情報を収集しようとしているので、Word文書に関連するコピーして貼り付けセグメントを作成しています。その後、それをメモなどに圧縮します。 「逆」の色を使うとイライラします。 Word文書で判読できるIDEのような色できれいに印刷されたコードの代わりに、白い背景で読みにくく、印刷が不十分な色があり、手動ですべての色を変更する必要があります。

さらに、一部の人々にとって、色の選択はプロ意識または期待への適合の指標となる場合があります。多くのニュースサイト、プロのサイト、さらにはスタック交換でも、良くも悪くも、黒ではなく白を使用しています。

多くの人にとって、ここの色の好みは強いpreferenceであることがわかります。ある方法でそれを好む人もいれば、別の方法でそれを好む人もいます。私の経験では、ほとんどが暗い色のテキストでコンピュータ画面を好む人は、非常に強い好みを持っています。他の方向では、彼らの好みについての確信の程度は異なるかもしれません。どちらがより人気があるかについての統計はありませんが、確かにかなり主観的です。

あなたは本当に暗闇よりも光を好むように見えるので、私は両方の設定に対応するにすることは難しくないことを指摘しておきます。実行時にスタイルシートを交換したり、スタイルシート設定を設定するためのユーザーCookieを用意したりするのは簡単です。画像を明るい背景と暗い背景の両方で見栄えよくすることは少し手間がかかりますが、画像が作成されて「白く輝く影」などにならないように考慮されている限り、どちらも不可能ではありません。

そして、他の人がすでに指摘したように、画面の色を反転させることは、希望しない配色を採用する場合は常にオプションです。

4
Jessica Brown

これは通常、個人の好みによるものです。たとえば、私が働いている場合、何人かの人々が暗い背景/明るいテキスト設定を有効にしています。一方、私は明るい背景/暗いテキストで作業することを好みます。

可能であれば、両方を許可し、ユーザーが好きなものを選択できるようにします

2
Joe

ウェブサイトの特定のグループや分野に「最高のスタイリング」のようなものはないと思います。あなたが言ったように、同じドキュメント/ウェブサイトを使用する2人の人は、何が最もうまく機能するかについて非常に異なる認識を持つことができます。

両方を作成して、ユーザーに決定させることをお勧めします。私が考えることができる例は、「ふざけて」あなたがウェブサイトの見た目を変えることができるlast.fmです。ただし、last.fmの場合は、必ずしも必要ではありません。

さらに、かなり長い間、コマンドプロンプトとターミナルを操作してきたので、明るいテキストで暗い背景を好むと仮定しています。 この記事 は、質問に直接答えることはできませんが、さまざまなタイプのユーザーに最適な方法を考える方法を提供します。たとえば、テクニカルWebサイトのすべてのユーザーが端末画面に慣れるわけではありません。

1
JonSpr

コードスニペットを共有する最良の方法は、 [〜#〜] ide [〜#〜] と同じようにスタイルを設定することです。異なる開発者が異なるIDEを使用するため、これはユーザーごとに異なる可能性があります。おそらく、[[IDEの名前]のようなレンダリング]オプションを使用したプルダウンが解決策になる可能性があります。これをCookieなどに保存すると、より多くのスニペットを表示するときに、ユーザーが作業しやすくなります。

ドキュメントに関しては、タイポグラフィのほとんどのルールがここで適用されると思います。私の経験では、ほとんどのドキュメントは白地に黒ですが、ドキュメントに関する経験はほとんどありません。

1
Ruudt

それはユーザーに依存しますが、個人的には palinopsia と呼ばれるややまれな病状に苦しんでいます。最悪)。個人的には、明るい背景に暗いテキストを毎回選択します。

誰もが違うので、そうすることができます。

  1. 人々に色の選択肢を与える
  2. お気に入りの配色に投票するために投票するようにユーザーを招待します
  3. 自分と同じようなサイトを見て、配色を彼らのものに基づいてください
  4. 2つのバージョンのサイトを同時に実行し、両方を異なる配色にし、分析サービスを使用して、両方のバージョンの直帰率と平均表示時間を確認します。数週間後、勝者を唯一のバージョンにします。
1
Joseph

説明とドキュメントは、明かりの上で暗く書く必要があります。コード例は、暗闇ではなく明かりで書く必要があります。さらに、記述されているコードのタイプごとに同じ色を使用する必要があります。

読者が何を探しているのかを自問する必要があります。経験豊富なコーダーは、実際に中括弧を忘れてしまうのでしょうか?まあ、それは大きな問題ではありません。大きな問題は、彼が参照しているときに彼が探している情報を見つけるのに10秒以上かかるか、それとも彼が勉強しているときにまったく遅くなるかです。

これには標準化はありませんし、そうすべきではありません。

何をするにしても、厄介なスタイル lwn.net は避けてください。

0
Paul