# Thiết kế giao diện hệ thống

Bản thiết kế mô phỏng giao diện người dùng của hệ thống.  
Thể hiện bố cục màn hình, thành phần UI và luồng tương tác cơ bản.  
Giúp hình dung sản phẩm trước khi phát triển và thống nhất với khách hàng.

# CHƯƠNG 1. LÝ THUYẾT TỔNG QUAN VỀ THIẾT KẾ HỆ THỐNG CHO BUSINESS ANALYST

### **CHƯƠNG 1. LÝ THUYẾT TỔNG QUAN VỀ THIẾT KẾ HỆ THỐNG CHO BUSINESS ANALYST**

#### 1.1. Khái niệm thiết kế trong công việc BA

Trong công việc của Business Analyst, thiết kế không chỉ được hiểu là việc tạo ra giao diện đẹp mắt, mà là quá trình chuyển hóa yêu cầu nghiệp vụ thành hình thức trực quan, logic và có khả năng triển khai. Thiết kế trong bối cảnh này giúp mô tả cách hệ thống sẽ hiển thị thông tin, cách người dùng thao tác, cách các trạng thái được thể hiện và cách luồng xử lý diễn ra trên màn hình.

Đối với BA, thiết kế là cầu nối giữa yêu cầu nghiệp vụ và giải pháp triển khai. Một bản thiết kế tốt không nhất thiết phải đẹp theo tiêu chuẩn mỹ thuật cao, nhưng phải giúp người xem hiểu đúng chức năng, đúng dữ liệu, đúng luồng xử lý và đúng mục tiêu sử dụng.

#### 1.2. Vai trò của thiết kế đối với Business Analyst

Thiết kế hỗ trợ Business Analyst trong nhiều hoạt động quan trọng, bao gồm:

- Làm rõ yêu cầu nghiệp vụ;
- Trực quan hóa ý tưởng giải pháp;
- Giảm sai lệch trong trao đổi giữa BA, Dev, Tester viên và các bên liên quan;
- Phát hiện thiếu sót trong phân tích yêu cầu;
- Hỗ trợ review chức năng trước khi phát triển;
- Tạo cơ sở cho việc lập trình, kiểm thử và nghiệm thu.

Thông qua thiết kế, BA có thể trình bày yêu cầu một cách trực quan hơn so với việc chỉ mô tả bằng văn bản. Điều này đặc biệt hữu ích trong các dự án có nhiều màn hình, nhiều vai trò người dùng hoặc nhiều bước xử lý.

#### 1.3. Phân biệt vai trò thiết kế của BA và UI/UX Designer

Business Analyst học thiết kế để phục vụ việc mô tả nghiệp vụ và giải pháp. UI/UX Designer học thiết kế để tối ưu trải nghiệm người dùng, tính thẩm mỹ và tính nhất quán giao diện ở mức chuyên sâu.

Do đó, phạm vi thiết kế của BA thường tập trung vào:

- Bố cục màn hình;
- Trường dữ liệu;
- Nút thao tác;
- Trạng thái hiển thị;
- Validate;
- Quyền thao tác;
- Luồng chuyển bước;
- Ghi chú nghiệp vụ trên màn hình.

BA không cần đi quá sâu vào các nội dung như:

- Thiết kế thương hiệu;
- Màu sắc nâng cao;
- Animation phức tạp;
- Design system quy mô lớn;
- Nghiên cứu UX chuyên sâu.

#### 1.4. Các mức độ thiết kế thường gặp

#### 1.4.1. Wireframe

Wireframe là bản phác thảo khung của màn hình, tập trung vào bố cục và cấu trúc thông tin. Wireframe giúp xác định các vùng chức năng chính, vị trí trường dữ liệu, nút thao tác và luồng nhìn của người dùng.

#### 1.4.2. Mockup

Mockup là phiên bản hoàn thiện hơn của wireframe, thể hiện giao diện rõ ràng hơn về cách trình bày, khoảng cách, font chữ, nút bấm và các thành phần hiển thị.

#### 1.4.3. Prototype

Prototype là mô phỏng tương tác giữa các màn hình. Intern BA không bắt buộc phải thành thạo ngay, nhưng cần hiểu đây là công cụ giúp mô tả luồng thao tác trực quan hơn.

#### 1.5. Quy trình thiết kế cơ bản trong công việc BA

Quy trình thiết kế cơ bản có thể gồm các bước sau:

- Tiếp nhận và phân tích yêu cầu;
- Xác định mục tiêu màn hình;
- Xác định người dùng và hành động chính;
- Xác định dữ liệu đầu vào, đầu ra;
- Xác định các màn hình cần có;
- Dựng wireframe;
- Hoàn thiện mockup cơ bản;
- Bổ sung ghi chú nghiệp vụ;
- Tự rà soát trước khi review.

Quy trình này giúp BA tránh thiết kế theo cảm tính và bảo đảm mỗi màn hình đều có căn cứ từ yêu cầu nghiệp vụ.

#### 1.6. Nguyên tắc chung khi thiết kế đối với BA

Khi thiết kế, thực tập sinh cần ghi nhớ các nguyên tắc sau:

- Thiết kế để làm rõ nghiệp vụ, không phải để trang trí;
- Giao diện phải dễ hiểu, dễ đọc, dễ giải thích;
- Bố cục cần rõ ràng, nhất quán;
- Mọi thành phần trên màn hình phải có lý do nghiệp vụ;
- Phải nghĩ đến trạng thái dữ liệu, validate, quyền thao tác và tình huống lỗi;
- Thiết kế phải hỗ trợ được cho dev code và tester kiểm thử.

#### 1.7. Những lỗi nhận thức thường gặp khi intern BA học thiết kế

Một số sai lầm phổ biến gồm:

- Nghĩ rằng thiết kế chỉ là làm đẹp giao diện;
- Tập trung quá nhiều vào màu sắc, icon, hình thức;
- Dựng màn hình nhưng không bám use case;
- Chỉ làm trạng thái “đẹp nhất” mà quên trạng thái lỗi, rỗng, khóa;
- Cho rằng thiếu thiết kế vẫn có thể mô tả đủ bằng chữ trong mọi trường hợp.

Intern BA cần hiểu rằng giá trị lớn nhất của thiết kế trong công việc BA là khả năng truyền đạt rõ yêu cầu và giảm hiểu sai.

# CHƯƠNG 2. HƯỚNG DẪN HỌC CÔNG CỤ FIGMA

### **CHƯƠNG 2. HƯỚNG DẪN HỌC CÔNG CỤ FIGMA**

#### 2.1. Mục tiêu của chương

Chương này hướng dẫn thực tập sinh Business Analyst học và sử dụng công cụ Figma theo hướng phục vụ công việc phân tích nghiệp vụ, mô tả giao diện và hỗ trợ trao đổi triển khai. Nội dung chương tập trung vào các phần cốt lõi của Figma mà intern BA cần nắm, từ thao tác cơ bản đến các tính năng nâng cao hơn như Auto Layout, Component và Variant.

Mục tiêu của chương không phải để đào tạo thực tập sinh trở thành chuyên viên thiết kế UI/UX chuyên sâu, mà nhằm giúp người học:

- làm quen với môi trường làm việc của Figma;
- sử dụng được các tính năng cơ bản để dựng màn hình;
- biết tổ chức file thiết kế một cách rõ ràng;
- biết áp dụng các tính năng nâng cao ở mức phù hợp để giao diện dễ chỉnh sửa, đồng bộ và có tính tái sử dụng.

#### 2.2. Nguyên tắc học Figma đối với intern BA

Thực tập sinh Business Analyst cần học Figma theo nguyên tắc:

- học để phục vụ công việc BA, không học lan man theo hướng mỹ thuật thuần túy;
- học đến đâu thực hành đến đó;
- ưu tiên nắm chắc phần cơ bản trước khi học các tính năng nâng cao;
- tập trung vào tính rõ ràng, logic và khả năng tái sử dụng trong thiết kế;
- không chỉ biết thao tác mà cần hiểu khi nào nên dùng từng tính năng.

Việc học Figma cần đi theo lộ trình từ dễ đến khó, từ dựng màn hình đơn lẻ đến tổ chức thành bộ màn hình có tính nhất quán.

#### 2.3. Học các phần cơ bản của Figma

#### 2.3.1. Làm quen với giao diện làm việc của Figma

Thực tập sinh cần làm quen với các thành phần chính trong Figma, bao gồm:

- khu vực canvas;
- thanh công cụ;
- panel bên trái để quản lý page, layer và cấu trúc file;
- panel bên phải để chỉnh thuộc tính của đối tượng;
- chế độ thiết kế, prototype và inspect nếu có sử dụng.

Mục tiêu cần đạt:

- hiểu được bố cục giao diện của Figma;
- biết vị trí các khu vực thao tác chính;
- không bị lúng túng khi mở, chỉnh sửa và quản lý file thiết kế.

#### 2.3.2. Học cách tạo và tổ chức file

Thực tập sinh cần học:

- tạo file mới;
- tạo page;
- đặt tên page;
- tạo frame;
- phân biệt frame, section và group;
- tổ chức màn hình theo page và theo luồng nghiệp vụ.

Mục tiêu cần đạt:

- tạo được file thiết kế có cấu trúc rõ ràng;
- biết phân nhóm các màn hình thay vì để toàn bộ nội dung lộn xộn trên cùng một khu vực;
- biết đặt tên các page và frame sao cho dễ đọc, dễ review.

#### 2.3.3. Học các thao tác vẽ và chỉnh sửa cơ bản

Thực tập sinh cần học các thao tác nền tảng như:

- tạo shape cơ bản;
- tạo text;
- chèn line, rectangle, icon, image nếu cần;
- di chuyển, sao chép, nhân bản đối tượng;
- group và ungroup;
- chỉnh kích thước, màu sắc, bo góc, viền;
- căn chỉnh trái, phải, giữa, trên, dưới;
- căn khoảng cách đều giữa các phần tử.

Mục tiêu cần đạt:

- dựng được một màn hình tĩnh cơ bản;
- biết sử dụng các công cụ đơn giản để thể hiện form, bảng, popup, button và các vùng nội dung;
- biết căn chỉnh để giao diện không bị lệch, rối hoặc thiếu nhất quán.

#### 2.3.4. Học quản lý layer và đối tượng

Thực tập sinh cần học:

- layer là gì;
- thứ tự chồng lớp;
- đổi tên layer;
- ẩn/hiện layer;
- khóa layer;
- chọn đúng đối tượng trong trường hợp nhiều lớp chồng lên nhau.

Mục tiêu cần đạt:

- biết quản lý đối tượng trong file;
- tránh tình trạng file rối, khó sửa, khó review;
- tạo thói quen đặt tên rõ ràng cho những đối tượng quan trọng.

#### 2.3.5. Học cách chia sẻ và comment trên Figma

Thực tập sinh cần học:

- share file;
- cấp quyền xem hoặc chỉnh sửa;
- comment trên màn hình;
- phản hồi comment;
- export ảnh hoặc file ở mức cơ bản.

Mục tiêu cần đạt:

- biết sử dụng Figma như công cụ trao đổi nội bộ;
- biết comment đúng vị trí, đúng nội dung;
- hỗ trợ quá trình review thuận tiện hơn.

#### 2.4. Học dựng các thành phần giao diện cơ bản bằng Figma

Sau khi nắm được thao tác cơ bản, thực tập sinh cần học cách dựng các thành phần thường gặp trên màn hình phần mềm nghiệp vụ, bao gồm:

- button;
- input;
- textarea;
- combobox/select;
- checkbox;
- radio button;
- date field;
- tab;
- table cơ bản;
- thẻ trạng thái;
- popup;
- thông báo.

Mục tiêu cần đạt:

- biết sử dụng Figma để dựng ra những thành phần phục vụ trực tiếp cho công việc BA;
- không chỉ biết thao tác rời rạc mà biết ghép các đối tượng thành thành phần giao diện có ý nghĩa;
- có nền tảng để thiết kế các màn hình danh sách, thêm mới, chỉnh sửa, chi tiết và popup.

#### 2.5. Học Auto Layout

#### 2.5.1. Khái niệm Auto Layout

Auto Layout là tính năng cho phép sắp xếp các đối tượng theo hàng hoặc cột, đồng thời kiểm soát khoảng cách, padding và khả năng co giãn của phần tử. Đây là một tính năng rất quan trọng trong Figma vì giúp thiết kế có cấu trúc ổn định, dễ sửa và nhất quán hơn.

Đối với intern BA, Auto Layout không chỉ là nội dung nâng cao mà là tính năng cần được học tương đối sớm sau phần cơ bản.

#### 2.5.2. Nội dung cần học về Auto Layout

Thực tập sinh cần học:

- cách áp dụng Auto Layout cho một khối đối tượng;
- chiều sắp xếp dọc và ngang;
- khoảng cách giữa các phần tử;
- padding trong một khối;
- cách canh lề trong Auto Layout;
- sự khác nhau giữa căn chỉnh thủ công và dùng Auto Layout;
- co giãn kích thước theo nội dung hoặc theo container;
- cách dùng Auto Layout cho button, form row, nhóm nút, popup, card và danh sách đơn giản.

#### 2.5.3. Mục tiêu cần đạt đối với Auto Layout

Sau khi học xong Auto Layout, thực tập sinh cần:

- biết khi nào nên dùng Auto Layout;
- tạo được button và nhóm button bằng Auto Layout;
- tạo được form đơn giản có căn chỉnh đều;
- tạo được popup có bố cục ổn định;
- giảm phụ thuộc vào căn chỉnh thủ công;
- biết sửa một khối giao diện mà không bị vỡ bố cục.

#### 2.5.4. Ý nghĩa của Auto Layout trong công việc BA

Việc học Auto Layout giúp thực tập sinh:

- thiết kế nhanh hơn;
- chỉnh sửa ít lỗi hơn;
- giữ tính nhất quán giữa các màn hình;
- thuận tiện hơn khi một màn hình có nhiều phần tử lặp lại hoặc thay đổi nội dung.

#### 2.6. Học Component

#### 2.6.1. Khái niệm Component

Component là thành phần giao diện có thể tái sử dụng nhiều lần trong file thiết kế, ví dụ như button, input, popup, tag trạng thái hoặc item trong danh sách. Khi dùng Component, người thiết kế có thể tạo một phiên bản chuẩn và dùng lại ở nhiều nơi, giúp giao diện đồng bộ và dễ chỉnh sửa hơn.

#### 2.6.2. Nội dung cần học về Component

Thực tập sinh cần học:

- component là gì;
- tạo component từ một đối tượng;
- tạo instance từ component;
- phân biệt component gốc và instance;
- chỉnh sửa component gốc và ảnh hưởng đến các instance;
- override nội dung ở instance;
- tổ chức component trong file;
- áp dụng component vào các thành phần hay dùng.

#### 2.6.3. Những component cơ bản intern BA cần biết tạo

Thực tập sinh cần tập trung vào các component đơn giản và thiết thực như:

- button;
- input field;
- select field;
- textarea;
- checkbox;
- radio;
- tag trạng thái;
- modal/popup;
- table header;
- item card hoặc khối thông tin đơn giản.

#### 2.6.4. Mục tiêu cần đạt đối với Component

Sau khi học xong Component, thực tập sinh cần:

- biết tạo và sử dụng component cơ bản;
- biết tái sử dụng thành phần thay vì vẽ lại nhiều lần;
- biết chỉnh sửa giao diện đồng bộ hơn;
- bước đầu hình thành tư duy chuẩn hóa thiết kế.

#### 2.6.5. Ý nghĩa của Component trong công việc BA

Component giúp:

- tiết kiệm thời gian dựng màn hình;
- tăng tính nhất quán;
- dễ thay đổi khi yêu cầu chỉnh sửa;
- thuận lợi cho việc chuẩn hóa bộ màn hình trong nội bộ công ty.

#### 2.7. Học Variant

#### 2.7.1. Khái niệm Variant

Variant là cách tổ chức nhiều trạng thái hoặc nhiều phiên bản khác nhau của cùng một component trong một nhóm thống nhất. Ví dụ, một button có thể có các trạng thái mặc định, hover, disabled; hoặc một tag trạng thái có thể có các loại chờ duyệt, đã duyệt, từ chối.

Đối với intern BA, Variant là nội dung nâng cao hơn so với Component, nhưng rất cần học ở mức cơ bản để quản lý các trạng thái giao diện rõ ràng hơn.

#### 2.7.2. Nội dung cần học về Variant

Thực tập sinh cần học:

- variant là gì;
- tạo nhiều biến thể cho một component;
- nhóm các biến thể vào một component set;
- đặt tên thuộc tính cho variant;
- sử dụng variant để thể hiện trạng thái khác nhau;
- áp dụng variant cho button, input, tag trạng thái, tab, checkbox hoặc popup đơn giản.

#### 2.7.3. Ví dụ các trường hợp nên dùng Variant

Thực tập sinh cần biết dùng variant cho các trường hợp như:

- button: mặc định, hover, disabled;
- input: bình thường, focus, lỗi, readonly;
- tag trạng thái: khởi tạo, chờ duyệt, phê duyệt, từ chối;
- tab: đang chọn, chưa chọn;
- checkbox: checked, unchecked, disabled.

#### 2.7.4. Mục tiêu cần đạt đối với Variant

Sau khi học xong Variant, thực tập sinh cần:

- hiểu được lợi ích của việc gom nhiều trạng thái vào một nhóm component;
- biết tạo các biến thể đơn giản;
- biết dùng variant để mô tả trạng thái màn hình rõ hơn;
- tránh việc tạo quá nhiều component rời rạc, khó quản lý.

#### 2.7.5. Ý nghĩa của Variant trong công việc BA

Variant giúp thực tập sinh:

- mô tả rõ các trạng thái của giao diện;
- quản lý file tốt hơn;
- dễ trình bày các trường hợp nghiệp vụ khác nhau;
- thuận tiện hơn khi trao đổi với dev và tester về trạng thái hiển thị.

#### 2.8. Học các nội dung nâng cao khác ở mức cần thiết

Ngoài Auto Layout, Component và Variant, thực tập sinh có thể tiếp cận thêm một số nội dung khác của Figma ở mức phù hợp, bao gồm:

- styles cơ bản cho màu sắc và text;
- prototype ở mức mô phỏng luồng đơn giản;
- thư viện dùng chung trong nội bộ;
- cách duplicate page để làm nhiều phương án;
- cách dùng plugin ở mức an toàn và hợp lý.

Mục tiêu cần đạt:

- hiểu thêm các công cụ hỗ trợ cho việc thiết kế và review;
- không lạm dụng tính năng nâng cao khi chưa nắm chắc phần cơ bản;
- biết chọn công cụ phù hợp với mục đích công việc BA.

#### 2.9. Lộ trình học Figma đề xuất cho intern BA

Để tránh học rời rạc, thực tập sinh nên học theo thứ tự sau:

##### Giai đoạn 1. Làm quen công cụ

- giao diện Figma;
- file, page, frame;
- shape, text, line;
- căn chỉnh và chỉnh sửa cơ bản;
- layer;
- share và comment.

##### Giai đoạn 2. Dựng giao diện cơ bản

- button, input, textarea, checkbox, radio;
- popup;
- bảng dữ liệu đơn giản;
- form cơ bản;
- màn hình danh sách và chi tiết đơn giản.

##### Giai đoạn 3. Học Auto Layout

- padding, spacing;
- bố trí dọc/ngang;
- nhóm button;
- form row;
- popup và card đơn giản.

##### Giai đoạn 4. Học Component

- tạo component;
- instance;
- tái sử dụng thành phần;
- chỉnh sửa đồng bộ.

##### Giai đoạn 5. Học Variant

- tạo các trạng thái của button;
- trạng thái input;
- trạng thái tag;
- nhóm component set.

##### Giai đoạn 6. Áp dụng tổng hợp

- dựng một bộ màn hình hoàn chỉnh;
- dùng Auto Layout cho các khối chính;
- dùng Component cho thành phần lặp lại;
- dùng Variant cho các trạng thái cần thiết.

#### 2.10. Mức độ cần đạt sau khi học Chương 2

Sau khi hoàn thành nội dung của chương này, thực tập sinh cần đạt được các mức sau:

##### Mức cơ bản

- sử dụng được các thao tác chính của Figma;
- tạo được file, page, frame;
- dựng được màn hình đơn giản;
- biết căn chỉnh và tổ chức đối tượng.

##### Mức khá

- dựng được các thành phần giao diện thường gặp;
- biết dùng Auto Layout cho các nhóm nội dung cơ bản;
- biết tạo và sử dụng Component.

##### Mức tốt

- biết dùng Variant để quản lý trạng thái đơn giản;
- biết tổ chức file thiết kế logic, rõ ràng;
- biết áp dụng Figma để dựng bộ màn hình có tính nhất quán và dễ chỉnh sửa.

#### 2.11. Yêu cầu tự học trong quá trình học Figma

Thực tập sinh không chỉ đọc tài liệu mà cần chủ động:

- tự thao tác lại từng tính năng;
- tự dựng lại các ví dụ mẫu;
- thử nhiều cách bố trí khác nhau;
- sửa lại màn hình cũ bằng Auto Layout;
- chuyển các đối tượng lặp lại thành Component;
- tạo Variant cho các trạng thái phổ biến;
- xin review và chỉnh sửa nhiều vòng.

# 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)