Jul 14, 2022

Wireframe là gì? Những điều cần biết về Wireframe

Wireframe được sử dụng ở giai đoạn đầu trong quá trình phát triển dự án để giúp người dùng và khách hàng có thể xem xét và chấp thuận layout của trang chính và các thanh điều hướng. Wireframe cũng giúp tiết kiệm đáng kể thời gian và tiền bạc trong giai đoạn kiểm thử và giai đoạn bảo trì sau này của dự án.

1. Wireframe là gì?

Wireframe là việc thực hiện thiết kế dịch vụ trang web ở cấp độ cấu trúc. Một Wireframe thường được sử dụng để bố trí layout của nội dung và chức năng trên một trang, có sự xem xét đến nhu cầu của người dùng và hành trình của người dùng (user journeys). Wireframe được sử dụng trong giai đoạn đầu của quá trình phát triển sản phẩm để thiết lập cấu trúc cơ bản của một trang trước khi thiết kế và thêm nội dung vào.

2. Đặc điểm của wireframe

Wireframe là công cụ cần thiết trong thiết kế giao diện người dùng (thiết kế UI)

Wireframe là bố cục của một trang web thể hiện các yếu tố giao diện sẽ hiển thị trên trang chính, đây là một phần trọng của quá trình thiết kế tương tác.

Mục đích của wireframe là cung cấp các hiểu biết trực quan về trang trong giai đoạn đầu của dự án để giúp các bên liên quan và nhóm dự án sớm chấp thuận trước khi bước sang giai đoạn sáng tạo. Wireframe cũng được sử dụng để tạo ra điều hướng toàn cục và điều hướng thứ cấp (secondary navigation) để đảm bảo thuật ngữ và cấu trúc được sử dụng cho trang web đáp ứng với mong đợi của người dùng.

Wireframe dễ được chấp thuận hơn so với thiết kế khái niệm

Việc xem xét và sửa đổi cấu trúc của các trang chính ở định dạng wireframe khá là nhanh và rẻ. Việc lặp lại quá trình phát triển wireframe cho đến phiên bản cuối cùng sẽ giúp khách hàng và nhóm thiết kế tin tưởng rằng sản phẩm đang đáp ứng đúng nhu cầu của người dùng trong khi vẫn hoàn thành các mục tiêu kinh doanh và dự án chính.

Wireframe diễn ra ở giai đoạn đầu của vòng đời dự án

Thường được dùng để hoàn thành quy trình Thiết kế lấy người dùng làm trung tâm, Wireframe cũng được sử dụng ở giai đoạn đầu của quá trình thiết kế. Một bài kiểm tra khả năng sử dụng prototype thường sẽ là bài kiểm tra các trang wireframe để nhận được phản hồi của người dùng trước khi đến với quy trình sáng tạo.

Wireframe có thể đơn giản được vẽ bằng tay nhưng nó thường được kết hợp với sử dụng phần mềm như Microsoft’s Visio. Tuy nhiên, nếu wireframe được sử dụng cho một bài kiểm tra sử dụng prototype , thì cách tốt nhất là tạo ra trên HTML. Một số phần mềm tốt để xây dựng Wireframe dễ dàng là Axure RP hoặc Omnigraffle (chỉ dành cho Macbook).

3. Ưu nhược điểm của Wireframe

Ưu điểm

Một trong những lợi thế nổi bật của wireframe là khả năng cung cấp hình ảnh trực quan và sử dụng nó để duyệt lại với khách hàng. Người dùng cũng có thể dùng wireframe như một cơ chế phản hồi ban đầu cho các bài kiểm tra về khả năng sử dụng Prototype. Wireframe không những dễ dàng sửa đổi hơn so với thiết kế khái niệm, một khi nó được cả khách hàng và người dùng chấp thuận, nó đem đến sự tin tưởng cho nhà thiết kế.

Từ góc độ thực tế, wireframe đảm bảo nội dung và chức năng của trang được định vị một cách chính xác dựa trên nhu cầu của người dùng và doanh nghiệp. Và khi dự án tiến triển, wireframe có thể được sử dụng như một cuộc đối thoại tốt giữa các thành viên trong nhóm dự án để cùng nhau thống nhất về tầm nhìn và phạm vi của dự án.

Hạn chế

Vì Wireframe không bao gồm việc thiết kế, hoặc bất kỳ hàm ý về kỹ thuật nào, nên không phải lúc nào khách hàng cũng dễ dàng nắm bắt được các khái niệm này. Nhà thiết kế cũng sẽ phải chuyển các wireframe thành các mẫu thiết kế, vì vậy thường cần giao tiếp hỗ trợ giải thích tại sao thành phần này trong trang được sắp xếp nằm ở vị trí đó trong wireframe. Ngoài ra, khi nội dung được thêm vào, ban đầu có thể có quá nhiều nội dung nên không thể đáp ứng được layout của wireframe, vì vậy mà nhà thiết kế và copywriter cần làm việc chặt chẽ với nhau để trang trở nên được hoàn thiện.

Hy vọng thông tin của bài viết sẽ đưa bạn tiến xa hơn trong hành trình thiết kế Wireframe của bạn và đừng quên đón xem các bài viết mới nhất sẽ được cập nhật thường xuyên tại BAC's Blog.

Nguồn tham khảo:
https://www.experienceux.co.uk
https://balsamiq.com

Nhu cầu đào tạo doanh nghiệp

BAC là đơn vị đào tạo BA đầu tiên tại Việt Nam. Đối tác chính thức của IIBA quốc tế. Ngoài các khóa học public, BAC còn có các khóa học in house dành riêng cho từng doanh nghiệp. Chương trình được thiết kế riêng theo yêu cầu của doanh nghiệp, giúp doanh nghiệp giải quyết những khó khăn và tư vấn phát triển.

Tham khảo chương trình đào tạo:

Các bài viết liên quan Power BI:

Các bài viết liên quan:

TABLEAU - Giải pháp BUSINESS INTELLIGENCE (BI) - click vào đây
Hướng dẫn cài đặt và Sử dụng TABLEAU - click vào đây
Tính năng mới trên tableau - verion 2019.1 - click vào đây

BAC - Biên soạn và tổng hợp nội dung

Click để đọc tiếp

Các Business Analyst cần trau dồi những công nghệ gì trong năm 2025

Đối với sự phát triển nhanh chóng của công nghệ ngày này, việc không ngừng trau dồi và học hỏi là điều bắt buộc mà các Business Analyst phải làm để phát triển hơn trong lĩnh vực phân tích nghiệp vụ. Trong bài viết này, các bạn hãy cùng BAC tìm hiểu các xu hướng và các kỹ năng mới để làm hành trang trên sự nghiệp Business Analyst nhé!
Sự khác biệt giữa UAT và Usability Testing Business Analyst cần lưu ý

UAT và Usability Testing thường được mang lên bàn cân để so sánh nhưng, đây là 2 phương pháp kiểm thử khác nhau. Trong khi Usability Testing đảm bảo sự hài lòng của người dùng thì UAT lại giúp các Business Analyst xác thực chức năng. Cả hai đều là một phần không thể thiếu để cung cấp một sản phẩm chất lượng cao. Hãy cùng BAC tìm hiểu ngay nhé!
API là gì? Khám phá cầu nối giữa các ứng dụng

API là nền tảng quan trọng kết nối các ứng dụng và dịch vụ trong kỷ nguyên số, tạo ra sự linh hoạt, hiệu quả và mở rộng cho các hệ thống. Bài viết sau giới thiệu API, cách hoạt động, các kiểu kiến trúc phổ biến cùng các công cụ kiểm thử API như Postman.
Meta AI là gì và cách sử dụng Meta AI hiệu quả 2025

Meta AI là một công cụ Trí Tuệ Nhân Tạo do chính công ty mẹ của Facebook, Instagram, WhatsApp ra mắt. Đây được xem là một cuộc cách mạng sẽ làm thay đổi cách mà các doanh nghiệp và người dùng sử dụng mạng xã hội.

Bình luận

Nguyễn Thị Mai Bình

Business Analyst

Với một người ngoại đạo như mình thì những chuyên đề về "kỹ thuật" của BA hết sức quan trọng. Ví dụ như sử dụng các diagram để mô hình hóa requirement, viết User Story/Use case, v...v..

Đến với khóa học Fundamental Business Analysis, mình đã được gặp thầy Lộc, một người người rất nhiệt tình và có tâm. Ngoài việc chia sẻ các kinh nghiệm thực tế trên lớp thì thầy còn dành thời gian ra để tư vấn, hỗ trợ, góp ý CV cho mình. Bên cạnh đó trung tâm và anh Phụng cũng hỗ trợ gửi CV, kết nối học viên tới mạng lưới các công ty đối tác chất lượng, điều này giúp học viên như mình tìm được công việc phù hợp nhất. Cảm ơn BAC.
Xem chi tiết +
Phạm Quế

Business Analyst

Khoá học Product Design của BAC đã cung cấp cho tôi nhiều kiến thức và nền tảng vô cùng hữu ích. Giảng viên giảng dạy rất nhiệt tình, truyền cho chúng tôi ngọn lửa đam mê và nhiệt huyết trong ngành. Đồng thời chia sẻ các kiến thức và kỹ năng cần thiết trong bài giảng một cách dễ hiểu hơn. Số lượng học viên không quá nhiều nên chất lượng giảng giạy vô cùng tốt. Giảng viên sửa bài tập 1-1 nên bài giảng sẽ chuyên sâu hơn.
Xem chi tiết +
Nguyễn Văn Long

Chuyên viên về chế độ kế toán & Giải pháp nghiệp vụ Tài chính kế toán trong ứng dụng CNTT - Tập đoàn Điện lực Việt Nam (EVN)

Tôi đã tham gia khóa Phân tích nghiệp vụ phần mềm cơ bản 3.0 tại BAC. Ở đây, tài liệu đào tạo cung cấp nhiều nội dung bổ ích và trình bày dễ hiểu. Giảng viên rất nhiệt tình, ngoài nội dung giảng dạy theo giáo trình còn chia sẻ nhiều kinh nghiệm thực tiễn, các câu hỏi của học viên đều được giải đáp ngay trên lớp và có minh họa từ các dự án trong thực tế. Sau tất cả, tôi cảm ơn BAC và Thầy giáo Thái Sơn.
Xem chi tiết +