Đối với nhân sự làm UX UI Design, người quản lý dự án phát triển web/app/phần mềm thì wireframe như một "tài liệu confirm công việc". Ở đây khi sử dụng wireframe sẽ giúp tránh thống nhất công việc dễ dàng, giảm thiểu thời gian, tối ưu hiệu suất công việc .... và đặc biệt là tránh "cãi nhau về sau" nữa.
1. Wireframe là gì?
Wireframe là một bản thiết kế bố cục cơ bản, thường chỉ phác họa đen trắng về cấu trúc của website/app/phần mềm. Wireframe tập trung vào giao diện cơ bản của website/app/phần mềm, xác định kích thước và vị trí của các thành phần trang.
Nó giống như bản vẽ thô, giúp hình dung được trang sẽ trông như thế nào trước khi đi vào thiết kế chi tiết. Không màu sắc, không hình ảnh cầu kỳ, chỉ tập trung vào cách sắp xếp và tổ chức nội dung. Đây là bước quan trọng để đảm bảo mọi thứ hợp lý ngay từ đầu, tránh việc phải chỉnh sửa nhiều khi đã đi sâu vào thiết kế.
Wireframe cũng có nhiều mức độ chi tiết:
-
Low-fidelity: Chỉ là bản phác thảo đơn giản, đôi khi chỉ cần vẽ tay trên giấy.
-
Mid-fidelity: Cụ thể hơn một chút, có bố cục rõ ràng nhưng vẫn chưa đầy đủ hình ảnh hay màu sắc.
-
High-fidelity: Gần giống với thiết kế hoàn chỉnh, có nội dung mẫu và có thể có tương tác cơ bản.
Tùy vào yêu cầu của dự án mà có thể lên wireframe low, mid hay high nhé. Dùng wireframe giúp mình và team tiết kiệm thời gian, thống nhất ý tưởng ngay từ đầu và đảm bảo trải nghiệm người dùng tốt hơn.
2. Chức năng của wireframe
- Wireframe giúp người thiết kế dễ hình dung được cấu trúc và tổng thể
- Wireframes hiển thị kiến trúc trang website/app/phần mềm một cách trực quan
- Wireframe cho phép làm rõ các tính năng của website/app/phần mềm
- Wireframes dễ cập nhật mới
- Wireframe giúp tiết kiệm thời gian cho toàn bộ dự án
- Wireframe giúp việc sửa đổi nhanh chóng và ít tốn thời gian
3. Cách thiết lập wireframe
Bước 1: Nghiên cứu UX - tìm hiểu hành vi người tiêu dùng đang hướng đến
Trước khi thiết kế, bạn cần biết mình đang thiết kế cho ai, giải quyết vấn đề gì, tại sao giải pháp của bạn là tốt nhất.
Bắt đầu bằng cách tiến hành nghiên cứu kỹ lưỡng về người dùng và doanh nghiệp của bạn.
Hiểu người dùng của bạn là ai, nhu cầu/mong muốn của họ là gì, nỗi sợ hãi của họ là gì, họ hiện đang sử dụng sản phẩm nào, v.v
Bước 2: Phối hợp với các bên liên quan : DEV, SEO, Tester, UI Design
Để các bên liên quan dễ dàng thống nhất về chức năng, luồng người dùng, giao diện, thiết kế, tính khả thi của website/app/phần mềm thì wireframe sẽ phát huy tác dụng. Với một bản phác thảo đơn giản, mọi bên liên quan đều có thể dễ dàng đóng góp ý tưởng và mong muốn của mình trước khi đi đến thống nhất. Thay vì phải thiết kế bản UI Design hoàn chỉnh rồi chỉnh sửa sẽ tốn nhiều thời gian, chi phí thì wire-frame sẽ giúp mọi thứ trở nên dễ dàng hơn rất nhiều.
Bước 3: Lập flow - bản đồ luồng người dùng
Luồng người dùng là một sơ đồ minh hoạ trực quan các đường dẫn mà người dùng đi qua website/app/phần mềm. Người dùng truy cập trang chủ > sử dụng chức năng tìm kiếm để tìm sản phẩm > nhấp vào liên kết đầu tiên > truy cập trang sản phẩm > nhấp vào nút "mua ngay" > thêm thông tin chi tiết về thẻ tín dụng > đơn hàng được xác nhận > người dùng rời khỏi trang web.
Bước 4: Phác thảo sơ bộ bản mobile
- Bắt đầu bằng cách lập bản đồ luồng người dùng mục tiêu
- Phác thảo phần cốt lõi của luồng người dùng
- Bắt đầu tạo khung bằng cách thiết lập khung di động
- Xác định bố cục bằng hộp
- Sử dụng các mẫu thiết kế
- Đưa vào bản sao thực tế
- Kết nối các trang với nhau để tạo luồng
Kiểm tra các thiết kế
Bước 5: Phác thảo sơ bộ bản PC
- Chọn kích thước phù hợp
- Có thể thay đổi các thành phần để đạt được thiết kế trực quan, thân thiện với người dùng.
- Cân nhắc tập trung vào cách sắp xếp nội dung và ưu tiên thông tin dựa trên tầm quan trọng của nó.
- Làm nổi bật các nút, liên kết và các mục có thể nhấp khác.
- Bao gồm các yếu tố tĩnh như menu, tiêu đề, chân trang, v.v.
- Lựa chọn độ trung thực: Quyết định mức độ chi tiết. Các giai đoạn đầu có thể sử dụng các bản phác thảo có độ trung thực thấp, trong khi các dự án chi tiết hướng tới các thiết kế có độ trung thực cao.
Bước 6: Thiết kế wireframe hoàn chỉnh
Rà soát các yêu cầu, thành phần lần cuối để đưa ra bản wire-frame hoàn chỉnh. Đây sẽ là tài nguyên quan trọng nhất để hoàn thành bản thiết kế UI Design hoàn chỉnh.
4. Một số công cụ thiết kế wireframe
a. Sketch
Ưu điểm:
- Người xem và khách không giới hạn
- Trình chỉnh sửa hoạt động ngoại tuyến
Nhược điểm:
Được tạo riêng cho Mac
b. Moqups
Ưu điểm
- Cực kỳ thân thiện với người mới bắt đầu và dễ sử dụng
- Nhiều tùy chọn cộng tác nhóm
- Bạn có thể sử dụng nó cho sơ đồ luồng, sơ đồ, khung dây và mô hình
Nhược điểm
- Bạn không thể sử dụng khi ngoại tuyến
- Tính năng hạn chế so với các công cụ khác có trong danh sách này
c. Figma
Ưu điểm:
- Triển khai bản cập nhật hàng tuần
- Số lượng người xem không giới hạn để cải thiện khả năng cộng tác
Nhược điểm:
Có tính phí
d. UXPin
Ưu điểm
- Lập khung lưới có độ trung thực cao
- Khả năng trình bày trực tiếp và lập tài liệu mạnh mẽ
- Tập trung vào hoạt động thiết kế; mỗi thành phần đều đi kèm với HTML
Nhược điểm
Nó có thể có đường cong học tập khá dốc
e. Justinmind
Ưu điểm:
- Các thành phần UI được cập nhật thường xuyên
- Phiên bản miễn phí
Nhược điểm:
- Phiên bản miễn phí nhưng hạn chế nhiều tính năng
- Để xoá thương hiệu Justinmind cần phải tốn phí
f. Uizard
Ưu điểm
- Tạo khung lưới từ bản phác thảo vẽ tay
- Nhập ảnh chụp màn hình của các ứng dụng/trang web khác và biến chứng thành khung lưới có thể chỉnh sửa
Nhược điểm
Trình tạo văn bản AI tạo ra kết quả chất lượng thấp
Xem thêm: Contact Form Trong Web/App | UX UI Design
