グレースケールアイコンの背後にある理由は何ですか？
Github、新しいGoogle Analyticsなど、かなり多くのWebアプリケーションがグレー（黒）のスケールアイコンを使用し始めています。Firefox4、Chrome、IE9、iTunes、Mac OSなどのアプリケーションでさえ、カラフルなアイコンが表示されます。
カラフルなアイコンからグレースケール/モノクロのアイコンに移行した理由は何ですか？
例：
- Google Analytics設定アイコン
- Github （右上のアイコンボタンをご覧ください）
- iTunes 1 モノクロアイコンに切り替えました
更新：Apple最初にそれをAquaに導入 長方形スタイルのツールバーコントロールのアイコンのデザイン ：
長方形のツールバーコントロールで見栄えの良いアイコンは、内部の詳細ではなく、輪郭と輪郭を通して意味を伝える、合理化された黒い画像です。アイコンは、長方形スタイルのツールバーコントロール内の既存のMac OS Xイメージの外観を反映する必要があるため、システムが提供するテンプレートイメージをガイドとして使用してください。長方形スタイルのツールバーコントロールのアイコンを設計するときは、次の点に注意してください。
- 輪郭をくっきりとさせる
- まっすぐな視点を使う
- 完全な黒とグレーのいくつかの色合いを使用して、次元を提案します
- アンチエイリアスを使用する
- 画像がコントロールの視覚的に中央に配置されていることを確認します（視覚的に中央に配置されることは数学的に中央に配置されることと同じではない場合があります）
通常サイズの長方形スタイルのツールバーコントロールのアイコンは、19 x 19ピクセル以下にする必要があります。
この傾向は、コンテンツとプレゼンテーションを分離するという考えと一緒に生まれたと思います。アイコンはクロム/ UIの一部であり、コンテンツ自体と競合しないように目立たないようにする必要があります。
もう1つの理由は、要素がカラフルなアイコンを持つ唯一の要素であり、その他の要素はすべてグレースケールである場合に、要素に注意を引き付けやすいことです。たとえば、グレースケールメニューアイコンと組み合わせた緑色のログイン南京錠アイコン。カラフルな要素のグループで何かをポップアウトするには、カラー（ユーザーの注意を引くための主要な役割を果たさなくなった）だけではなく、もっと多くのことを考える必要があるため、スキルと時間がかかります。
- レイアウトに関係なく見栄えがよくなるので、レイアウトが変わってもそのままにしておくことができます。
- さまざまなソース（名詞プロジェクト、シンボルフォント、iPhoneなどのプラットフォームで使用されている既存のアイコンなど）のアイコンはほとんど同じように見えるため、組み合わせることができます。
- 自分で行うのは簡単です。
個人的には、一般的に悪い傾向だと思います。私たちの脳は色を注意深く処理します（意識的にさえそれを見る前に）。 「色付きのアイコンのリストから赤いアイコンを見つける」などのタスクは本当に得意です。 「黒いアイコンのリストから小さなトラックのように見えるアイコンを見つける」などの作業はあまり得意ではありません。すべてのアイコンを同じ色にすると、製品が使いにくくなります。
もちろん例外はあります。 Photoshopのようなアプリで派手な色を使用したくないのは、作業中の画像の見え方に影響を与える可能性があるためです。また、主に自分の位置に基づいてアイコンを識別する場合も必要ありません（たとえば、ブラウザーのボタンバーの左端に常に戻るボタンがあります）。
この傾向は、Google Chromeの最初のリリースによって促進されたと思います。 Googleの目標は他のすべてのブラウザよりも少ないchrome（コンテンツ以外のもの））を使用することであったため、「Chrome」という名前は皮肉なものです。
- そのタブはウィンドウのタイトルとして機能します
- メニューバーがなくなった
- アドレスバーと検索を組み合わせています
Google Chrome
Mozilla Firefox 3
Google Chromeは、Firefoxよりもはるかに少ないchromeを使用していますか？Googleはこれを キーポイント にしています：
シンプルさ
Chromeのブラウザウィンドウは、合理化され、クリーンでシンプルです。
Chromeには、効率と使いやすさを目的として設計された機能も含まれています。たとえば、同じボックスから検索して移動したり、タブを好きなように配置したりできます—すばやく簡単に。
Google Chromeは、ブラウジングエクスペリエンスをクロムに邪魔されないように、ウェブサイトのコンテンツに集中させることを望んでいました。chromeの明るいカラフルなボタンがウェブサイトのコンテンツから注意をそらします。その結果、Google Chrome get-goのグレースケールボタンを使用しました。他のブラウザが追いついてきています。Firefox4とIE9がグーグルのデザイン原則（色/もの）は少ないです。
IE9
Firefox 4
この設計原則をUI設計の他の領域に適用しないように注意してください。 Colorは、なじみのないインターフェイスでうまく機能し、ユーザーにクリックしてほしいボタンに注意を引き付けます。 Webブラウジングの概念は非常に一般的であり、ボタンはすべてのWebブラウザーで同じ位置に多かれ少なかれ存在するため、Webブラウザーの設計者が色を追加してインターフェースをぼんやりさせる必要はありませんでした。
私の仮説：周囲のテーマとうまく機能するカラーアイコンよりも、優れた白黒アイコンを作成するのにかかる時間は短いです。既存の白黒アイコンをより簡単にリサイクルできます。
私の直感（またはおそらく正当化）は、ジャンクを図表化するようなものです。 Webサイトは、UI全体に多数のコンテキストアイコンが散在するWebアプリケーションに変わりつつあります。実際のコンテンツ/データと競合しないようにするために、モノトーンのアイコンセットを使用すると、ページ上でzitのように表示されないようにすることができます。
それらが目的に使用されている場合、答えは簡単です。ページのすべてに注意を向けている場合、ユーザーの注意を引くものは何もありません。
Windows 7がタスクバーのシステムアイコンにグレースケールカラーを採用した方法が気に入っています。それらはあなたの注意をそれらに引き付けません。注意が必要な状況がある場合、問題の深刻度に応じて、アイコンに黄色または赤のオーバーレイが表示されます。
Windowsエクスプローラーのウィンドウと詳細ウィンドウのツールバーについても同じことが言えます。これらの領域がよりカラフルであったVistaとは対照的に、灰色の色で実装された注目ははるかに少なくなっています。また、IE 4/5時代には、ツールバーのアイコンは通常灰色で、マウスカーソルを合わせるとカラーで表示されました。
したがって、グレースケールアイコンを使用すると、UIのカラフルなアイコンではなく、操作するコンテンツに集中できます。