カテゴリー
単一コンポーネント
74

ハイライト表現は構成要素をひとつだけ変化させる

変化が大きすぎるとハイライトではなく別な種類の要素に見えてしまう。

01
Bad

色、サイズ、太さ、背景すべてが変化

2番目がハイライト

※ 色、サイズ、太さ、境界線、影すべてが変化し、別要素に見える

Good

背景色のみ変化させ、他の要素は維持

2番目がハイライト

※ 背景色のみ変化させ、同じ種類の要素であることがわかる

02
Bad

色・影・大きさが一度に変わり驚かせる

ボタンにマウスを乗せてください

※ 色・影・大きさが一度に変わり驚かせる

Good

背景色が少し変わるだけで選択中と分かる

ボタンにマウスを乗せてください

※ 背景色が少し変わるだけで選択中と分かる

03
Bad

選択時にアニメーションと色変化が過剰

2番目がアクティブ

※ アニメーションと色変化が過剰で派手すぎ

Good

左端に青線を追加するだけで選択中を示す

2番目がアクティブ

※ 左端に青線を追加するだけで選択中を示す

No.74ハイライト表現は構成要素をひとつだけ変化させる
74

ハイライト表現は構成要素をひとつだけ変化させる

変化が大きすぎるとハイライトではなく別な種類の要素に見えてしまう。

01
Bad

色、サイズ、太さ、背景すべてが変化

2番目がハイライト

※ 色、サイズ、太さ、境界線、影すべてが変化し、別要素に見える

Good

背景色のみ変化させ、他の要素は維持

2番目がハイライト

※ 背景色のみ変化させ、同じ種類の要素であることがわかる

02
Bad

色・影・大きさが一度に変わり驚かせる

ボタンにマウスを乗せてください

※ 色・影・大きさが一度に変わり驚かせる

Good

背景色が少し変わるだけで選択中と分かる

ボタンにマウスを乗せてください

※ 背景色が少し変わるだけで選択中と分かる

03
Bad

選択時にアニメーションと色変化が過剰

2番目がアクティブ

※ アニメーションと色変化が過剰で派手すぎ

Good

左端に青線を追加するだけで選択中を示す

2番目がアクティブ

※ 左端に青線を追加するだけで選択中を示す