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ụ.
Mẫu thiết kế: LT_TCSG_ Thư viện thiết kế UI – Figma