WF — Wireframe & bố cục —
|
|
| Version |
1.0 |
| Date |
YYYY-MM-DD |
| Author |
(skill ba-3-specification, activity wf) |
| Status |
🟡 Draft |
| Approved by |
Designer: — · PO: — |
| Source |
SRS_… v1.0 · UICONV_ 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ộ") |
| 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) |
|
|
