(Luận văn) 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  lu an n va to gh tn ĐỒ ÁN TỐT NGHIỆP p ie ĐỀ TÀI d oa nl w 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 nf va an lu Giảng viên hướng dẫn : TS Bùi Thị Thu Trang Trình độ đào tạo Ngành đào tạo : Tơ Đình Đức Anh z at nh oi lm ul Sinh viên thực : Đại Học Chính Quy : Cơng nghệ thơng tin : Lập trình ứng dụng di động game MSSV : 17031223 Lớp : DH17LT Niên khoá : 2017-2021 Lớp : DH17LT z Chuyên ngành m co l gm @ an Lu n va BÀ RỊA - VŨNG TÀU, NĂM 2021 ac th si LỜI CẢM ƠN  -Xin chân thành cảm ơn Ban giám hiệu toàn thể quý thầy cô, đặc biệt quý 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 lu an n va Xin trân trọng cảm ơn! tn to p ie gh Tp.Vũng Tàu, ngày 12 tháng 01 năm 2021 Sinh viên thực Tơ Đình Đức Anh d oa nl w nf va an lu z at nh oi lm ul z m co l gm @ an Lu n va ac th si NHẬN XÉT CỦA GIẢNG VIÊN lu an n va gh tn to p ie nl w d oa nf va an lu lm ul z at nh oi z Vũng Tàu, ngày… tháng… năm 2020 Giảng Viên Xác Nhận m co l gm @ an Lu n va ac th si 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 lu an 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 Sketch (Phác thảo) 5.2 Wireframe 5.3 Mockup n va 5.1 ie gh tn to p 5.4 Prototype CHƯƠNG Phân tích thiết kế hệ thống w Xác định tác nhân Use-case tổng quát d oa nl lu nf va an CHƯƠNG Thiết kế giao diện ứng dụng 15 Giới thiệu Figma 15 Thiết kế Wireframe 16 Wireframe gì? 16 2.2 Các kiểu thiết kế Wireframe 17 2.3 Thiết kế Wireframe cho AdoptKids 19 z @ Thiết kế User Flow 30 gm 3.1 User Flow gì? 30 3.2 Tại cần User Flow? 30 3.3 User Flow cho AdoptKids 31 m co l an Lu 2.1 z at nh oi lm ul Thiết kế UI guideline 40 va 4.1 UI guideline gì? 40 n ac th si 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 lu an n va p ie gh tn to d oa nl w nf va an lu z at nh oi lm ul z m co l gm @ an Lu n va ac th si 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 lu an Hình 3-2 Sơ đồ Use-Case 10 n va tn to Hình 3-3 Activity Diagram kiểm tra lịch sử qun góp trạng thái nhận nuôi 10 gh Hình 3-4 Activity Diagram Đăng ký nhận nuôi 11 p ie Hình 3-5 Activity Diagram tốn tiền qun góp 12 w Hình 3-6 Activity Diagram tìm kiếm trung tâm bảo trợ trẻ em 13 oa nl Hình 3-7 Activity Diagram xác thực người dùng 14 d Hình 4-1 Logo phần mềm Figma 15 lu nf va an Hình 4-2 Chi tiết hình Project Figma 16 Hình 4-3 Wireframe dạng Block Diagrams 17 lm ul Hình 4-4 Wireframe high-fidelity text 18 z at nh oi 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 z gm @ Hình 4-8 Wireframe Xác thực (2) 20 Hình 4-9 Wireframe hình Tổng quan 21 l m co Hình 4-10 Wireframe hình nhận ni 22 Hình 4-11 Wireframe hình Thơng báo Blog\ 23 an Lu Hình 4-12 Wireframe hình Thơng tin nhận ni 23 n va Hình 4-13 Wireframe hình Đăng ký nhận ni 24 ac th si Hình 4-14 Wireframe hình Yê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 lu Hình 4-24 User flow hình Tổng quát 33 an va Hình 4-25 User flow hình Nhận ni 35 n Hình 4-26 User flow hình Quyên góp 37 gh tn to Hình 4-27 User flow hình Hỗ trợ 39 p ie 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 nl w Hình 4-30 Font chữ Roboto - Google 44 d oa Hình 4-31 Font chữ Roboto – Google 44 an lu Hình 4-32 Màu sắc chủ đạo AdoptKids 45 nf va Hình 4-33 Logo tượng trưng 46 lm ul Hình 4-34 Logo dạng chữ 46 Hình 4-35 Logo dựa ký tự 47 z at nh oi Hình 4-36 Logo trừu tượng 47 Hình 4-37 Logo App AdoptKids 48 z Hình 4-38 Nút bấm 48 @ gm Hình 4-39 Tab Bar 49 co l Hình 4-40 Trường nhập liệu 50 m Hình 4-41 UI Xác thực (1) 51 an Lu Hình 4-42 UI Xác thực (2) 51 n va Hình 4-43 UI hình Tổng quan 52 ac th si 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 nuôi 54 Hình 4-47 UI hình Đăng ký nhận ni 55 Hình 4-48 UI hình 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 Qun 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 nuôi 59 lu Hình 4-54 UI hình Giải đáp vấn đề Chat tư vấn 59 an va Hình 4-55 UI hình Tài khoản Quản lý thẻ 60 n Hình 4-56 UI hình Chi tiết giao dịch 61 p ie gh tn to d oa nl w nf va an lu z at nh oi lm ul z m co l gm @ an Lu n va ac th si DANH MỤC BẢNG Bảng 3-1 Xác định tác nhân hệ thống lu an n va p ie gh tn to d oa nl w nf va an lu z at nh oi lm ul z m co l gm @ an Lu n va ac th si 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ó lu an gia đình để u thương, chăm sóc va n ĐỐI TƯỢNG NGHIÊN CỨU to p ie gh tn • 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 oa nl w AdoptKids d PHƯƠNG PHÁP NGHIÊN CỨU nf va an lu Về lý thuyết: lm ul • Tìm hiểu cơng cụ Figma; Về thực nghiệm: z at nh oi • Tìm hiểu UI, UX cho tảng di động z gm @ • Ứng dụng Figma để thiết kế UI ứng dụng AdoptKids; m co l • Xây dựng kịch sử dụng ứng dụng AdoptKids an Lu n va ac th si 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 qun góp: Dùng để chuyển tới hình quyên góp giúp người dùng thực chức tốn cho việc qun 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 lu an View dùng để mở hình liên quan Nút đặt màu n va tiệp với background ứng dụng nút xếp vị trí List Nút quan tâm: Dùng để đưa item List View; Grid View vào ie gh tn to View; Grid View p danh sách quan tâm/yêu thích Nút đổ màu với mã màu #F05454 để nl w bật thu hút ánh nhìn người dùng Ở trạng thái kích hoạt, nút đổ d oa màu #F05454, ngược lại có màu trắng viền đen nf va an lu z at nh oi lm ul z m co l gm @ Hình 4-39 Tab Bar #30475E ngược lại không chọn đổ màu #7F8A8E an Lu Tab tổng quan: Hiển thị hình tổng quan Khi chọn đổ màu n va ac th si 50 Tab nhận nuôi: 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 qun góp: Hiển thị hình quyên 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 lu an n va p ie gh tn to d oa nl w nf va an lu lm ul Hình 4-40 Trường nhập liệu z at nh oi 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; z tài khoản; mật khẩu; mã OTP;… @ l gm Trường nhập nội dung tìm kiếm: Được dùng để nhập từ khố 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 co m dùng dễ phân biệt chức trường với “trường nhập nội dung” mặc an Lu định n va ac th si 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, tiến hành bước mockup giúp thiết kế hoàn thiện lu an n va p ie gh tn to d oa nl w nf va an lu Hình 4-41 UI Xác thực (1) z at nh oi lm ul z m co l gm @ an Lu Hình 4-42 UI Xác thực (2) n va ac th si 52 lu an n va p ie gh tn to d oa nl w nf va an lu z at nh oi lm ul z m co l gm @ an Lu n va Hình 4-43 UI hình Tổng quan ac th si 53 lu an n va p ie gh tn to d oa nl w nf va an lu z at nh oi lm ul z m co l gm @ an Lu n va Hình 4-44 UI hình nhận nuôi ac th si 54 lu an n va gh tn to p ie Hình 4-45 UI hình Thông báo Blog\ d oa nl w nf va an lu z at nh oi lm ul z m co l gm @ an Lu n va Hình 4-46 UI hình Thơng tin nhận ni ac th si 55 lu an n va gh tn to p ie Hình 4-47 UI hình Đăng ký nhận nuôi d oa nl w nf va an lu z at nh oi lm ul z m co l gm @ an Lu n va Hình 4-48 UI hình u thích Tìm kiếm ac th si 56 lu an n va p ie gh tn to d oa nl w nf va an lu z at nh oi lm ul Hình 4-49 UI hình Qun góp Thơng tin qun góp z m co l gm @ an Lu n va ac th si 57 Hình 4-50 UI hình Thanh tốn lu an n va p ie gh tn to d oa nl w nf va an lu Hình 4-51 UI hình Splash screen Qun góp z at nh oi lm ul z m co l gm @ an Lu n va ac th si 58 lu an n va p ie gh tn to d oa nl w nf va an lu z at nh oi lm ul z m co l gm @ an Lu n va Hình 4-52 UI hình Hỗ trợ ac th si 59 lu an n va Hình 4-53 UI hình thơng tin đơn nhận ni p ie gh tn to d oa nl w nf va an lu z at nh oi lm ul z m co l gm @ an Lu n va Hình 4-54 UI hình Giải đáp vấn đề Chat tư vấn ac th si 60 lu an n va p ie gh tn to d oa nl w nf va an lu z at nh oi lm ul z m co l gm @ Hình 4-55 UI hình Tài khoản Quản lý thẻ an Lu n va ac th si 61 lu an n va p ie gh tn to d oa nl w Hình 4-56 UI hình Chi tiết giao dịch nf va an lu z at nh oi lm ul z m co l gm @ an Lu n va ac th si 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 lu an số lỗi trình thiết kế ứng dụng Rất mong nhận góp ý n va kiến từ giảng viên để đề tài trở nên hoàn thiện p ie gh tn to HƯỚNG PHÁT TRIỂN • Áp dụng nguyên lý thiết kế phát triển ứng dụng để đưa nl w sản phẩm hoàn chỉnh; d oa • Trao dồi kỹ thực tế kiến thức chuyên nghành; lu z at nh oi lm ul nf va an • Nghiên cứu, đánh giá thị trường để cải thiện sản phẩm z m co l gm @ an Lu n va ac th si 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-vi- lu du/, Khoa Nguyen – 2019 an va n A Project Guide to UX Design: For User Experience Designers in the to tn Field or in the Making; Tác giả: Russ Unger, Carolyn Chandler; Xuất p ie gh lần đầu tiên: 13 tháng 3, 2009 Observing the User Experience: A Practitioner's Guide to User d oa nl w Research; Tác giả: Mike Kuniavsky; Xuất lần đầu tiên: 2003 nf va an lu z at nh oi lm ul z m co l gm @ an Lu n va ac th si