ダイアログの背景が灰色になるのはなぜですか？
私が見たほとんどのWindows/Mac/Linuxダイアログの背景は灰色です。ダイアログについて、設定ページ、ウィザード、確認ダイアログ、エラーダイアログなど.
ユーザビリティの観点から理由はありますか、それともこれは昔の名残ですか？灰色の背景のテキストとフォームコントロールの読みやすさは、特に無効になっているテキストと入力フィールドも灰色になる場合、最適ではない可能性があります。
私はWindowsプログラムを設計するとき、段階的な開示（詳細ページ、追加、編集など）のために定期的にモーダルダイアログを使用しているため、これらのダイアログには多くのフォームコントロールとテキストがあります。
それらをすべて白に切り替えた場合はどうなりますか？
例：Internet Explorer設定ページの1つ-オリジナル：
同じダイアログ-背景が白になるように編集：
これには実際には「UX」の理由はありません。または、存在する場合、それは非常に限定的なものです。ダイアログの背景が（デフォルトで）ある程度の灰色になっている実際の理由は、一部の設計者がより見栄えが良いと考えたためです。
多くの初期のオペレーティングシステムでは、ダイアログとウィンドウの背景は真っ白でした。元のMac OSでは、1ビットの白黒ディスプレイしかなかったため、明らかに白でした。しかし、Mac IIがカラーディスプレイのサポートを追加した後も、それは長く続きました。
Windowsでは、デフォルト設定のウィンドウとダイアログボックスの背景がWindows 3.1までずっと白でした。
Mac OS 8とWindows 95から（当然、他のオペレーティングシステムもそれに倣い、前例は NeXTSTEP 、 DESQview /などの以前のあまり人気のないウィンドウシステムによってすでに確立されていました。 X 、および Amiga Workbench ）、コントロールに3Dの外観を与えることはデザイナーの間で大流行しました。 Windows 3.1の上記のスクリーンショットで、この最初の部分をすでに確認できます。ボタンコントロールは、すでに3Dの外観になっています。 3D効果を完成させるために、ダイアログボックスは灰色の背景で処理されました。
UIは、コントロールがエッジをシャドウして強調表示するように、グローバルな指向性光源の影響を受けるかのように設計されました。ウィンドウとダイアログのセクションは、「インセット」または「アウトセット」に見えるように面取りされました。実際には、この効果を実現するには、コントロールが置かれた背景（ウィンドウまたはダイアログボックス）に白以外の色が必要です。白はすでに最も明るい色なので、白の背景の上にハイライトを付けることはできません。 3D効果が機能するように、背景のコントラストを下げる必要がありました。
議論の余地はありますが、これがUXの出番です。インターフェイスを3Dに表示すると、より「ユーザーフレンドリー」になると広く信じられていました。この初期段階でさえ、ユーザーインターフェイスの設計がまだ初期段階にあったとき、 skeuomorphismの原則 の出現を見ることができます。画面上のオブジェクトを物理的な対応物のようにすると、ユーザーはそれらとやり取りするとき、より快適になります。たとえば、3Dボタンの方が柔軟性が高い—それらはボタンのように見えます。 「アフォーダンス」として、ドナルド・ノーマンによって最も首尾一貫して表現された）。そして、不思議なことに、ユーザーがクリックすると、実際には配色を変更してボタンを画面にインデント（ "押す"）するように表示するアニメーション効果がありました。
この3Dが、インターフェースをより使いやすく、理解しやすくするという意図した効果を実際に持っていたかどうかを議論することができます。確かにそれは業界で広く受け入れられており、ほぼすべてのコンピュータオペレーティングシステムがこれに準拠しています。みんなのコントロールは少し異なって見えました-いくつかのオプションボタンは丸く、いくつかは正方形で、いくつかは ひし形 —でしたが、それらはすべて同じ3D効果を持っていました。白色の背景。
確かに誰もが同じグレーの色合いを選んだわけではありません。一部の背景は明るい灰色で、他の背景は暗い灰色でした。しかし、さらに良いことに、ユーザーは実際にはグレーで立ち往生していませんでした。ウィンドウマネージャーは、上級ユーザー（または視覚障害を持つユーザー）がシステムの外観を再構成し、異なる色を選択できるカスタマイズフックを提供しました。 3D効果を作成するために、背景の明暗のバリエーションが使用されました。
したがって、間違いなくダイアログの背景が灰色になったことはありません。背景は白以外でした。ダイアログが背景が灰色であると人々が考える理由は、オペレーティングシステムに同梱されているデフォルトのテーマは通常、ベースカラーとして薄い灰色を使用していたためです。繰り返しになりますが、デザイナーは比較的実用的な理由でそれを行いました：灰色は実質的に誰もが同意できる色です。誰もがグレーを好まなくても、誰もはそれを嫌いません—ウィンドウマネージャーを出荷した場合に保証できないものローズピンクまたはティールブルーのダイアログボックス付き。
ユーザー・インターフェース設計の分野が発展した今、これは時々デザイナーを困らせるものです。彼らは多くの作業を経て、色を効果的に使用して、本当に美しいと思うインターフェイスを作成します。それから彼らはそれを彼らの疑いを持たないユーザーにリリースします...それは、結局のところ、絶対に嫌い青です。彼らは一日中じっと見つめる必要がなければ、おそらくそれほど嫌いではないでしょうが、あなたのプログラムは彼らにそれをするように強制します。どこかのデザイナー（またはデザイナーのチーム）が、特定の青の色合いが本当にUIpopを作ったという主観的な意見を持っていたからです。
これは議論の余地がありますが、このような基本的な色の選択は、個々のアプリケーションの設計者次第ではないということを強く感じます。ユーザーは、必要に応じて（個人的な好み）または必要に応じて（アクセシビリティの理由により）配色をカスタマイズする機能を所有する必要があり、各プログラムが独自の外観をカスタマイズするための一意のインターフェイスを提供するにはあまりにも扱いにくいです。はるかに優れたアイデアは、誰もがこれを行うためのオペレーティングシステムの組み込み機能を便乗させることです。そして、追加のボーナスとして、一貫性を取得します。これは、細部の制御を放棄するという考えを絶対に守ることができない設計者にとっては嫌悪感ですが、ユーザーにとって一貫性ははるかに重要です。アプリケーションが使用している他のアプリケーションと同じように見え、機能し、学習に時間をかけている場合、アプリケーションの使用に慣れるまでの時間が大幅に短縮されます。あなたは「次善」であると主張することができます。 darn正当な理由がない限り、一貫性はイノベーションよりも優先されます。青色が好きな方は対象外です。
とにかく、私たちの話に戻ります。ファッションが変化し進化するにつれて、古いものが再び新しいものになります。 Windows VistaはAeroテーマを導入しました。これは、質問の最初のスクリーンショットにあるように、ウィンドウとダイアログボックスで使用される灰色のシェードを明るくしました。 Windows 8では、すべてのコントロールが完全に（またはほぼ）平坦化され、Windows 3.1の時代を思わせる真っ白なダイアログに戻りました。
さらに悪いことに、適切に設計されたウィンドウマネージャーの特徴である（限定された）カスタマイズ機能は、衰退しています。ユーザーは、今回は独立したアプリベンダーではなく、ウィンドウマネージャーの開発者によって制御不能に陥っていました。よく知っている必要がある人。 Windowsが「フラットな」テーマに戻ったのはなぜですか？誰もがウェブ上でそれを行っていたので、デザイナーのチームはそれが「新鮮」で「モダン」に見えると思ったからです。 Webアプリケーションは、主に技術的な制限が原因でこれを開始しました。デスクトップ上の本格的なウィンドウではなくブラウザーで実行されたため、ウィンドウマネージャーにアクセスできず、独自のウィンドウとダイアログを実装します。
明らかに、これらはウィンドウマネージャーのダイアログからインスパイアされたですが、同じではありません。 allすべてのオペレーティングシステムで実行している場合、オペレーティングシステムとの一貫性を保つことはできません。閉じるボタンはどこに配置しますか？ Macでは、誰もがそれが左上に表示されることを知っています。 Windowsでは、それはWindows 95以来右上にあります。Webでは、それがどこにあるのかは誰もが推測しています。ボタンの順序と配置についても同じです。コンピューターをユーザーフレンドリーに見せ始めたばかりの一貫性は、これらのばかげた技術的な制限のために蒸発し始めました。その後、Webアプリの人気が高まるにつれ、そのデザインも定着し始め、より「モダン」に見え、 「古い」デスクトップアプリケーションよりも「新しい」。古いコピー機を再び起動する時が来ました！
残念ながら、まだ一貫性がありません。 Windows 10の一部のダイアログは背景が真っ白ですが、 その他 はまだ薄い灰色を使用しています。理由は明らかではありません。そして、ユーザーはそれをカスタマイズすることはできません。
このトピックについては、間違いなくユーザビリティに関する議論があります。コントラストが重要であることを示唆する実証的研究はたくさんありますが、コントラストが多すぎると疲労につながる可能性があります。白地に黒と黒地に白はどちらも比較的貧弱な選択肢です。しかし、ダイアログボックスを設計するときに、誰もがこれらの議論を考慮したという証拠はありません。
白が多すぎると眼精疲労を引き起こす可能性があるため、灰色の色合いはこれを減らします。
白と灰色の背景について説明する別のux.seトピックがあります。
font-colorとbackground-colorの違いは目の疲れを引き起こす可能性があるため、最適ではありません。
明るい灰色の背景に黒または濃い灰色のテキストを表示すると、人間の目で最も読みやすくなります。より詳細な回答については このリンク を参照してください。
背景が暗い明るいフォントを使用する場合と、使用しない場合を示します。基本的には、その人が画像のヘッダーのようにテキストをスキャンしているか、表示したウィンドウのようにテキスト全体を注意深く読んでいるかどうかによって異なります。
これまでに触れていないことの1つは、白以外の背景色を使用すると、テキストボックスやその他のインタラクティブなUI要素（チェックボックス、コンボボックス、ドロップボックスなど）を白を使用して非常に簡単に強調できることです。
この動作は2つの主な役割を果たします。1つ目はポップアップ/ダイアログボックスに注意を引き付け、もう1つはその背後のページ（ブラウザーの場合）がこの状態では非アクティブであることをユーザーに知らせます。
そして、これらの影やオーバーレイはかなり良い仕事をしています。
また、色は関係ありません。UIが許可する限り、白、赤、青などを使用できます。