Jelly UI:适用于原生 HTML 表单控件的软体物理效果
一个新的 “Jelly UI” 库为标准 HTML 表单控件加入了弹软、软体物理风格的动画,旨在让按钮、滑块和输入框更有趣、更有触感。评论者赞赏其创意和对减少动效的支持,但许多人批评滚动劫持、交互行为不一致、无障碍问题,以及持续动画可能带来的性能和电池成本。大多数人认为它更适合游戏、儿童网站或一次性的效果,而不是日常生产界面。
整体反响与潜在用途
- 很多人觉得这种果冻效果很讨喜、可爱,而且在创意上令人耳目一新;有人说这是他们这些年第一次见到的“有趣” UI 想法。
- 也有人认为它过头了、分散注意力、令人反胃,或者很“诡异”,并希望它永远不要出现在严肃的生产应用中。
- 建议的适用场景包括:游戏、面向儿童的网站、糖果/冰淇淋商店、轻松有趣的 AI 交互、早期识字应用、游戏 UI。
- 几位评论者指出,少量使用(单个按钮、滑块或特殊控件)可能会很得体;如果到处都用,就会显得俗艳。
动效偏好与无障碍性
- 这个库会遵循
prefers-reduced-motion,从而禁用动画。这让很多人困惑,因为他们起初只看到圆润的控件,以为它坏了。 - 一些人很欣赏对系统设置的严格遵循,尤其是那些对视觉刺激敏感的人。
- 也有人不喜欢把全局操作系统开关应用到演示中,或者他们开启 Reduce Motion 只是为了加快系统动画;他们希望有页面内覆盖选项。
- 作者后来加入了通知和覆盖控制。
滚动行为与交互设计
- 这个演示使用了滚动捕捉 / scrolljacking,很多人形容它令人不适、破坏了预期的滚动体验,导致滚动过头,以及阅读或使用滚动条变得困难。
- 也有人喜欢这种类似幻灯片切换的过渡效果,并把问题归咎于浏览器行为。
- 在持续批评之后,滚动捕捉被移除了。
“软体物理”与效果设计
- 多位评论者表示,宣传中的“软体物理”并不明显,尤其是在减少动效时;他们看到的是变形,但并没有令人信服的物理行为。
- 有人批评交互不一致:有时点击并拖动会变形,有时不会;有时在外部松开鼠标仍会触发,有时不会(后来部分修复)。
- 还有人提出希望有不同的变形方向、悬停效果、更多 3D/光照效果,以及能影响文字本身而不仅仅是轮廓的果冻效果。
性能与实现方面的担忧
- 关于
requestAnimationFrame循环存在争论:它是否在不必要地重绘整个文档,而不是只重绘活跃组件。 - 有人认为这在 Web 上很浪费,也不利于电池续航;也有人把它类比为游戏,认为每帧绘制少量组件应该很便宜。
- 性能分析显示,大部分成本可能来自 Lottie 的页眉/页脚动画,而不是果冻引擎本身,但这一点仍有争议。
组件 UX、无障碍性与兼容性
- 具体批评集中在一些组件上:OTP 输入框(多个单字符字段)、分页、标签页、折叠对话框、开关和菜单交互。
- 担忧包括:点击目标太小、可点击区域有间隙、键盘行为不佳、禁用元素虽然用了低透明度和
pointer-events: none,但与 WCAG 声称不符。 - 一些人报告在 Firefox(移动端和桌面端)以及某些 Chrome 配置下,性能迟缓,动画损坏或缺失。
- 也有人称赞 Web Components 的使用,并对源码和打包方式感兴趣,指出 GitHub 仓库不太容易发现。