アプリゲームUIデザイン

プレイしたアプリゲームのUIデザインに関して、書き残しておこうと思います。毎日24時に更新!

「ディズニー マイリトルドール」色選択のUIがMVP並みに優れたUIだと感じました

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

 

アバターの色変更が興味深いUIだったので紹介します。

f:id:appgameui:20200325075427p:image

色選択というとどういったUIを想像しますか?

マイリトルドールのUIはこういったUIになっていました。

 

f:id:appgameui:20200329211346g:plain

▲瞳の色を変更

 

 

f:id:appgameui:20200329211945g:plain

▲チークの色を変更

 

カーソル固定で色サンプルを可変するという発想はなかったです!

他のゲームのUIを見てみます。

 

 

1:アルケミアストーリーの場合

例えば「アルケミアストーリー」のUIはこんな感じでした。

f:id:appgameui:20200329212144p:plain

既定の色から選択する形式ではなく、自由入力タイプです。

これはこれで仕様としてはアリだと思いますが、プリセット化できないデメリットもあるので一長一短かな、と思います。

例えば黒目の中で色分けすることが出来ないので、そういった細かいカスタムをしたい場合はそれぞれ設定するパラメーターを分けなければなりません。

f:id:appgameui:20200329212517p:plain

 

2:Real Boxing 2 ROCKYの場合

「Real Boxing 2 ROCKY」はこんな感じです。

f:id:appgameui:20200329212249p:plain

こっちはプリセット型ですが、数が多くないので大丈夫みたいです。
数を絞ってしまう、というのも一つの手ではあるとは思います。

 

3:ハリー・ポッター:ホグワーツの謎

「ハリー・ポッター:ホグワーツの謎」の場合はこんな感じ。

f:id:appgameui:20200329214704p:plain

マイリトルドールと同様にプリセットが用意されています。

f:id:appgameui:20200329214816p:plain

▲用意されてるプリセット


ただ、スクロールして選択、というUIなので2手必要ですが…

f:id:appgameui:20200329214506g:plain

▲スクロールと選択の2手必要


マイリトルドールの場合はスクロールが選択も兼ねているので1手で済みます。

 

 

f:id:appgameui:20200329211346g:plain

▲スクロールが選択も兼ねている

 

これはスマートなUIだな、と感じました。

 

色先行のUIを想像すると、大体はパレットがあったり、数値をいじって色を変える、というUIに慣れていましたが、どちらもコントローラーで操作するUIだと気付かされました。

マイリトルドールの色選択のUIは指で操作するというデバイスに合わせた良いUIだな、と感じました。

 

もし、アバターなどでプリセットの数が多い場合、こういったUIを検討してみても良いのかなと思い紹介させていただきました。