こんにちは、「アプリゲームUIデザイン」のちょこきなこです。
「ドールズオーダー」のボタンの色って大体「ホワイト」「ブラック」「レインボー」「ライトブルー」「オレンジ」「暗化」で賄われています。今回はその規則性を考えてみたいと思います。
まず、このお知らせ画面を見るとアクティブなタブは「ALL」であることがわかるかと思います。
なるほど、確かに青くてデジタルな世界観にマッチしていてとても良いです。
▼公式HPでも同じルールになっているようですね。
次にアプリ内を見てみます。
オプション画面です。この中では「戦闘画面」のタブがアクティブになっているようです。
なるほど、白いタブが押下可能になっているのは、白が手前にありそう、暗いと後ろにあるように見える、という錯覚を活かしているのでしょうか？デジタルなデザインを活かすのであればアクティブ＝明るい、という文脈も選択できそうだったのですが…。
次にフレンド画面です。
今度は白黒が逆になっています。アクティブが白、非アクティブが黒のタブデザインになっています。更にここでは他のボタンにないグラデーション効果が付いています。
タブの色のデザインをまとめると以下の規則性になっています。
アクティブ＝ライトグリーン、ブラック、ホワイト、
非アクティブ＝ブラック、ホワイト
でした。それぞれの画面でなぜその色を採用したのかは説明可能だと思うのですが、アプリ全体を通してみるとちぐはぐになっている理由が説明できません。こうなると良いデザインとは言えなくなってしまいます。
規則性がないデザインと規則性があるデザインであれば、規則性があるデザインの方が良いです。
以下、主な理由です。
1：ユーザーが考えたり不安に思うストレスがなく快適に操作できるから
2：開発側もタイトルを運用していく際に、規則性がある方が展開しやすいから
この辺かなと思います。細かいと思うかもですが、意外とそうでもないと思うんです。
例えば、タブが2つしかないデザインだった場合、この規則性がないと一見してどちらがアクティブだか分からないかと思います。限定的すぎるだろう、と思われるかもですが、実例あげますね。
では「ドール」「親密度」のどちらがアクティブでしょうか？
正解は「親密度」です。多分一瞬考えたかと思います。規則性がないと、こういったストレスが起きてしまいます。
ガチガチに規則を優先する必要はないですが、今回紹介した例はもう少しきれいにまとめられそうな気はします。
この辺の話はUIデザイナーなら多分分かっていると思うのですが、大人数で作業しているとつい忘れがちになってしまうのかもしれません。
