Các thành phần 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 là bộ sưu tập các thành phần UI dùng chung mang phong cách vẽ tay phù hợp để dùng cho wireframe, mockup và UI mang tính vui nhộn
  • Mỗi thành phần đều có tính ngẫu nhiên, nên ngay cả cùng một component cũng không trông hoàn toàn giống nhau ở mỗi lần render
  • Trong bản demo, các điều khiển wired-element cho thấy cách hoạt động bằng cách thay đổi vòng tròn phong cách phác thảo do rough.js vẽ
  • Có ví dụ CodeSandbox cho Vue, Svelte và React; riêng React sử dụng wrapper components riêng
  • Có thể xem cách sử dụng và API của từng thành phần trong tài liệu GitHub, đồng thời xem toàn bộ thành phần trong component showcase

Thành phần UI phong cách phác thảo

  • Wired Elements là tập hợp các thành phần UI dùng chung theo phong cách phác thảo như vẽ tay
  • Có thể dùng khi muốn tạo cảm giác chưa hoàn thiện như wireframe, mockup hoặc tạo UI mang không khí vẽ tay
  • Mỗi thành phần được vẽ với đủ tính ngẫu nhiên, nên ở mỗi lần render sẽ không trông như cùng một hình dạng y hệt
  • Bản demo đơn giản hoạt động bằng cách dùng điều khiển wired-element để thay đổi vòng tròn phong cách phác thảo được vẽ bằng rough.js

Ví dụ và tài liệu

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-06-01
Ý kiến trên Hacker News

  • Trông đẹp và gợi cảm giác hoài niệm một cách kỳ lạ. Một góp ý là tôi đã kỳ vọng mỗi lần bật/tắt checkbox thì dấu tích sẽ hơi khác đi, như thể được vẽ tay lại mỗi lần
    Thêm một chút nhiễu có thể là tính năng hay cho bản 2.0

    • Nếu thêm nhiễu thì mỗi lần render trông sẽ khác nhau, mà tôi không chắc điều đó có tốt không

  • Với mục đích này thì Balsamiq Wireframes là tốt nhất: https://balsamiq.com/wireframes/
    Nếu phải viết code thì sẽ mất đi ý nghĩa làm nhanh và sơ sài

    • Mấy thứ này có thể hữu ích để cho khách hàng thấy rằng thứ họ đang xem không phải thành phẩm mà là một prototype hoạt động được
      Nếu có thể thay đổi thiết kế kiểu thay skin như “napkin look&feel” của Swing ngày xưa thì sẽ hợp hơn: https://napkinlaf.sourceforge.net/
      Tuy nhiên trên web thì ý tưởng “đổi thiết kế bằng cách đổi theme” dường như đã biến mất từ lâu
    • Nếu muốn làm wireframe kiểu vẽ tay trên điện thoại thì có cái này: https://www.tinyux.app
      Nó chọn UX phi tiêu chuẩn vì không muốn dùng kéo-thả trên màn hình cảm ứng nhỏ
    • Tôi rất thích https://wireframesketcher.com/
      Không phụ thuộc cloud và giấy phép trọn đời là $99. Kiểu sản phẩm này ngày càng hiếm
    • Tôi thích Balsamiq. Kiểu wireframe như thế này hữu ích vì nó truyền đạt rằng “đây chỉ là bản phác thảo”, giúp tránh các câu hỏi kiểu “phông chữ này hơi kỳ nhỉ”
    • Balsamiq thật sự rất nhanh và dễ dùng. Tôi nhớ trước đây có công cụ hậu xử lý của bên thứ ba biến Balsamiq Mockups thành code, không biết giờ còn tồn tại không
      Tìm lại thì tên nó là napkee, đã được mã nguồn mở nhưng có vẻ gần 10 năm rồi hầu như không ai đụng vào

  • Nó làm tôi nhớ đến Balsamiq, từng rất thịnh khoảng 10 năm trước

    • Tôi vẫn thấy Balsamiq cực kỳ hữu ích
    • Đến giờ đây vẫn là công cụ đầu tiên tôi dùng để làm mockup. Tôi thấy nó mạnh nhất trong việc truyền đạt cách sản phẩm hoạt động cho các bên liên quan
    • Đúng vậy, tôi cũng định nói y như thế nhưng đã thấy có người nói rồi
      Nếu nhớ không lầm thì nhà sáng lập Balsamiq là Peldi từng viết blog về chuyện này hồi đó. Tôi cũng thích nó. Nó còn khiến tôi lờ mờ nhớ đến font Comic Sans từng thịnh hơn nữa trước đây
    • Hình như trong các X window manager cũng từng có cái cho phép gắn skin theo cách tương tự đúng không?
    • Tôi dùng nó gần như mỗi ngày

  • Trước đây người ta hay dùng mockup phong cách phác thảo để người dùng hiểu rằng đây chưa phải giao diện hoạt động hoàn chỉnh. Không biết giờ ý nghĩa đó đã mất rồi sao

    • Đó chính là mục đích của cái này. Nó được làm để tạo phần mềm mockup

  • Với các thành phần mang cảm giác vẽ tay thì Excalidraw là tốt nhất: https://excalidraw.com/
    Tôi thích ngay lập tức UX của nó và việc có thể hoàn thành nhanh công việc mong muốn, đặc biệt là sơ đồ kiến trúc và mockup độ trung thực thấp. Mọi dữ liệu đều được lưu cục bộ trong trình duyệt nên làm việc offline cũng dễ

    • tldraw.com cũng rất tuyệt

  • Thảo luận trước đó: https://news.ycombinator.com/item?id=17146451 (650 điểm, 121 bình luận)

    • Khi mở ra thì là: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - https://news.ycombinator.com/item?id=17146451 - tháng 5/2018 (120 bình luận)
      Tôi nghĩ còn có một thread khác về cái này hoặc thứ gì đó rất giống nó. Nếu ai tìm được thì có thể thêm vào danh sách

  • Tôi thích các thành phần UI kiểu phác thảo, nhưng ghét font chữ kiểu phác thảo. Font sans-serif bình thường và UI kiểu phác thảo có phải khó dùng chung về mặt phong cách không?

    • Cá nhân tôi lại thích font đó, nhưng mấy font kiểu “chữ viết tay” này lúc nào cũng rơi vào thung lũng kỳ lạ của việc trông như phác thảo nhưng lại đều đặn
      Một glyph riêng lẻ dù có trông như phác thảo đến đâu thì lần nào nó cũng xuất hiện y hệt nhau
    • Nhiều mục trong showcase dùng font bình thường nên có thể tham khảo: https://wiredjs.com/showcase
    • Nếu là font chữ viết tay thì ít nhất nó phải nghiêng sang phải

  • Lấy cảm hứng từ dự án này, tôi đã làm plugin VSCode WireText để tạo nhanh mockup phong cách vẽ tay
    https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...

  • Tôi thích nó vì tính thẩm mỹ. Dễ thương. Tôi không quá bận tâm chuyện nó có hữu ích hơn cho việc nhận phản hồi hay không

    • Nếu chỉ muốn phần nhìn trực quan và không cần phần JS thì có thể dùng PaperCSS

  • Cá nhân tôi thấy phong cách này đủ ổn để dùng trong sản phẩm thật. Hoặc có thể dùng cho bản beta rồi thay khi phát hành chính thức
    Chỉ là có vẻ sẽ phát sinh quá nhiều việc bổ sung

    • Khi mới bắt đầu làm thiết kế, tôi từng chạy thử nghiệm người dùng với prototype độ trung thực thấp cho một phần đội ngũ customer success
      Cách thể hiện trực quan đó nhằm truyền đạt rằng những gì chúng tôi đang cho xem vẫn có thể thay đổi, nhưng phản hồi nhận được lại là “trông kiểu phác thảo này rất hay”. Từ đó về sau tôi không còn dựa vào kiểu thể hiện đó để đánh dấu giai đoạn trong quy trình thiết kế nữa
    • Có lý do để dùng phong cách này cho các bản beta hay alpha. Loại phản hồi bạn nhận được sẽ khác
      Từ lâu tôi từng đọc một bài về việc “làm cho nó trông như chưa hoàn thiện”, có lẽ trong ngữ cảnh AWT look and feel. Liên quan còn có đồ thị kiểu xkcd: https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 ) và https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
      Nếu sản phẩm trông như đã hoàn thiện, thì phản hồi bạn nhận được cũng sẽ xuất phát từ giả định rằng nó là thành phẩm
      Trước đây tôi từng mắc sai lầm là dùng một header trông khá ổn trong lúc đang làm logic JavaScript bên trong. Nó tốt hơn GIF bị kéo giãn mà tôi dùng trước đó, lại còn có cả CSS gradient
      Điều tôi muốn xác nhận là “thứ tự trang trong luồng công việc này đã đúng chưa? Trang này đã có đủ thành phần UI cần cho tính năng này chưa? Có thiếu tính năng nào không?” nhưng phản hồi nhận được lại là chuyện màu xanh và gradient nên đi từ tông tối sang sáng hay ngược lại
      Tìm thêm thì ra look and feel đó là https://napkinlaf.sourceforge.net và từ đó dẫn đến bài blog sau: Don’t make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/...