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

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

「白夜極光」キャラクターがメッセージを入力中であることが伝わるチャット画面

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

 

 

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

 

 

今回は「白夜極光」のキャラクターとのチャット画面のデザインを紹介いたします。

 

最近、特に中国系のゲームに多い気がするのですが、キャラクターとショートメッセージをやりとりできる要素が実装されています。

 

「白夜極光」の場合はこのような画面でした。

f:id:appgameui:20210717232111p:image

 

動きで見るとこんな画面です。

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

 

 

特にここのUIが良いと感じました。
相手がメッセージを入力している様子が伝わり、実際にキャラクターとやりとりしている印象を強く与えます。

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

 

 

また、その際、ユーザー側からメッセージを送信することはできません。

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

 

 

相手のメッセージの入力が終わると、こちら側がメッセージを送ることができます。
黄色い通知バッジを表示させることによって、ユーザーの操作を促している点も分かりやすさに繋がっていると感じます。

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

 

 

相手の入力待ちから、こちらが返信をするまでの流れを見るとこんな感じです。
返信は自由入力ではなく選択肢の中から選ぶ形式です。

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

 

以上です。

「白夜極光」のキャラクターとのチャット画面を整理すると…

  • 「データ伝送中…」というメッセージを表示することでタイピング中であること
  • ボタンを暗化させることで入力を受け付けない状態であること
  • 通知バッジを表示することでこちら側の操作待ちであること

などが分かるデザインになっていました。

特に「データ伝送中…」の表現は存在感、リアリティ、没入感といった観点で見たときに、ユーザーの印象に強く残るデザインだと感じました。

 

画面の見た目をデザインする際に、こういったテキストも意識してデザインできると良いのかもしれません。

 

キャラクターとのチャット画面をデザインする際の参考になれば幸いです。