Jelly UI: 为原生 HTML 表单控件引入软体物理效果

Jelly UI 是一个设计系统，它为原生 HTML 表单控件引入了软体物理效果，允许按钮、复选框和滑块等元素在用户交互时发生形变并做出反应。该库旨在通过模拟“果冻状”材料的物理属性，为 Web 界面创造一种更具有机感和触感的效果。

技术实现与性能

Jelly UI 使用 RequestAnimationFrame (RAF) 动画循环来处理其物理模拟。然而，对演示站点的技术分析显示，其存在显著的性能开销。该库在页面上的每个组件上每 8ms 运行一次动画循环，这会在每一帧触发整个文档的重绘。

一位批评者指出，“JellyEngine”会为页面上每个活跃的组件重新计算物理效果，而不管它们是否正在被交互，而不是仅在指针事件发生时计算动画。这种方法会导致感知上的延迟，特别是在使用 Opera 浏览器的 MacBook M3 Pro 等某些硬件配置上。

虽然该库提供了视觉上的新颖性，但也引入了几个 UX 和无障碍性挑战：

Jelly UI 遵循 @media (prefers-reduced-motion: reduce) 媒体查询，这对于患有前庭功能障碍的用户来说是一项关键功能。然而，用户建议演示站点应该允许手动覆盖设置，以便在无需系统级更改的情况下启用或禁用动画。

一些用户发现交互模型不一致。例如，点击并按住一个元素，然后在释放前将鼠标移开，可能会被记录为按钮的点击，但不会被记录为复选框的点击。此外，滑块控件表现出明显的延迟，滑块手柄滞后于鼠标光标，一些用户认为这很干扰，而不是具有触感。

尽管存在批评，但该库基于物理的方法对于辅助精细运动控制能力有限的用户具有潜力。通过增大点击区域的大小或改变目标的形状以提高瞄准能力，该库可以被修改为一种无障碍工具，为那些难以应对微小、现代 UI 目标的用户提供帮助。

许多用户对演示站点使用 scroll-snap 的做法表示不满，他们将其描述为“滚动劫持”。这种实现方式在某些设备上会导致损坏的滚动速度感，并强制执行定时动画，从而锁定了并发滚动事件。

"Please never use scroll-snap as is done on this demo page... It leads to an awful experience for a large fraction of users."

社区对 Jelly UI 的反应呈现两极分化。一些人将其视为 Web 的创意和“可爱”的补充，特别适合游戏 UI 或新颖性项目。另一些人则认为这些效果会分散注意力、引起恶心感，或者对开关/关闭控件产生一种难以言喻的“本能”反应。

常见的改进建议包括：