Có lẽ bạn thường nghe các thuật ngữ như sketch, wireframe, mockup & prototype trong thiết kế ứng dụng, phần mềm. Nếu bạn chưa thực sự hiểu những thuật ngữ này thì đây là bài viết dành cho bạn. Sau bài viết này, chúng ta sẽ biết được:
- Tại sao cần tới sketch, wireframe, mockup & prototype
- Ý nghĩa và sự khác nhau giữa chúng.
- Một vài công cụ.
I. Tại sao cần chúng ?
Rất đơn giản thôi, bằng việc sketch, wireframe, mockup & prototype sẽ giúp chúng ta:
- Dễ dàng hiểu Flow, dễ dàng trao đổi với đội nhóm về ý tưởng ứng dụng.
- Giúp truyền đạt cho đội ngũ phát triển ứng dụng.
- Trình bày cho nhà đầu tư, khách hàng về ý tưởng, sản phẩm.
1.Sketch (Phác họa)
Đơn giản là việc phác họa các màn hình của ứng dụng, thể hiện nội dung và tính năng của ứng dụng trên giấy (độ chân thực thấp nhất (low-fidelity)). Đây là cách nhanh nhất để trình bày ý tưởng và thảo luận với đội nhóm, tốt hơn rất nhiều so với việc chỉ mô tả mọi thứ bằng lời. Là bước đệm để bạn nhảy tới wireframe.
Công cụ: Giấy bút & khả năng vẽ đẹp chút
Tuy nhiên, với sự xuất hiện của nhiều công cụ hỗ trợ thì chủ yếu mọi người sẽ nhảy thẳng tới bước Wireframe.
2.Wireframe
Đây là 1 khái niệm có nhiều người sẽ nhầm lẫn, (wireframe = mockup = prototype ??? ) Không đúng đâu nhé. Sự nhầm lẫn giữa wireframe, mockup và prototype cũng như việc nhầm lẫn giữa 1 bản thiết kế nhà và bức hình chụp ngôi nhà đó khi đã xây xong vậy.
Với Wireframe cần thể hiện được:
- Nhóm nội dung, tính năng chính (là gì ?)
- Cấu trúc thông tin (đặt các thứ ở đâu ?)
- Màn hình và tương tác cơ bản cho user (thế nào ?)
Tóm lại, wireframe là bản thiết kế màn hình khung xương, với độ trung thực thấp (low-fidelity) chưa bao gồm việc thiết kế giao diện ( màu sắc, hình ảnh).
Công cụ: (có rất nhiều) thường dùng Powerpoint / Balsamiq / Visio
3.Mockup
Đây là bản thiết kế với mức độ trung thực từ trung bình → cao. “Trung bình” với bản thiết kế nháp, “cao” với bản thiết kế chuẩn (Bản thiết kế khi này đã thêm màu, font, text, hình ảnh, logo,..) Hãy nghĩ tới thiết kế UI ở bước này nhé.
Bản mockup sẽ:
- Thể hiện được cấu trúc thông tin nội dung, đồ họa màn hình, tập trung vào các tính năng. Bạn sẽ có 1 static map cho ứng dụng.
- Phục vụ việc review lại thiết kế hoặc trinh bày với nhà đầu tư, cổ đông.
Sau khi hoàn thành mockup, bạn đã có thể chuyển cho bên lập trình viên để cắt HTML/CSS, bắt đầu xây dựng sản phẩm.
Công cụ: Sketch (onlyMac), Photoshop, Illustrator, Adobe XD.
4.Prototype (optional)
Nhắc tới Prototype chắc chắn đây là một bản thiết kế với độ trung thực cao nhất (high-fidelity). Nó tương tự như bản Mockup với độ trung thực cao + UX, tương tác, animation.
Với lập trình viên, xây dựng cái này cũng mất công nên có thể coi nó là optional trong quá trình thiết kế. Nhưng nếu bạn có bản prototype để trình bình bày với, đội nhóm, bạn bè, nhà đầu tư, khách hàng thì đó là điều tuyệt với nhất.
Prototype cho chúng ta cảm giác như dùng một ứng dụng thực sự, nhưng thật ra chúng chỉ là các hình ảnh kết nối với nhau.
Công cụ: HTML/CSS/Javascript, SketchUp (only Mac), Adobe XD
4.Tổng kết
| Độ trung thực | Mục đích | Đặc tính | Công cụ | |
| Wireframe | Thấp | Tài liệu, trao đổi, thảo luận nhanh | Phác họa, đen trắng xám hoặc xanh, thể hiện được giao diện | Powpoint/ Balsamiq/ Viso |
| Mockup | Trung bình – Cao | Thu thập ý kiến, xây dựng ứng dụng, trình bày nhà đầu tư. | Giao diện có thiết kế UI, ảnh tĩnh | Sketch (onlyMac), Photoshop, Illustrator, Adobe XD |
| Prototype | Cao | Test người dùng, trình bày, dùng lại giao diện. | UI chi tiết + UX animation, flow | HTML/CSS/Javascript, SketchUp (only Mac), Adobe XD |
II.Tóm tắt
III.Tham khảo