đồ án môn thiết kế giao diện ie106 m21 đề tài thiết kế giao diện cho ứng dụng chủ đề thể thao ứng dụng đặt sân bóng

Điều đó giúp người dùng nhanh chóngnhận diện và lựa chọn.Hình 1.6 Giao diện chi tiết đặt sân- Chi tiết đặt sân:+ Thiết kế về chi tiết sân: Thông tin hiển thị khá đầy đủ, có hiển thịhình

Trang 1

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA HỆ THỐNG THÔNG TIN

ĐỒ ÁN MÔN THIẾT KẾ GIAO DIỆN (IE106.M21)

Đề tài: Thiết kế giao diện cho ứng dụng chủ đề thể thao

Ứng dụng đặt sân bóng

GVHD: ThS Tạ Thu ThủyNhóm sinh viên thực hiện:

Trang 2

IE106.M21 – Thiết kế giao diện người dùng

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

……., ngày…… tháng……năm 2022

Người nhận xét

(Ký tên và ghi rõ họ tên)

Trang 3

MỤC LỤC

1.1 Khảo sát yêu cầu khách hàng và phân tích yêu cầu 5

Chương 2: Phác thảo giao diện Ghi chú, chú thích, giải thích các ý tưởng phác

2.1 Các trang đăng nhập, đăng ký, nhập otp, quên mật khẩu 41

3.1.8 Các giao diện đặt sân thi đấu với đối thủ 77

Trang 4

Trang 5

Chương 1: Khảo sát, phân tích, tham khảo

1.1 Khảo sát yêu cầu khách hàng và phân tích yêu cầu

1.1.1 Khảo sát yêu cầu

Hình 1.1 Khảo sát yêu cầu giới tính, màu thích, môn thể thao thích

Trang 6

Hình 1.2 Khảo sát phương thức đặt, banner, voucher, quảng cáo, thông tin

Trang 7

Hình 1.3 Khảo sát hình thức thanh toán, bản đồ, chia sẻ

Trang 8

1.1.2 Phân tích yêu cầu và đề xuất giải pháp

Sau khi tiến hành khảo sát nhằm phục vụ quá trình xây dựng giao diệnứng dụng, nhóm đưa ra những giải pháp thiết kế giao diện như sau:

Về màu sắc: Đa phần người dùng có xu hướng thích những trang web cótông màu lạnh tạo cảm giác mát mẻ hơn Vậy nên, xây dựng màu sắc có tínhđồng nhất và thiên hướng theo các tông màu lạnh sẽ là lựa chọn phù hợp với đại

đa số người dùng

Về việc bố trí thì những thanh công cụ và font chữ của trang web cũngđược người dùng đặc biệt quan tâm Qua khảo sát trên thì nhóm đã rút ra đượcmột vài kết luận để giúp một giao diện trở nên đẹp và thu hút người dùng hơn:

- Nhóm sẽ cân nhắc chọn màu sách với tông màu lạnh làm màu chủ đạo

- Giao diện thiết đơn giản, gần gũi với người dùng

- Font chữ phù hợp với nhiều độ tuổi khác nhau

- Vị trí các thanh công cụ nhóm sẽ tiếp thu từ những khảo sát trên để cócách bố trí hợp lý dễ sử dụng

- Phương thức thanh toán là sẽ tập trung vào thanh toán bằng momo hoặcphương thức tiền mặt

1.2 Tìm hiểu, nghiên cứu ứng dụng liên quan

1.2.1 Nhận xét ứng dụng Wesport

a. Nhận xét giao diện Wesport

Trang 9

Hình 1.4 Giao diện đăng nhập, đăng ký

- Giao diện Đăng nhập và Đăng ký: Thiết kế khá đại trà, không bắt mắt,nhìn các khối khá thô cứng, không thấy rõ ràng hiệu ứng chuyển đổigiữa đăng nhập và đăng ký

- Về trải nghiệm lúc đăng nhập, đăng ký rất hài lòng, các khối chức năngsắp xếp rất rõ ràng, dễ thao tác, đăng ký và đăng nhập rất nhanh, mượt

mà Đặt biệt là có thể đăng nhập bằng liên kết Google, Facebook rấtnhanh chóng tiện lợi

Hình 1.5 Giao diện chính

Trang 10

- Giao diện chính:

+ Sắp xếp bố cục rất rõ ràng, dễ nhận biết các chức năng, dễ dàngthao tác Bố cục giao diện hiện đại, rất dễ bắt gặp bố cục giao diệnnày trên các ứng dụng khác

+ Tuy sắp xếp khá rõ ràng nhưng dễ nhận thấy giao diện khá thôcứng, không được bắt mắt và không quá cầu kỳ nên điều đó giúpngười dùng nhanh chóng nhận biết và sử dụng dễ dàng

+ Giao diện màn hình chính có thiết kế đều sử dụng hiệu ứng slide.Hình ảnh banner khá đẹp, hình ảnh các cart chân thực Nội dunghiển thị các cart chưa đầy đủ, là một người trải nghiệm nhận xétthì nên để thêm giá sân trung bình ở các cart và địa chỉ hiển thị ưutiên tên quận đến phường Điều đó giúp người dùng nhanh chóngnhận diện và lựa chọn

Hình 1.6 Giao diện chi tiết đặt sân

- Chi tiết đặt sân:

+ Thiết kế về chi tiết sân: Thông tin hiển thị khá đầy đủ, có hiển thịhình ảnh của chân theo dang slide khá đẹp và là hình ảnh thật củasân bóng nên giúp người dùng hình dung được sân bóng như thếnào

Trang 11

khó chịu cho người dùng Việc điền thông tin khá nhanh và thôngminh, khi mọi thông tin đều hiển thị rõ ràng để người dùng chọnlựa

Hình 1.7 Giao diện xác nhận đặt chỗ

- Khi bấm vào kiểm tra tính khả dụng để chọn và đặt sân: Ở phần giaodiện này hiển thị bố cục rất rõ ràng Các hệ thống sân được hiển thị theodanh sách từ trên xuống dưới Hiển thị các thông tin hình ảnh, địa chỉ vàgiá sân đầy đủ, người dùng rất dễ nhận biết và chọn lựa

- Các thông tin hiển thị trong “Xác nhận đặt chỗ” rất đầy đủ, rõ ràng vềmôn thể thao, số người, ngày giờ và giá tiền Người dùng dễ dàng kiểmtra và xác nhận đặt sân bóng

Trang 12

Hình 1.8 Giao diện xác nhận đặt chỗ

- Về giao diện “Hồ sơ” người dùng: Nhìn tổng thể thì giao diện này thiết

kế khá thô sơ, không bắt mắt Nội dung khá đầy đủ nhưng bố cục khôngđược đẹp, màu sắc và các khối khá cứng nhắt Tuy là không đẹp nhưngrất dễ sử dụng

b. Trải nghiệm khi dùng ứng dụng Wesport

Hình 1.9 Đánh giá ứng dụng

Trang 13

- Cá nhân khi trải nghiệm Wesport: Ứng dụng mượt mà, rất hay và dễ sửdụng Hiểu được nhu cầu người dùng cần gì và mong muốn những gì khichơi thể thao Giao diện không được bắt mắt nhưng nó rất rõ ràng, rất dễnhận biết các chức năng

1.2.2 Nhận xét ứng dụng: Đặt lịch bóng đá

a Nhận xét giao diện

Hình 1.10 Giao diện đăng nhập

- Giao diện Đăng nhập: giao diện đơn giản, không cần phải đăng ký tàikhoản

- Về trải nghiệm lúc đăng nhập, giao diện đơn giản, không cần phải đăng

ký tài khoản

Trang 14

Hình 1.11 Giao diện chính

Trang 15

Hình 1.18 Giao diện lọc

Trang 16

Hình 1.19 Giao diện cáp kèo+ Nên có thanh tìm kiếm (theo sân, theo đội bóng, …)

+ Có phần filter, tuy nhiên vị trí sân (sân nhà, của tôi) chưa rõ ràng,

Trang 17

+ Các icon chỉ số của đội bóng chưa trực quan

+ Có hiển thị thời gian bao nhiêu ngày nữa sẽ diễn ra trận khá trựcquan

Hình 1.20 Giao diện cặp trận

Trang 18

+ Màn hình chi tiết: phân biệt text bình thường với text điều hướngbằng màu sắc, các tab phân biệt với nhau bằng màu sắc (active tabmàu cam), viền trái dính sát tạo cảm giác gò bó, số điện thoại liên

hệ nên để đầy đủ thay vì ba chấm, hai nút bấm ở phần liên hệkhông bấm được

+ Màn hình tham gia: nên làm thêm trường chọn đội có thể thamgia (vì có thể có nhiều đội), và thêm trường lời nhắn

- Màn hình thông tin đội bóng:

Trang 19

Trang 20

Trang 21

Hình 1.21 Chi tiết đội

+ Khá hiện đại và đơn giản, nhưng hiển thị đầy đủ thông tin cầnthiết

Trang 22

+ Phần xem thêm của mô tả nhưng chỉ ra danh sách thành viênkhông có các thông tin mô tả khác

Hình 1.22 Giao diện lịch sử thi đấu

Trang 23

+ Phần lịch sử đầu nhưng lại có những trận chưa diễn ra, nên phântách ra thành 2 phần đó là lịch sử đấu và danh sách trận đặt nhưngchưa đấu hoặc chưa có đối thủ

+ Phần thống kê lịch sử đấu (thắng, thua, hòa) khá hay

- Màn hình tin tức:

Trang 24

Hình 1.23 Giao diện tin tức

+ Tên là tin tức nhưng đa số là các bài đăng của các người dùngkhác, như một mạng xã hội thu nhỏ nên có thêm các tin tức thểthao khác để mang đúng nghĩa là tin tức

+ Nút đăng bài không trực quan, trông giống như một dòng giớithiệu hơn là một nút dùng để đăng bài, nên tạo nút đăng bài trựcquan hơn (mang màu chủ đạo, và dính vào màn hình)

+ Một ứng dụng đặt sân, tìm đối thủ mà có tính năng đăng bài kháhay

Trang 25

Hình 1.24 Giao diện tài khoản

Trang 26

Trang 27

Trang 28

Trang 29

Hình 1.25 Các giao diện thông tin cá nhân

+ Bố cục khá thoáng tuy sắp xếp nhiều thông tin, nên hiển thị tênthay vì số điện thoại

+ Nút tạo mới clb không nổi bật

Trang 30

+ Nút tạo lựa chọn điểm danh khá khó hiểu (tuy gần giống với chứcnăng tạo cáp đội)

Hình 1.26 Giao diện điểm danh

Trang 31

+ Thông tin lựa chọn điểm danh có phần bình chọn khá thú vị, tuynhiên nên để các được chọn thành màu chủ đạo (màu cam) thay vìmàu đen, và những thông tin này không thể chỉnh sửa chỉ có thểxóa đi tạo lại cái mới

b Trải nghiệm sử dụng

- Đánh giá khá tốt đối với những người dùng để cáp kèo, tìm đối thủ

- Tuy nhiên người dùng đặt sân thì chưa hài lòng lắm vì còn có khá ít sân

có thể đặt trực tiếp, đa số là đặt qua điện thoại trực tiếp

- Trải nghiệm cá nhân: ứng dụng khá hay và thú vị trong việc tìm kiếm đốithủ để đá kèo hay giao lưu, tuy nhiên còn hạn chế trong việc đặt sân.Còn khá nhiều lỗi vặt và lỗi crash ứng dụng tuy nhiên vẫn có thể sử dụng

ổn và có một số tính năng hay đó là lập đội,

Trang 32

Chương 2: Phác thảo giao diện Ghi chú, chú thích, giải thích các

ý tưởng phác thảo các giao diện.

2.1 Các trang đăng nhập, đăng ký, nhập otp, quên mật khẩu

Trang 33

Hình 2.2 Trang đăng nhập bằng điện thoại

Trang 34

Hình 2.3 Trang đăng nhập bằng tài khoản ứng dụng

Trang 35

Hình 2.4 Trang đăng ký tài khoản ứng dụng

Trang 36

Hình 2.5 Trang tim lại mật khẩu

Trang 37

Hình 3.16 Kết quả đặt sân

Trang 38

3.1.6 Giao diện lịch sử thi đấu

Hình 3.17 Lịch sử đấu

- Giao diện lịch sử thi đấu sẽ ghi nhận lại tất cả các cuộc thi đấu, bao gồm:thời gian, địa điểm, đội bóng và cả sỉ số trận đấu… tất cả đều hiển thị chongười dùng có thể xem lại giúp đánh giá tình hình và chất lượng đội bóngqua các lần thi đấu

- Giao diện thể hiện đầy đủ các thông tin quan trọng cần thiết nhất Bố cục rõ

Trang 39

3.1.7 Giao diện bình luận, đánh giá sân bóng

Hình 3.18 Đánh giá

- Chức năng đánh giá về chất lượng sân bóng này rất cần thiết, nó để lại cácbình luận giúp người đặt sau có thể hiểu cơ bản về chất lượng và dịch vụsân như thế nào và đồng thời giúp chủ sân có thể biết và cải thiện dịch vụcủa mình tốt hơn

Trang 40

- Thiết kế giao diện cân đối, dễ nhìn, dễ đọc Ta có thế đánh giá bằng bìnhluận kèm theo là số sao để có thể thống kê làm các sân bóng nổi bật, đượchiển thị ở đầu trnag chủ

3.1.8 Các giao diện đặt sân thi đấu với đối thủ

Hình 3.19 Đối thủ

Trang 41

Hình 3.20 Bộ lọc đối thủ

Trang 42

Hình 3.21 Chi tiết sân bóng

Trang 43

Hình 3.22 Hẹn đá

Trang 44

Hình 3.23 Thành viên

Trang 45

Hình 3.24 Kết quả đặt sân

Trang 46

3.1.9 Các giao diện tin tức

Hình 3.25 Tin tức

Trang 47

Hình 3.26 Chi tiết tin tức

Trang 48

Hình 3.27 Tin tức đã lưu và thích

- Giao diện tin tức là phần làm mở rộng chức năng cho ứng dụng Ở phần nàyứng dụng sẽ giúp người yêu thích thể thao có thể cập nhập những trận cầukinh điển, yêu thích… làm cho việc theo dõi và cập nhập tin tức về thể thaotrở nên dễ dàng

- Giao diện tin tức được thiết kế khá bắt mắt và đầy đủ chức năng như: tìmkiếm tin tức, yêu thích, bình luận, lưu trữ … những tin tức yêu thích và

Trang 49

Hình 3.28 Bộ lọc tin tức3.1.10 Các giao diện tài khoản

a Trang tài khoản

Trang 50

Hình 3.29 Tài khoản

Trang 51

Hình 3.30 Tài khoản

Trang 52

b Danh sách đội bóng của tài khoản

Trang 53

- Trang danh sách đội sẽ hiển thị tất cả các đội bóng mà tài khoản đangtham gia

- Có thể tạo thêm đội mới hoặc tham gia các đội bóng khác

Hình 3.32 Tạo đội

- Trang tạo đội gồm các trường: tên đội bóng, các trường địa chỉ, vàphần mô tả đội bóng

Trang 54

- Sau khi tạo xong thì sẽ trở thành đội trưởng và có thể có quyền chiêu

mộ thành viên và quản lý đội bóng

c Danh sách trận đấu

Hình 3.33 Danh sách các trận đấu đã xác nhận

Trang 55

Hình 3.34 Trang thao tác hủy các trận đã xác nhận

Trang 56

Hình 3.35 Danh sách các trận đấu chưa được duyệt

Trang 57

Hình 3.36 Màn hình thao tác duyệt và xóa trận đấu chưa xác nhận

- Danh sách các trận đấu hiển thị các trận đấu mà đội bóng của tàikhoản này tham gia sẽ đấu

- Được chia thành hai trang đó là đã xác nhận và chưa xác nhận Đã xácnhận bao gồm các trận đấu sẽ được đấu, còn chưa xác nhận là nhữngtrận hẹn đấu của đội mình hẹn hoặc là được đội khác hẹn

Trang 58

- Có thể hủy các trận đấu đã xác nhận, còn những trận đấu chưa xácnhận sẽ có thể hủy (nếu đội chúng ta hẹn) và sẽ duyệt (nếu đội bạnhẹn) Để thao tác được những chức năng này bạn phải là đội trưởnghoặc đội phó của đội bóng tham gia trận đấu này

d Thông tin tài khoản

Trang 59

e Danh sách sân đã đặt

Hình 3.40 Danh sách sân đã đặt

Trang 60

Trang 61

Hình 3.42 Màn hình chi tiết đội bóng

- Màn hình chi tiết đội bóng hiển thị chi tiết đội bóng trong danh sáchđội bóng mà tài khoản này đang tham gia

- Bao gôm: banner, các thông tin cơ bản, lịch sử đấu, các đánh giá, danhsách thành viên, danh sách hình ảnh đội bóng

a Lịch sử thi đấu

Trang 62

Hình 3.43 Màn hình lịch sử đấu

- Màn hình lịch sử đấu hiển thị kết quả các trận đã đấu

b Đánh giá

Trang 63

Hình 3.44 Màn hình danh sách đánh giá

Trang 64

Hình 3.45 Màn hình danh sách đánh giá

c Danh sách thành viên

Trang 65

Hình 3.46 Màn hình danh sách thành viên

Hình 3.47 Tab tác vụ của danh sách thành viên

Trang 66

Hình 3.48 Màn hình xóa thành viên

Trang 67

Hình 3.49 Màn hình chỉnh sửa chức vụ

Trang 68

Hình 3.50 Màn hình danh sách thành viên chưa được duyệt

Hình 3.51 Tab tác vụ duyệt thành viên

Trang 69

Hình 3.52 Màn hình hủy và duyệt thành viên xin vào

hình 3.53 Tab tác vụ hủy và duyệt toàn bộ

Trang 70

Hình 3.54 Màn hình hiển thị QR code tham gia đội bóng

- Danh sách thành viên hiển thị các thành viên của đội bóng bao gồm cảchính thức và chưa chính thức

Trang 71

- Có thể thao tác xóa và thay đổi chức vụ đối với các thành viên chínhthức, và thao tác hủy và duyệt đối với các thành viên đang xin vào

d Tất cả hình ảnh

Hình 3.55 Màn hình danh sách hình ảnh

Trang 72

Hình 3.56 Tab tác vụ xóa ảnh

Hình 3.57 Màn hình thao tác xóa ảnh

Trang 73

Hình 3.58 Màn hình danh sách trống

Trang 74

Hình 3.59 Màn hình chi tiết hình ảnh

- Danh sách hình ảnh hiện thị danh sách hình ảnh của đội bóng

- Có thể thêm ảnh bằng cách tải từ điện thoại lên, xem ảnh, xóa ảnh vàtải ảnh

Tiêu đề	Thiết kế giao diện cho ứng dụng chủ đề thể thao: Ứng dụng đặt sân bóng
Tác giả	Võ Thành Duy, Hồ Ngọc Long, Vũ Xuân Cường, Đinh Thanh Tài, Đặng Trung Dũng
Người hướng dẫn	ThS. Tạ Thu Thủy
Trường học	Đại học Quốc gia Thành phố Hồ Chí Minh, Trường Đại học Công nghệ Thông tin, Khoa Hệ thống Thông tin
Chuyên ngành	Thiết kế Giao diện
Thể loại	Đồ án môn học
Năm xuất bản	2022
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	110
Dung lượng	3,57 MB