ブックマーク / note.com/3inowayosuke (1)

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

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

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