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

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

「キャラバンストーリーズ」ドロワーで情報量をコントロールする事例の紹介

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

 

UIのパーツの中に「ドロワー」というパーツがあるのですが、ちょっと変わったドロワーがあったので、事例として紹介させてください。

  • 「言葉は知ってるけど使いどころが分からない」
  • 「どこで使っているのか知りたい」

など、悩んでいる方の参考になれば幸いです。

 

まず「ドロワーって何?」という方に簡単に説明すると…

  • ドロワー(drawer)とは「引き出し」という単語に由来する
  • 画面外にパーツを格納する機能
  • ボタンをタップするとパーツを引き出す挙動をする

という感じです。

【Android】NavigationView(ドロワーメニュー)UI改善|bonheur7|note

 

早速、実際に「キャラバンストーリーズ」で使用されている場面を紹介します。

ああああああああ

 

パーツとしては左上の部分です。

ああああああああ

▲こちらのパーツがドロワー

 

これをタップするたびにパーツが縮みます。

ああああああああ
▲3段階でサイズが可変します

 

一番大きいサイズがデフォルト時のサイズです。
「AUTO」のボタンと左側のアイコンに十分なマージンがあります。
これにより、誤タップの予防に繋がります。

また、文字列を長く表示することにより、情報の概要が伝わりやすくなっています。

ああああああああ

 

少し縮めるとこんな感じです。
バナーの横幅と揃えている感じですね。

ああああああああ

 

こちらが最小サイズです。文字列の表示はなくなりました。
情報よりも画面をスッキリしさせたいユーザーであったり、比較的ゲームに慣れているか、上級者向けの設定です。

ああああああああ

 

ああああああああ

 

以上です。

ドロワーでメニューの開閉をするUIはあるのですが、情報量をコントロールしている事例は限られるのかな、と感じました。
デザインを考える際の発想の参考になれば幸いです。

 

▼参考資料

UI/UXデザインの原則

UIデザインの教科書[新版] マルチデバイス時代のインターフェース設計