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

AI là gì? Giải thích đơn giản cho người mới bắt đầu

Bài viết này sẽ giúp các bạn tìm hiểu AI theo hướng đơn giản nhất. Bằng cách giải thích ngắn gọn, cô động, súc tích và dễ hiểu, BAC sẽ cho bạn lý giải về cụm từ “AI”. Qua đó, bạn không chỉ hiểu mà còn biết lý do vì sao mình phải học AI.
Top 5 khóa học AI miễn phí cho người mới bắt đầu 2025

Học AI là một nhu cầu có tốc độ tăng trưởng nhanh chóng. Tuy nhiên, để tìm được khóa học phù hợp là điều không hề đơn giản, đặc biệt là với người mới. BAC đã giúp bạn tổng hợp 5 khóa học AI miễn phí tốt nhất cho người mới tại đây.
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́!

Bình luận

Lê Anh Tuấn

Chuyên viên HO - Kỹ thuật Ngân hàng số Eximbank

Tôi là nhân sự thuộc Trung tâm Phát triển CNTT – Khối Ngân hàng số, hiện đang đảm nhiệm vai trò kiểm thử phần mềm (tester). Việc tham gia khóa học Business Analyst đã mang lại cho tôi góc nhìn toàn diện và rõ ràng hơn về vai trò của BA trong lĩnh vực ngân hàng.

Khóa học Fundamental Business Analysis tại BAC không chỉ giúp tôi hiểu đúng bản chất công việc BA mà còn hỗ trợ phát triển tư duy nghiệp vụ – từ tiếp cận giải pháp kỹ thuật sang tập trung vào nhu cầu người dùng. Phương pháp giảng dạy kết hợp lý thuyết và thực hành thực tiễn, cùng các hoạt động mô phỏng, thảo luận nhóm đã giúp tôi nâng cao kỹ năng giao tiếp, phân tích và trình bày yêu cầu – những năng lực thiết yếu để phối hợp hiệu quả giữa các bên trong dự án công nghệ.

Xem chi tiết +
Huỳnh Cao Cường

Nhân viên HO - Kỹ thuật Ngân hàng số Eximbank

Tôi hiện đang công tác tại Trung tâm Phát triển CNTT – Khối CNTT, với vai trò là nhân sự chức năng phụ trách mảng Ngân hàng số, chuyên sâu về kiểm thử phần mềm (Tester). Trước khi tham gia khóa học Fundamental Business Analysis do BAC tổ chức, tôi từng hình dung BA chỉ đơn thuần là cầu nối giữa bộ phận kỹ thuật và nghiệp vụ.

Tuy nhiên, quá trình học đã giúp tôi nhận thức rõ hơn về bản chất và tầm quan trọng của vị trí này. BA không chỉ kết nối các bên liên quan, mà còn giữ vai trò định hình yêu cầu, đảm bảo giải pháp được thiết kế đúng mục tiêu và sát với nhu cầu thực tế. Khóa học đã trang bị cho tôi tư duy phân tích bài bản, khả năng diễn đạt yêu cầu rõ ràng, và kỹ năng phối hợp hiệu quả trong môi trường dự án đa chiều.

Với nền tảng công nghệ thông tin sẵn có, khóa học là bước chuyển hướng quan trọng giúp tôi phát triển tư duy nghiệp vụ vững chắc và sẵn sàng theo đuổi lộ trình nghề nghiệp chuyên sâu trong lĩnh vực Business Analysis tại Eximbank.

Xem chi tiết +
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 +