スマホアプリの UI パターン
- キャンセルボタンは枠だけにする。色を付けない。
- 押すと取り返しが付かない系の危険なボタン（削除等）は赤色系にする。
- 「YES」を表すボタンは緑色系で「NO」を表すボタンは赤色系にすることが多い。
- 横スクロールは使わない。ページの端で横スワイプした場合にページの進む／戻る処理が発生する可能性があるので。
- ボタンには影をつける等の方法で高さを設けておく方が分かりやすい（他のデザインとの兼ね合いは当然あるものの）。
- メインカラー・サブカラー・アクセントカラーを決めて使う。特別な理由がない限りはそれ以外の色は使わない。
- 「はい／いいえ」ボタンを左右どちらに置くか、の問題にはウェブデザイン界隈でも決着が付いていないっぽい。個人的には「右は進むイメージが強いので『はい』が右」が良い気がしている。
- スマホアプリに限らないが、「近接」「整列」「反復」「コントラスト」の四原則が大事。『ノンデザイナーズ・デザインブック』より。
- ボタンを押したときはボタンをへこませる等、アニメーションを設ける。
- アニメーションの持続時間は 150ms 〜 200ms が妥当らしい。Google ガイドラインより。任天堂の人も Switch の UI を作る際に 200ms を基準にアニメーションさせているらしいし、そのあたりがちょうどいいのかも。
- ボタンの最低サイズは縦横 44px (Apple), 48px (Android) とのこと。個人的には 44px では小さい気がしている。雑に押す場合は 60px 程度欲しいな、という感じ。
- 頻繁に押すボタンは画面最下部に置く。特に頻繁に押すものは右下に置く（右利きの人が多いから、という理由から。左利きの人は？ とは思うものの）。
