96 lines
2.6 KiB
Markdown
96 lines
2.6 KiB
Markdown
# FORMAT
|
|
|
|
# UX/UI DOCUMENTATION
|
|
|
|
## Page: [Page/Screen Name]
|
|
### Description: [Brief overview of the page's purpose.]
|
|
### Elements:
|
|
* **[Element Name 1]** (`[Type of Element]`): [Brief description and key properties/states.]
|
|
* **[Element Name 2]** (`[Type of Element]`): [Brief description and key properties/states.]
|
|
* ...
|
|
### Flow:
|
|
1. [User Action 1] -> [Resulting UI Change/Navigation]
|
|
2. [User Action 2] -> [Resulting UI Change/Data Update]
|
|
3. ... (Can also link to flow diagrams)
|
|
### User Stories/Scenarios Supported:
|
|
* [Link/Reference to User Story/Scenario 1]
|
|
* [Link/Reference to User Story/Scenario 2]
|
|
### Accessibility Notes:
|
|
* [Brief notes on accessibility considerations for this page.]
|
|
### References:
|
|
* [Link to Figma/Sketch/Adobe XD file]
|
|
* [Link to related specifications]
|
|
|
|
## Thiết kế giao diện
|
|
|
|
## 1. User-Facing Pages
|
|
|
|
### Homepage
|
|
- Giới thiệu campaign
|
|
- Thông tin về các team
|
|
- CTA đăng ký
|
|
|
|
### Registration Page
|
|
- Form đăng ký chi tiết
|
|
- Upload ảnh
|
|
- Đồng ý điều khoản
|
|
|
|
### Result Page
|
|
- Nhập access code hoặc truy cập qua personal link
|
|
- Hiển thị 3 kết quả matching
|
|
- Nút chọn/từ chối
|
|
|
|
## 2. Admin Pages
|
|
|
|
### Login Page
|
|
- Form đăng nhập admin
|
|
|
|
### Reporting Dashboard
|
|
- Thống kê người dùng
|
|
- Số lượng matching theo team
|
|
- Biểu đồ hoạt động
|
|
|
|
### Campaign Management
|
|
- Timeline campaign
|
|
- Trigger các action (bắt đầu matching, gửi thông báo...)
|
|
|
|
### Gift Management
|
|
- Danh sách quà tặng
|
|
- Thêm/sửa/xóa quà
|
|
- Danh sách người trúng thưởng
|
|
|
|
## 3. UI Components
|
|
- **Form Controls**: Input, Select, Checkbox, File Upload
|
|
- **Cards**: Hiển thị profile matching
|
|
- **Modals**: Điều khoản, thông báo
|
|
- **Loading Indicators**: Khi xử lý matching
|
|
|
|
## 4. UX Flow
|
|
1. Đăng ký → Xác nhận email
|
|
2. Chờ matching → Nhận thông báo
|
|
3. Xem kết quả → Chọn/từ chối
|
|
4. (Nếu trúng) Nhận thông báo quà tặng
|
|
|
|
## Color Scheme
|
|
| Purpose | Color Code |
|
|
|----------------|------------|
|
|
| Primary | #4361EE |
|
|
| Success | #4CC9F0 |
|
|
| Warning | #F8961E |
|
|
| Danger | #F72585 |
|
|
| [Other Purpose] | [Color Code] |
|
|
|
|
## Component Library
|
|
|
|
### Component: [Name]
|
|
#### Description: [Brief description of the Goal Card component's purpose.]
|
|
#### Props/Parameters:
|
|
* `title` (`string`): [Description of the title prop.]
|
|
* `progress` (`number`): [Description of the progress prop (e.g., 0.0 to 1.0).]
|
|
* `deadline` (`string`): [Description of the deadline prop (e.g., format).]
|
|
#### States:
|
|
* Default
|
|
* Completed (visual changes)
|
|
#### Usage Guidelines:
|
|
[Brief instructions on when and how to use the Goal Card]
|
|
--- |