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:

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:

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

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:

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:

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:

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:

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:

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:

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

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

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

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

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ư:

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

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

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

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

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

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

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

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:

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

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:

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:

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:

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:

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ư:

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:

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

Component giúp:

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:

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ư:

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:

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

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

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:

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

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ụ
Giai đoạn 2. Dựng giao diện cơ bản
Giai đoạn 3. Học Auto Layout
Giai đoạn 4. Học Component
Giai đoạn 5. Học Variant
Giai đoạn 6. Áp dụng tổng hợp

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
Mức khá
Mức tốt

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:

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:

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:

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:

Mục tiêu:

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

Yêu cầu:

Mục tiêu:

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

Yêu cầu:

Mục tiê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:

Mục tiêu:

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

Yêu cầu:

Mục tiêu:

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

Yêu cầu:

Mục tiê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:

Mục tiêu:

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:

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í:

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:

 

Mẫu thiết kế: LT_TCSG_ Thư viện thiết kế UI – Figma