UIの空間表現 〜要素はどこにあるのか〜｜3inowayosuke

UIの把握しやすさには空間表現が影響します。早速、事例を紹介します。 １．画面内の奥行き表現下記は３枚の紙の画像です。どの紙が上に重なっているかがわかると思います。 ディスプレイ上で３枚のカードを重ねたものを用意しました。右のカードの方が重なっている様に感じると思います。 だから何？ と思うかもしれませんが、これはUIを操作するときに影響します。 以下、スクロール操作を表現したものです。スクロールされたカードがタイトルバーの下に入り込んでいます。 もう１つ、アニメーションを用意しました。 比較してみると下のアニメーションの方が「どこに何があるのか」が、わかりやすいと思います。 影があることにより奥行きが表現され、タイトルバーの下にカードが入り込んだのが、より把握しやすくなります。この様に空間を把握しやすいことはわかりやすさにとって効果的です。 Android、iOS、Windowsはどれも