移行中の知識
視覚的奥行き
Visual Depth
定義
視覚的奥行き（visual depth）とは、平面的な表示の中でも、要素同士が手前・奥・重なりのどこにあるかを知覚できるようにする空間的な関係です。重なり、相対的な大きさ、位置、perspective、shadowなどがdepth cueとして働きます。UIではmodalやfloating surface、overlayなどの層関係を示すために使えますが、shadowの強さだけで奥行きが決まるわけではありません。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
確認ダイアログ
modalと背面画面の層
見るポイント
modalが背面の画面より手前にあることを、重なり、背景の抑制、位置関係など複数の手がかりで示す。shadowだけを濃くして層関係を表現したつもりにしない。
キャンバス型の編集UI
floating toolbar
見るポイント
canvas上に浮く操作panelがcontentと同じ平面に見えないよう、重なりと境界、必要ならshadowを使う。複数のfloating elementがそれぞれ別の高さを主張して混乱しないかも確認する。
注意
誤解しやすい点
- shadowが付いていれば必ず「手前」と正しく認識されると考え、重なりや位置関係との矛盾を無視する。
- すべてのcardやbuttonへ異なるelevationを与え、どの層が重要なのか分からなくする。
- 物理世界の奥行き表現をそのまま再現することを目的にして、UI上で伝えるべき層関係を見失う。
関連
関連する概念
出典