IUH - BÁO CÁO TƯƠNG TÁC NGƯỜI MÁY - THIẾT KẾ GIAO DIỆN KARAOKE BOX

Tên kịch bản: Một nhóm bạn tự do sử dụng Karaoke Box và thanh toán theo thời gian hát. Nhân vật: • Nam: Người khởi xướng, chịu trách nhiệm nạp tiền và quản lý thời gian. • Mai, An, Bình: Bạn bè, cùng tham gia hát. Bối cảnh: Nhóm của Nam đang đi chơi tại một trung tâm thương mại. Họ tình cờ thấy một khu vực các Karaoke Box tự phục vụ và quyết định vào hát ngẫu hứng. Mô tả chi tiết kịch bản: 1. Bắt đầu phiên hát: o Nhóm chọn một phòng Karaoke Box trống. Bên trong được trang bị một màn hình cảm ứng lớn, hai micro và ghế ngồi. o Hệ thống khởi động và hiển thị Trang Chủ của Oraka với giao diện sống động. Một thông báo lớn hiện lên: "Vui lòng nạp tiền để bắt đầu phiên hát" với nút dẫn đến màn hình Nạp Tiền. 2. Nạp tiền vào tài khoản: o Nam, với tư cách là người sẽ thanh toán, chạm vào nút "Nạp Tiền". Trên màn hình Nạp Tiền, anh ấy chọn một trong các gói thời gian (ví dụ: 30 phút, 60 phút) hoặc nạp một số tiền cụ thể. o Nam sử dụng tính năng quét mã QR trên màn hình để thanh toán trực tiếp từ ví điện tử trên điện thoại. Giao dịch thành công, số dư thời gian/tiền tệ được cập nhật và hiển thị ở góc màn hình. Phiên hát chính thức bắt đầu. 3. Chọn bài hát và tương tác: o Cả nhóm hào hứng bắt đầu chọn bài. An muốn hát một bài mới nhất, bạn ấy vào mục Top Hit để chọn. o Mai là fan cứng của một ca sĩ, cô vào Danh Sách Ca Sĩ để tìm và chọn nhanh Bài Hát Của Ca Sĩ. o Bình không nhớ rõ tên bài hát, cậu sử dụng tính năng Tìm Kiếm Bài Hát, nhập vài từ khóa để tìm. o Mỗi bài hát được tìm thấy đều được thêm vào Danh Sách Đã Chọn (5). Nam vào đây để sắp xếp thứ tự hoặc xóa bài nếu cần. 4. Trải nghiệm hát: o Khi bài hát đầu tiên bắt đầu, giao diện chuyển sang màn hình Hát với lời bài hát rõ ràng và hình ảnh minh họa đẹp mắt. o Giữa chừng, Nam cảm thấy chất âm chưa ổn. Bạn ấy tạm dừng bài hát và mở màn hình Âm Lượng & Hiệu Ứng để điều chỉnh tăng âm lượng micro, thêm một chút echo và cân bằng lại nhạc nền. 5. Quản lý và kết thúc phiên hát: o Trong lúc chờ tới lượt, mọi người khám phá các tính năng khác như Bảng Xếp Hạng, Bộ Sưu Tập, và lưu bài hát yêu thích vào mục Yêu Thích. o Khi số dư thời gian sắp hết, hệ thống hiển thị cảnh báo màu vàng: "Thời gian của bạn sắp hết. Vui lòng nạp thêm tiền để tiếp tục.". o Nhóm quyết định kết thúc sau khi hát xong bài cuối cùng. Hệ thống tự động chuyển về màn hình tổng kết, hiển thị chi tiết thời gian đã sử dụng và số tiền đã tiêu. Nam xác nhận kết thúc phiên. Cánh cửa phòng tự động mở khóa, và nhóm rời đi. 2. Phân tích tác vụ bằng HTA 3. Thiết kế giao diện phần cứng 3.1. Sketching 3.1.1. Nguyễn Chí Thuận

BỘ CÔNG THƯƠNG TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

 BÁO CÁO THƯỜNG KỲ 3

CHỦ ĐỀ:

THIẾT KẾ GIAO DIỆN KARAOKE BOX

Giảng viên hướng dẫn : ThS Phan Thị Bảo Trân Nhóm thực hiện : Nhóm 7

Lớp : DHCNTT19A

Mã học phần : 420300107602

TP.HCM, ngày 17 tháng 11 năm 2025

1

MỤC LỤC

1 Kịch bản sử dụng 5

2 Phân tích tác vụ bằng HTA 7

3 Thiết kế giao diện phần cứng 8

3.1 Sketching 8

3.1.1 Nguyễn Chí Thuận 8

3.1.2 Trịnh Công Tuyền 9

3.1.3 Trịnh Văn Vũ 10

3.1.4 Nguyễn Kim Trọng 11

3.1.5 Xú Trường Năm 12

3.1.6 Dương Minh Quốc Bảo 13

4 Thiết kế giao diện phần mềm 14

4.1 Sketching 14

4.1.1 Nguyễn Chí Thuận 14

4.1.2 Trịnh Công Tuyền 17

4.1.3 Trịnh Văn Vũ 19

4.1.4 Nguyễn Kim Trọng 19

4.1.5 Xú Trường Năm 19

4.1.6 Dương Minh Quốc Bảo 20

4.2 Figma 23

Link Figma: Karaoke Box App 23

4.2.1 Giao diện Trang chủ 23

4.2.2 Giao diện Top hit 24

4.2.3 Giao diện Danh sách ca sĩ 24

4.2.4 Giao diện Youtube 25

4.2.5 Giao diện Đăng nhập 25

4.2.6 Giao diện Danh sách đã chọn 26

4.2.7 Giao diện Bộ sưu tập 26

4.2.8 Giao diện yêu thích 27

4.2.9 Giao diện Lịch sử phát 27

4.2.10 Giao diện Playlist của tôi 28

4.2.11 Giao diện Bảng xếp hạng 28

4.2.12 Giao diện Next 29

4.2.13 Giao diện Âm lượng & hiệu ứng 29

4.2.14 Giao diện Nạp tiền 30

4.2.15 Giao diện Cài đặt 30

4.2.16 Giao diện Hướng dẫn sử dụng 31

4.2.17 Giao diện Hỗ trợ khách hàng 31

4.2.18 Giao diện Hát 32

4.2.19 Giao diện Bài hát của ca sĩ 32

4.2.20 Giao diện Tìm kiếm bài hát 32

DANH SÁCH THÀNH VIÊN

1 Nguyễn Chí Thuận 22685781 Nhóm trưởng

2 Trịnh Văn Vũ 22685821 Thành viên

3 Trịnh Công Tuyền 22715951 Thành viên

4 Trần Kim Trọng 22697491 Thành viên

5 Xú Trường Năm 22721141 Thành viên

6 Dương Minh Quốc Bảo 22645861 Thành viên

KẾ HOẠCH CHI TIẾT

4.2.19 Giao diện Bài hát của ca sĩ

4.2.20 Giao diện Tìm kiếm bài hát

4.2.1 Giao diện Trang chủ

4.2.15 Giao diện Cài đặt

4.2.16 Giao diện Hướng dẫn sử dụng

4.2.17 Giao diện Hỗ trợ khách hàng

Trịnh Công Tuyền

Figma, Sketching phần cứng, phần mềm

giao diện:

4.2.1 Giao diện Trang chủ

4.2.12 Giao diện Next

4.2.13 Giao diện Âm lượng & hiệu ứng

4.2.14 Giao diện Nạp tiền

Trần Kim Trọng

Figma, Sketching phần cứng, phần mềm

giao diện:

4.2.1 Giao diện Trang chủ

4.2.2 Giao diện Top hit

4.2.3 Giao diện Danh sách ca sĩ

4.2.4 Giao diện Youtube

Xú Trường Năm

Figma, Sketching phần cứng, phần mềm

giao diện:

4.2.5 Giao diện Đăng nhập

4.2.6 Giao diện Danh sách đã chọn

Dương Minh Quốc Bảo

4.2.7 Giao diện Bộ sưu tập

4.2.8 Giao diện yêu thích

 Nam: Người khởi xướng, chịu trách nhiệm nạp tiền và quản lý thời gian.

 Mai, An, Bình: Bạn bè, cùng tham gia hát.

Bối cảnh: Nhóm của Nam đang đi chơi tại một trung tâm thương mại Họ tình cờ thấy một khu vực các Karaoke Box tự phục vụ và quyết định vào hát ngẫu hứng.

Mô tả chi tiết kịch bản:

2 Nạp tiền vào tài khoản:

o Nam, với tư cách là người sẽ thanh toán, chạm vào nút "Nạp Tiền" Trên màn hình Nạp Tiền, anh ấy chọn một trong các gói thời gian (ví dụ: 30 phút, 60 phút) hoặc nạp một số tiền cụ thể.

o Nam sử dụng tính năng quét mã QR trên màn hình để thanh toán trực tiếp

từ ví điện tử trên điện thoại Giao dịch thành công, số dư thời gian/tiền tệ được cập nhật và hiển thị ở góc màn hình Phiên hát chính thức bắt đầu.

3 Chọn bài hát và tương tác:

o Cả nhóm hào hứng bắt đầu chọn bài An muốn hát một bài mới nhất, bạn

ấy vào mục Top Hit để chọn.

o Mai là fan cứng của một ca sĩ, cô vào Danh Sách Ca Sĩ để tìm và chọn nhanh Bài Hát Của Ca Sĩ.

o Bình không nhớ rõ tên bài hát, cậu sử dụng tính năng Tìm Kiếm Bài Hát, nhập vài từ khóa để tìm.

o Mỗi bài hát được tìm thấy đều được thêm vào Danh Sách Đã Chọn (5) Nam vào đây để sắp xếp thứ tự hoặc xóa bài nếu cần.

4 Trải nghiệm hát:

o Khi bài hát đầu tiên bắt đầu, giao diện chuyển sang màn hình Hát với lời bài hát rõ ràng và hình ảnh minh họa đẹp mắt.

o Giữa chừng, Nam cảm thấy chất âm chưa ổn Bạn ấy tạm dừng bài hát và

mở màn hình Âm Lượng & Hiệu Ứng để điều chỉnh tăng âm lượng micro, thêm một chút echo và cân bằng lại nhạc nền.

3 Thiết kế giao diện phần cứng

3.1 Sketching

3.1.1 Nguyễn Chí Thuận

3.1.2 Trịnh Công Tuyền

3.1.3 Trịnh Văn Vũ

3.1.4 Nguyễn Kim Trọng

3.1.5 Xú Trường Năm

3.1.6 Dương Minh Quốc Bảo

4 Thiết kế giao diện phần mềm

4.1 Sketching

4.1.1 Nguyễn Chí Thuận

NHÓM 7 16

NHÓM 7 17

4.1.2 Trịnh Công Tuyền

NHÓM 7 19

NHÓM 7 20

4.1.3 Trịnh Văn Vũ

NHÓM 7 22

4.1.4 Nguyễn Kim Trọng

NHÓM 7 24

NHÓM 7 25

4.1.5 Xú Trường Năm

NHÓM 7 27

NHÓM 7 28

4.1.6 Dương Minh Quốc Bảo

NHÓM 7 30

4.2 Figma

Link Figma: Karaoke Box App

4.2.1 Giao diện Trang chủ

4.2.2 Giao diện Top hit

4.2.3 Giao diện Danh sách ca sĩ

4.2.4 Giao diện Youtube

4.2.5 Giao diện Đăng nhập

4.2.6 Giao diện Danh sách đã chọn

4.2.7 Giao diện Bộ sưu tập

4.2.8 Giao diện yêu thích

4.2.9 Giao diện Lịch sử phát

4.2.10 Giao diện Playlist của tôi

4.2.11 Giao diện Bảng xếp hạng

4.2.12 Giao diện Next

4.2.13 Giao diện Âm lượng & hiệu ứng

4.2.14 Giao diện Nạp tiền

4.2.15 Giao diện Cài đặt

4.2.16 Giao diện Hướng dẫn sử dụng

4.2.17 Giao diện Hỗ trợ khách hàng

4.2.18 Giao diện Hát

4.2.19 Giao diện Bài hát của ca sĩ

4.2.20 Giao diện Tìm kiếm bài hát