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

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

「創世記戦:アンタリアの戦争」画面を拡大した時、追加で情報を表示させると楽しい演出が出来そう

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

 

ホーム画面で画面拡大すると、船体の内部が透けて見えるデザインになっていました。

 

該当の画面はこちらです!船体の内部がホログラム的に表示されています。

f:id:appgameui:20210210081951p:image

 

 

カメラを引くとこんな感じです。特にホログラムは見えません。

f:id:appgameui:20210210082103p:image

 

 

 

 

船体の中身を示すホログラム表現ですが、船体を拡大表示した時だけではなく、画面遷移した直後にも表示されています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 


分かりやすいように該当シーンだけ抽出します。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

このアニメーション演出があることによって、船体の中身がある

 

ということに気づくことができます。

 

逆に、このアニメーションがなかったらと情報が隠されていると感じます。

船体を拡大した時に、船体の中身がホログラムで表示される機能を「発見した!」と感じます。

 

こういった、一見すると気づきづらく、優先度も低く、直感的ではない機能についてはアニメーションを利用することによって、その機能を仄めかすことは有効です。

 

例えば 「ガンダムブレイカーモバイル」では画面下部のフッターのUIがスクロールできることをアニメーションで仄めかしています。

ああああああああ

 

 

 

分かりやすく拡大します。

 

ああああああああ

 

このように、UIの特性をアニメーションによって示す手法はしばしば用いられています。

 

 

 

 

また、拡大することによって詳細情報が得られる、というデザインにも注目してみます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

ホーム画面においてユーザーが船を拡大する動機の一つとしては

 

ビジュアルの詳細を見たい

 

という動機が考えられます。

 

この時の「ビジュアルの詳細」の解釈が斬新です。

通常は船体の外見のみを指すと思うのですが、内部構造の情報を追加することにより画面に冗長さを感じにくくしていると思いました。

 

船体の外観の詳細を見るのも良いのですが、現実的にそこまで大きな差異はありません。

また、ただ拡大するだけであれば画面内の情報密度が薄まるため、脳の処理は緩慢になります。結果的に画面を見ると、やや退屈に感じる部分があります。

 

それに対して内部構造のグラフィック情報を追加することにより、ユーザーを退屈にさせない工夫が施されています。

f:id:appgameui:20210210081951p:image

 

 

この発想は非常に汎用性が高いデザインです。


今回は背景でしたが、オブジェクトやキャラクターイラストなど、拡大表示するグラフィック全般に応用できるものです。

 

 

以上です。

画面を拡大した時に、画面から得られる情報量に冗長さを感じ、追加で何か新しい情報を与えられないか検討する際の参考になれば幸いです。