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

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

「三國志 覇道」資源を管理する画面にグラフが採用されてて見やすかった

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

 

このブログでは「ゲームのUIを見てみよう!」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。

 

今回は「三國志 覇道」にて、資源の在庫数が一目で分かるグラフィックデザインが採用されていました。興味深かったので紹介いたします!

 

該当の画面はこちらです!

f:id:appgameui:20210827202924p:image

 

この画面は内政画面から確認することができます。
アニメーションで遷移を見ると、以下のgif画像の通りです。

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

画面上部の資源情報の部分をタップすると表示されます。

 

この画面のデザインの特徴は主に以下の3点だと感じました

  1. 倉庫の容量に対して、どの程度在庫があるのかゲージで示している点
  2. 略奪から保護される分、保護されない分、倉庫から超過している分とわけている点
  3. それぞれの区分によって色分けがされている点

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

 

 

資源が倉庫から超過するケースはどんな時かと説明すると、アイテムなどで資源を獲得した場合です。この辺は農園ゲームとはちょっと異なるかもしれません。

実際に超過した場合は以下のようになります。

f:id:appgameui:20210827202930p:image

 

兵糧のゲージ部分ですね。
赤いゲージが元々あったゲージ部分を突き抜けています。どういう状態か一見して分かりやすくなっています。

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

 

資源を管理する際、数字や文字などの情報が中心の画面になるかと思います。

文字が並ぶと一見して難しそうな画面に見えます。
三國志 覇道」のようにゲージやアイコンといったグラフィックを用いたり、色数を増やすなどすると、ユーザーの理解を手助けしたり、画面にメリハリが生まれやすくなると感じました。

 

 

以上です。

数字を扱う際、ユーザーの理解を手助けする、画面を見やすくするなどのために、ゲージを用いることも検討しても良いのかもしれません。
数字や文字など、多くの情報が羅列する画面をデザインする際の参考になれば幸いです。