đồ á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Í MINHTRƯỜ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ầu5

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ẩu41

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ảo1.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

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ượtmà Đặ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.

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.

+ Về chức năng “Đặt Ngay”: Ở phần giao diện này các chức năngtương đối thể hiện rõ ràng nhưng nhìn tổng thể rất rối mắt gây

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ếtkế 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

- Người dùng đánh giá khá cao về ứng dụng Tất cả đều cho 5 sao và cónhận xét rất tốt.

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.

Trang 14

Hình 1.11 Giao diện chính

- Giao diện chính:

+ giao diện quá đơn giản, Apps chỉ làm như việc để giới thiệu cho 1sân bóng độc lập nào đó vì chỉ là một sân bóng nên nó không cógì để xem ngoài lịch của sân bóng đó.

Trang 24

Hình 1.18 Giao diện lọc

Trang 25

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 26

+ 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 27

+ 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ênhệ 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 28

Trang 29

Trang 30

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 31

+ 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 32

+ 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 33

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 34

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

Trang 35

Trang 36

Trang 37

Trang 38

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 39

+ 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 40

+ 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 41

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

Hình 2.1 Trang đăng nhập- Đăng nhập số điện thoại

- Đăng nhập bằng Facebook- Đăng nhập bằng Google- Đăng nhập bằng tài khoản app

Trang 42

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

Trang 43

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

Trang 44

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

- Màn hình đăng ký gồm các trường:- Email

- Mật khẩu- Nhập lại mật khẩu- Số điện thoại

Trang 45

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

Trang 74

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

Trang 75

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 76

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 77

- 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 78

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

Trang 79

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

Trang 80

Hình 3.22 Hẹn đá

Trang 81

Hình 3.23 Thành viên

Trang 82

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

Trang 83

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

Hình 3.25 Tin tức

Trang 84

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

Trang 85

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 86

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 87

Hình 3.29 Tài khoản

Trang 88

Hình 3.30 Tài khoản

Trang 89

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

Trang 90

- 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 91

- Sau khi tạo xong thì sẽ trở thành đội trưởng và có thể có quyền chiêumộ 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 92

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

Trang 93

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

Trang 94

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 95

- 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 98

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

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

Trang 99

Trang 100

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 101

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 đã đấub Đánh giá

Trang 102

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

Trang 103

Hình 3.45 Màn hình danh sách đánh giác Danh sách thành viên

Trang 104

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 105

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

Trang 106

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

Trang 107

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 108

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 109

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 110

- 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àod Tất cả hình ảnh

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

Trang 111

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