UIをデザインするうえで,
使い慣れているコンポーネントでもあるため,
ボタンは利用シーンによって使い方がさまざまであると書きました。マウスオーバーなどの状態,
今回は,
状態によるバリエーションとデザインのポイント
まず,
もしどのようなデザインにするべきか迷ったら,
- マウスオーバーまたはボタン押下時
- 通常よりもボタン背景と文字のコントラストを上げる
- 利用不可の状態
- 通常よりも画面背景とボタン背景,
ボタン背景と文字の両方のコントラストを下げる
形状のバリエーションとデザインのポイント
ボタンの形状は1種類ではありません。1つのサービス内でも使い分けることがあります。画面全体に対しての保存/
デスクトップとモバイル両方に提供するサービスの場合は,
- 大きいボタン
- 画面全体に対するアクション
- 小さいボタン
- 画面の一部分に対するアクション
- テキストボタン
- 画面の一部分でインラインで配置する場合のアクション
- アイコンボタン
- 画面の一部分でスペースが限られ,
文字ではなくてもユーザーが理解できるアクション
同じアクションを異なるボタンで実現する事例
同じアクションをするボタンはサービス内ではできるだけ統一するべきですが,
写真拡大のような場合はできるだけ写真が大きく表示できるよう,
このように同じアクションでもニュアンスや状況が異なる場合は,
アルバイト・