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 NUÔI 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 hiện
: 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
Chuyên ngành
: Lập trình ứng dụng di động và game
MSSV
: 17031223
Lớp
: DH17LT
Niên khoá
: 2017-2021
Lớp
: DH17LT
BÀ RỊA - VŨNG TÀU, NĂM 2021
LỜI CẢM ƠN
-------Xin chân thành cảm ơn Ban giám hiệu cùng toàn thể quý thầy cô, đặc biệt
là 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, những người đã truyền đạt cho tôi nhiều kiến thức
quý báu trong 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 là người đã tận tình hướng dẫn tôi trong suốt quá
trình hoàn thành đề tài này.
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 hiện
Tô Đình Đức Anh
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
MỤC LỤC
CHƯƠNG 1. TỔNG QUAN ĐỀ TÀI ................................................................ 1
1.
LÝ DO CHỌN ĐỀ TÀI .......................................................................... 1
2.
ĐỐI TƯỢNG NGHIÊN CỨU ................................................................ 1
3.
PHƯƠNG PHÁP NGHIÊN CỨU .......................................................... 1
CHƯƠNG 2. TỔNG QUAN UI, UX ................................................................. 2
1.
UI là gì? .................................................................................................. 2
2.
UX là gì? ................................................................................................. 3
3.
Sự khác biệt của UX và UI ..................................................................... 4
4.
Công việc của UX design trong dự án .................................................... 4
5.
Công việc của UI design trong dự án ..................................................... 4
5.1.
Sketch (Phác thảo) ........................................................................... 5
5.2.
Wireframe ........................................................................................ 5
5.3.
Mockup ............................................................................................ 6
5.4.
Prototype .......................................................................................... 7
CHƯƠNG 3. Phân tích thiết kế hệ thống ........................................................... 8
1.
Xác định tác nhân ................................................................................... 8
2.
Use-case tổng quát .................................................................................. 8
CHƯƠNG 4. Thiết kế giao diện ứng dụng ....................................................... 15
1.
Giới thiệu Figma ................................................................................... 15
2.
Thiết kế Wireframe ............................................................................... 16
3.
4.
2.1.
Wireframe là 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 là gì? ............................................................................. 30
3.2.
Tại sao cần User Flow? .................................................................. 30
3.3.
User Flow cho AdoptKids ............................................................. 31
Thiết kế UI guideline ............................................................................ 40
4.1.
UI guideline là gì?.......................................................................... 40
5.
4.2.
Tại sao 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 5. KẾT LUẬN ................................................................................ 62
1.
Tổng kết và hạn chế .............................................................................. 62
2.
Hướng phát triển ................................................................................... 62
TÀI LIỆU THAM KHẢO ................................................................................ 63
DANH MỤC HÌNH
Hình 2-1 Giao diện người dùng trực quan và tương tác dễ dàng ....................... 2
Hình 2-2 Trải nghiệm người dùng tinh tế và xuyên suốt ................................... 3
Hình 2-3 Nhà thiết kế UX trong quá trình tạo dự án .......................................... 4
Hình 2-4 Nhà thiết kế UI trong quá trình tạo dự án ........................................... 5
Hình 2-5 Sketch là phác thảo nhanh ý tưởng lên giấy hoặc bảng ...................... 5
Hình 2-6 Wireframe giúp mô tả chức năng của dự án ....................................... 6
Hình 2-7 Mockup là thêm các yếu tố thiết kế vào wireframe ............................ 6
Hình 2-8 Prototype là một mockup nhưng có thêm phần UX ............................ 7
Hình 3-1 Use-case tổng quát............................................................................... 9
Hình 3-2 Sơ đồ Use-Case ................................................................................. 10
Hình 3-3 Activity Diagram kiểm tra lịch sử quyên góp và trạng thái nhận nuôi
........................................................................................................................... 10
Hình 3-4 Activity Diagram Đăng ký nhận nuôi ............................................... 11
Hình 3-5 Activity Diagram thanh toán tiền quyên 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 màn hình của 1 Project trong 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 màn hình Tổng quan ....................................................... 21
Hình 4-10 Wireframe màn hình nhận nuôi ....................................................... 22
Hình 4-11 Wireframe màn hình Thông báo và Blog\....................................... 23
Hình 4-12 Wireframe màn hình Thông tin nhận nuôi ...................................... 23
Hình 4-13 Wireframe màn hình Đăng ký nhận nuôi ........................................ 24
Hình 4-14 Wireframe màn hình Yêu thích và Tìm kiếm ................................. 24
Hình 4-15 Wireframe màn hình Quyên góp và Thông tin quyên góp ............. 25
Hình 4-16 Wireframe màn hình Thanh toán .................................................... 26
Hình 4-17 Wireframe màn hình Splash screen Quyên góp .............................. 26
Hình 4-18 Wireframe màn hình Hỗ trợ ............................................................ 27
Hình 4-19 Wireframe màn hình thông tin đơn nhận nuôi ................................ 28
Hình 4-20 Wireframe màn hình Giải đáp vấn đề và Chat tư vấn ..................... 28
Hình 4-21 Wireframe màn hình Tài khoản và Quản lý thẻ .............................. 29
Hình 4-22 Wireframe màn 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 màn hình Tổng quát ........................................................ 33
Hình 4-25 User flow màn hình Nhận nuôi ....................................................... 35
Hình 4-26 User flow màn hình Quyên góp ...................................................... 37
Hình 4-27 User flow màn hình Hỗ trợ.............................................................. 39
Hình 4-28 User flow màn hình Tài khoản ........................................................ 40
Hình 4-29 Phông chữ và 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 của 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 trên 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 màn hình Tổng quan................................................................... 52
Hình 4-44 UI màn hình nhận nuôi .................................................................... 53
Hình 4-45 UI màn hình Thông báo và Blog\ .................................................... 54
Hình 4-46 UI màn hình Thông tin nhận nuôi ................................................... 54
Hình 4-47 UI màn hình Đăng ký nhận nuôi ..................................................... 55
Hình 4-48 UI màn hình Yêu thích và Tìm kiếm............................................... 55
Hình 4-49 UI màn hình Quyên góp và Thông tin quyên góp ........................... 56
Hình 4-50 UI màn hình Thanh toán .................................................................. 57
Hình 4-51 UI màn hình Splash screen Quyên góp ........................................... 57
Hình 4-52 UI màn hình Hỗ trợ ......................................................................... 58
Hình 4-53 UI màn hình thông tin đơn nhận nuôi ............................................. 59
Hình 4-54 UI màn hình Giải đáp vấn đề và Chat tư vấn .................................. 59
Hình 4-55 UI màn hình Tài khoản và Quản lý thẻ ........................................... 60
Hình 4-56 UI màn hình Chi tiết giao dịch ........................................................ 61
DANH MỤC BẢNG
Bảng 3-1 Xác định tác nhân hệ thống................................................................. 8
1
CHƯƠNG 1. TỔNG QUAN ĐỀ TÀI
1. LÝ DO CHỌN ĐỀ TÀI
"Điều khiến đứa trẻ đau khổ không phải là thiếu quần áo, đồ ăn, hay giáo
dục mà là không được thuộc về ai và không có một gia đình" trích bởi ô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 trên tôi đã phát triển nên ý tưởng xây dựng một ứng dụng
tên là AdoptKids - là một dự án 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. Thông qua ứng dụng này, mỗi
đứa trẻ không còn phải trải qua cảnh thiếu thốn tình thương và mỗi em sẽ có
một gia đình để được yêu thương, chăm sóc.
2. ĐỐI TƯỢNG NGHIÊN CỨU
• Nghiên cứu UI, UX cho nền tảng di động;
• Nghiên cứu, ứng dụng công cụ Figma để thiết kế UI cho ứng dụng
AdoptKids.
3. PHƯƠNG PHÁP NGHIÊN CỨU
Về lý thuyết:
• Tìm hiểu về công cụ Figma;
• Tìm hiểu về UI, UX cho nền 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 bản sử dụng ứng dụng AdoptKids.
2
CHƯƠNG 2. TỔNG QUAN UI, UX
1. UI LÀ GÌ?
UI là viết tắt của từ User Interface có nghĩa là giao diện người dùng. Hiểu
một cách đơn giản nhất thì UI bao gồm tất cả những gì người dùng có thể nhìn
thấy như: màu sắc, bố cục sắp xếp như thế nào, ứng dụng sử dụng fonts chữ gì,
hình ảnh trên ứng dụng có hấp dẫn hay không,...
Hình 2-1 Giao diện người dùng trực quan và tương tác dễ dàng
Trong thiết kế thì UI đóng vai trò là yếu tố truyền tải thông điệp từ người
thiết kế sản phẩm tới người dùng. Thiết kế giao diện người dùng tốt sẽ hỗ trợ
khả năng sử dụng với bố cục và nội dung trực quan, rõ ràng, nhất quán, cung
cấp cho người dùng chỉ dẫn, cử chỉ và gợi ý để giúp người dùng hoàn thành
nhiệm vụ trong khi giảm thời gian thực hiện công việc.
Một nhà thiết kế UI thường chủ yếu chú trọng trong các vấn đề sau:
• Giao diện tương tác;
• Biểu tượng, logo, nút và các yếu tố liên quan khác;
• Tạo bố cục thân thiện và hấp dẫn người dùng;
• Xây dựng kịch bản sử dụng.
• Phối hợp với UX design;
• Phối hợp với các nhà phát triển sản phẩm.
3
2. UX LÀ GÌ?
UX là viết tắt của từ User Experience có nghĩa là trải nghiệm người dùng.
Đơn giản hơn thì UX là những đánh giá của người dùng khi sử dụng sản phẩm.
Chẳng hạn như: App có dễ sử dụng hay không, có thân việc bố trí sắp xếp bố
cục như vậy đã được hay chưa? Sản phẩm đó có đạt được mục đích đề ra không.
Hình 2-2 Trải nghiệm người dùng tinh tế và xuyên suốt
Người làm về UX hay còn gọi là UX Designer. UX Designer sẽ nghiên
cứu và đánh giá về thói quen và cách mà khách hàng sử dụng rồi đánh giá về
sản phẩm nào đó. Sử dụng và đánh giá ở đây đơn giản là những vấn đề: tính dễ
sử dụng, sự tiện ích, sự hiệu quả khi hệ thống hoạt động..
Một nhà thiết kế UX thường chủ yếu chú trọng trong các vấn đề sau:
• Nghiên cứu nhu cầu người dùng;
• Tạo ra các khung lưới logic của giao diện;
• Thử nghiệm bản mẫu - demo;
• Viết thông số kỹ thuật thiết kế;
• Phối hợp với nhà thiết kế giao diện người dùng;
• Phối hợp với các nhà phát triển sản phẩm.
4
3. SỰ KHÁC BIỆT CỦA UX VÀ UI
Tóm lại, sự khác biệt giữa UX và UI là:
• Nhà thiết kế UX lên kế hoạch cách người dùng sẽ tương tác với
giao diện và những bước anh ta cần thực hiện để làm gì đó.
• Và người thiết kế UI đưa ra cách mỗi bước sẽ trông như thế nào.
Chính vì UX và UI có liên quan chặt chẽ đến mức đôi khi ranh giới giữa
các khái niệm lấn át lẫn nhau. Do đó, cả UX và UI thường được thực hiện bởi
một nhà thiết kế.
4. CÔNG VIỆC CỦA UX DESIGN TRONG DỰ ÁN
Nhà thiết kế UX có thể tham gia vào bất kỳ giai đoạn nào của dự án.
Nhưng thường hữu ích nhất trong các giai đoạn thiết kế, trước khi các lập trình
viên thực sự bắt đầu quá trình code.
Hình 2-3 Nhà thiết kế UX trong quá trình tạo dự án
5. CÔNG VIỆC CỦA UI DESIGN TRONG DỰ ÁN
Quy trình cơ bản của một nhà thiết UI trong dự án thường gồm 4 bước: Sketch,
Wireframe, Mockup, Prototype.
5
Hình 2-4 Nhà thiết kế UI trong quá trình tạo dự án
5.1. Sketch (Phác thảo)
Có thể được hiểu cơ bản là quá trình phác thảo nhanh ý tưởng lên giấy
hoặc bảng. Ở bước này sẽ giúp cho nhà thiết kế lên ý tưởng dễ dàng, với những
ý tưởng mới, sketch bằng tay là cách hiệu quả nhất để các thành viên trong team
thảo luận, đóng góp ý kiến. Và đây là bước cần thiết để đến giai đoạn Wireframe.
Hình 2-5 Sketch là phác thảo nhanh ý tưởng lên giấy hoặc bảng
5.2. Wireframe
Mô tả chức năng của dự án cũng như mối quan hệ giữa các khung nhìn,
điều gì sẽ xảy ra khi người dùng nhấp vào một nút nhất định và các màn hình sẽ
tương tác với nhau như thế nào.
6
Hình 2-6 Wireframe giúp mô tả chức năng của dự án
5.3. Mockup
Ở giai đoạn này nhà thiết kế sẽ thêm màu sắc, phông chữ, văn bản, hình
ảnh, logo và bất cứ thứ gì khác cần thiết vào Wireframe.
Hình 2-7 Mockup là thêm các yếu tố thiết kế vào wireframe
7
5.4. Prototype
Prototype là một mockup nhưng có thêm phần UX. Có nghĩa là ta có thể
click vào một button, có thể chuyển screens, có thể show dữ liệu giả...
Hình 2-8 Prototype là một mockup nhưng có thêm phần UX
8
CHƯƠNG 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG
1. XÁC ĐỊNH TÁC NHÂN
Actors
Người dùng
Khách hàng
Hệ thống khác
Hệ thống Google Pay, Napas, Thanh
toán quốc tế.
Bảng 3-1 Xác định tác nhân hệ thống
• Khách hàng: Đăng kí - Đăng nhập tài khoản, Quên mật khẩu tài khoản,
Gửi thông tin đăng ký nhận nuôi và Đăng ký quyên góp bảo vệ trẻ em;
• Phần mềm hỗ trợ thanh toán qua mạng bằng cách kết nối với “hệ thống
thanh toán trực tuyến”.
2. USE-CASE TỔNG QUÁT
Ứng dụng AdoptKids được cấu thành từ các màn hình:
• Đăng ký tài khoản: người dùng mới chưa có tài khoản cần đăng ký
một tài khoản để sử dụng ứng dụng;
• Đăng nhập tài khoản: sau khi đăng ký hoặc đã có tài khoản, người
dùng sẽ nhập số điện thoại và mật khẩu để đăng nhập. Xác thực
thông tin thành công sẽ chuyển người dùng tới màn hình chính.
• Quên mật khẩu tài khoản: người dùng nhập số điện thoại đã đăng
ký trước đó và nhập mã OTP được hệ thống gửi về qua số điện
thoại đó để tiến thành bước reset lại mật khẩu tài khoản.
• Gửi thông tin đăng ký nhận nuôi: người dùng đăng ký thông tin cá
nhân của mình để nhận nuôi đứa trẻ và hệ thống sẽ gửi thông tin về
server để duyệt hồ sơ.
9
• Đăng ký quyên góp bảo vệ trẻ em: hiển thị thông tin về chương
trình quyên góp và người dùng sẽ sử dụng hệ thống thanh toán trực
tuyến để chuyển khoản tiền quyên góp của người dùng về hệ thống.
• Thanh toán: người dùng điền các thông tin thanh toán cần thiết để
hệ thống xác nhận tài khoản thanh toán của người dùng.
Hình 3-1 Use-case tổng quát
Người dùng cuối có các quyền như sau:
• Hỗ trợ trực tuyến từ tư vấn viên;
• Xem thông tin nhận nuôi và đăng ký nhận nuôi;
• Xác thực danh tính tài khoản người dùng. Bao gồm: Khôi phục mật
khẩu, Đăng ký/Đăng nhập tài khoản;
• Thanh toán quyên góp hỗ trợ nhiều tài khoản và thẻ nội địa, quốc
tế.
10
Hình 3-2 Sơ đồ Use-Case
Activity Diagram kiểm tra lịch sử quyên góp: Hỗ trợ hiển thị lịch sử
quyên góp và xem chi tiết giao dịch đó.
Activity Diagram kiểm tra trạng thái nhận nuôi: Hiển thị danh sách
đơn nhận nuôi và trạng thái duyệt đơn.
Hình 3-3 Activity Diagram kiểm tra lịch sử quyên góp và trạng thái nhận nuôi
11
Activity Diagram đăng ký nhận nuôi: Trước khi đăng ký nhận nuôi,
người dùng cần chấp nhận các điều khoản về việc xử lý hồ sơ của ứng dụng và
trước đó người dùng cần chọn một trẻ nhận nuôi để tiến thành các bước đăng ký
hồ sơ cần thiết. Sau khi điền thông tin xong, hệ thống kiểm tra lại các thông tin
được điền đã đúng và đủ chưa. Nếu mọi thứ đều ổn, gửi thông tin lên server.
Nếu không thì sẽ báo lỗi chi tiết cho người dùng.
Hình 3-4 Activity Diagram Đăng ký nhận nuôi
- Xem thêm -