# Wireframe

### 1. **Định nghĩa**

*Wireframe* là một bản thiết kế sơ bộ của một trang web hoặc ứng dụng, thể hiện cấu trúc thông tin và bố cục chính của giao diện người dùng mà không tập trung vào chi tiết về thiết kế đồ họa, màu sắc, hoặc hình ảnh. Wireframe thường được sử dụng trong giai đoạn đầu của quá trình thiết kế sản phẩm để xác định các yếu tố cấu trúc cơ bản như vị trí các thành phần, phân loại nội dung, và luồng người dùng. Wireframe giúp các nhóm thiết kế và phát triển đồng thuận về cách sắp xếp và tổ chức các yếu tố trên giao diện.

Có 2 loại Wireframe chính là Low-Fidelity(Low-fi) Wireframe và High-Fidelity(High-fi) Wireframe.

### **2. Ví dụ minh họa**

<figure><img src="/files/P3e9x7bMjIO1KI9MwNzz" alt="" width="563"><figcaption><p>Low-fidelity wireframe</p></figcaption></figure>

<figure><img src="/files/zcNojqbMgiFyqP5TOLTA" alt="" width="563"><figcaption><p>High-fidelity wireframe</p></figcaption></figure>

### **3. Tầm quan trọng**

* Wireframe cung cấp một cái nhìn tổng quan và rõ ràng về cấu trúc của giao diện người dùng mà không bị phân tâm bởi các yếu tố thiết kế chi tiết.&#x20;
* Wireframe giúp đảm bảo rằng tất cả các yếu tố cần thiết được bao gồm và sắp xếp hợp lý trước khi đi vào giai đoạn thiết kế chi tiết. Nó cũng giúp các bên liên quan, như khách hàng, nhà phát triển, và nhà thiết kế, dễ dàng trao đổi ý tưởng và phản hồi về cấu trúc và chức năng của giao diện.
* Wireframe giảm thiểu rủi ro và chi phí phát triển bằng cách cho phép các thay đổi và cải tiến sớm trong quá trình thiết kế, giúp tối ưu hóa trải nghiệm người dùng và đảm bảo rằng sản phẩm cuối cùng đáp ứng đúng yêu cầu và mong đợi.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tudien.dlabsproduct.com/w/wireframe.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.