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

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

「ココッパドール(ココドル)」衣装を獲得したら、時間差でボタンが表示され視線が向くように工夫されている

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

 

「ココッパドール(ココドル)」で時間差でボタンが表示され、視線が向くように仕向けられている場面がありました!
f:id:appgameui:20200630080128p:image

画面右下にある「GO」のボタンが時間差で表示されます。

 

f:id:appgameui:20200705185358p:plain

▲こちらのボタン

 

表示されるタイミングに関してはこちら。

f:id:appgameui:20200705184915g:plain

 

後からアニメーションして出てくるので、視線は自然とそこに集中します。

 

なぜこういった仕様になっているか補足します。

最初(アイテムを獲得する前)はアイテムを獲得するボタンの優先度が高い状態です。

f:id:appgameui:20200705190123p:plain

▲最初は「購入」ボタンの優先度が高い

 

アイテムを獲得した後は「チャレンジコーデ」に進む導線が表示されます。
これはRPGに例えるなら、武器を装備してバトルに向かう導線と置き換えられます。

このように、状況が変わりボタンの優先度も変わるのですが、
アニメーションを用いることによって、訴求するボタンを上手く切り替えているなぁ、と感じました。