Ux ui animal pedia (1)

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 MSSV: 19521305 Lê Thị Hoài Giang MSSV: 19521447 Lê Hữu Huy MSSV: 19521615 Phan Thị Liễu MSSV: 19521749 Nguyễn Thế Phương Huynh MSSV: 19521650 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 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 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 (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 MSSV Phân công 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 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 3: Hoàn thành phác thảo tuần 2+ Tổng hợp báo Trần Linh Đa 19521305 cáo Tuần 4: Hoàn thành giao diện giao + Tổng hợp báo cáo Tuần 5: Hoàn thành tương tác giao diện + Tổng hợp báo cáo Đánh giá 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 cuối: Hoành thành slide, nội dung thuyết trình, báo cáo Lê Thị Hồi Giang 19521447 Tuần 1: Thiết kế form + viết Tuần 1: Hoàn thành tốt báo cáo nhiệm vụ giao Đánh 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 giá 100/100 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 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 Tuần 5: Hoàn thành nhiệm vụ giao Đánh tương tác giao diện + Viết giá 100/100 báo cáo Tuần 5: Hoàn thành tốt nhiệm vụ giao Đánh giá 100/100 Lê Hữu Huy 19521615 Tuần 1: Đánh giá app Tuần 1: Hoàn thành tốt Animal Facts + viết báo cáo nhiệm vụ giao Đánh 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 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 Nhóm 05: Linh Đa – Hữu Huy – Hồi Giang – Phan Liễu – Phương Huynh 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 IE106.M22.CNCL - Thiết kế giao diện người dùng dung thuyết trình Tuần 5: Hồn thành tốt nhiệm vụ giao Đánh giá 100/100 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: Hồ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: Đánh giá app Tuần 1: Hoàn thành tốt Phương Zoopedia+ viết báo cáo nhiệm vụ giao Đánh Huynh Tuần 2: Phác thảo giao diện giá 100/100 chương (mục 15, 16, 18, Tuần 2: Hoàn thành tốt 20) nhiệm vụ giao Đánh Nguyễn Thế 19521650 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 3: Hoàn thành phác giá 100/100 thảo tuần Tuần 3: Hoàn thành tốt Tuần 4: Hoàn thành giao nhiệm vụ giao Đánh diện giao giá 80/100 Tuần 5: Hoàn thành Tuần 4: Hoàn thành tốt tương tác giao diện + Viết báo cáo 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 11 CHƯƠNG 1: KHẢO SÁT PHÂN TÍCH THAM KHẢO 16 KHẢO SÁT YÊU CẦU KHÁCH HÀNG VÀ PHÂN TÍCH YÊU CẦU 16 1.1 Khảo sát yêu cầu 16 2.1 Phân tích đề xuất giải pháp 25 TÌM HIỂU & NGHIÊN CỨU CÁC ỨNG DỤNG LIÊN QUAN 26 2.1 Animal Facts: 26 2.2 Zoopedia: 30 2.3 Sasol Wildlife for beginners: 35 2.4 Rút kinh nghiệm 40 CHƯƠNG 2: PHÁC THẢO GIAO DIỆN 41 Màn hình bắt đầu 41 Màn hình đề xuất động vật: 43 Màn hình đăng kí 44 Màn hình đăng nhập 45 Màn hình trang chủ 46 Màn hình trang phân loại 47 Màn hình danh sách động vật 48 Màn hình danh sách thú cưng 49 Màn hình danh sách u thích 50 10 Màn hình chia sẻ động vật 51 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 11 Màn hình thơng tin động vật 52 12 Màn hình thơng tin động vật chi tiết 53 13 Màn hình tìm kiếm (bằng nhập thơng tin) 54 14 Màn hình tìm kiếm (bằng hình ảnh) 55 15 Màn hình tình trạng phân bố động vật 56 16 Màn hình nơi xem động vật thật 56 17 Màn hình thơng tin tài khoản 57 18 Màn hình viết động vật 57 19 Màn hình hiển thị câu hỏi xác nhận 58 20 Màn hình ủng hộ tiền 59 21 Màn hình lựa chọn ngân hàng 60 22 Màn hình xếp hạng chia sẻ app 61 CHƯƠNG 3: GIAO DIỆN WEBSITE HOÀN CHỈNH 61 Bắt đầu – đăng nhập – đăng ký: 61 Tìm kiếm: 63 Trang chủ: 64 Động vật: 66 Yêu thích: 67 Tài khoản 68 Thơng tin động vật: 72 Tình trạng 74 Ủng hộ: 74 10 Địa điểm tham quan: 75 11.Tin Tức – Tin tức báo: 76 12.Truyện cổ tích – chi tiết truyện cổ tích: 77 13 Top quan tâm: 79 CHƯƠNG 4: TƯƠNG TÁC GIAO DIỆN Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh 79 IE106.M22.CNCL - Thiết kế giao diện người dùng 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ủ” 81 81 82 2.1 Tương tác tổng thể 82 2.2 Giao diện chức tìm kiếm 83 2.3 Giao diện chức “hashtag” “khoảnh khắc đẹp” 84 2.3 Giao diện chức xem “top quan tâm” 85 2.4 Giao diện “tin tức” 86 2.5 Giao diện ”địa điểm tham quan” 87 2.6 Giao diện “dành riêng cho bạn” 88 2.7 Giao diện xem tài khoản 89 Tương tác theo giao diện “Động vật” 90 3.1 Tương tác tổng thể 90 3.2 Giao diện chọn động vật theo phân lớp: 91 3.3 Giao diện xem chi tiết thông tin động vật 92 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” 94 94 95 5.1 Tương tác tổng thể 95 5.2 Giao diện chức đổi tên tài khoản 96 5.4 Giao diện chức lịch sử ủng hộ 98 5.5 Giao diện chức đăng xuất 99 5.6 Giao diện chức trung tâm hỗ trợ 100 5.7 Giao diện chức điều khoản dịch vụ 100 Tương tác theo giao diện “Ủng hộ động vật” 101 6.1 Tổng thể tương tác CHƯƠNG 5: KẾT LUẬN Nhóm 05: Linh Đa – Hữu Huy – Hoài Giang – Phan Liễu – Phương Huynh 101 102 10 ... Phân tích đề xuất giải pháp 25 TÌM HIỂU & NGHIÊN CỨU CÁC ỨNG DỤNG LIÊN QUAN 26 2.1 Animal Facts: 26 2.2 Zoopedia: 30 2.3 Sasol Wildlife for beginners: 35 2.4 Rút kinh nghiệm 40 CHƯƠNG 2: PHÁC... thành tốt nhiệm vụ giao Đánh giá 100/100 Tuần 1: Đánh giá app Tuần 1: Hoàn thành tốt Phương Zoopedia+ viết báo cáo nhiệm vụ giao Đánh Huynh Tuần 2: Phác thảo giao diện giá 100/100 chương (mục... nhiệm vụ giao Đánh giá 100/100 Lê Hữu Huy 19521615 Tuần 1: Đánh giá app Tuần 1: Hoàn thành tốt Animal Facts + viết báo cáo nhiệm vụ giao Đánh Tuần 2: Phác thảo giao diện chương (mục 5, 6, 7,