web-dev-qa-db-ja.com

GUI光源はどこから来るのですか?

歴史的に、GUIの光源は左上にあり、ボタンの右下とフィールドの左上に影を落としていることを知っています。今、私はいくつかの場所(Appleのような)が上部の光源を使用し、他の場所は影を使用していないのを確認します。このサイトでは、一部のフィールド(質問フィールド)はトップライトを使用し、他のフィールド(タグ)はシャドウを使用していません。

フォームデザインの標準について、クリエイティブチームとよく話し合うことができるようにしたいと思っています。

最も効果的な方法はありますか?

(また、あるデザイナーが提案するように、影を省くことは好きではありません。なぜなら、それが本当にテキストフィールドであるかどうかがわかりにくくなるからです。他の人も同じ経験をしているのではないでしょうか。)


[〜#〜]更新[〜#〜]

ほとんどのデザインではトップダウンの光源を採用することにしましたが、Appleの45度の角度の光源ほど必ずしも立体的ではありません。

37
Taj Moore

完全な頭上から少し離れた角度からの照明の一般的な方法は、古くて実用的です。ルネサンスの画家 たとえば は、奥行きの知覚についてより科学的になるにつれて、この照明技術を選択することがよくありました。

「正午の左」の光源の効果にはいくつかの理由があると思います。

  1. 他の人が述べたように、そして明らかに、ほとんどの場合(日常的および進化的な意味で)人間は上から照らされているものを見ます。

  2. 左から右に読む文化では、テキストかグラフィックかを問わず、すべてのビジュアルを左から右に消費する傾向があります。少し左側を照らすと、左から右へのスキャンが優先され、明るいディテールが目を自然にさまようように配置します。

  3. 正面からの照明(真上またはビューアに沿った照明)は、それらを投影するオブジェクトの背後にある影を覆い隠し、ビューアがオブジェクトを空間にすばやく配置する能力を低下させます。これは、カメラに直接取り付けられた(バウンドされない)フラッシュで撮影された写真の問題の1つです-特に、結果はより平坦に見えます。

とはいえ、これらの懸念は、フラットスクリーンで私たちがよく持っている目標にとってそれほど重要ではない場合があります。私たちが意図する視覚的な手がかりは、しばしば控えめです-ある平らな層が別の平らな層よりもわずかに高いか、またはインターフェイスのこの部分が髪の毛だけを膨らませることを微妙に示します。私たちの文脈はミカエルアンジェロのものとはかなりではありません!

正午から完全正午への移行にも気づきました。そうするための実用的な理由はあると思います。

enter image description here

このGoogle Appsドロップダウンでは、上に表示されているように、照明は純粋なトップダウンです。この場合、トップダウンアプローチには重要な利点があります。ドロップシャドウは、オーバーレイの両側に正当に拡張できます。

下部の私のバージョンは、光源を伝統的な正午の角度にスライドさせます(アドビ製品では古き良き315°)。ここでは、オーバーレイ自体の左側は、それがページの上にあることを伝えていません(テキストが切り取られている場合を除きます)。それはかなり微妙ですが、個人的には、違いを感じることができます(自分でこれらの1つを設計しただけです)。

おそらく、これらの場合の重要な知覚的ルールは、光がどこから来ているかではなく、2つの比較的近接したオブジェクトがある場合影付きと認識されたオブジェクトは後退します。点灯している方が近くに表示されます

26
peteorpeter

標準では、光源はアイテムの最上部にあります。これは、光源が実際の生活の中で通常配置される場所(太陽、天井照明)だからです。下または上から照らされたアイテムは不自然に見えます。

ライティングとシャドウは、ボタンのようなコントロールがボタンのように見えるのを助けます。光が上から来るのか、それとも少し横に来るのかはそれほど重要ではありませんが、不均一な光源はインターフェースを不自然に見せます。左/右の照明と不均一な影に対するソータの主な理由は、視覚的センスです。あなたの視覚的な才能がインターフェイスを不自然に見せ始めたとき、あなたは行き過ぎました

シャドウイングとライティングについての重要なことは、それらが それらが何であるかを示唆する であり、それ以上のものではないということです。 enter image description here

同じことがこれらのトグルにも当てはまります。シャドウとグラデーションは、ユーザーが何を見ているのか、どのように操作するのかを理解するのに役立ちます。ただし、追加する詳細が多すぎると、混乱を招きます。トグルスイッチは、もはやユーザーインターフェイスの一部であるトグルスイッチではなく、特定のトグルスイッチの写真として明確に認識できます。それは意味を失います。それはもはやシンボルではなく、特定のものになっています。

影は、人間がコンピュータとのやり取りを行う限り、クリックできることを示しています。側面または45度からの照明は、アフォーダンスの提案とはまったく関係ありません。視覚的な見栄えとしては問題ありませんが、あまりにも遠すぎると、インターフェイスが不自然になったり奇妙になったりする可能性があります。特に、コンピューター上のほとんどのものが上からまっすぐに照らされるためです(通常)。

照明角度をわずかに歪めることの問題は、標準がないため、照明方法が他のアプリケーションと非常に簡単に衝突することです。したがって、正確な最上部にある光源が唯一の論理的な「標準」です。

25
Ben Brocka

あなたの質問は、「デスクトップ」のGUIと「ウェブ」または「ウェブアプリ」のGUIの間の灰色の領域を強調しています。 3DスペースでWebアプリのようなコントロールを表示するための実際の標準はありません。ブラウザーchromeコントロール(ラジオボタンやプルダウンなど)には、デスクトップのようなプロパティがありますが、リンクやタグなど、通常は備えていません。

古いAppleヒューマンインターフェイスガイドライン(他の誰もがコピーした基本)は、デスクトップGUIの光源は左上から来たと言っていました。このSystem 7.0コントロールパネルには影があまりありませんたとえば、暗いエッジは右下にあります。

System 7.0 Control Panel

Mac OS X以降のiOSでは、Appleが概念的な光源の位置を真上に変更したため、影のグラデーションは上下にまっすぐになります。

Mac OS X Control Panel

iOS Icon

8
dammitjim

私たちは3次元で表示し、画像処理(脳内)の大部分は、アイテムの知覚される深さに関係しています。シャドウは、それを利用して奥行き感を作成し、オブジェクトを周囲から区別します。現実の物体を左または右の影で見る場合、一方の影は奥行きがあると認識しているが、もう一方の影はそうではない場合があります。

したがって、どれを選択するかは重要ではありません。 重要なのは、周囲と比べて奥行きが異なるように見えることです。あなたがそれを正しくする、またはトップにする設計上の理由がある場合は、それを行ってください。しかし、疑わしいときは、暗黙の基準さえあれば、それを守ります。

5
JohnGB