Ux ui animal pedia (2)

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 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh MSSV: 19521305 MSSV: 19521447 MSSV: 19521615 MSSV: 19521749 MSSV: 19521650 IE106.M22.CNCL - Thiết kế giao diện người dùng TP Hồ Chí Minh, 03/2022 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 – Hoà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 Lê Thị Hoài Giang 19521447 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 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 Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh 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 IE106.M22.CNCL - Thiết kế giao diện người dùng 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 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 Phan Thị Liễu 19521749 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 Tuần 4: Hồn thành giao Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh 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 IE106.M22.CNCL - Thiết kế giao diện người dùng 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 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 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 14 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 KHẢO SÁT YÊU CẦU KHÁCH HÀNG VÀ PHÂN TÍCH YÊU CẦU 14 1.1 Khảo sát yêu cầu 14 1.2 Phân tích đề xuất giải pháp 23 TÌM HIỂU & NGHIÊN CỨU CÁC ỨNG DỤNG LIÊN QUAN 23 2.1 Animal Facts: 23 2.2 Zoopedia: 27 2.3 Sasol Wildlife for beginners: 31 2.4 Rút kinh nghiệm 34 CHƯƠNG 2: PHÁC THẢO GIAO DIỆN 35 Màn hình bắt đầu 35 Màn hình đề xuất động vật: 36 Màn hình đăng kí 36 Màn hình đăng nhập 37 Màn hình trang chủ 37 Màn hình trang phân loại 38 Màn hình danh sách động vật 39 Màn hình danh sách thú cưng 39 Màn hình danh sách u thích 40 10 Màn hình chia sẻ động vật 40 11 Màn hình thơng tin động vật 41 12 Màn hình thơng tin động vật chi tiết 42 13 Màn hình tìm kiếm (bằng nhập thơng tin) 43 14 Màn hình tìm kiếm (bằng hình ảnh) 43 15 Màn hình tình trạng phân bố động vật 44 16 Màn hình nơi xem động vật thật 44 17 Màn hình thơng tin tài khoản 45 18 Màn hình viết động vật 45 19 Màn hình hiển thị câu hỏi xác nhận 46 20 Màn hình ủng hộ tiền 46 21 Màn hình lựa chọn ngân hàng 47 22 Màn hình xếp hạng chia sẻ app 47 CHƯƠNG 3: GIAO DIỆN WEBSITE HOÀN CHỈNH 48 Bắt đầu – đăng nhập – đăng ký: 48 Tìm kiếm: 49 Trang chủ: 50 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 Động vật: 51 Yêu thích: 52 Tài khoản 53 Thông tin động vật: 56 Tình trạng 57 Ủng hộ: 58 10 Địa điểm tham quan: 59 11.Tin Tức – Tin tức báo: 59 12.Truyện cổ tích – chi tiết truyện cổ tích: 60 13 Top quan tâm: 61 CHƯƠNG 4: TƯƠNG TÁC GIAO DIỆN Tương tác theo giao diện “Đăng nhập/ Đăng ký” 1.1 Tương tác tổng thể Tương tác theo giao diện “Trang chủ” 62 63 63 63 2.1 Tương tác tổng thể 63 2.2 Giao diện chức tìm kiếm 64 2.3 Giao diện chức “hashtag” “khoảnh khắc đẹp” 65 2.3 Giao diện chức xem “top quan tâm” 66 2.4 Giao diện “tin tức” 67 2.5 Giao diện ”địa điểm tham quan” 68 2.6 Giao diện “dành riêng cho bạn” 69 2.7 Giao diện xem tài khoản 70 Tương tác theo giao diện “Động vật” 71 3.1 Tương tác tổng thể 71 3.2 Giao diện chọn động vật theo phân lớp: 72 3.3 Giao diện xem chi tiết thông tin động vật 73 Tương tác theo giao diện “Yêu thích” 4.1 Tương tác tổng thể Tương tác theo giao diện “Tài khoản” 74 74 75 5.1 Tương tác tổng thể 75 5.2 Giao diện chức đổi tên tài khoản 76 5.4 Giao diện chức lịch sử ủng hộ 77 5.5 Giao diện chức đăng xuất 78 5.6 Giao diện chức trung tâm hỗ trợ 79 5.7 Giao diện chức điều khoản dịch vụ 79 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 Tương tác theo giao diện “Ủng hộ động vật” 6.1 Tổng thể tương tác CHƯƠNG 5: KẾT LUẬN 80 80 81 Ưu điểm 81 Nhược điểm 82 Phương hướng phát triển 82 CHƯƠNG 6: TÀI LIỆU THAM KHẢO Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh 84 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 Hình 1.2 Biểu đồ khảo sát độ tuổi Hình 1.3 Biểu đồ khảo sát giới tính Hình 1.4 Biểu đồ khảo sát nhu cầu tìm hiểu động vật Hình 1.5 : Biểu đồ khảo sát vấn đề tìm hiểu động vật học 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 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 Hình 1.8 Hình ảnh giao diện đề xuất Hình 1.9 Biểu đồ khảo sát giao diện ứng dụng di động động vật học Hình 1.10 Biểu đồ khảo sát màu sắc chủ đề ứng dụng Hình 1.11 Biểu đồ khảo sát menu u thích Hình 1.12 Hình ảnh logo Hình 1.13 Biểu đồ khảo sát logo u thích Hình 1.14 Biểu đồ khảo sát tiêu chí chọn sử dụng ứng dụng Hình 1.15 Biểu đồ khảo sát tính mong muốn Hình 1.16 Biểu đồ khảo sát điều cần thiện app động vật Hình 1.17 Biểu đồ khảo sát nhu cầu sử dụng app động vật học 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 Hình 1.19 Giao diện chung tính Hình 1.20 Bố cục block Hình 1.21 Các icon Animal Facts Hình 1.22 Hình ảnh giao diện Hình 1.23 Giao diện chung tính Hình 1.24 Giao diện chung tính Hình 1.25 Giao diện thơng tin động vật Hình 1.26 Giao diện bố cục tính Hình 1.27 Giao diện chức tìm kiếm lọc Hình 1.28 Dẫn dắt người dùng Hình 1.29 Giao diện bố cục tính Hình 1.30 Hình ảnh động vật Zoopedia Hình 1.31 Tương tác hạn chế Hình 1.32 Tùy chọn giao diện Hình 1.33 Giao diện xem nghe âm động vật Hình 1.34 Giao diện thơng tin động vật Hình 1.35 Thơng tin động vật Hình 1.36 Giao diện động vật Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh 14 15 15 16 16 17 17 18 18 19 19 20 20 21 21 22 22 23 24 24 24 25 25 26 27 27 28 28 29 29 30 31 31 32 32 33 IE106.M22.CNCL - Thiết kế giao diện người dùng Hình 1.37 Tương tác hạn chế Hình 1.38 Giao diện thơng tin động vật Hình 2.1 Màn hình bắt đầu Hình 2.2 Màn hình đề xuất động vật Hình 2.3 Màn hình đăng ký Hình 2.4 Màn hình đăng nhập Hình 2.5 Màn hình trang chủ Hình 2.6 Màn hình trang phân loại Hình 2.7 Màn hình danh sách động vật Hình 2.8 Màn hình danh sách thú cưng Hình 2.9 Màn hình danh sách u thích Hình 2.10 Màn hình chia sẻ động vật Hình 2.11 Màn hình thơng tin động vật Hình 2.12 Màn hình thơng tin động vật chi tiết Hình 2.13 Màn hình tìm kiếm thơng tin Hình 2.14 Màn hình tìm kiếm hình ảnh Hình 2.15 Màn hình tình trạng phân bố động vật Hình 2.16 Màn hình nơi xem động vật thật Hình 2.17 Màn hình thơng tin tài khoản Hình 2.18 Màn hình viết động vật Hình 2.19 Màn hình hiển thị câu hỏi xác nhận Hình 2.20 Màn hình ủng hộ tiền Hình 2.21 Màn hình lựa chọn ngân hàng Hình 2.22 Màn hình xếp hạng chia sẻ app Hình 3.3 Khảo sát Hình 3.2 Màn hình bắt đầu Hình 3.1 Màn hình bắt đầu Hình 3.4 Đăng ký Hình 3.5 Đăng nhập Hình 3.6 Lựa chọn đăng nhập Hình 3.7 Tìm kiếm chữ Hình 3.8 Tìm kiếm hình ảnh Hình 3.9 Kết tìm kiếm hình ảnh Hình 3.10 Chọn ảnh để tìm kiếm Hình 3.11 Trang chủ Hình 3.12 Trang chủ - dành riêng cho bạn Hình 3.13 Trang chủ - địa điểm tham qua - truyện cổ tích Hình 3.14 Trang chủ - top quan tâm – tin tức Hình 3.15 Động vật Hình 3.16 Động vật (lướt) Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh 33 34 35 36 36 37 37 38 39 39 40 40 41 42 43 43 44 44 45 45 46 46 47 47 48 48 48 49 49 49 49 50 50 50 50 51 51 51 52 52 10 ... Phân tích đề xuất giải pháp 23 TÌM HIỂU & NGHIÊN CỨU CÁC ỨNG DỤNG LIÊN QUAN 23 2.1 Animal Facts: 23 2.2 Zoopedia: 27 2.3 Sasol Wildlife for beginners: 31 2.4 Rút kinh nghiệm 34 CHƯƠNG 2: PHÁC... 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... 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