Các phần tử UI theo phong cách phác thảo vẽ tay

 (wiredjs.com)
4 điểm bởi GN⁺ 2024-06-01 | 1 bình luận | Chia sẻ qua WhatsApp

Wired Elements

Tổng quan

  • Wired Elements là một thư viện cung cấp các phần tử UI theo phong cách phác thảo như vẽ tay.
  • Có thể dùng cho wireframe, mockup, hoặc phong cách vẽ tay vui nhộn.
  • Các phần tử được vẽ với một chút tính ngẫu nhiên, nên không có hai lần render nào giống hệt nhau.

Demo

  • Demo đơn giản: cung cấp ví dụ chuyển các vòng tròn phác thảo được vẽ bằng rough.js thành các điều khiển wired-element.

Demo trực tiếp

  • Thử wired-elements theo thời gian thực trong Sandbox:
    • Vanilla JS: có thể dùng wired-elements với JavaScript thuần.
    • Vue: có thể dùng wired-elements trong framework Vue.
    • Svelte: có thể dùng wired-elements trong framework Svelte.
    • React: có thể dùng wired-elements thông qua component wrapper cho React.

Tài liệu

  • Cách sử dụng: có thể xem cách dùng wired-elements trên trang GitHub.
  • Tài liệu API: có thể xem API của từng phần tử cụ thể trên trang tài liệu.

Thành phần

  • Cung cấp showcase các thành phần của toàn bộ phần tử wired.

Ghi công

  • wired-elements được xây dựng bằng RoughJS và Lit.

Hỗ trợ dự án

  • Có thể tài trợ cho việc phát triển dự án trên Open Collective hoặc GitHub.

Giấy phép

  • Giấy phép MIT (c) Preet Shihn.

Ý kiến của GN⁺

  • Tính linh hoạt trong thiết kế: phong cách như vẽ tay có thể hữu ích cho các dự án muốn có thiết kế độc đáo.
  • Khả năng tương thích framework: tương thích với nhiều framework nên người dùng có nhiều lựa chọn hơn.
  • Tính ngẫu nhiên: có yếu tố ngẫu nhiên nên mỗi lần đều có thể cho ra kết quả khác nhau, tạo cảm giác mới mẻ.
  • Độ dốc học tập: với kỹ sư mới bắt đầu, việc học một thư viện mới có thể mất thời gian.
  • Giải pháp thay thế: các thư viện khác cung cấp tính năng tương tự gồm có Paper.js, Konva.js, v.v.

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-06-01
Ý kiến trên Hacker News
  • Pencil and paper: có thể tạo cảm giác phác thảo như vẽ tay mà không cần viết mã.
  • Balsamiq Wireframes: được khuyên dùng như một công cụ hữu ích để tạo mockup nhanh và đơn giản.
  • Viết mã: không phù hợp với mục đích tạo mockup nhanh và đơn giản.
  • Phản hồi về thiết kế: sẽ rất hay nếu mỗi lần bật/tắt checkbox lại tạo cảm giác như được vẽ lại bằng tay.
  • WireText: lấy cảm hứng từ một plugin VSCode có thể nhanh chóng tạo mockup theo phong cách vẽ tay.
  • Các thành phần UI kiểu phác thảo: các thành phần UI phong cách phác thảo thì ổn, nhưng font kiểu phác thảo thì không hay. Font sans-serif thông thường và UI kiểu phác thảo không hòa hợp về mặt phong cách.
  • Gợi nhớ Balsamiq: gợi nhớ đến Balsamiq, từng rất thịnh hành khoảng 10 năm trước.
  • Lý do dùng mockup kiểu phác thảo: đã dùng để người dùng hiểu rằng đây không phải là giao diện đã hoàn thiện.
  • Dùng cho sản phẩm thực tế: muốn dùng phong cách này cho sản phẩm thật hoặc bản beta, nhưng có vẻ sẽ tốn quá nhiều công sức bổ sung.
  • Đề xuất DoodleCSS: có lẽ bạn cũng sẽ thích DoodleCSS.
  • rough.js: là một công cụ tuyệt vời và cũng đang được dùng trong excalidraw.