Wireflow: Công cụ nguồn mở trực tuyến miễn phí để tạo prototype luồng người dùng

• Wireflow là một công cụ trực tuyến miễn phí cho phép tạo nhanh prototype luồng người dùng mà không cần các công cụ thiết kế phức tạp hay bộ kit riêng
• Cung cấp hơn 100 đồ họa/thẻ và 113 luồng, cho phép kết hợp ngay các thành phần web, tương tác và các trường hợp sử dụng phổ biến
• Hỗ trợ cộng tác thời gian thực và trò chuyện trực tiếp, để mời đồng nghiệp và cùng thiết kế luồng ngay trong cùng một ứng dụng
• Có thể quản lý quyền truy cập dự án/phòng ở chế độ công khai hoặc riêng tư, đồng thời có các tính năng chỉnh sửa cơ bản như phóng to/thu nhỏ, connector và hoàn tác
• Đây là một prototype mang tính dự án phụ được tạo trong chưa đầy một tháng; việc kiểm chứng ý tưởng đã thành công nhưng vẫn còn khả năng có lỗi

---

Công cụ để bắt đầu thiết kế luồng người dùng thật nhanh

• Wireflow là công cụ miễn phí, trực tuyến và nguồn mở để tạo prototype luồng người dùng
• Mục tiêu là giúp tiến hành lập kế hoạch dự án ban đầu và brainstorming mà không cần mua Photoshop, Illustrator, wireframe hoặc bộ kit luồng người dùng
• Cung cấp hơn 100 đồ họa/thẻ, bao gồm các thành phần web, tương tác và các trường hợp sử dụng phổ biến
• Có 113 luồng để lựa chọn, trong 10 danh mục
  • All
  • Article
  • Blog
  • Features
  • Gallery
  • Header
  • Misc
  • Multimedia
  • Sign In
  • Social

Cộng tác và kiểm soát truy cập

• Được xây dựng với trọng tâm là cộng tác thời gian thực, cho phép mời đồng nghiệp cùng làm việc trong cùng một dự án
• Với trò chuyện trực tiếp tích hợp sẵn, có thể trao đổi với thành viên nhóm ngay trong cùng ứng dụng trong lúc thiết kế
• Có thể thiết lập quyền truy cập theo từng dự án hoặc phòng, và cấu hình ở chế độ công khai/riêng tư

Tính năng chỉnh sửa và cấu trúc nguồn mở

• Các công cụ chỉnh sửa cơ bản cung cấp những chức năng cần thiết để bố trí và chỉnh sửa luồng người dùng nhanh chóng
  • Phóng to/thu nhỏ
  • Connector và mũi tên
  • Di chuyển canvas
  • Hoàn tác/làm lại
  • Xóa header
  • Chỉnh sửa văn bản header
  • Đưa lên trước/đưa ra sau
  • Phím tắt
• Wireflow là một dự án nguồn mở hoàn chỉnh và có thể xem trên GitHub
  • Open Source
• Stack công nghệ gồm Node.js, Meteor.js và React.js
  • Node.js: môi trường chạy JavaScript dựa trên engine Chrome V8
  • Meteor.js: nền tảng để xây dựng ứng dụng web và di động bằng JavaScript thuần
  • React.js: thư viện JavaScript khai báo để xây dựng giao diện người dùng

Tình trạng dự án

• Đây là một side project được tạo nhanh song song với các dự án chính khác đang thực hiện vào thời điểm đó, với thời gian phát triển chưa đến một tháng
• Trạng thái hiện tại gần với một prototype miễn phí dùng để kiểm chứng một ý tưởng ứng dụng đơn giản nhưng hữu ích, và có thể vẫn còn lỗi

[GN⁺]

Các bình luận trên Hacker News

• Thoạt nhìn có vẻ hữu ích, nhưng không rõ có đang được bảo trì hay không
  Nhánh main trên GitHub đã nhiều năm chưa được cập nhật: https://github.com/vanila-io/wireflow

  • Ban đầu Wireflow được xây bằng Meteor, và khi đó có cách để lưu dữ liệu
    Sau đó nó được viết lại bằng React nhưng vẫn chưa có cách lưu dữ liệu, và những người bảo trì cũng có các dự án khác chiếm phần lớn thời gian
    Vì vậy tôi tò mò liệu có ai quan tâm đến công cụ kiểu này không, có ai muốn đóng góp thêm cho Wireflow không, hay liệu tin tức mới về một công cụ tương tự có thể tạo thêm sự quan tâm đến việc bảo trì Wireflow hay không
    Đây là vài suy nghĩ với tư cách một trong những người bảo trì Wireflow

• Tôi bấm vào là có thể bắt đầu vẽ ngay, và xuất ra ảnh được
  Không đăng nhập, không đăng ký — thật tuyệt

  • Không cần đăng ký là tốt
    Nhưng tôi không rõ “vẽ” nghĩa là gì, và tự hỏi liệu có cần một công cụ vẽ thực sự hay không
    Trông giống một bộ template để tạo sitemap, nhưng cũng không rõ đây có phải công cụ muốn bao quát cả các mẫu thiết kế di động hay không
    Tôi hiểu là nó được làm trong chưa đầy một tháng, nhưng nếu dành vài ngày học thứ như Principle(https://principle.app/) thì có vẻ phần việc còn lại có thể hoàn tất trong vòng 2 tuần, và cuối cùng còn tạo được một prototype quy mô đầy đủ có thể tương tác

• Trông hay đấy
  Liên kết video YouTube trong README trên GitHub không mở được: https://youtu.be/zm0XbLmXtXY
  Muốn xem video demo mới nhất

• Tôi hơi bối rối về việc họ định phân phối cái này như thế nào
  Nó được giới thiệu như một web app có thể cài đặt, nhưng trên Chrome cho Android thì trông hỏng hoàn toàn
  Tôi không biết mình đã kỳ vọng gì khi kiểm tra bằng điện thoại, nhưng ít nhất tôi nghĩ nó phải chạy được trên máy tính bảng
  Trên điện thoại, mục đích sử dụng có thể chỉ là xem chứ không phải chỉnh sửa dự án; trong công việc thực tế, bạn có thể cần xem lại thay đổi giữa các cuộc họp và trả lời trong chuỗi email hoặc chat Teams
  Nếu cứ phải vật lộn với bản xuất PDF lần sửa thứ n của thiết kế app thì thật tệ, và ai cũng ghét chuyện đó

• Thực ra trước đây tôi từng viết về ý tưởng tạo các sơ đồ luồng như thế này dựa trên wireframe được thu nhỏ một cách thông minh: https://medium.com/proof-of-concept/the-story-of-a-true-ux-t...
  Một ngày nào đó tôi cũng muốn đưa thứ như vậy vào app UX nhỏ của mình(https://www.tinyux.app), nhưng vẫn chưa đụng tới
  Nếu có thể khiến mọi người dù bắt đầu từ góc nhìn luồng, trang hay component thì cuối cùng vẫn dùng cùng một nguồn chân lý duy nhất, điều đó sẽ rất tuyệt
  Trước đây khi tôi trình bày tầm nhìn và khái niệm này tại một buổi gặp mặt các UX designer, phản ứng rất tích cực; nhưng khi tôi cho họ xem prototype các lệnh văn bản kiểu Vim để thao tác wireframe thì mọi người đều ngơ ngác
  Đến giờ tôi vẫn thấy buồn cười vì kỳ vọng đã lệch nhau đến vậy

• Có ai biết dự án tương tự nào được viết bằng Vue.js không?

• Trong sidebar tính năng có ghi permisions, có vẻ là lỗi chính tả của permissions

• Trông thật sự hữu ích
  Tò mò không biết có dễ fork để làm cho biểu tượng thiết kế game không

  • Tôi không hiểu mục đích của dự án này là gì
    Có thể thêm màn hình, nhưng chỉ là đồ họa cơ bản và chỉ đổi được văn bản
    Cũng có thể thêm quan hệ giữa các màn hình, nhưng không click được
    Vậy nên trông giống sitemap, chỉ có vậy thôi sao?

• Prototype luồng người dùng là gì?

  • Là tất cả các bước mà người dùng đi qua để hoàn thành một tác vụ
    Thường ở dạng độ trung thực thấp như wireframe chứ không phải thiết kế hoàn chỉnh, và “prototype” có lẽ nghĩa là có thể click qua lại như prototype trong Figma
    Ví dụ với form đăng nhập, có thể hiển thị trạng thái ban đầu → trạng thái lỗi → trạng thái đang gửi → trạng thái thành công, và có thể gọi đó là “luồng đăng nhập người dùng”

• “It have built in live chat which give you ability to communicate with your team mate and still be in the same app while you collaborating in real-time.”
  Không định soi ngữ pháp, nhưng nếu người liên quan đang xem thì câu này nên được chỉnh lại một chút