反馈与交互 · 点一下的回应
悬停让其它项退让Sibling dim on hover
- 焦点清楚
- 安静
- 不喧哗
鼠标停在清单的某一项上,动的是其它几项:它们一起变暗、缩一点、往两边让开,被指的那一项反而像被推到了前面。移开,大家又一起回来。
什么时候用它
选项之间需要比出主次时用它 —— 导航、套餐对比、表单选项;列表项本身信息很多、需要逐条细读时别用,变暗会让内容读不成。
参数
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;被指的那一项本身不要大变,最多轻微上浮。移开就全部恢复。