THIẾT kế GIAO DIỆN ỨNG DỤNG

1 24 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG CAO ĐẲNG KINH TẾ CÔNG NGHỆ TP HỒ CHÍ MINH BÁO CÁO ĐỒ ÁN THỰC TẬP TỐT NGHIỆP ĐỀ TÀI THIẾT KẾ GIAO DIỆN ỨNG DỤNG GOGI HOUSE Giảng viên hướng dẫn Sinh viên thực hiện Lớp Chuyên ngành Công nghệ phần mềm TP Hồ Chí Minh, tháng 6 năm 2019 LỜI CẢM ƠN Trước tiên em xin gửi lời cảm ơn chân thành sâu sắc tới các thầy cô giáo trong trường Cao Đẳng Kinh Tế Công Nghệ Thành Phố Hồ Chí Minh nói chung va các thầy cô giáo trong khoa Kỹ Thuật – Công Nghệ nói riêng đã tận tình giả.

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG CAO ĐẲNG KINH TẾ - CƠNG NGHỆ TP HỒ CHÍ MINH BÁO CÁO ĐỒ ÁN THỰC TẬP TỐT NGHIỆP ĐỀ TÀI: THIẾT KẾ GIAO DIỆN ỨNG DỤNG GOGI HOUSE Giảng viên hướng dẫn: Sinh viên thực hiện: Lớp: Chuyên ngành: Công nghệ phần mềm TP Hồ Chí Minh, tháng năm 2019 LỜI CẢM ƠN  Trước tiên em xin gửi lời cảm ơn chân thành sâu sắc tới thầy cô giáo trường Cao Đẳng Kinh Tế Công Nghệ Thành Phố Hồ Chí Minh nói chung va thầy giáo khoa Kỹ Thuật – Cơng Nghệ nói riêng tận tình giảng dạy, truyền đạt cho em kiến thức, kinh nghiệm quý báu suốt thời gian qua Đặc biệt em xin gửi lời cảm ơn đến thầy, thầy tận tình giúp đỡ, trực tiếp bảo, hướng dẫn em suốt trình học làm đồ án Trong thời gian học với thầy, em khơng ngừng tiếp thu thêm nhiều kiến thức bổ ích mà học tập tinh thần làm việc, thái độ nghiêm túc tính tỉ mỉ thầy Đó lã điều cần thiết người sinh viên em cần phải học hỏi noi theo Sau nhóm em xin gửi lời cảm ơn chân thành tới gia đình, bạn bè động viên, đóng góp ý kiến giúp đỡ q trình học tập, nghiên cứu hồn thồn thành đồ án mơn học GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học Mục Lục GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học LỜI MỞ ĐẦU  Lý chọn đề tài: Ngày việc tạo nên sản phẩm ứng dụng số phục vụ cho người dùng ko q khó so với trước kia, để cạnh tranh với dịch vụ/ sản phẩm khác thị trường trải nghiệm người dùng yếu tố định thành công lôi kéo người dùng sử dụng dịch vụ/ sản phẩm Với tiến công nghệ kỷ 21, người muốn trải nghiệm công nghệ tốt mà không tốn nhiều thời gian sức lực, việc cần làm nhanh hơn, hiệu điều ngoại lệ sử dụng ứng dụng/sản phẩm CNTT Và nói đến hài lòng người dùng ứng dụng, hầu hết công ty công nghệ hướng tới Giao diện người dùng (UI) ứng dụng Thiết kế trải nghiệm người dùng (UX) GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học TRƯỜNG CAO ĐẲNG KT-CN TP.HCM CƠNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN - - ĐỘC LẬP – TỰ DO – HẠNH PHÚC - NHẬN XÉT ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN ĐỀ TÀI: THIẾT KẾ GIAO DIỆN ỨNG DỤNG GOGI HOUSE Sinh viên: MSSV: Lớp: Chuyên ngành: Công Nghệ Phần Mềm Nhận xét giáo viên hướng dẫn: Điểm: (Bằng chữ số): TP.HCM, ngày tháng năm 2019 Giáo viên (Ký ghi rõ họ tên) GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học TRƯỜNG CAO ĐẲNG KT-CN TP.HCM CƠNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CƠNG NGHỆ THÔNG TIN - - ĐỘC LẬP – TỰ DO – HẠNH PHÚC - NHẬN XÉT ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN ĐỀ TÀI: THIẾT KẾ GIAO DIỆN ỨNG DỤNG GOGI HOUSE Sinh viên: MSSV: Lớp: Chuyên ngành: Công Nghệ Phần Mềm Nhận xét giáo viên hướng dẫn: Điểm: (Bằng chữ số): TP.HCM, ngày tháng năm 2019 Giáo viên (Ký ghi rõ họ tên) CHƯƠNG 1: ĐÔI NÉT VỀ THIẾT KẾ UX - UI UX UI gì? UI/UX khái niệm bạn gặp nhiều tìm hiểu lĩnh vực thiết kế website, viết web chuyên nghiệp Trong đó, “UI” cụm từ đại diện cho thiết kế website “Giao diện người dùng” “UX” hiểu “Trải nghiệm người dùng” GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học Hai khái niệm đôi song hành nhau, trở thành tiêu chuẩn quan trọng để đánh giá website 1.1 Tìm hiểu UI: UI Design viết tắt User Interface Design – Tức thiết kế giao diện người dùng Thiết kế giao diện người dùng Khái niệm Giao diện người dùng liên quan đến tính tương tác nhiều Thiết kế UI tập trung vào cách mà sản phẩm trình diễn cho người dùng nút Like, share nên nằm bên trái hay bên phải viết, icon kêu gọi hành động Landing Page nên chọn màu gì, nằm bên hay bên dưới, nút Nagivation nên chọn hai gạch hai ba gạch, gạch ngang hay gạch đứng,… nên dùng hình đại diện hay đường link Nhấp vào hình trịn đâu, nhấp vào hình vng đâu,… Nhưng dù nào, thiết kế phải đảm bảo tính đồng xuyên suốt ứng dụng website để người dùng không bị lấn cấn sử dụng 1.1.1 Quy trình thiết kế Giao diện người dùng: Thiết kế giao diện người dùng quy trình lặp lại bao gồm cộng tác người sử dụng người thiết kế Trong quy trình gồm hoạt động bản: GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học - Phân tích người sử dụng: tìm hiểu người sử dụng làm với hệ thống - Lập mẫu thử hệ thống: xây dựng tập mẫu thử để thử nghiệm - Đánh giá giao diện: thử nghiệm mẫu thử với người sử dụng Quy trình thiết kế Giao diện người dùng Mục tiêu: • - Hiểu quy trình thiết kế giao diện người dùng - Nắm chi tiết hoạt động quy trình thiết kế giao diện người dùng - Với hoạt động, có nhiều cách để thực Do đó, phải có khả lựa chọn phương pháp thích hợp cho hồn cảnh cụ thể • Phân tích người sử dụng: Nếu ta khơng hiểu rõ người sử dụng muốn làm với hệ thống, ta khơng thể thiết kế giao diện hiệu GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học Phân tích người sử dụng phải mơ tả theo thuật ngữ để người sử dụng người thiết kế khác hiểu Các ngữ cảnh mà ta mơ tả thao tác trong cách mơ tả phân tích người dùng Ta lấy nhiều yêu cầu người sử dụng từ Các kỹ thuật phân tích: - Phân tích nhiệm vụ: mơ hình hố bước cần thực để hoàn thành nhiệm vụ - Phân tích nhiệm vụ phân cấp - Phỏng vấn trắc nghiệm: hỏi người sử dụng mà họ làm Khi vấn, nên dựa câu hỏi có kết thúc mở Sau đó, người sử dụng cung cấp thông tin mà họ nghĩ cần thiết; khơng phải tất thơng tin sử dụng Ngồi ra, thực vấn với nhóm người sử dụng, điều cho phép người sử dụng thảo luận với họ làm - Mô tả: quan sát người sử dụng làm việc hỏi họ cách mà tới Nên nhớ có nhiều nhiệm vụ người sử dụng thuộc trực giác khó để mơ tả giải thích chúng Dựa kỹ thuật ta hiểu thêm ảnh hưởng xã hội tổ chức tác động tới công việc • Lập mẫu thử giao diện người dùng: - Mẫu thử cho phép người sử dụng có kinh nghiệm trực tiếp với giao diện Nếu kinh nghiệm trực tiếp khơng thể đánh giá khả sử dụng giao diện GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 10 - Lập mẫu thử quy trình gồm trạng thái: - Lập mẫu thử giấy - Tinh chỉnh mẫu thử xây dựng chúng Các kỹ thuật lập mẫu thử: - Mẫu thử hướng nguyên mẫu: sử dụng công cụ Macromedia Director để xây dựng tập hợp nguyên mẫu hình Khi người sử dụng tương tác với chúng hình thay đổi để hiển thị trạng thái - Lập trình trực quan: sử dụng ngôn ngữ thiết kế cho việc phát triển nhanh Visual Basic - Mẫu thử dựa Internet: sử dụng web browser script Đánh giá giao diện người dùng: • Ta nên đánh giá thiết kế giao diện người dùng để xác định khả phù hợp Tuy nhiên, việc đánh giá phạm vi rộng tốn nhiều chi phí khơng thể thực hầu hết hệ thống Các kỹ thuật đánh giá đơn giản: - Trắc nghiệm lại phản hồi người sử dụng - Ghi lại trình sử dụng mẫu thử hệ thống đánh giá - Lựa chọn thơng tin việc sử dụng dễ dàng lỗi người sử dụng - Cung cấp mã lệnh phần mềm để thu thập phản hồi người sử dụng cách trực tuyến 1.2 Tìm hiểu UX: GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 17 Giai đoạn cần thiết để làm cho sản phẩm bạn có ưa chuộng bát mắt thân thiện với người dung hay không với chức yếu tố thiết thực để hoàn thành dự án Phần quan trọng giai đoạn tạo logo cho sản phẩm Thiết kế kết hợp với giải pháp UX/UI xây dựng giao diện cuối sản phẩm GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 18 CHƯƠNG 2: CÀI ĐẶT ADOBE XD & ỨNG DỤNG GOGI HOUSE 2.1 Hướng dẫn cài đặt phần mềm Adobe XD: Đầu tiên truy cập trang website: https://www.adobe.com/sea/downloads.html Tiếp theo chọn vào ứng dụng Adobe XD dowload Sau dowload thành công, mờ file cài đặt nhấp vào autoplay.exe GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 19 Bước sau bạn nhấp vào autoplay.exe lên giao diện cài đặt bạn nhấp vào Install Adobe XD CC GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 20 Giao diện cài đặt xuất Sau ứng dụng chạy tới 100%, để thuận tiện trình sử dụng bạn kéo icon phần mềm Start hình GVHD: ThS Nguyễn Anh Vũ Báo cáo mơn học 21 GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 22 2.2 Giới thiệu ứng dụng GoGi House (ứng dụng dùng chuỗi nhà hàng) hướng dẫn sử dụng: 2.2.1 Đăng nhập: Người dùng nhập tên mật cấp sẵn vào hệ thống đăng nhập GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 23 2.2.2 Sơ đồ bàn cách thức mở bàn order: Sau đăng nhập hiển thị giao diện sơ đồ bàn có nhà hàng Tiếp theo cách thức mở bàn order: GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 24 Đầu tiên nhập số lượng khách vào “Số khách” “Thông tin nhân viên” tự hiển thị thông qua phương thức đăng nhập ban đầu với ngày làm việc cập nhật tự động Kiểm tra lại thông tin khách nhấn check GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 25 Tiếp theo, giao diện order hiển thị: GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 26 2.2.3 Tính Kiểm tra In phiếu tốn: Kiểm tra hình thức để nhân viên tương tác đáp ứng yêu cầu khách hàng, tránh nhầm lẫn ăn q trình khách gọi GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 27 Sau Kiểm tra tiến hành tốn khách dùng xong bữa GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 28 2.2.4 Mẫu Hóa đơn GTGT: GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 29 CHƯƠNG 3: TỔNG KẾT Đánh giá: 1.1 Ưu điểm: Giúp doanh nghiệp có thêm nhiều khách hàng mới, đối tác Giúp khách hàng nhanh chóng nhận chương trình ưu đãi nơi đâu cần thông qua ứng dụng Gogi House Giúp doanh nghiệp nhanh chóng đáp ứng nhu cầu cho khách hàng nhanh chóng thơng qua việc order máy thay giấy bút Tiết kiệm thời gian cho khách hàng lẫn doanh nghiệp Có thể sử dụng offline lẫn online Tính bảo mật cao 1.2 Nhược điểm: Tốc độ load chưa nhanh Chức chưa đa dạng Tài liệu tham khảo: [1] https://vi.wikipedia.org/ ( ngày truy cập 26/03/2019) [2] https://itcntt.com/threads/huong-dan-cai-dat-adobe-muse-cc-2018-full.1458/ (ngày truy cập 27/03/2019) [3] https://www.vietiso.com/blog/15-cong-cu-prototype-hang-dau-danh-cho-ui- va-ux-designer.html ( ngày truy cập 28/03/2019) [4] https://icongnghe.com/download-adobe-xd-cc-2019-full/ ( ngày truy cập 29/03/2019) [5] https://www.google.com (ngày truy cập 30/03/2019) [6] http://www.uplevo.com/designbox/ ( ngày truy cập 01/04/2019) GVHD: ThS Nguyễn Anh Vũ Báo cáo mơn học 30 • GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học 31 GVHD: ThS Nguyễn Anh Vũ Báo cáo môn học ... UI (Giao diện người dùng): UI lĩnh vực thiết kế gọi truyền tải thông điệp từ nhà thiết kế – nhà cung cấp dịch vụ (sản phẩm) tới người sử dụng Trong thiết kế web, thiết kế UI trình nhà thiết kế. .. dùng không bị lấn cấn sử dụng 1.1.1 Quy trình thiết kế Giao diện người dùng: Thiết kế giao diện người dùng quy trình lặp lại bao gồm cộng tác người sử dụng người thiết kế Trong quy trình gồm hoạt... tắt User Interface Design – Tức thiết kế giao diện người dùng Thiết kế giao diện người dùng Khái niệm Giao diện người dùng liên quan đến tính tương tác nhiều Thiết kế UI tập trung vào cách mà sản