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

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

「Chess Rush」スマホの画面をデザインする際は情報が指で隠れてしまわないように気を付けたい事例

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

 

「Chess Rush」の図鑑画面の星押しづらいし、情報隠れるんじゃー!

f:id:appgameui:20200212070144p:image

 

どういうことかと言うと… 
この星の部分、タップ判定あるんですけどね。

f:id:appgameui:20200217221441p:plain
▲進化度合いを示す星

 

押そうと思うとこのようになります。

f:id:appgameui:20200216203117p:plain

▲キャラが指でがっつり隠れます。

 

アニメーションさせるとこんな感じになります。

f:id:appgameui:20200216203603g:plain

▲星の数を変えると、星の数に応じた情報に切り替わります

 

この画面の場合、星はキャラクターの足元に表示した方が情報が変化していることに気づきやすくなるかな、と思います。

 

スマホでは、情報を配置する際に情報の優先度だけではなく、指で情報が隠れないかどうかも意識してレイアウトをする必要があります。

PCやゲーム機だと(タッチできるデバイスがあるにせよ)そういったことは少ないので忘れがちです。

PCでデザインしている時につい抜けてしまうことがあるので、改めて注意したいな、と思いました。