ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「ビーナスイレブンびびっど!」編成画面は表示するパラメーターが多い画面。目が泳がないようにする工夫が隠れてた!

こんにちは!ちょこです!

 

スタメンのキャラを入れ替える際にボーナスが付くかどうかが、UIが光って知らせてくれて分かりやすかったです!

f:id:appgameui:20200517182620p:image

 

 

画面の左上にフィールドのUIグラフィックがあるのですが、光ってるの分かりますかね…。

f:id:appgameui:20200519222114p:plain

▲フィールドが他と比べて明るくなっている
 

動きで見るとこんな感じです。

f:id:appgameui:20200519085657g:plain

どこに配置されるキャラクターなのか分かるだけでなく、明滅することによって重要な情報だと訴求されています。

 

ふと思ったのですが、これ結構重要な考え方じゃなかろうか…

 

 

サッカー系のゲームってあまりやったことないのですが、ジャンル的には昔からあり、UIの最適化、メンタルモデルも強力なものになっていると推測できます。

また、本質的にはシミュレーションであるため、表示するパラメーターが非常に多いのも特徴です。

f:id:appgameui:20200519222831p:plain

▲表示する情報が非常に多い

 

そういった画面であるので、ただ数字を並べるだけだと複雑なゲームに見えてしまう可能性があります。

ですので、アイコンや色で情報に変化を持たせています

ここまでやると画面がごちゃごちゃしそうなものですが、このフィールドのアニメーションがあることによって情報に優先度が生まれています。

f:id:appgameui:20200519224129p:plain

▲このグラフィックによってメリハリが生まれている

 

パラメーターが多く情報の扱いが難しい画面をデザインする際に、明確に情報の優先度を決めておかないと目が泳いでしまいます。

そういった時に、こういったアニメーションを使って画面にメリハリを生む方法もあるのだな、と勉強になりました。