205 lines
10 KiB
Markdown
205 lines
10 KiB
Markdown
# WF — Wireframe & bố cục — <US-id>
|
||
|
||
| | |
|
||
|---|---|
|
||
| **Version** | 1.0 |
|
||
| **Date** | YYYY-MM-DD |
|
||
| **Author** | <BA> (skill ba-3-specification, activity `wf`) |
|
||
| **Status** | 🟡 Draft |
|
||
| **Approved by** | Designer: — · PO: — |
|
||
| **Source** | SRS_… v1.0 · UICONV_<PROJECT> v1.0 · <prototype: đường dẫn/URL + phiên bản> |
|
||
| **Scope** | US-0nn · SCR-01, SCR-02, … |
|
||
| **Nguồn bố cục** | 🎨 **Prototype tham chiếu** `<path>` / ✏️ **BA tự dựng — chờ Designer duyệt** |
|
||
| **Tệp kèm** | `WF_<US-id>_v1.0.html` *(low-fi render, mở bằng trình duyệt)* |
|
||
|
||
## Change Log
|
||
|
||
| Version | Date | Người sửa | Thay đổi | CR |
|
||
|---|---|---|---|---|
|
||
| 1.0 | | | Bản đầu | — |
|
||
|
||
> **Quy ước đọc** *(quy tắc W11)*. Bảng thành phần trong `SRS` §2.3.1 quyết định **một phần tử
|
||
> có tồn tại không** và **hành xử thế nào**. Tài liệu này và tệp HTML kèm theo quyết định **nó
|
||
> nằm ở đâu, thứ tự nào, to bằng nào, trông ra sao ở từng trạng thái**. Mâu thuẫn ⇒ SRS thắng
|
||
> về tồn tại/hành vi, WF thắng về bố cục — và mâu thuẫn đó **phải được ghi ở §5**, không im lặng.
|
||
|
||
---
|
||
|
||
## 0. Nguồn bố cục và độ tin cậy
|
||
|
||
| | |
|
||
|---|---|
|
||
| **Prototype tham chiếu** | *(đường dẫn / URL Figma / thư mục ảnh / mục SAD §7 · phiên bản · ngày · ai cung cấp)* |
|
||
| **Định dạng** | Figma / HTML tương tác / ảnh tĩnh / mô tả văn bản / **không có** |
|
||
| **Mức phủ** | n / m màn hình của US này có trong prototype |
|
||
| **Design system** | *(tên + version, hoặc "chưa có — dùng `UICONV` §11")* |
|
||
| **Độ tin cậy** | 🎨 Prototype đã được PO/Design duyệt ⇒ WF là **bản ghi lại** · ✏️ Không có prototype ⇒ WF là **đề xuất của BA**, Designer phải duyệt trước G3 |
|
||
|
||
🔴 **Có prototype thì prototype là nguồn sự thật về bố cục**, WF chỉ ghi lại và đối chiếu với
|
||
SRS. Không có prototype thì WF là đề xuất, và dòng `Approved by: Designer` là **bắt buộc** khi
|
||
`PRODUCT = screen` ở mức `standard` trở lên.
|
||
|
||
## 1. Bản đồ prototype ↔ màn hình
|
||
|
||
*Một dòng cho mỗi `SCR` trong `SRS` §2.1. Màn hình không có trong prototype ⇒ ghi rõ, và mục
|
||
§3 tương ứng do BA tự dựng.*
|
||
|
||
| SCR | Tên màn hình | Có trong prototype | Frame / trang / mục trong prototype | Mức khớp với SRS | Ghi chú |
|
||
|---|---|---|---|---|---|
|
||
| SCR-01 | | ✅ / ❌ | *(vd: Figma frame "Cart / Desktop", hoặc SAD §7.1.1 SCR-04)* | ✅ khớp · 🟠 khác bố cục · 🔴 khác tồn tại/hành vi | → §5 nếu 🟠/🔴 |
|
||
|
||
## 2. Khung bố cục chung
|
||
|
||
*Lấy từ `UICONV` §1 nếu đã có. Chỉ ghi lại phần **khác** hoặc **bổ sung** cho US này.*
|
||
|
||
| | |
|
||
|---|---|
|
||
| **Grid** | *(số cột · gutter · max-width, đơn vị px — nguồn: UICONV / prototype)* |
|
||
| **Vùng cố định** | Header · Sidebar · Footer — *(có / không, nội dung, tham chiếu UICONV §1)* |
|
||
|
||
| Breakpoint | Khoảng (px) | Bố cục | Nguồn |
|
||
|---|---|---|---|
|
||
| Desktop | ≥ 1024 | | UICONV §1 |
|
||
| Tablet | 768–1023 | | |
|
||
| Mobile | < 768 | | |
|
||
|
||
---
|
||
|
||
## 3. Bố cục từng màn hình
|
||
|
||
*Lặp mục này cho **mọi** `SCR` của US, kể cả modal và trang lỗi.*
|
||
|
||
### 3.1 SCR-01 — <Tên màn hình>
|
||
|
||
| | |
|
||
|---|---|
|
||
| **Loại** | Danh sách / Chi tiết / Form / Modal / Trang trạng thái |
|
||
| **Prototype** | *(frame/trang cụ thể, hoặc "✏️ BA tự dựng")* |
|
||
| **HTML** | `WF_<US-id>_v1.0.html#SCR-01` |
|
||
| **Thành phần (SRS §2.3.1)** | C01 … C0n — *(số lượng phải khớp bảng thành phần)* |
|
||
|
||
#### 3.1.1 Bảng vùng
|
||
|
||
*Bảng này thay cho hình vẽ: mỗi vùng là một khối trên màn hình. Tệp HTML render đúng theo bảng này.*
|
||
|
||
| Vùng | Tên | Vị trí desktop | Vị trí mobile | Chứa thành phần | Chiều rộng | Ưu tiên hiển thị |
|
||
|---|---|---|---|---|---|---|
|
||
| Z1 | Header màn hình | Hàng 1, full | Hàng 1 | C01 (tiêu đề), C02 (nút Tạo mới) | 100% | 1 |
|
||
| Z2 | Thanh lọc | Hàng 2, full | Hàng 2, thu gọn thành nút "Lọc" | C03, C04 | 100% | 2 |
|
||
| Z3 | Bảng dữ liệu | Hàng 3, full | Hàng 3, dạng card | C05 | 100% | 1 |
|
||
| Z4 | Phân trang | Hàng 4, phải | Hàng 4, giữa | C06 | auto | 3 |
|
||
|
||
*Ưu tiên hiển thị: 1 = luôn hiện · 2 = có thể gộp/thu gọn ở mobile · 3 = có thể ẩn sau nút.*
|
||
|
||
#### 3.1.2 Vị trí thành phần
|
||
|
||
*Mọi `C-id` trong `SRS` §2.3.1 phải có ở đây. `C-id` có ở đây mà không có trong SRS ⇒ lỗi
|
||
(thành phần chưa được đặc tả hành vi).*
|
||
|
||
| C-id | Tên thành phần | Vùng | Thứ tự trong vùng | Kích thước / độ rộng | Kiểu trình bày | Phần tử trong prototype | Khớp |
|
||
|---|---|---|---|---|---|---|---|
|
||
| C01 | lbl_title | Z1 | 1 | auto | Tiêu đề cấp 1 | | ✅ |
|
||
| C02 | btn_create | Z1 | 2 (phải) | auto | **Nút chính** | | ✅ |
|
||
| C03 | txt_search | Z2 | 1 | 320px | Ô nhập có icon tìm | | 🟠 |
|
||
|
||
**Kiểu trình bày** dùng từ vựng của `UICONV` §11 (nút chính / nút phụ / nút nguy hiểm / liên
|
||
kết / ô nhập / chọn 1 / chọn nhiều / bảng / card / badge trạng thái …). Không tự đặt tên mới.
|
||
|
||
#### 3.1.3 Trạng thái hiển thị
|
||
|
||
*Hành vi và text lấy từ `SRS` §2.3.6 và §4.2. Ở đây chỉ nói **trông thế nào và ở vùng nào**.*
|
||
|
||
| Trạng thái | Vùng thay đổi | Hiển thị gì | Khoá text (SRS §4.2) | Nút hành động |
|
||
|---|---|---|---|---|
|
||
| Đang tải lần đầu | Z3 | Skeleton n dòng *(theo UICONV §6)* | — | — |
|
||
| **Chưa có dữ liệu nào** | Z3 | Minh hoạ + câu dẫn + nút chính | `empty.none` | C02 Tạo mới |
|
||
| **Bộ lọc không khớp** | Z3 | Câu dẫn + nút phụ | `empty.filter` | Xoá lọc |
|
||
| Lỗi tải dữ liệu | Z3 | Banner lỗi trong vùng + nút thử lại | `error.load` | Thử lại |
|
||
| Đang gửi (form) | Nút gửi | Spinner trong nút, khoá form | — | — |
|
||
|
||
🔴 Hai trạng thái rỗng **phải trông khác nhau**, không chỉ khác câu chữ.
|
||
|
||
#### 3.1.4 Responsive
|
||
|
||
| Breakpoint | Thay đổi so với desktop | Thành phần ẩn / gộp / đổi kiểu |
|
||
|---|---|---|
|
||
| Tablet | Z2 xuống 2 hàng | — |
|
||
| Mobile | Z3 đổi bảng → card; Z2 thu vào nút "Lọc" mở bottom-sheet | C04 gộp vào bottom-sheet |
|
||
|
||
#### 3.1.5 Tương tác trình bày
|
||
|
||
*Chỉ phần **trình bày** (hành vi nghiệp vụ đã ở SRS). Mọi con số phải có nguồn — không có ⇒ `OQ`.*
|
||
|
||
| Thành phần | Sự kiện | Phản hồi trình bày | Ngưỡng / thời lượng | Nguồn |
|
||
|---|---|---|---|---|
|
||
| C03 txt_search | Gõ | Gợi ý sau khi ngừng gõ | 300 ms | UICONV §4 |
|
||
| Toàn màn | Lưu thành công | Toast góc trên phải | 3 s, tự đóng | UICONV §5 |
|
||
| C05 bảng | Hover dòng | Đổi nền dòng | — | UICONV §11 |
|
||
|
||
#### 3.1.6 Thứ tự focus *(màn hình có nhập liệu)*
|
||
|
||
| Thứ tự | C-id | Ghi chú |
|
||
|---|---|---|
|
||
| 1 | C03 | Focus mặc định khi vào màn hình |
|
||
|
||
---
|
||
|
||
### 3.2 SCR-02 — <Tên màn hình>
|
||
|
||
*(lặp cấu trúc 3.1)*
|
||
|
||
---
|
||
|
||
## 4. Luồng màn hình theo prototype
|
||
|
||
*Chỉ khi prototype có tương tác. Đối chiếu với sơ đồ điều hướng `SRS` §2.2 — cạnh có trong
|
||
prototype mà SRS không có, hoặc ngược lại, ghi vào §5.*
|
||
|
||
| Từ | Hành động | Đến | Có trong SRS §2.2 | Có trong prototype |
|
||
|---|---|---|---|---|
|
||
| SCR-01 | Bấm dòng | SCR-02 | ✅ | ✅ |
|
||
| SCR-03 | Huỷ giữa chừng | SCR-01 | ✅ | ❌ *(prototype không vẽ nút Huỷ)* → §5 |
|
||
|
||
## 5. Lệch giữa prototype và SRS
|
||
|
||
*Bảng bắt buộc, kể cả khi rỗng (ghi "Không phát hiện lệch, đã đối chiếu n màn hình").*
|
||
|
||
| # | Màn hình | Prototype có | SRS nói | Loại lệch | Bên thắng theo W11 | Xử lý | Ai quyết | Trạng thái |
|
||
|---|---|---|---|---|---|---|---|---|
|
||
| 1 | SCR-03 | Không có nút Huỷ | C07 btn_cancel tồn tại | Tồn tại | **SRS** | Thêm vào WF, báo Design cập nhật prototype | Designer | ☐ |
|
||
| 2 | SCR-01 | Bộ lọc ở sidebar trái | Bảng vùng ghi hàng 2 | Bố cục | **Prototype** | Sửa WF theo prototype | — | ✅ |
|
||
| 3 | SCR-01 | Nút "Tạo" | Nhãn "Tạo mới" | Text | **SRS** (BA sở hữu text, W5) | Design đổi nhãn | Designer | ☐ |
|
||
|
||
Loại lệch: **Tồn tại** · **Hành vi** · **Bố cục** · **Text** · **Trạng thái thiếu**.
|
||
Lệch loại *Tồn tại* hoặc *Hành vi* chưa được quyết ⇒ 🔴 **chặn G3**.
|
||
|
||
## 6. Bàn giao
|
||
|
||
| | |
|
||
|---|---|
|
||
| **Designer còn phải làm** | *(visual: màu, typography, icon, minh hoạ trạng thái rỗng, motion… — hoặc "Không: prototype đã phủ toàn bộ")* — **phạm vi của `ba-design`**: `DS_<PROJECT>` + `HIFI_<US>` + `FIGMA_<US>` + `DSPEC_<US>` |
|
||
| **Dev dùng WF để** | Dựng layout và chọn component theo §3.x.2; **không** suy ra hành vi từ WF |
|
||
| **Không được suy ra từ WF** | Khoảng cách/kích thước chính xác nếu chưa có design system; màu; font |
|
||
| **Khi prototype thay đổi** | Design báo BA ⇒ cập nhật §1, §5 và version WF; SRS chỉ đổi nếu lệch loại Tồn tại/Hành vi |
|
||
|
||
## 7. Open Questions
|
||
|
||
| ID | Câu hỏi | Hỏi ai | Từ ngày | Chặn gì | 🔴 chặn G3? |
|
||
|---|---|---|---|---|---|
|
||
|
||
---
|
||
|
||
## Tự chấm
|
||
|
||
| # | Tiêu chí | ☐/✅ | Ghi chú |
|
||
|---|---|---|---|
|
||
| 1 | Mọi `SCR` trong `SRS` §2.1 có một mục §3 | | |
|
||
| 2 | Mọi `C-id` khớp **hai chiều** giữa `SRS` §2.3.1 và WF §3.x.2 | | *chạy: grep -o "C[0-9][0-9]" cả hai file, so tập* |
|
||
| 3 | Mỗi màn hình có §3.x.3 với **hai trạng thái rỗng trông khác nhau** | | |
|
||
| 4 | Mỗi màn hình web có responsive ≥ 2 breakpoint | | |
|
||
| 5 | Mọi con số ở §3.x.5 có nguồn (UICONV / prototype / OQ) | | |
|
||
| 6 | §5 đã điền, mọi lệch Tồn tại/Hành vi có người quyết | | |
|
||
| 7 | Tệp HTML mở được, mỗi `SCR` một `<section id>`, mỗi thành phần có `data-c` khớp C-id | | |
|
||
| 8 | Kiểu trình bày chỉ dùng từ vựng `UICONV` §11 | | |
|
||
| 9 | Có chữ ký Designer *(bắt buộc ở `standard`+ khi WF do BA tự dựng)* | | |
|