0:00 / 0:00
Command-MenuMicro-interaction

锚定滚动

Raycast 使用滚动阈值进行列表导航。选择项向下移动到特定点,然后锁定在该位置,同时列表滚动,提供稳定的视觉锚点,并在到达末尾时清晰地感知边界。

在长列表中按下箭头键。起初,什么都不滚动,只有高亮项在移动。

继续向下。大约在视口的 70% 处,某些东西发生了变化。高亮项锁定在原地,现在世界开始移动。列表在你锚定的光标下向上滚动。直到结束时,它再次释放,让你落在最后一项上。

三个状态。一个手势。完美。

这应该在任何 CMDK 菜单中实现。

为什么有效

  • 渐进式参与:界面不会立即滚动。这减少了小范围局部导航(例如,向下移动两到三项)时的干扰运动。只有当用户表现出进一步导航的意图时,才会进行更具干扰性的全列表滚动。
  • 稳定的空间锚点:“锁定”阈值作为用户眼睛的可预测锚点。在长时间滚动中,你不必追踪一个移动的目标;你确切知道该看哪里。这使得扫描长列表显著更快且要求更低。
  • 触觉反馈与终结感:最后一项的“停靠”提供了一个清晰、物理感的结束点。没有模糊性。从滚动状态(列表移动)到选择状态(高亮项移动)的过渡以绝对清晰度标示了边界。

何时使用此功能

  • 在可能有长列表的键盘驱动界面中,如命令调色板、搜索结果或文件浏览器。
  • 当短距离(调整 1-2 项)和长距离(向下滚动很远)导航都很常见时。
  • 对于具有固定高度项的列表,这使得滚动和锚定感觉一致且精确。
Rene WangRene Wang·

继续探索

照片中的货币识别

轻点照片中的任何金额即可转换为本地货币

Micro-interactionUtilitySmartContextualFeedbackEfficiency
We Regulary Update this List

You can get notified by subscribing to our biweekly newsletter. No ads, no spam, just new content.

无指针光标

Linear 应用在链接上未显示鼠标光标指针。

Cursor

移动表情符号

每当你将鼠标悬停在表情符号按钮上时,你正在移动它的图标。

微交互
检查用户内容中的潜在问题 - 媒体 1

检查用户内容中的潜在问题

Resend 在发送广播之前主动扫描电子邮件内容以查找退订链接,如果缺失则警告用户。这个小型的自动化“预飞检查”可以防止代价高昂的错误,保护发件人的声誉,并通过充当智能保护措施来建立信任。

Mechanism
Profile banner
Detail

Detail

@detaildotdesign

about.x.bio

10+about.x.exclusiveContent
160+about.x.followers