僕がUI設計をするときに大事にしてることをダダッと殴り書きしておきます。
はじめに
今のデザインでしっくりきてるもん！！っていう部分と競合する部分があればガン無視してください！！
自分の信じるものを捻じ曲げる必要はないよ！！
Material Designがどんなもんなのか読む
リンク貼ろうと思ったら元のページがややっこしく変わってた。残念。
今読むなら、この辺が一番びしっと来ると思う。
画像とか使われてて最上級にわかりやすいからめんどくさがらずみて。Chromeでページ翻訳かけて読んで。
Surface - Material Design
ここから、僕が読みだしていることをまとめると
・UIは紙でできてる
・UI上の文字や画像は紙に印刷されているものとして扱う
※動画とかはインクがリアルタイムで動くという解釈でOK
・星形とか複雑な形のボタンなどの実装はNG
・アニメーションは拡大・縮小・座標移動で頑張る
・紙同士の重なりを影で表現する
・色使いはシンプルに
Material Designのミソは影と色。
どちらも手前にあるものなのか、背景なのかを表現するのに重要。
影はAndroidだとelevationっていうのを与えてやるとつけることができる。
けど、Unityだと棒1本入るだけで影とは思えないので、画像リソースを作ってやるのがいいと思う。
僕が使ってるExpression Designであれば、画像効果でドロップシャドウがつけられるので、困ってたらぜひ。
無料ですし。.psd形式は扱えないけど。
色使いに関しては後の方で。
...という具合。
これを頭に置いておいて、どんなUIにしていくかを考えていく。
お手本を用意する
お手本、マジで大事。
僕はいつもGoogle産のUIをお手本にしている。
アニメーションとか、色使いとか。
Googleだったらこうやるんだろうなっていうのを考えてやっていく。
なんかしっくりこねぇなと思ったら自分が普段違和感なく使っているソフト・ゲームのUIを確認して違和感が何かを確かめるとスッキリするんです。
違和感の確認材料として、お手本はたくさんあるといいと思う。
紙とペンでラフスケッチ
こんなUIがいいんじゃないかな、と思うものを片っ端からガリガリ描いていく。
ここにボタンがあって、ここに説明出して...みたいな感じで。
頭の中で考えているだけだとそもそも複数出てきにくいし、目で見るものを頭で考えたってわかりにくい。
目で見るものは目で見ながら考えよう。
また、なんでもかんでも見える場所に置いておくとどうしても画面がごちゃついて、英語の教科書を開いた時のような発作に襲われてしまうユーザが出てくるかもしれない。
そういう印象を与えないためにも、不要な説明やボタンはアニメーション等を使って必要なときにだけ出現させるようにするといいと思う。
考える段階でひとつ、僕が意識しているのはある程度ありふれたUIであること。
UIはソフトウェアやゲームにおいて、何よりも最初に触れるし、ストーリー終盤で手に入れる伝説の剣よりも長い時間、長い期間にわたってユーザが使い続けるものである。
だから、それが攻めすぎたもので、慣れるのに時間がかかったりだとか、わからない部分があるとそのソフト・ゲームは使いにくい、遊びにくいと思われても仕方なくなてしまう。
だから、メニュー項目が並んでいる画面や、設定画面などの基本的などんなものにでもあるような画面はそれに合わせておく。
ソフトウェアであればそのソフトを動かすOSが用意しているデザインガイドラインやコンポーネントに従っておくのが無難であると思う。
Material Design Colorsカラーパレットから色を選ぶ
色使いはダサさに直結してくる。
ある程度、現代的で無難なデザインがしたければMaterial Design Colorsから色を選んでくるのが楽。
文字の色も、ボタンの色も、背景の色も全部ここから選んでくる。
こういう感じで色が並んでいるので、使いたい色をクリックする。
そうすっとカラーコードがクリップボードにコピーされるのでしかるべき場所へ貼り付けよう。
デフォルトは16進コードだけど、#つきの16進コードとかrgb()、rgba()が良ければ左上のMaterial Design Colorsとページのタイトルが書いてある横のHEXという部分のドロップダウンから変えられるから、必要に応じて変えよう。
で、色を選ぶうえで僕が気をつけていることは次の3点
・テーマカラーを決めること
・ネガティブは赤、ポジティブは緑
・背景は微妙に暗く、手前の物は明るく
テーマカラーを決める
テーマカラーを1つ決めて、目立たせたい言葉やボタンはこのテーマカラーにする。
悪目立ちすることなく、いい感じに目立つのでオススメ。
複数あるとなんかちゃらんぽらんな印象を受けるので1つにまとめるのが無難。
QiitaもTwitterも、テーマカラーは1つしかないじゃん？
ゲームであれば、ゲームそのもののテーマカラーと、ゲームのモードごとで別のテーマカラーを割り当てたりとかすると、テーマカラーの違いで「あ、これは別のモードなんだな」と無意識的に思わせることもできるので、「なんかしっくりこない」と思う場合は試すといいかも。
ネガティブは赤、ポジティブは緑
エラーは赤色で出せ、成功しました！みたいなのは緑色で出せ
心理学的に赤色の何かには危機感を覚え、緑色の何かには安らぎを感じるのだそう。
この辺は大体揃ってるから、逆にしたり変えたりするとスリコミに引きずられて操作ミスの原因になったりするので従うといいと思う。
背景は微妙に暗く、手前の物は明るく
さっきの影の話に戻るんだけど、人間は暗いものを奥、明るい物を手前として考える。
だから、明るい色の物を手前において、そいつに影を付けてやるとしっくりくる見た目になる。
かといって背景の色がめっちゃめちゃ暗いとなんかダサくなるのでその辺はしっくりくるのを探ってみてね。
設計に苦しんだら...
他の人に見せて感想を聞きましょう。
新たな改善策やデザイン案が不思議と浮かんでくるものです。