フィードバックと操作 · タップへの反応
ホバーで他を退かせる悬停让其它项退让
- 焦点が明快
- 静か
- 主張しすぎない
リストの一行にポインタを置くと、動くのは他の行です。それらが一斉に暗くなり、少し縮み、脇へ退きます。指している行が前に押し出されたように見えます。離せば一斉に戻ります。
使いどころ
選択肢の主従を見せたいときに向きます。ナビ、料金プラン、フォームの選択など。一行ずつ読み込むリストには使わないでください。暗くなって読めなくなります。
パラメータ
siblings opacity .38 · scale .96 · shift 6px · 220ms ease-out · hovered row stays put
レシピ
ホバーで他を退かせる → 220ms ease-outホバーで他を退かせる → siblings opacity .38 · scale .96 · shift 6px · hovered row stays put
AI に渡す一文
リストのホバーを「引き算」にしてください。ポインタが一行に乗ったら、他の行を不透明度 .38・拡大率 .96・左右へ 6px 退かせ、220ms ease-out で動かします。指している行自体はほとんど変えず、わずかに浮く程度に。離れたら全て戻します。