Ie106 m22 cncl bctuancuoi nhom05 animal pedia report

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, 06/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 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 4: Hoàn thành giao diện giao Tuần 3: 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 + 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 cuối: chuẩn bị nội dung thuyết trình Tuần 5: Hồ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 han 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 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 CHƯƠNG 1: KHẢO SÁT PHÂN TÍCH THAM KHẢO 13 1.1 KHẢO SÁT YÊU CẦU KHÁCH HÀNG VÀ PHÂN TÍCH YÊU CẦU 13 1.1.1 Khảo sát yêu cầu 13 1.1.2 Phân tích đề xuất giải pháp 22 1.2 TÌM HIỂU & NGHIÊN CỨU CÁC ỨNG DỤNG LIÊN QUAN 22 1.2.1 Animal Facts 22 1.2.2 Animal Facts 26 1.2.3 Sasol Wildlife for beginners 30 1.2.4 Rút kinh nghiệm 33 CHƯƠNG 2: PHÁC THẢO GIAO DIỆN 35 2.1 Màn hình bắt đầu 35 2.2 Màn hình đề xuất động vật: 36 2.3 Màn hình đăng kí 36 2.4 Màn hình đăng nhập 37 2.5 Màn hình trang chủ 37 2.6 Màn hình trang phân loại 38 2.7 Màn hình danh sách động vật 39 2.8 Màn hình danh sách thú cưng 39 2.9 Màn hình danh sách u thích 40 2.10 Màn hình chia sẻ động vật 40 2.11 Màn hình thơng tin động vật 41 2.12 Màn hình thơng tin động vật chi tiết 42 2.13 Màn hình tìm kiếm (bằng nhập thông tin) 43 2.14 Màn hình tìm kiếm (bằng hình ảnh) 43 2.15 Màn hình tình trạng phân bố động vật 44 2.16 Màn hình nơi xem động vật thật 44 2.17 Màn hình thơng tin tài khoản 45 2.18 Màn hình viết động vật 45 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.19 Màn hình hiển thị câu hỏi xác nhận 46 2.20 Màn hình ủng hộ tiền 46 2.21 Màn hình lựa chọn ngân hàng 47 2.22 Màn hình xếp hạng chia sẻ app 47 CHƯƠNG 3: GIAO DIỆN HOÀN CHỈNH 48 3.1 Bắt đầu – đăng nhập – đăng ký 48 3.2 Tìm kiếm 49 3.3 Trang chủ 50 3.4 Động vật 51 3.5 Yêu thích 52 3.6 Tài khoản 53 3.7 Thông tin động vật 56 3.8 Tình trạng 57 3.9 Ủng hộ 58 3.10 Địa điểm tham quan 59 3.11 Tin Tức – Tin tức báo 59 3.12 Truyện cổ tích – chi tiết truyện cổ tích 60 3.13 Top quan tâm 61 CHƯƠNG 4: TƯƠNG TÁC GIAO DIỆN 62 4.1 Tương tác theo giao diện “Đăng nhập/ Đăng ký” 63 4.1.1 4.2 Tương tác tổng thể 63 Tương tác theo giao diện “Trang chủ” 63 4.2.1 Tương tác tổng thể 63 4.2.2 Giao diện chức tìm kiếm 64 4.2.3 Giao diện chức “hashtag” “khoảnh khắc đẹp” 65 4.2.4 Giao diện chức xem “top quan tâm” 66 4.2.5 Giao diện “tin tức” 67 4.2.6 Giao diện ”địa điểm tham quan” 68 4.2.7 Giao diện “dành riêng cho bạn” 69 4.2.8 Giao diện xem tài khoản 70 4.3 Tương tác theo giao diện “Động vật” 71 4.3.1 Tương tác tổng thể 71 4.3.2 Giao diện chọn động vật theo phân lớp: 72 4.3.3 Giao diện xem chi tiết thông tin động vật 73 4.4 Tương tác theo giao diện “Yêu thích” 74 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.4.1 4.5 Tương tác tổng thể 74 Tương tác theo giao diện “Tài khoản” 75 4.5.1 Tương tác tổng thể 75 4.5.2 Giao diện chức đổi tên tài khoản 76 4.5.3 Giao diện chức lịch sử ủng hộ 77 4.5.4 Giao diện chức đăng xuất 78 4.5.5 Giao diện chức trung tâm hỗ trợ 79 4.5.6 Giao diện chức điều khoản dịch vụ 79 4.6 Tương tác theo giao diện “Ủng hộ động vật” 80 4.6.1 Tổng thể tương tác 80 CHƯƠNG 5: KẾT LUẬN 81 5.1 Ưu điểm 81 5.2 Nhược điểm 82 5.3 Phương hướng phát triển 82 TÀI LIỆU THAM KHẢO 84 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 1.1 Phiếu khảo sát nhu cầu sử dụng ứng dụng động vật học Error! Bookmark not defined Hình 1.2 Biểu đồ khảo sát độ tuổi 14 Hình 1.3 Biểu đồ khảo sát giới tính 14 Hình 1.4 Biểu đồ khảo sát nhu cầu tìm hiểu động vật 15 Hình 1.5 : Biểu đồ khảo sát vấn đề tìm hiểu động vật học 15 Hình 1.6 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 1.7 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 1.8 Hình ảnh giao diện đề xuất 17 Hình 1.9 Biểu đồ khảo sát giao diện ứng dụng di động động vật học 17 Hình 1.10 Biểu đồ khảo sát màu sắc chủ đề ứng dụng 18 Hình 1.11 Biểu đồ khảo sát menu yêu thích 18 Hình 1.12 Hình ảnh logo 19 Hình 1.13 Biểu đồ khảo sát logo yêu thích 19 Hình 1.14 Biểu đồ khảo sát tiêu chí chọn sử dụng ứng dụng 20 Hình 1.15 Biểu đồ khảo sát tính mong muốn 20 Hình 1.16 Biểu đồ khảo sát điều cần thiện app động vật 21 Hình 1.17 Biểu đồ khảo sát nhu cầu sử dụng app động vật học 21 Hình 1.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 1.19 Giao diện chung tính 23 Hình 1.20 Bố cục block 23 Hình 1.21 Các icon Animal Facts 23 Hình 1.22 Hình ảnh giao diện 24 Hình 1.23 Giao diện chung tính 24 Hình 1.24 Giao diện chung tính 25 Hình 1.25 Giao diện thông tin động vật 26 Hình 1.26 Giao diện bố cục tính 26 Hình 1.27 Giao diện chức tìm kiếm lọc 27 Hình 1.28 Dẫn dắt người dùng 27 Hình 1.29 Giao diện bố cục tính 28 Hình 1.30 Hình ảnh động vật Zoopedia 28 Hình 1.31 Tương tác hạn chế 29 Hình 1.32 Tùy chọn giao diện 30 Hình 1.33 Giao diện xem nghe âm động vật 30 Hình 1.34 Giao diện thơng tin động vật 31 Hình 1.35 Thơng tin động vật 31 Hình 1.36 Giao diện động vật 32 Hình 1.37 Tương tác hạn chế 32 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 Hình 1.38 Giao diện thơng tin động vật 33 Hình 2.1 Màn hình bắt đầu 35 Hình 2.2 Màn hình đề xuất động vật 36 Hình 2.3 Màn hình đăng ký 36 Hình 2.4 Màn hình đăng nhập 37 Hình 2.5 Màn hình trang chủ 37 Hình 2.6 Màn hình trang phân loại 38 Hình 2.7 Màn hình danh sách động vật 39 Hình 2.8 Màn hình danh sách thú cưng 39 Hình 2.9 Màn hình danh sách u thích 40 Hình 2.10 Màn hình chia sẻ động vật 40 Hình 2.11 Màn hình thông tin động vật 41 Hình 2.12 Màn hình thơng tin động vật chi tiết 42 Hình 2.13 Màn hình tìm kiếm thông tin 43 Hình 2.14 Màn hình tìm kiếm hình ảnh 43 Hình 2.15 Màn hình tình trạng phân bố động vật 44 Hình 2.16 Màn hình nơi xem động vật thật 44 Hình 2.17 Màn hình thơng tin tài khoản 45 Hình 2.18 Màn hình viết động vật 45 Hình 2.19 Màn hình hiển thị câu hỏi xác nhận 46 Hình 2.20 Màn hình ủng hộ tiền 46 Hình 2.21 Màn hình lựa chọn ngân hàng 47 Hình 2.22 Màn hình xếp hạng chia sẻ app 47 Hình 3.1 Khảo sát 48 Hình 3.2 Màn hình bắt đầu 48 Hình 3.3 Màn hình bắt đầu 48 Hình 3.4 Đăng ký 49 Hình 3.5 Đăng nhập 49 Hình 3.6 Lựa chọn đăng nhập 49 Hình 3.7 Tìm kiếm chữ 49 Hình 3.8 Tìm kiếm hình ảnh 50 Hình 3.9 Kết tìm kiếm hình ảnh 50 Hình 3.10 Chọn ảnh để tìm kiếm 50 Hình 3.11 Trang chủ 50 Hình 3.12 Trang chủ - dành riêng cho bạn 51 Hình 3.13 Trang chủ - địa điểm tham qua - truyện cổ tích 51 Hình 3.14 Trang chủ - top quan tâm – tin tức 51 Hình 3.15 Động vật 52 Hình 3.16 Động vật (lướt) 52 Hình 3.17 u thích 53 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 4.2.8 Giao diện xem tài khoản Hình 4.10 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 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 4.3 Tương tác theo giao diện “Động vật” 4.3.1 Tương tác tổng thể Hình 4.11 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 “Yêu thích” để chuyển đến giao diện “Yêu thích” hiển thị danh sách động vật yê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 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 4.3.2 Giao diện chọn động vật theo phân lớp: Hình 4.12 Giao diện tương tác chọn động vật theo phân lồ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ú 72 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.3.3 Giao diện xem chi tiết thơng tin động vật Hình 4.13 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 “