Jelly UI: 為原生 HTML 表單控制項引入軟體物理效果

Jelly UI 是一個設計系統，它為原生 HTML 表單控制項引入了軟體物理效果（soft-body physics），讓按鈕、核取方塊和滑桿等元素能夠產生形變並對使用者互動做出反應。該函式庫旨在透過模擬「果凍狀」材料的物理特性，為網頁介面創造出更具有機感與觸覺感的體驗。

技術實作與效能

Jelly UI 使用 RequestAnimationFrame (RAF) 動畫迴圈來處理其物理模擬。然而，對示範網站的技術分析顯示其存在顯著的效能開銷。該函式庫在頁面上的每個組件上每 8ms 執行一次動畫迴圈，這會在每一幀觸發完整的文檔重繪（document repaint）。

一位評論者指出，「JellyEngine」無論組件是否正在接受互動，都會重新計算頁面上每個活動組件的物理效果，而不是僅在發生指標事件（pointer events）時才計算動畫。這種做法會導致感官上的延遲，特別是在某些硬體配置上，例如使用 Opera 瀏覽器的 MacBook M3 Pro。

使用者體驗與無障礙性

雖然該函式庫提供了視覺上的新穎性，但也引入了幾個 UX 與無障礙性的挑戰：

動態與無障礙性

Jelly UI 遵循 @media (prefers-reduced-motion: reduce) 媒體查詢，這對於患有前庭功能障礙（vestibular disorders）的使用者來說是一項關鍵功能。然而，使用者建議示範網站應允許手動覆蓋設定，以便在不更改系統層級設定的情況下啟用或停用動畫。

互動模型

部分使用者發現互動模型不一致。例如，點擊並按住一個元素，然後在放開之前將滑鼠移開，可能會被記錄為按鈕的點擊，但卻不會被記錄為核取方塊的點擊。此外，滑桿控制項顯示出明顯的延遲，滑塊手柄會落後於滑鼠游標，部分使用者認為這會造成分心而非觸覺感。

輔助技術的潛力

儘管存在批評，但該函式庫基於物理效果的方法對於輔助有限精細動作控制的使用者具有潛力。透過增加點擊區域的大小或改變目標形狀以提高瞄準能力，該函式庫可以進行修改，使其成為那些難以點擊微小、現代 UI 目標的使用者的無障礙工具。

示範網站批評：捲動劫持（Scroll-jacking）與導覽

許多使用者對示範網站使用 scroll-snap 的做法表示沮喪，他們將其描述為「捲動劫持」（scroll-jacking）。這種實作方式在某些裝置上會導致破碎的速率捲動體驗，並強制執行定時動畫，從而鎖定並阻礙同時發生的捲動事件。

"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 的反應兩極化。有些人認為它為網頁帶來了創意且「可愛」的增添，特別適合遊戲 UI 或新奇專案。其他人則認為這些效果會造成分心、噁心，或對開關控制項產生一種令人不安的「本能」反應。

常見的改進建議包括：

• 實作程度較輕的懸停式果凍效果。
• 提高紅色與琥珀色按鈕的色彩對比度，以協助色盲使用者。
• 修復「Chip」元素，該元素目前在點擊時會超出邊界。
• 優化動畫迴圈以防止不必要的文檔重繪。