グラフィカルインターフェイスを開発するとき、彼らは現在、不要なものをすべて取り除き、機能に集中しようとしています。 しかし、機能は製品を成功させるための重要な要素の1つですが、ビジュアルコンポーネントも同様に重要です-特に機能を改善できるからです。
この記事では、影などの視覚要素が、インターフェースのユーザーが知覚する情報をどのように伝達できるかを示します。
インターフェースの進化：擬似三次元から超平面設計まで
三次元効果とスキューモーフィズム：界面の深さの錯覚
ディスプレイはほぼフラットになりましたが、デザイナーと開発者はコンテンツを立体的に見せるために多くのことをしました。 グラフィカルインターフェイスの開始以来、疑似3次元効果（影、グラデーション、ハイライト）が使用されており、ユーザーが1つまたは別の要素と対話する方法を一目で理解できるようになっています。 このような効果により、奥行きの錯覚が生じ、階層内の要素の位置についてユーザーに通知され、それらの相互作用も示されました。 とりわけ：
・高い位置に表示されるアイテムは、クリックできるように見えます。 頻繁にボタンが示されます。
・押し下げられている（または空の）要素は、塗りつぶすことができるかのように見えます。 そのため、しばしば入力フィールドを示します。
以下のWindows 95ダイアログボックスは、シャドウとハイライトを使用して3D効果を作成する方法を示しています。
ボタンが上に表示され、入力フィールドが押し下げられているように見えることに注意してください
Skeuomorphismは、このアイデアの進化の次の段階になりました。現在、インターフェイス要素は、現実世界のオブジェクトを模倣して、デジタル世界に転送しています。 デジタルの世界でのスキューモーフィズムは、多くの場合Apple製品（特にバージョン7までのiOS）に関連しています。 それらは本当に、デジタル設計でどのようにスキューモーフィズムが見えるかの素晴らしい例です。 たとえば、ニューススタンドアプリをご覧ください。 3つの「棚」と木材のテクスチャを備えた変形型の本棚を使用します。 本棚のメタファーは、ユーザーがアプリケーションと対話する方法をすばやく学ぶのに役立ちます。
iOS6のニューススタンド。 影と背景テクスチャを投影する-実際のオブジェクトをシミュレートする手段
それにもかかわらず、初期の3次元性の作成とスキューモフィズムの適用により、インターフェイスが扱いにくくなり、要素が過剰になり、実装の詳細が機能面から散漫になりました。
フラットなデザイン：影を取り除き、インターフェイスの開発の可能性を減らします
すべてのアクションに対する反応があります。 そのため、デジタルデザインの世界では、スキューモーフィズムに反対していました。 アイデアはこれでした：どんなに努力しても、画面のコンテンツは決して真の立体に見えることはありません。
3次元デザインやスキューモーフィズムとは異なり、真にフラットなデザインは、実世界のオブジェクトの外観を再現しようとさえしません。 その中の要素は本当にフラットです。 要素がクリック可能（他の要素よりも上にあるように見えるため）または塗りつぶし可能（表面に押し付けられているように見えるため）であることを示す照明モデルはなく、光の影さえありません。
たとえば、Windows 8のMicrosoft Metro設計言語を見てください。
Windows 8インターフェイス-スーパーフラット設計の例
まったく逆の極端：すべてが平坦すぎるようです。 「PC設定の変更」要素は、ボタンというよりアイコンのこのグループの署名に似ています。 その結果、多くのユーザーは、それが存在することさえ認識せずに、決して使用しません。 要素が単にビューから解放されるか、その機能を誤解した場合、その理由は、要素とそれに関連付けられたアクションの識別性が低いことにあります。
インターフェース設計者は、何十年もの間、オブジェクトを非常に詳細に作成してきました。 反射、ボタンの高揚感、入力フィールドのインデント、つまりさまざまな蛍光ペンの反射など、スーパーフラットデザインによって拒否されたものはすべて、要素との相互作用の可能性を示すために呼び出されました。 また、この機能が指定される特定の手段はアプリケーションごとに異なりますが、ユーザーは常に次のことを想定できます。
- ほとんどの場合、明確にマークされた要素をクリックできます。
- ほとんどの場合、明確な選択なしでは要素をクリックできません。
フラットデザインの導入前後-明確に選択された要素がほとんど完全に存在しないため、クリック可能なオブジェクトを正確に判断できません。
このため、機能によって要素を区別する手段を完全に拒否することは、明らかに失敗した決定です。 ユーザーには蛍光ペンが必要です。これにより、ページまたはアプリケーションでクリック可能なものを即座に理解できます。 とりわけ、影は人間の脳が依存している非常に重要な指標です。
ほぼフラットなデザイン
最近、設計者は、使いやすさの問題がフラットなデザインにつながることを理解し始めました。 その結果、よりバランスの取れたソリューションが得られ、「ほぼフラットなデザイン」または「フラットなデザイン2.0」と呼ばれることもあります。 スタイルはほぼフラットですが、明るい影、選択範囲、レイヤーを使用してインターフェイスの深さを与えます。
Google Material Designが開発したのは、このようなほぼフラットなデザインの好例です。 物理的な原理を使用して、インターフェイスを意味のあるものにし、要素を視覚的に整理します。 Material Designは、そのシンプルさで注目に値する蛍光ペンを犠牲にしません。
Android GUIの深さ
影と要素要素
最新のインターフェースはより階層化されており、Z軸、つまり深度を最大限に活用しています。 このアプローチにより、それらはより「具体的な」ものになります。
影によって奥行き感が生まれます。影を落とす要素や画像は、ページ上に浮かんでいるように見えます。 影はデザインを少し「スパイスアップ」しますが、あまり「クローイング」になりません。 反対に、ユーザーの注意をそらすことはありません-彼らのおかげで、彼はそれを理解できます：
- 影を落とす要素を押すことができます。
- ある要素が別の要素に影を落とすと、最初の要素がより高くなります。これにより、要素を整理して階層を作成できます。
前後-影がなければ、ピンクの円と青い表面が別々の要素であることを理解することは不可能です
- 影は、オブジェクトが移動した方向を明確にします。
前後-キャストシャドウは減少し、オブジェクトが落下または上昇するにつれてシャープまたは増加し、侵食します
- 影は持ち上げ要素と組み合わせて使用されます。 上昇は、相対的な深さ（または高さ）、Z軸に沿った2つのサーフェス間の距離です。上昇は、1つの要素の上部から他の要素の上部まで測定され、最初の要素が2番目に投影する影の深さを決定します。
Material Designの2つのオブジェクトの異なるリフト値
ユーザーが要素がクリック可能かどうかわからない場合は、クリック後に発生する変更によってこれを理解する必要があります。 これが上昇の出番です。 要素の上昇が変化すると、その影も変化します。
押すとボタンが上がります
有効化後にカードが上昇する
おわりに
設計では、ハードシャドウ、過度にカラフルなグラデーション、または複雑な照明効果に頼るべきではありません。これらはすべて、要素の目的からユーザーをそらすことができます。
ただし、ソフトシャドウやその他の非平面インターフェイスの手段は有用です。重要な情報を伝え、オブジェクトを強調表示し、その機能と状態を示します。
ユーザーはシンプルさ、明快さ、秩序を好みます。インターフェイスを開発するときは、人間の知覚の特性に依存する必要があります。 近年登場した成功したインターフェイスの例は、次のことを示しています。設計の根底にある原則を完全なものにしたものが勝者です。