Jelly UI - Áp dụng hiệu ứng vật lý soft-body cho các điều khiển biểu mẫu HTML gốc

 (jelly-ui.com)
2 điểm bởi GN⁺ 13 giờ trước | 1 bình luận | Chia sẻ qua WhatsApp
  • Jelly UI v1.1 là thư viện web component không phụ thuộc bên ngoài, kết hợp các điều khiển biểu mẫu thực với hiệu ứng vật lý soft-body mềm dẻo, cung cấp 40 custom element
  • Cài đặt bằng một module script duy nhất, hỗ trợ chế độ tối, tự động theo dõi giao diện hệ điều hành, đổi màu nhấn và bố cục RTL viết từ phải sang trái
  • Nút dùng <button> gốc, thanh trượt dùng input range ẩn để giữ ngữ nghĩa gốc cho thao tác bàn phím, trình đọc màn hình và tham gia biểu mẫu
  • Từ checkbox và ô nhập liệu đến toast, tab và dialog, nhiều thành phần được áp dụng hoạt ảnh xúc giác như nhấn xuống, kéo giãn, gợn sóng và nảy bật
  • Tích hợp sẵn token màu WCAG AA và mẫu ARIA, cho phép tạo giao diện sản phẩm có khả năng truy cập mà vẫn giữ được hiệu ứng hình ảnh mềm mại

Cài đặt và giao diện

  • Jelly UI có thể dùng không cần phụ thuộc, chỉ với 40 custom element và một thẻ <script type="module"> 
    <script type="module" src="https://jelly-ui.com/package.js"></script>;

<jelly-theme mode="auto">
  <jelly-button variant="mint">Publish</jelly-button>
</jelly-theme>
  • <jelly-theme> là trình cung cấp giao diện áp dụng token thiết kế giới hạn trong cây con
    • mode hỗ trợ auto, light, dark, có thể theo thiết lập hệ điều hành hoặc ép một giao diện cụ thể
    • Có thể đặt lại màu nhấn bằng accent
  • Các biến thể màu phổ biến gồm azure, rose, amber, mint, graphite, platinum, white; kích thước chủ yếu là small, medium, large

Nút và thành phần hành động

  • <jelly-button> là nút dạng viên nang có chứa <button> gốc bên trong để hỗ trợ bàn phím và trình đọc màn hình
    • Có thể thiết lập màu, kích thước, dạng pill và square, vô hiệu hóa và bố cục block
  • <jelly-icon-button> là nút vuông hoặc tròn dành cho một biểu tượng duy nhất
    • Thuộc tính label dùng để chỉ định tên mà trình đọc màn hình sẽ nhận biết

Điều khiển nhập biểu mẫu

  • <jelly-checkbox> tham gia biểu mẫu, hỗ trợ checked và trạng thái không xác định (indeterminate), và hình vuông jelly sẽ bật nảy khi trạng thái thay đổi
  • <jelly-input> là trường nhập một dòng cho text, email, password
    • Khi nhận focus, bề mặt nổi lên và xuất hiện viền; mỗi lần nhập sẽ lan ra gợn sóng từ vị trí con trỏ
    • Hỗ trợ disabled và readonly
  • <jelly-label> được liên kết với điều khiển bằng for
    • Khi nhấp sẽ focus vào mục tiêu, văn bản nhãn trở thành tên truy cập được, và có thể chỉ định trạng thái bắt buộc cùng kích thước
  • <jelly-otp> là trình nhập mã dùng một lần cung cấp một ô cho mỗi chữ số
    • Xử lý nhập, backspace, phím mũi tên, dán và có thể đặt độ dài, màu, kích thước, trạng thái vô hiệu hóa
  • <jelly-radio> tạo nhóm giữa các mục dùng cùng name trong cùng một gốc
    • Hỗ trợ điều hướng bằng phím mũi tên có xét tabindex di động và hướng tài liệu
  • <jelly-radio-group> là vùng chứa radiogroup có nhãn dành cho jelly-radio
    • Cung cấp chú giải, bố cục dòng ngang/dọc và truyền kích thước xuống phần tử con
  • <jelly-range> là thanh trượt hai tay cầm để chọn khoảng giá trị tối thiểu và tối đa
    • Áp dụng role="slider", focus và ARIA cho cả hai tay cầm; khi kéo, tay cầm jelly sẽ bị nhấn xuống
  • <jelly-segmented> là rãnh dạng viên nang chứa các lựa chọn loại trừ lẫn nhau
    • Chỉ báo lựa chọn hoạt động như viên thuốc jelly nghiêng và kéo giãn khi di chuyển giữa các đoạn
  • <jelly-select> là dropdown liên kết biểu mẫu dùng mẫu ARIA combobox·listbox
    • Cả trigger lẫn bảng tùy chọn đều được tạo bằng bề mặt soft-body
    • Bảng mở ra từ trường và sẽ chuyển lên phía trên nếu phía dưới không đủ chỗ
  • <jelly-slider> là thanh trượt chọn một giá trị duy nhất
    • Input range gốc ẩn đảm nhiệm ngữ nghĩa và tham gia biểu mẫu, còn trên màn hình hiển thị tay cầm jelly có thể bị nhấn
  • <jelly-switch> là công tắc có thể kéo, với tay cầm kéo giãn như giọt lỏng và màu bật/tắt chuyển đổi chéo nhau
  • <jelly-textarea> tự động tăng chiều cao giữa mức tối thiểu và tối đa theo nội dung nhiều dòng
    • Bề mặt cũng giãn theo chiều cao, khi nhập sẽ có gợn sóng tại vị trí con trỏ, và hỗ trợ disabled cùng readonly

Trạng thái và phản hồi

  • <jelly-alert> là banner cung cấp bốn tông info, success, warning, danger cùng nút đóng tùy chọn
  • <jelly-badge> là phần tử nhỏ dùng cho badge, tag hoặc hiển thị trạng thái; sẽ nảy bật khi văn bản thay đổi
    • Có thể thiết lập dạng tô đầy/viền ngoài, dạng viên thuốc/hình chữ nhật và hành vi live, instant
  • <jelly-progress> là thanh tiến trình có phần đầu vùng tô đầy rung lắc theo tiến độ
    • Ở chế độ không xác định, một khối sẽ nảy qua lại giữa hai mép
  • <jelly-skeleton> là placeholder tải có chuyển động đung đưa nhẹ như đang thở thay vì hiệu ứng lấp lánh
    • Hỗ trợ các dạng line, rect, circle
  • <jelly-spinner> cung cấp chỉ báo dots dạng khối nhớt di chuyển giữa ba điểm và chỉ báo blob xoay trong khi đổi hình
  • <jelly-toaster> quản lý thông báo toast xuất hiện rồi biến mất từ phía cuối inline
    • Thường được gọi bằng helper jellyToast('Saved!', { tone: 'success' })
    • Khi đặt position="bottom" cho phần tử bố trí, chồng thông báo sẽ phát triển lên phía trên

Bề mặt nội dung

  • <jelly-accordion> nhóm nhiều mục <jelly-collapsible> lại với nhau
    • Trong chế độ single, khi một mục mở ra thì các mục còn lại sẽ đóng lại kiểu nảy bật
  • <jelly-card> là vùng chứa bề mặt jelly đặt phía dưới nội dung
    • Thêm squish sẽ khiến nó bị nhấn như đệm mềm và hoạt động như nút bấm
  • <jelly-chip> có thể dùng như nhãn tĩnh, bộ lọc chuyển đổi hoặc tag có thể xóa
    • Có thể thiết lập khả năng chọn, trạng thái được chọn, khả năng xóa và vô hiệu hóa
  • <jelly-collapsible> là vùng mở/đóng dùng nút tiêu đề để bật mở và đóng panel theo kiểu nảy
    • Được thiết kế để bề mặt chuyển động, không phải văn bản
  • <jelly-divider> là đường phân cách mảnh theo chiều ngang, dọc hoặc có nhãn
  • <jelly-kbd> là keycap jelly có thể nhấn thử
    • Nếu liên kết với phím thực bằng key, keycap cũng sẽ hạ xuống trong lúc nhấn phím đó ở bất kỳ đâu trên trang

Điều hướng và bố cục

  • <jelly-resizable> là lưới panel cho phép kéo đường phân cách jelly hoặc dùng bàn phím để đổi kích thước
    • Hỗ trợ các hướng row, vertical, both
  • <jelly-tabs> là giao diện tab dùng ngữ nghĩa tablist thực
    • Chỉ báo chọn dạng viên thuốc jelly di chuyển và panel tab xuất hiện với hiệu ứng nảy

Lớp phủ

  • <jelly-dialog> là hộp thoại modal xuất hiện với độ nảy kiểu jelly
    • Khóa trang và sau khi đóng sẽ trả focus về vị trí trước đó
    • Có thể đóng bằng phím Escape, nút đóng hoặc nhấp nền
  • <jelly-drawer> là floating sheet xuất hiện với hiệu ứng lò xo hơi vượt quá rồi quay lại từ mép
    • Có thể mở từ đầu/cuối inline hoặc từ bên dưới
  • <jelly-popover> là panel không modal mở bằng thao tác nhấp
    • Được neo vào trigger và đóng bằng phím Escape hoặc nhấp ra ngoài
    • Hỗ trợ các vị trí top, bottom, start, end
  • <jelly-tooltip> hiển thị bong bóng giao diện mềm có áp dụng theme phía trên trigger khi rê chuột hoặc nhận focus bằng bàn phím
    • Hỗ trợ bố trí bốn hướng và ba kích thước

Bài viết liên quan

1 bình luận

 
GN⁺ 13 giờ trước
Ý kiến trên Hacker News

  • Cửa sổ hơi giật nên tôi đã đào sâu tìm nguyên nhân; thư viện này chạy vòng lặp animation requestAnimationFrame (RAF) mỗi 8ms trên tất cả component của trang và khiến toàn bộ tài liệu được vẽ lại
    Chú thích ở trên nói “xử lý các component đang hoạt động cùng nhau trong một frame và dừng khi nhàn rỗi” cũng có vẻ do AI tạo. JellyEngine không chỉ tính toán animation thạch khi có sự kiện con trỏ, mà tính toán lại mọi component đang hoạt động trên trang ở mỗi frame. Với người bình thường nhìn vào thì đây là kiểu triển khai khiến họ nói “không nên làm thế này, quá tay rồi”

    • Tôi thử profiling hiệu năng trên Chrome thì không thấy điều đó được chứng minh. Vòng lặp có vẻ quản lý các component cần cập nhật bằng một Set() đang hoạt động và loại bỏ chúng khi chuyển động dừng lại
      Tôi đồng ý là chú thích hơi giống AI tạo đại, nhưng không thấy vấn đề rõ ràng trong chính cách tiếp cận; khi không có thao tác nào, vòng lặp lõi kết thúc chỉ trong vài micro giây
    • Đây không phải cách làm quá mức. 99,99% video game đúng nghĩa hoạt động như vậy, và liên tục vẽ lại toàn màn hình miễn là tần số quét đồng bộ dọc hoặc hiệu năng phần cứng cho phép

  • Tôi thích, nhưng có vẻ không phù hợp với thực hành UX tiêu chuẩn
    Theo tôi, nếu đang nhấn giữ rồi di chuột ra ngoài phần tử thì không nên được tính là click. Hiện tại button thì bị tính là click, còn checkbox thì không, nên thiếu nhất quán

    • Đây là vấn đề lúc nào cũng gặp khi làm việc với các lập trình viên Flash. Nguyên tắc phổ biến là “nếu không thể triển khai mọi chức năng của scrollbar thì đừng tái triển khai scrollbar”, nhưng rốt cuộc vẫn thường phải sửa hơn năm lần và mất nhiều ngày
    • Phát hiện hay, nên đã sửa logic của button; giờ nếu con trỏ nằm ngoài biên của button thì sẽ không phát sinh click

  • Thật sự dễ thương, và tôi cũng thích việc nó tự nhiên giảm bớt tính năng trong @media (prefers-reduced-motion: reduce)
    Tuy vậy, trên trang demo sẽ tốt hơn nếu người dùng có thể ghi đè tùy chọn này mà không cần đổi cài đặt hệ thống, hoặc ít nhất có thông báo rằng animation không được hiển thị

    • Tôi không nhận ra là nó cố ý giảm chuyển động nên cứ tưởng bị hỏng. Tôi cũng quên mất mình từng bật cài đặt đó
    • Có thể đặt Giảm chuyển động trong menu Apple > Cài đặt hệ thống > Trợ năng > Chuyển động
      Mỗi lần có một demo thú vị như thế này, tôi lại mất một lúc mới nhớ ra cài đặt đó; trong lúc đó thì cứ bấm với vẻ thất vọng, nghĩ “có gì đặc biệt đâu?”
    • Giờ đã hiển thị thông báo, và cũng có thể nhấn biểu tượng thỏ xinh xắn để ghi đè cài đặt hệ thống

  • Nếu còn trẻ thì chắc tôi đã rất thích, nhưng dạo này tôi dành nhiều thời gian hơn để loại bỏ các hiệu ứng kiểu này bằng stylesheet cục bộ hoặc dùng dark mode và reader mode. Thời thế thay đổi nhiều thật

    • Tôi thích animation vì nó là phản hồi giúp nhấn mạnh điều gì đang diễn ra hoặc đang thay đổi. Các component native không phải lúc nào cũng thể hiện tốt điều này, và animation dùng đúng cách không chỉ là trang trí mà có giá trị UX thực sự
    • Mỗi năm khoảng một lần tôi lại muốn phần mềm vui nhộn hơn, rồi lại quay về chỉ mong nó đừng làm phiền

  • Sẽ hay hơn nếu hiệu ứng cũng xuất hiện với cường độ nhẹ khi hover chuột. Có vẻ một số control như thanh tiến trình và toast không có hiệu ứng thạch
    Hiệu năng của trang demo cũng không tốt lắm và có cảm giác như nó chặn/cuỗm thao tác cuộn, nhưng nhìn chung khá dễ thương và có vẻ hợp với UI game

  • Phần tử Chip nên chuyển đổi trong khi vẫn ở nguyên vị trí, nhưng khi click thì nó văng ra ngoài biên, nên tôi không thích

  • Dễ thương, nhưng độ phản hồi của một số control quá tệ. Khi kéo slider qua lại, nó tụt lại rất xa sau con trỏ chuột; lẽ ra phải bám theo con trỏ như được dán keo
    Ngược lại, các control khác như jelly-resizable lại bám con trỏ khá tốt. Control "Placeholder" có vẻ không làm biến mất placeholder khi click

  • Không biết có ai còn nhớ trên website, blog và showcase của Paul Neave khoảng giai đoạn 2007–2010 từng có hiệu ứng thạch tương tự ở viền trang không. Khi đó được triển khai bằng Flash
    Thời ấy Paul Neave là một người hùng cá nhân của tôi; nếu anh ấy đọc được dòng này thì mong anh vẫn khỏe

  • Tôi rất khó tìm thấy bất cứ thứ gì có thể gọi là hiệu ứng vật lý trong hệ thống thiết kế UI này

    • Thư viện này tôn trọng cài đặt giảm chuyển động của client nên tắt toàn bộ hiệu ứng animation

  • Có thể là do dạng rối loạn sắc giác của tôi hoặc do thiết lập màn hình, nhưng màu đỏ và màu hổ phách quá giống nhau đến mức tôi thậm chí không phân biệt được mình đã nhấn button hay chưa