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

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

「エクリプスサーガ」バトル終了後の与ダメを確認する画面で円グラフが採用されて、貢献度合いの割合が見やすい

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

 

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

 

今回は「エクリプスサーガ」のダメージ統計画面のデザインが分かりやすかったので紹介します! 

 

 

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

f:id:appgameui:20210808194015p:image

 

 

「エクリプスサーガ」の場合はバトル終了後にダメージ統計を確認することができます。他のゲームでも概ね同じタイミングかな、と思います。
f:id:appgameui:20210808233106p:image

 

 

ちょっと小さいですが、バトル結果画面に表示されている「ダメージ統計」と書かれたボタンを押すと遷移します。

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

 

 

遷移した先の画面がこちらです。

このようにキャラクターがバトルで与えたダメージの割合が表示されます。

f:id:appgameui:20210808194015p:image

 

 

ランキングを表示する機能を採用しているゲームは珍しくありません。 

しかし、その多くは棒グラフで表示しています。
円グラフを採用しているゲームは珍しいのかなと思います。

 

棒グラフを採用するメリットとしては、絶対値で比較するのに向いています。
なので、具体的にどの程度のダメージを与えたのかが分かりやすかったり、各キャラクターごとのダメージ値の差分を比較しやすかったりします。 

 

円グラフは割合を比較するのに向いています。
全体で100%になるため、どのキャラクターがどの程度貢献しているかが一見して分かります。
 

例えば、以下のグラフの場合、リリスが全体の64%のダメージを出しています。

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

 

 

その中で更に、どのスキルが多くダメージを与えているのかも円グラフで示されています。図の場合は「サウンドステップ」というスキルが67.7%のダメージを出しており、効率的にダメージを稼いでいることが分かります。

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

 

 

ちなみに「エクリプスサーガ」でも「実際のダメージを表示する」という機能はありますが、円グラフで表示されるデザインのままです。

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

 

 

以上です。

ダメージ統計の画面では与ダメージ値や被ダメ―ジ値、ゲームによっては回復した値など、様々な数字が扱われます。

その際に、絶対値を表示するか、割合での表示をするかは判断が分かれるところかなと思います。

「エクリプスサーガ」のように割合表示をする場合は、円グラフの表示があると分かりやすいかと思います。

 

画面をデザインする際の参考になれば幸いです。