# CHƯƠNG 3. BÀI TẬP CẦN THỰC HIỆN SAU KHI HỌC

### **CHƯƠNG 3. BÀI TẬP CẦN THỰC HIỆN SAU KHI HỌC**

#### 3.1. Mục tiêu của phần bài tập

Phần bài tập nhằm giúp thực tập sinh:

- chuyển kiến thức đã học thành kỹ năng thực hành;
- làm quen với các loại màn hình phổ biến;
- hình thành tư duy thiết kế bám nghiệp vụ;
- rèn khả năng tự rà soát và cải tiến bản thiết kế.

#### 3.2. Nguyên tắc thực hiện bài tập

Khi làm bài tập, thực tập sinh cần:

- bám mục tiêu nghiệp vụ của bài;
- không chỉ vẽ giao diện đẹp mà phải đúng logic;
- có trạng thái và ghi chú cần thiết;
- sắp xếp file rõ ràng;
- tự rà soát trước khi nộp.

#### 3.3. Danh sách bài tập bắt buộc

#### 3.3.1. Bài tập 1: Thiết kế màn hình đăng nhập

Yêu cầu:

- dựng màn hình đăng nhập cơ bản;
- có tên tài khoản, mật khẩu, nút đăng nhập;
- có trạng thái báo lỗi khi nhập sai hoặc bỏ trống.

Mục tiêu:

- làm quen công cụ;
- học bố cục màn hình đơn giản;
- học thể hiện trạng thái lỗi cơ bản.

#### 3.3.2. Bài tập 2: Thiết kế popup nghiệp vụ

Yêu cầu:

- thiết kế popup xác nhận xóa;
- thiết kế popup cảnh báo;
- thiết kế popup từ chối có ô nhập lý do.

Mục tiêu:

- hiểu sự khác nhau giữa các loại popup;
- học cách viết nội dung ngắn gọn, rõ nghĩa;
- học bố trí nút hành động phù hợp.

#### 3.3.3. Bài tập 3: Thiết kế màn hình danh sách

Yêu cầu:

- có tiêu đề màn hình;
- có nút thêm mới;
- có bộ lọc tìm kiếm;
- có bảng dữ liệu;
- có cột thao tác;
- có phân trang;
- có trạng thái không có dữ liệu.

Mục tiêu:

- học cấu trúc chuẩn của màn hình danh sách;
- học cách tổ chức thông tin có nhiều dòng dữ liệu.

#### 3.3.4. Bài tập 4: Thiết kế màn hình thêm mới/chỉnh sửa

Yêu cầu:

- chọn một đối tượng nghiệp vụ cụ thể;
- thiết kế form nhập liệu;
- có trường bắt buộc, tùy chọn, chỉ đọc;
- có nút lưu, hủy;
- có ghi chú validate cơ bản.

Mục tiêu:

- học cách thiết kế form;
- học cách nhóm trường thông tin;
- học cách thể hiện validate.

#### 3.3.5. Bài tập 5: Thiết kế màn hình chi tiết

Yêu cầu:

- thể hiện thông tin tổng quan;
- thể hiện thông tin chi tiết;
- thể hiện trạng thái;
- có các hành động tiếp theo phù hợp.

Mục tiêu:

- học cách hiển thị dữ liệu đã có;
- học cách nhóm thông tin theo logic nghiệp vụ.

#### 3.3.6. Bài tập 6: Thiết kế trạng thái màn hình

Yêu cầu:

- với một màn hình bất kỳ, bổ sung các trạng thái: 
    - không có dữ liệu;
    - lỗi;
    - chỉ xem;
    - không có quyền.

Mục tiêu:

- rèn tư duy bao quát trường hợp sử dụng;
- tránh thiết kế một chiều.

#### 3.3.7. Bài tập 7: Thiết kế luồng chức năng hoàn chỉnh

Yêu cầu:

- chọn một chức năng nhỏ, ví dụ quản lý hồ sơ, quản lý khách hàng, quản lý công việc;
- thiết kế tối thiểu các màn hình: 
    - danh sách;
    - thêm mới;
    - chi tiết;
    - popup xác nhận hoặc từ chối;
- ghi chú các logic nghiệp vụ chính.

Mục tiêu:

- tổng hợp toàn bộ kiến thức;
- rèn khả năng thiết kế bám use case;
- rèn cách tổ chức file và trình bày luồng.

#### 3.4. Yêu cầu đầu ra đối với bài tập

Mỗi bài tập cần đạt các yêu cầu chung sau:

- đúng mục tiêu bài tập;
- bố cục rõ ràng;
- có tính nhất quán;
- có đủ thành phần chính;
- có ghi chú nghiệp vụ nếu cần;
- file được tổ chức gọn gàng;
- người khác có thể đọc và hiểu.

#### 3.5. Tiêu chí đánh giá bài tập

Bài tập được đánh giá dựa trên các tiêu chí:

- hiểu đúng yêu cầu nghiệp vụ;
- bố cục giao diện hợp lý;
- đầy đủ dữ liệu và thao tác;
- có xét đến trạng thái và tình huống lỗi;
- ghi chú rõ ràng;
- file dễ review;
- có sự cải thiện qua từng lần chỉnh sửa.

#### 3.6. Định hướng tự học sau phần bài tập

Sau khi hoàn thành các bài tập cơ bản, thực tập sinh cần tiếp tục:

- tự dựng lại các màn hình trong dự án thực tế;
- học thêm auto layout, component, prototype cơ bản;
- so sánh các phương án thiết kế;
- chủ động xin review và chỉnh sửa nhiều vòng;
- học cách giải thích bản thiết kế bằng ngôn ngữ nghiệp vụ.

> <span style="color: rgb(224, 62, 45);">**Mẫu thiết kế:**</span> [LT\_TCSG\_ Thư viện thiết kế UI – Figma](https://www.figma.com/design/KsjFoT715YbS46xPCV1tOD/LT_TCSG_-Th%C6%B0-vi%E1%BB%87n-thi%E1%BA%BFt-k%E1%BA%BF-UI?node-id=0-1&p=f&t=fe1O05Oyysijn8cL-0)