Bctuancuoi nhom5

IE106.M22.CNCL - Thiết kế giao diện người dùng ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN MÔN THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG ỨNG DỤNG ANIMAL PEDIA GVHD: ThS Tạ Thu Thủy Nhóm sinh viên thực hiện: NHĨM 05 Trần Linh Đa Lê Thị Hoài Giang Lê Hữu Huy Phan Thị Liễu Nguyễn Thế Phương Huynh MSSV: 19521305 MSSV: 19521447 MSSV: 19521615 MSSV: 19521749 MSSV: 19521650 TP Hồ Chí Minh, 03/2022 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - 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 ghi rõ họ tên) Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN Bảng 1: Bảng phân công, đánh giá thành viên Họ tên Trần Linh Đa MSSV 19521305 Phân công Đánh giá Tuần 1: Đánh giá app Sasol Wildlife for beginners +Viết báo cáo + tổng hợp báo cáo Tuần 1: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 2: Phác thảo giao diện chương (mục 1, 2, 3, 4) + Tổng hợp báo cáo Tuần 2: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 3: Hoàn thành phác thảo tuần 2+ Tổng hợp báo cáo Tuần 3: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 4: Hoàn thành giao diện giao + Tổng hợp báo cáo Tuần 4: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 5: Hoàn thành tương tác giao diện + Tổng hợp báo cáo Tuần 5: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần cuối: Hoành thành slide, nội dung thuyết trình, báo cáo Tuần 1: Thiết kế form + viết báo cáo Lê Thị Hoài Giang 19521447 Tuần 2: Phác thảo giao diện chương (mục 10, 11, 12, 13, 14) Tuần 3: Hoàn thành phác thảo tuần Tuần 4: Hoàn thành giao diện giao Tuần 1: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 2: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 3: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Tuần 5: Hoàn thành tương tác giao diện + Viết báo cáo Tuần 4: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 5: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 1: Đánh giá app Animal Facts + viết báo cáo Tuần 2: Phác thảo giao diện chương (mục 5, 6, 7, 8, 9) Tuần 3: Hoàn thành phác thảo tuần Lê Hữu Huy 19521615 Tuần 4: Hoàn thành giao diện giao Tuần 5: Hoàn thành tương tác giao diện + Viết báo cáo Tuần cuối: chuẩn bị nội dung thuyết trình Tuần 1: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 2: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 3: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 4: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 5: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Tuần 1: Thiết kế form + viết báo cáo Tuần 2: Phác thảo giao diện chương (mục 17, 19, 21, 22) Tuần 3: Hoàn thành phác thảo tuần Phan Thị Liễu 19521749 Tuần 4: Hoàn thành giao diện giao Tuần 5: Hoàn thành tương tác giao diện + Viết báo cáo Tuần cuối: chuẩn bị nội dung thuyết trình Tuần 1: Đánh giá app Zoopedia+ viết báo cáo Tuần 2: Phác thảo giao diện chương (mục 15, 16, 18, 20) Nguyễn Thế Phương Huynh Tuần 3: Hoàn thành phác thảo tuần 19521650 Tuần 4: Hoàn thành giao diện giao Tuần 5: Hoàn thành tương tác giao diện + Viết báo cáo Tuần 1: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 2: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 3: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 4: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 5: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 1: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 2: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 3: Hoàn thành tốt nhiệm vụ giao Đánh giá 80/100 Tuần 4: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 5: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng MỤC LỤC NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN MỤC LỤC DANH MỤC HÌNH ẢNH 10 CHƯƠNG 1: KHẢO SÁT PHÂN TÍCH THAM KHẢO 13 I KHẢO SÁT YÊU CẦU KHÁCH HÀNG VÀ PHÂN TÍCH YÊU CẦU 13 Khảo sát yêu cầu 13 Phân tích đề xuất giải pháp 22 II TÌM HIỂU & NGHIÊN CỨU CÁC ỨNG DỤNG LIÊN QUAN 22 Animal Facts: 22 Zoopedia: 26 Sasol Wildlife for beginners: 30 Rút kinh nghiệm 33 CHƯƠNG 2: PHÁC THẢO GIAO DIỆN 34 Màn hình bắt đầu 34 Màn hình đề xuất động vật: 35 Màn hình đăng kí 35 Màn hình đăng nhập 36 Màn hình trang chủ 36 Màn hình trang phân loại 37 Màn hình danh sách động vật 38 Màn hình danh sách thú cưng 38 Màn hình danh sách u thích 39 10 Màn hình chia sẻ động vật 39 11 Màn hình thơng tin động vật 40 12 Màn hình thông tin động vật chi tiết 41 13 Màn hình tìm kiếm (bằng nhập thơng tin) 42 14 Màn hình tìm kiếm (bằng hình ảnh) 42 15 Màn hình tình trạng phân bố động vật 43 16 Màn hình nơi xem động vật thật 43 17 Màn hình thơng tin tài khoản 44 18 Màn hình viết động vật 44 Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng 19 Màn hình hiển thị câu hỏi xác nhận 45 20 Màn hình ủng hộ tiền 45 21 Màn hình lựa chọn ngân hàng 46 22 Màn hình xếp hạng chia sẻ app 46 CHƯƠNG 3: GIAO DIỆN WEBSITE HOÀN CHỈNH 47 Bắt đầu – đăng nhập – đăng ký: 47 Tìm kiếm: 48 Trang chủ: 49 Động vật: 50 Yêu thích: 51 Tài khoản 52 Thông tin động vật: 55 Tình trạng 56 Ủng hộ: 57 10 Địa điểm tham quan: 58 11.Tin Tức – Tin tức báo: 58 12.Truyện cổ tích – chi tiết truyện cổ tích: 59 13 Top quan tâm: 60 CHƯƠNG 4: TƯƠNG TÁC GIAO DIỆN 61 Tương tác theo giao diện “Đăng nhập/ Đăng ký” 62 1.1 Tương tác tổng thể 62 Tương tác theo giao diện “Trang chủ” 62 2.1 Tương tác tổng thể 62 2.2 Giao diện chức tìm kiếm 63 2.3 Giao diện chức “hashtag” “khoảnh khắc đẹp” 64 2.3 Giao diện chức xem “top quan tâm” 65 2.4 Giao diện “tin tức” 66 2.5 Giao diện ”địa điểm tham quan” 67 2.6 Giao diện “dành riêng cho bạn” 68 2.7 Giao diện xem tài khoản 69 Tương tác theo giao diện “Động vật” 70 3.1 Tương tác tổng thể 70 3.2 Giao diện chọn động vật theo phân lớp: 71 3.3 Giao diện xem chi tiết thông tin động vật 72 Tương tác theo giao diện “Yêu thích” 73 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng 4.1 Tương tác tổng thể 73 Tương tác theo giao diện “Tài khoản” 74 5.1 Tương tác tổng thể 74 5.2 Giao diện chức đổi tên tài khoản 75 5.4 Giao diện chức lịch sử ủng hộ 76 5.5 Giao diện chức đăng xuất 77 5.6 Giao diện chức trung tâm hỗ trợ 78 5.7 Giao diện chức điều khoản dịch vụ 78 Tương tác theo giao diện “Ủng hộ động vật” 79 6.1 Tổng thể tương tác 79 CHƯƠNG 5: KẾT LUẬN 80 Ưu điểm 80 Nhược điểm 81 Phương hướng phát triển 81 CHƯƠNG 6: TÀI LIỆU THAM KHẢO 83 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng DANH MỤC HÌNH ẢNH Hình Phiếu khảo sát nhu cầu sử dụng ứng dụng động vật học 13 Hình Biểu đồ khảo sát độ tuổi 14 Hình Biểu đồ khảo sát giới tính 14 Hình Biểu đồ khảo sát nhu cầu tìm hiểu động vật 15 Hình : Biểu đồ khảo sát vấn đề tìm hiểu động vật học 15 Hình Biểu đồ khảo sát nhu cầu sử dụng ứng dụng di động động vật học 16 Hình Biểu đồ khảo sát mục đích sử dụng ứng dụng di động động vật học 16 Hình Hình ảnh giao diện đề xuất 17 Hình Biểu đồ khảo sát giao diện ứng dụng di động động vật học 17 Hình 10 Biểu đồ khảo sát màu sắc chủ đề ứng dụng 18 Hình 11 Biểu đồ khảo sát menu yêu thích 18 Hình 12 Hình ảnh logo 19 Hình 13 Biểu đồ khảo sát logo yêu thích 19 Hình 14 Biểu đồ khảo sát tiêu chí chọn sử dụng ứng dụng 20 Hình 15 Biểu đồ khảo sát tính mong muốn 20 Hình 16 Biểu đồ khảo sát điều cần thiện app động vật 21 Hình 17 Biểu đồ khảo sát nhu cầu sử dụng app động vật học 21 Hình 18 Biểu đồ khảo sát sẵn sàng chia sẻ thông tin app động vật học 22 Hình 19 Giao diện chung tính 23 Hình 20 Bố cục block 23 Hình 21 Các icon Animal Facts 23 Hình 22 Hình ảnh giao diện 24 Hình 23 Giao diện chung tính 24 Hình 24 Giao diện chung tính 25 Hình 25 Giao diện thơng tin động vật 26 Hình 26 Giao diện bố cục tính 26 Hình 27 Giao diện chức tìm kiếm lọc 27 Hình 28 Dẫn dắt người dùng 27 Hình 29 Giao diện bố cục tính 28 Hình 30 Hình ảnh động vật Zoopedia 28 Hình 31 Tương tác hạn chế 29 Hình 32 Tùy chọn giao diện 30 Hình 33 Giao diện xem nghe âm động vật 30 Hình 34 Giao diện thơng tin động vật 31 Hình 35 Thơng tin động vật 31 Hình 36 Giao diện động vật 32 Hình 37 Tương tác hạn chế 32 Hình 38 Giao diện thông tin động vật 33 10 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng 2.7 Giao diện xem tài khoản Hình 76 Giao diện tương tác trang chủ qua thông tin tài khoản Mô tả: Chọn mục “ tài khoản “ ảnh đại diện để đến giao diện “ tài khoản ” hiển thị thiết lập thông số cần thiết 69 Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng Tương tác theo giao diện “Động vật” 3.1 Tương tác tổng thể Hình 77 Tương tác tổng thể động vật Người dùng lướt ngang bấm chọn phân loại động vật để đến trang có danh sách động vật tương ứng Ví dụ, bấm chọn “Lớp thú” danh sách động vật thuộc lớp thú Bấm chọn động vật để chuyển đến giao diện “Thông tin động vật” động vật tương ứng Dưới chân trang có tùy chọn để điều hướng đến trang khác: • Bấm mục “Trang chủ” để chuyển đến giao diện “Trang chủ” hiển thị thông tin trang chủ • Bấm mục “u thích” để chuyển đến giao diện “Yêu thích” hiển thị danh sách động vật u thích • Bấm mục “Tài khoản” để chuyển giao diện “Tài khoản” hiển thị thiết lập thơng số cần thiết 70 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng 3.2 Giao diện chọn động vật theo phân lớp: Hình 78 Giao diện tương tác chọn động vật theo phân loài Mô tả: Người dùng lướt ngang bấm chọn phân loại động vật để đến trang có danh sách động vật tương ứng Ví dụ, bấm chọn “Lớp thú” danh sách động vật thuộc lớp thú 71 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh IE106.M22.CNCL - Thiết kế giao diện người dùng 3.3 Giao diện xem chi tiết thông tin động vật Hình 79 Tương tác giao diện xem chi tiết thông tin động vật Trong giao diện trang “Thông tin động vật” , người dùng xem thơng tin thực tác vụ sau: • • • • • • • Bấm chọn icon “