(Luận văn tốt nghiệp) phân tích thiết kế phần mềm ứng dụng hỗ trợ các hệ thống phúc lợi trẻ em và kết nối trẻ em được chăm sóc nuôi dưỡng với gia đình

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC BÀ RỊA – VŨNG TÀU KHOA CÔNG NGHỆ KỸ THUẬT - NÔNG NGHIỆP CÔNG NGHỆ CAO  ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI PHÂN TÍCH THIẾT KẾ PHẦN MỀM ỨNG DỤNG HỖ TRỢ CÁC HỆ THỐNG PHÚC LỢI TRẺ EM VÀ KẾT NỐI TRẺ EM ĐƯỢC CHĂM SĨC NI DƯỠNG VỚI GIA ĐÌNH Giảng viên hướng dẫn : TS Bùi Thị Thu Trang Sinh viên thực : Tơ Đình Đức Anh Trình độ đào tạo : Đại Học Chính Quy Ngành đào tạo : Cơng nghệ thơng tin Chun ngành : Lập trình ứng dụng di động game MSSV : 17031223 Lớp : DH17LT Niên khoá : 2017-2021 Lớp : DH17LT BÀ RỊA - VŨNG TÀU, NĂM 2021 Luan van LỜI CẢM ƠN  -Xin chân thành cảm ơn Ban giám hiệu tồn thể q thầy cơ, đặc biệt q thầy cô Khoa công nghệ kỹ thuật - nông nghiệp công nghệ cao Trường Đại Học Bà Rịa - Vũng Tàu, người truyền đạt cho nhiều kiến thức quý báu học tập Xin cảm ơn TS Bùi Thị Thu Trang - giảng viên Khoa công nghệ kỹ thuật - nông nghiệp công nghệ cao người tận tình hướng dẫn tơi suốt q trình hồn thành đề tài Xin trân trọng cảm ơn! Tp.Vũng Tàu, ngày 12 tháng 01 năm 2021 Sinh viên thực Tơ Đình Đức Anh Luan van NHẬN XÉT CỦA GIẢNG VIÊN Vũng Tàu, ngày… tháng… năm 2020 Giảng Viên Xác Nhận Luan van MỤC LỤC CHƯƠNG TỔNG QUAN ĐỀ TÀI 1 LÝ DO CHỌN ĐỀ TÀI ĐỐI TƯỢNG NGHIÊN CỨU PHƯƠNG PHÁP NGHIÊN CỨU CHƯƠNG TỔNG QUAN UI, UX UI gì? 2 UX gì? 3 Sự khác biệt UX UI 4 Công việc UX design dự án Công việc UI design dự án 5.1 Sketch (Phác thảo) 5.2 Wireframe 5.3 Mockup 5.4 Prototype CHƯƠNG Phân tích thiết kế hệ thống Xác định tác nhân Use-case tổng quát CHƯƠNG Thiết kế giao diện ứng dụng 15 Giới thiệu Figma 15 Thiết kế Wireframe 16 2.1 Wireframe gì? 16 2.2 Các kiểu thiết kế Wireframe 17 2.3 Thiết kế Wireframe cho AdoptKids 19 Thiết kế User Flow 30 3.1 User Flow gì? 30 3.2 Tại cần User Flow? 30 3.3 User Flow cho AdoptKids 31 Thiết kế UI guideline 40 4.1 UI guideline gì? 40 Luan van 4.2 Tại UI guideline quan trọng? 41 4.3 Phân loại UI guideline 42 4.4 Thiết kế UI guideline cho AdoptKids 43 Thiết kế UI - Mockup 51 CHƯƠNG KẾT LUẬN 62 Tổng kết hạn chế 62 Hướng phát triển 62 TÀI LIỆU THAM KHẢO 63 Luan van DANH MỤC HÌNH Hình 2-1 Giao diện người dùng trực quan tương tác dễ dàng Hình 2-2 Trải nghiệm người dùng tinh tế xuyên suốt Hình 2-3 Nhà thiết kế UX trình tạo dự án Hình 2-4 Nhà thiết kế UI trình tạo dự án Hình 2-5 Sketch phác thảo nhanh ý tưởng lên giấy bảng Hình 2-6 Wireframe giúp mơ tả chức dự án Hình 2-7 Mockup thêm yếu tố thiết kế vào wireframe Hình 2-8 Prototype mockup có thêm phần UX Hình 3-1 Use-case tổng quát Hình 3-2 Sơ đồ Use-Case 10 Hình 3-3 Activity Diagram kiểm tra lịch sử quyên góp trạng thái nhận ni 10 Hình 3-4 Activity Diagram Đăng ký nhận ni 11 Hình 3-5 Activity Diagram tốn tiền qun góp 12 Hình 3-6 Activity Diagram tìm kiếm trung tâm bảo trợ trẻ em 13 Hình 3-7 Activity Diagram xác thực người dùng 14 Hình 4-1 Logo phần mềm Figma 15 Hình 4-2 Chi tiết hình Project Figma 16 Hình 4-3 Wireframe dạng Block Diagrams 17 Hình 4-4 Wireframe high-fidelity text 18 Hình 4-5 Wireframe high-fidelity color 18 Hình 4-6 Wireframe high-fidelity media 19 Hình 4-7 Wireframe Xác thực (1) 20 Hình 4-8 Wireframe Xác thực (2) 20 Hình 4-9 Wireframe hình Tổng quan 21 Hình 4-10 Wireframe hình nhận ni 22 Hình 4-11 Wireframe hình Thơng báo Blog\ 23 Hình 4-12 Wireframe hình Thơng tin nhận ni 23 Hình 4-13 Wireframe hình Đăng ký nhận ni 24 Luan van Hình 4-14 Wireframe hình u thích Tìm kiếm 24 Hình 4-15 Wireframe hình Qun góp Thơng tin qun góp 25 Hình 4-16 Wireframe hình Thanh tốn 26 Hình 4-17 Wireframe hình Splash screen Qun góp 26 Hình 4-18 Wireframe hình Hỗ trợ 27 Hình 4-19 Wireframe hình thơng tin đơn nhận ni 28 Hình 4-20 Wireframe hình Giải đáp vấn đề Chat tư vấn 28 Hình 4-21 Wireframe hình Tài khoản Quản lý thẻ 29 Hình 4-22 Wireframe hình Chi tiết giao dịch 30 Hình 4-23 User flow Xác thực 32 Hình 4-24 User flow hình Tổng quát 33 Hình 4-25 User flow hình Nhận ni 35 Hình 4-26 User flow hình Qun góp 37 Hình 4-27 User flow hình Hỗ trợ 39 Hình 4-28 User flow hình Tài khoản 40 Hình 4-29 Phông chữ màu sắc 43 Hình 4-30 Font chữ Roboto - Google 44 Hình 4-31 Font chữ Roboto – Google 44 Hình 4-32 Màu sắc chủ đạo AdoptKids 45 Hình 4-33 Logo tượng trưng 46 Hình 4-34 Logo dạng chữ 46 Hình 4-35 Logo dựa ký tự 47 Hình 4-36 Logo trừu tượng 47 Hình 4-37 Logo App AdoptKids 48 Hình 4-38 Nút bấm 48 Hình 4-39 Tab Bar 49 Hình 4-40 Trường nhập liệu 50 Hình 4-41 UI Xác thực (1) 51 Hình 4-42 UI Xác thực (2) 51 Hình 4-43 UI hình Tổng quan 52 Luan van Hình 4-44 UI hình nhận ni 53 Hình 4-45 UI hình Thơng báo Blog\ 54 Hình 4-46 UI hình Thơng tin nhận ni 54 Hình 4-47 UI hình Đăng ký nhận ni 55 Hình 4-48 UI hình Yêu thích Tìm kiếm 55 Hình 4-49 UI hình Qun góp Thơng tin qun góp 56 Hình 4-50 UI hình Thanh tốn 57 Hình 4-51 UI hình Splash screen Quyên góp 57 Hình 4-52 UI hình Hỗ trợ 58 Hình 4-53 UI hình thơng tin đơn nhận ni 59 Hình 4-54 UI hình Giải đáp vấn đề Chat tư vấn 59 Hình 4-55 UI hình Tài khoản Quản lý thẻ 60 Hình 4-56 UI hình Chi tiết giao dịch 61 Luan van DANH MỤC BẢNG Bảng 3-1 Xác định tác nhân hệ thống Luan van CHƯƠNG TỔNG QUAN ĐỀ TÀI LÝ DO CHỌN ĐỀ TÀI "Điều khiến đứa trẻ đau khổ thiếu quần áo, đồ ăn, hay giáo dục mà không thuộc khơng có gia đình" trích ơng Hermann Gmeiner - Người sáng lập Làng trẻ em SOS Quốc tế Dựa vào câu nói tơi phát triển nên ý tưởng xây dựng ứng dụng tên AdoptKids - dự án hỗ trợ hệ thống phúc lợi trẻ em kết nối trẻ em chăm sóc ni dưỡng với gia đình Thơng qua ứng dụng này, đứa trẻ khơng cịn phải trải qua cảnh thiếu thốn tình thương em có gia đình để u thương, chăm sóc ĐỐI TƯỢNG NGHIÊN CỨU • Nghiên cứu UI, UX cho tảng di động; • Nghiên cứu, ứng dụng cơng cụ Figma để thiết kế UI cho ứng dụng AdoptKids PHƯƠNG PHÁP NGHIÊN CỨU Về lý thuyết: • Tìm hiểu cơng cụ Figma; • Tìm hiểu UI, UX cho tảng di động Về thực nghiệm: • Ứng dụng Figma để thiết kế UI ứng dụng AdoptKids; • Xây dựng kịch sử dụng ứng dụng AdoptKids Luan van 49 đỏ tâm trắng Khi trạng thái khơng chọn dấu chấm động biến Nút quay lại: Dùng để quay trở hình trước hình Nút để màu xám chữ đen nhằm giúp người dùng dễ phân biệt tác dụng nút Nút quyên góp: Dùng để chuyển tới hình qun góp giúp người dùng thực chức toán cho việc quyên góp Nút đổ màu đổ bóng với mã màu #F05454 để bật thu hút ánh nhìn người dùng Nút xem thêm: Thực việc tải thêm nội dung cho List View; Grid View dùng để mở hình liên quan Nút đặt màu tiệp với background ứng dụng nút xếp vị trí List View; Grid View Nút quan tâm: Dùng để đưa item List View; Grid View vào danh sách quan tâm/yêu thích Nút đổ màu với mã màu #F05454 để bật thu hút ánh nhìn người dùng Ở trạng thái kích hoạt, nút đổ màu #F05454, ngược lại có màu trắng viền đen Hình 4-39 Tab Bar Tab tổng quan: Hiển thị hình tổng quan Khi chọn đổ màu #30475E ngược lại không chọn đổ màu #7F8A8E Luan van 50 Tab nhận ni: Hiển thị hình nhận ni Khi chọn đổ màu #30475E ngược lại không chọn đổ màu #7F8A8E Tab quyên góp: Hiển thị hình qun góp Tab đổ màu mặc định #F05454 để bật tính qun góp, thu hút người dùng bấm vào tab nhiều Tab hỗ trợ: Hiển thị hình hỗ trợ Khi chọn đổ màu #30475E ngược lại không chọn đổ màu #7F8A8E Tab tài khoản: Hiển thị hình tài khoản Khi chọn đổ màu #30475E ngược lại không chọn đổ màu #7F8A8E Hình 4-40 Trường nhập liệu Trường nhập nội dung: Được dùng vào nhập thông tin liên quan đến việc nhập liệu mà ứng dụng ưu tiên cao số tiền cần quyên góp; tài khoản; mật khẩu; mã OTP;… Trường nhập nội dung tìm kiếm: Được dùng để nhập từ khoá mà người dùng muốn tìm Trường thiết kế bo trịng có icon kính lúp để người dùng dễ phân biệt chức trường với “trường nhập nội dung” mặc định Luan van 51 Trường điền thông tin: Dùng để người dùng để thông tin với yêu cầu nhập liệu nhiều đơn đăng ký nhận nuôi Giúp người dùng dễ nhận biết, phân biệt điền thông tin dễ dàng Khi kích hoạt, trường nhập liệu trỏ đổ màu # F05454 để người dùng dễ nhận biết điền thơng tin trường THIẾT KẾ UI - MOCKUP Sau trình thiết kế wireframe; UI guideline, tơi tiến hành bước mockup giúp thiết kế hồn thiện Hình 4-41 UI Xác thực (1) Hình 4-42 UI Xác thực (2) Luan van 52 Hình 4-43 UI hình Tổng quan Luan van 53 Hình 4-44 UI hình nhận ni Luan van 54 Hình 4-45 UI hình Thơng báo Blog\ Hình 4-46 UI hình Thơng tin nhận ni Luan van 55 Hình 4-47 UI hình Đăng ký nhận ni Hình 4-48 UI hình u thích Tìm kiếm Luan van 56 Hình 4-49 UI hình Qun góp Thơng tin qun góp Luan van 57 Hình 4-50 UI hình Thanh tốn Hình 4-51 UI hình Splash screen Qun góp Luan van 58 Hình 4-52 UI hình Hỗ trợ Luan van 59 Hình 4-53 UI hình thơng tin đơn nhận ni Hình 4-54 UI hình Giải đáp vấn đề Chat tư vấn Luan van 60 Hình 4-55 UI hình Tài khoản Quản lý thẻ Luan van 61 Hình 4-56 UI hình Chi tiết giao dịch Luan van 62 CHƯƠNG KẾT LUẬN TỔNG KẾT VÀ HẠN CHẾ Ứng dụng thiết kế với đầy đủ chức cần thiết Đạt mục tiêu đề q trình thiết kế như: • Giao diện dễ sử dụng thuận tiện với người dùng; • Ứng dụng tảng việc thiết kế UI, UX cho ứng dụng Do thời gian nghiên cứu hạn chế thiếu kinh nghiệm thực tế nên cịn số lỗi q trình thiết kế ứng dụng Rất mong nhận góp ý kiến từ giảng viên để đề tài trở nên hồn thiện HƯỚNG PHÁT TRIỂN • Áp dụng nguyên lý thiết kế phát triển ứng dụng để đưa sản phẩm hồn chỉnh; • Trao dồi kỹ thực tế kiến thức chuyên nghành; • Nghiên cứu, đánh giá thị trường để cải thiện sản phẩm Luan van 63 TÀI LIỆU THAM KHẢO Từ What is UI & UX Design?, https://hackernoon.com/what-is-uiux-design-1f01e9dbbf02, Tripin Studio – 2018 Từ What is UI design? What is UX design? UI vs UX: What’s the difference, https://uxplanet.org/what-is-ui-vs-ux-design-and-the- difference-d9113f6612de?gi=b480ab3d73b0, They Make Design – 2019 Từ Sketch, Wireframe, Mockup, Prototype ví dụ?, https://niviki.com/sketch-wireframe-mockup-prototype-la-gi-va-vidu/, Khoa Nguyen – 2019 A Project Guide to UX Design: For User Experience Designers in the Field or in the Making; Tác giả: Russ Unger, Carolyn Chandler; Xuất lần đầu tiên: 13 tháng 3, 2009 Observing the User Experience: A Practitioner's Guide to User Research; Tác giả: Mike Kuniavsky; Xuất lần đầu tiên: 2003 Luan van ... có gia đình" trích ơng Hermann Gmeiner - Người sáng lập Làng trẻ em SOS Quốc tế Dựa vào câu nói phát triển nên ý tưởng xây dựng ứng dụng tên AdoptKids - dự án hỗ trợ hệ thống phúc lợi trẻ em kết. .. phúc lợi trẻ em kết nối trẻ em chăm sóc ni dưỡng với gia đình Thơng qua ứng dụng này, đứa trẻ khơng cịn phải trải qua cảnh thiếu thốn tình thương em có gia đình để u thương, chăm sóc ĐỐI TƯỢNG NGHIÊN... tin đăng ký nhận ni Đăng ký qun góp bảo vệ trẻ em; • Phần mềm hỗ trợ tốn qua mạng cách kết nối với ? ?hệ thống toán trực tuyến” USE-CASE TỔNG QUÁT Ứng dụng AdoptKids cấu thành từ hình: • Đăng ký