Báo cáo này phù hợp với các bạn đang theo học chuyên ngành thiết kế UIUX tại các trường đại học hoặc các trung tâm dạy thiết kế nói chung và thiết kế UIUX nói riêng. Đây là một sản phẩm rất tâm đắc và giúp mình đạt được A+ cho môn học này. Đề tài Nghiên cứu lý thuyết về Phân cấp thị giác trong thiết kế giao diện ứng dụng di động và ứng dụng cải thiện giao diện ứng dụng Trợ lý mẹ bầu THỰC HÀNH CHUYÊN SÂU GVHD Th.S Nguyễn Thị Tuyết Mai Khoa Đa phương tiện Học Viện Công nghệ Bưu chính Viễn thông (PTIT)
Trang 1GVHD: Th.S Nguyễn Thị Tuyết Mai
Họ và tên: Nguyễn Thị Hậu
MSV: B18DCPT078
Trang 2Nội dung
Trang 3CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX
Trang 4Chương 1 II TỔNG QUAN THIẾT KẾ ĐỐI VỚI
ỨNG DỤNG DI ĐỘNG (MOBILE APP)
Trang 5Chương 1 II TỔNG QUAN THIẾT KẾ ĐỐI VỚI
ỨNG DỤNG DI ĐỘNG (MOBILE APP)
1 Ứng dụng di động (Mobile app) là gì?
Ứng dụng di động hay mobile app được định nghĩa là các chương trình phần mềm được thiết kế dành riêng cho điện thoại di động.
CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX
Trang 6Chương 1 II TỔNG QUAN THIẾT KẾ ĐỐI VỚI
ỨNG DỤNG DI ĐỘNG (MOBILE APP)
2 Lợi ích của thiết kế ứng dụng di động
Ứng dụng hiện nay thường được thiết kế cho hai hệ điều hành được sử dụng phổ biến là Android và iOS Việc phát triển ứng dụng sẽ thỏa mãn được nhu cầu của người dùng, từ
đó giúp phát triển việc kinh doanh của doanh nghiệp.
Tạo nên ứng dụng riêng cho doanh nghiệp chất lượng, hỗ trợ đem đến lợi nhuận cao, gia tăng việc tiêu thụ sản phẩm; thu hút được
nhiều khách hàng tiềm năng; đơn giản hóa việc quảng cáo, tiết kiệm chi phí; là kênh tiếp thị, quảng cáo cực kỳ hiệu quả,
CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX
Trang 7Chương 1 II TỔNG QUAN THIẾT KẾ ĐỐI VỚI
ỨNG DỤNG DI ĐỘNG (MOBILE APP)
3 Quy trình thiết kế giao diện ứng dụng di động?
Bước 1: Xác định yêu cầu Bước 2: Thiết kế phác thảo Bước 3: Xây dựng bản mẫu Bước 4: Đánh giá
CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX
Trang 8Chương 1 II TỔNG QUAN THIẾT KẾ ĐỐI VỚI
ỨNG DỤNG DI ĐỘNG (MOBILE APP)
4 Các nguyên tắc thiết kế giao diện ứng dụng
di động
Nguyên tắc cấu trúc (The Structure Principle) Nguyên tắc đơn giản (The Simple Principle) Nguyên tắc hiển thị (The Visibility Principle) Nguyên tắc nhất quán (The Consistency Principle) Nguyên tắc phản hồi (The Feedback Principle)
Nguyên tắc dùng sai (The Tolerance Principle)
CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX
Trang 9Chương 1 III NGHIÊN CỨU LÝ THUYẾT VỀ
PHÂN CẤP THỊ GIÁC TRONG THIẾT KẾ GIAO DIỆN ỨNG DỤNG
Phân cấp chữ
Các yếu tố giúp xây dựng hệ thống phân cấp thị giác trực quan trong thiết kế giao diện ứng dụng di động
CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX
Trang 10Phân cấp thị giác
trong thiết kế u ̛́ng dụng di động
Phân cấp thị giác (Visual Hierarchy ) là cách thông tin được cấu trúc và ưu tiên trong một thiết kế
Dựa trên lý thuyết tâm lý của Gestalt, kiểm tra nhận thức thị giác của người dùng về các yếu tố liên quan đến nhau và cho thấy cách mọi người có xu hướng thống nhất các yếu tố hình ảnh thành các nhóm
Hệ thống phân cấp trực quan hướng người xem đến thông tin quan trọng nhất trước tiên, và sau đó đến nội dung phụ
III Nghiên cứu lý thuyết về phân cấp thị giác trong ứng dụng di động
Trang 11Tại sao phân cấp
thị giác lại quan trọng
trong thiết kế u ̛́ng dụng di động ?
Việc tạo ra phân cấp thị giác đúng sẽ giúp người dùng dễ dàng quét những nội dung chính hoặc những điểm quan trọng mà thiết
kế muốn truyền tải
Không có hệ thống phân cấp trực quan, tất
cả các thông tin sẽ trở lên lộn xộn, khó nắm bắt
Ngoài ra, hệ thống phân cấp thị giác còn thể hiện tầm quan trọng của hệ thống thông tin
III Nghiên cứu lý thuyết về phân cấp thị giác trong ứng dụng di động
Trang 12Phân cấp chu ̛̃ Nội dung là một phần quan trọng của bất kỳ thiết kế UI nào
Hệ thống này nhằm mục đích tổ chức nội dung theo cách tốt nhất cho nhận thức của người dùng
Các chuyên gia thiết kế nhấn mạnh tầm quan trọng của việc trình bày thiết kế bằng cách
tạo một hệ thống phân cấp trực quan riêng gọi là hệ thống phân cấp typographic
III Nghiên cứu lý thuyết về phân cấp thị giác trong ứng dụng di động
Hệ thống phân cấp typographic bao gồm các yếu tố khác nhau của nội dung: tiêu đề, tiêu
đề phụ, các yếu tố kêu gọi để hành động, chú thích và một số yếu tố khác
Trang 13Độ tương phản (Contrast)
Lưới (Gird)
Sự liên tục (Continuance)
Các yếu tố giúp xây du ̛̣ng hệ
thống phân cấp thị giác tru ̛̣c
quan trong thiết kế giao
diện u ̛́ng dụng di động
Trang 14Độ tu ̛o ̛ng phản
Kích thước thiết lập hệ thống phân cấp thị giác vì các yếu tố lớn nhất thu hút sự chú ý trước, đặc biệt khi so sánh với các yếu tố nhỏ hơn gần đó
Trang 15Lu ̛o ̛́i
3 Hệ thống lưới bao gồm: Columns (cột), Gutters (khoảng trống giữa cột), và
Margins (lề)
1 Lưới là một trong những công cụ chính được áp dụng ở các giai đoạn khác nhau
của quy trình thiết kế
Lưới giúp cấu trúc tất cả các thành phần và đặt chúng vào kích thước và tỷ
lệ thích hợp
2
Trang 16Su ̛̣ liên tục
1
Những yếu tố thiết kế được đặt trên một đườngliền mạch thường được xem như một nhóm, giúpcăn gióng các yếu tố và hướng đường mắt củangười dùng đi xuyên suốt thiết kế, tăng mức độ dễđọc
Để tạo ra sự liên tục tinh tế trong thiết kế giaodiện di động, có 3 yếu tố được sử dụng: Đường
kẻ (lines), sự tương đồng (similarity) và khônggian (space)
2
Trang 17Chương 2 1.TỔNG QUAN VỀ ỨNG DỤNG
Giới thiệu ứng dụng Hiện trạng của ứng dụng
Đề xuất cách khắc phục
NGHIÊN CỨU ỨNG DỤNG
“TRỢ LÝ MẸ BẦU”
So sánh với các ứng dụng liên quan
Trợ lý mẹ bầu là ứng dụng còn khá nhiều nhược điểm, tuy nhiên
trong phạm vi đề tài sẽ tập trung phân tích những ưu, nhượcđiểm của ứng dụng về mặt thiết kế giao diện và đưa ra nhữnggiải pháp khắc phục bám sát lý thuyết về hệ thống phân cấp thịgiác trong thiết kế ứng dụng di động
Trang 18Trợ lý mẹ bầu là ứng dụng di động hoạt động trên hệ điều hành iOS
Ứng dụng ra đời nhằm cung cấp đầy đủ thông tin, kiến thức cần thiết, hữu ích về thai kỳ, chăm sóc bé và mẹ được tổng hợp từ các nguồn tài
liệu chất lượng, đội ngũ bác sĩ có chuyên môn
và thâm niên trong nghề; tạo ra không gian chia
sẻ, giao lưu cho các mẹ bầu trong quá trình chuẩn bị và quá trình mang thai
Gio ̛́i thiệu u ̛́ng dụng
Trang 19Ứng dụng có giao diện rõ ràng, có ứng dụng hệ thống phân cấp thị giác, cụ thể:
Có sự phân cấp chữ trong ứng dụng, các thông tin được tổchức, sắp xếp có mục đích
Các nội dung văn bản được tách thành từng dòng rõ ràng,căn lề trái giúp nội dung được thống nhất và làm cho ngườidùng không bị bối rối, hay gặp nhiều khó khăn khi lần đầutiên sử dụng ứng dụng
Những thông tin quan trọng như “Dự sinh, tuổi thai, kì kinhcuối” được bôi đậm giúp người dùng nhận biết đó là thông tinquan trọng trên màn hình
Việc thay đổi màu sắc (màu đỏ) ở các mục “Thêm chỉ số thainhi”, Số ngày còn lại của thai kỳ cũng tạo được sự chú ý củangười dùng
Phông chữ (font) được sử dụng thống nhất với hai loại font,giúp tạo được sự thống nhất, đơn giản cho ứng dụng
Hiện trạng của u ̛́ng dụng
Ưu điểm
Trang 20Ứng dụng tạo được sự liên tục trong phân cấp thị giác khi tận dụng được yếu tố hình khối, sự tương đồng:
Ở trang chủ của ứng dụng, có một loạt các tính năngđược sắp xếp thành hai hàng dọc trên màn hình và đượccăn gióng chính giữa màn hình giúp hướng đường mắtcủa người dùng đi xuyên suốt thiết kế và tăng mức độ
dễ đọc cho các phần nội dung
Hiện trạng của u ̛́ng dụng
Ưu điểm
Trang 21Ứng dụng tạo được sự liên tục trong phân cấp thị giác khi tận dụng được yếu tố hình khối, sự tương đồng:
Ứng dụng còn tạo được sự tương đồng về màu sắc, icon(biểu tượng) sử dụng trong ứng dụng: Màu sắc chủ đạocủa ứng dụng là màu xanh lá cây đơn sắc được sử dụngxuyên suốt các trang của ứng dụng; các icon được sửdụng thống nhất phong cách thiết kế Linear giúp choứng dụng trở lên chuyên nghiệp hơn
Hiện trạng của u ̛́ng dụng
Ưu điểm
Trang 22Mặc dù ứng dụng có ứng dụng yếu tố màu sắc khiphân cấp các vùng nội dung để làm nổi bật các nộidung chính, tuy nhiên nó không đem lại nhiều hiệuquả Trong ứng dụng này chỉ sử dụng chủ yếu mộtmàu xanh lá cây, kết hợp với một chút màu trắng
và hồng ở các nút ấm (button), rất ít sự chuyểnmàu giữa các phần của trang khiến cho ứng dụngtrở lên kém thu hút, bắt mắt
Việc sử dụng màu xanh lá cây làm màu chủ đạocho một ứng dụng dành cho mẹ bầu cũng chưathực sự phù hợp, bởi màu xanh lá cây thường đạidiện cho những sự rõ ràng, an toàn và thiên về tựnhiên, cỏ cây
Các button chưa tạo được điểm nhấn và “bị chìm”trên giao diện ứng dụng
Yếu tố tương phản trong phân cấp thị giác chưa được áp dụng triệt để trong ứng dụng:
Hiện trạng của u ̛́ng dụng
Nhược điểm
Trang 23Ứng dụng vẫn còn thiếu sự tương đồng về hình ảnh trong trong cách trình bày danh mục tính năng và thiếu không gian âm cho ứng dụng:
Nhìn vào hình ảnh có thể thấy ứng dụng đang sử dụnglẫn lộn các tín hiệu nhận diện cho các tính năng, chỗthì sử dụng hình ảnh thật, chỗ thì sử dụng icon khiếncho hình ảnh trở lên lộn xộn, thiếu sự chuyên nghiệp,đồng bộ hóa
Yếu tố không gian trong ứng dụng gần như bị triệttiêu hoàn toàn khi các button chức năng bố trí quá to,
bị lẫn vào hình nền, thiếu sự nổi bật và khiến ngườidùng phải lướt nhiều lần để có thể xem và lựa chọnbutton Ứng dụng rất ít khoảng trắng để giúp mắtngười dùng nghỉ ngơi trong khi dùng ứng dụng
Hiện trạng của u ̛́ng dụng
Nhược điểm
Trang 24Thiếu sự phân cấp nội dung trong một số trang của ứng dụng:
Hệ thống lưới chưa được áp dụng trong thiết kế giao diện ứng dụng:
Trong chức năng “Thai kỳ” có quá nhiều nội dung chữ,thiếu hình ảnh minh họa, quá ít khoảng trống để tạo
độ nghỉ cho mắt người dùng, khiến người dùng dễcảm thấy mệt mỏi khi đọc trong thời gian dài
Rất khó để nhận biết ứng dụng này có sử dụng hệthống lưới không bởi các trang sắp xếp thiếu sự quychuẩn, căn gióng Chính điều này đã càng làm cho ứngdụng thiếu sự thống nhất, rõ ràng
Hiện trạng của u ̛́ng dụng
Nhược điểm
Trang 25Giao diện ứng dụng khá đơn giản, có sự lặp lại nhiều dễ cảm giác nhàm chán cho người dùng
Thiếu phần giới thiệu, hướng dẫn sử dụng cho người mới sử dụng.
Ngoài những lỗi liên quan đến phân
cấp thị giác, ứng dụng còn gặp rất
nhiều những lỗi khác trong thiết kế
giao diện di động:
Sử dụng lặp đi lặp lại một hình ảnh nềnkết hợp với việc sử dụng chủ đạo mộtmàu xanh lá khiến cho ứng dụng trởlên nhạt nhòa, không tạo được điểmnhấn, sự gần gũi thực sự dành chongười dùng
Hiện trạng của u ̛́ng dụng
Nhược điểm
Trang 26Ứng dụng Trợ lý bà bầu Ứng dụng Bà bầu
Ưu điểm:
- Giao diện trang chủ đơn giản, nội dung thông tin được
phân cấp rõ ràng.
- Các chức năng được chia đều cho mẹ bầu và em bé thành
từng trang nhỏ giúp người dùng dễ dàng chọn lọc nội dung
mong muốn Yếu tố sự liên tục được áp dụng rất hiệu quản
trong hai trang này.
- Việc áp dụng lưới Layout margins – Large Gird (Lưới cột
rộng) giúp các trang trở lên rõ ràng, sạch sẽ, dễ đọc cho
người dùng
- Các khoảng trắng được bố cục hợp lý tạo độ nghỉ cho mắt
người dùng.
- Các icon được thiết kế đồng bộ, sử dụng một font chữ duy
nhất giúp tạo sự thống nhất cho ứng dụng
Nhược điểm:
- Sử dụng font chữ thiếu điểm nhấn, và không tạo được
nhiều sự phân cấp thị giác cho chữ
- Màu sắc của ứng dụng chưa thân thiện với mẹ bầu.
-Các button chức năng chưa tạo được điểm nhấn, sự thu
hút với người dùng.
Ưu điểm:
- Giao diện trang chủ có sự phân cấp thông tin rất rõ ràng,
có hình ảnh minh họa liên quan đến
mẹ bầu.
- Các chức năng cũng được phân bố giành cho từng đối tượng mẹ bầu, em bé giúp người dùng dễ dàng chọn lựa thông tin
- Ứng dụng tạo được sự đồng bộ, thống nhất về màu sắc, icon giúp cho ứng dụng trở lên chuyên nghiệp, thân thiện hơn với người dùng.
Trang 27Cải thiện trang chủ, làm nổi bật các button chức năng choThiết kế rút gọn khoảng cách giữa các thành phần trong
Thêm các bước hướng dẫn cho người dùng mới để người dùngkhông bị bỡ ngỡ khi lần đầu sử dụng ứng dụng
Phân cấp các trang nội dung nhiều văn bản một cách rõ ràng,trực quan hơn để người dùng không cảm thấy mệt mỏi khi phảitiếp nhận quá nhiều thông tin
Thay đổi màu sắc ứng dụng để tăng độ tương phản, sự phù hợp,thân thiện cho ứng dụng, bởi đây là ứng dụng đặc thù cho
Rút gọn bớt các bước thực hiện chức năng của ứng dụng để làmđơn giản hóa các bước thực hiện cho người dùng
Đồng bộ các icon, hình ảnh trong các danh mục tính năng củaứng dụng
người dùng một trang giúp người dùng không phải cuộn trang nhiều lần
mẹ bầu
Đề xuất thay đổi giao diện
Trang 28Chương 2 2 NGHIÊN CỨU NGƯỜI DÙNG
Đối tượng người dùng NGHIÊN CỨU ỨNG DỤNG
“TRỢ LÝ MẸ BẦU” Mẹ bầu: Là những phụ nữ đang trong quá trình mang thai Họmuốn bổ sung các kiến thức về mang thai và chăm sóc con
nhỏ, sự phát triển của thai nhi, muốn được trao đổi, hỏi đáp,chia sẻ kinh nghiệm trong quá trình mang thai để có một thai
kỳ khỏe mạnh
Phụ nữ chuẩn bị mang thai: Là đối tượng phụ nữ có dự định sẽchuẩn bị mang thai, những phụ nữ lần đầu làm mẹ, muốn tìmhiểu kiến thức, kỹ năng cần thiết cho quá trình trước, trong vàsau giai đoạn mang bầu sắp tới
Trang 29Chương 2 2 NGHIÊN CỨU NGƯỜI DÙNG
NGHIÊN CỨU ỨNG DỤNG
“TRỢ LÝ MẸ BẦU”
Personas về người dùng
Nhóm 1: Nhóm phụ nữ đã kết hôn và đã, đang hoặc dự định
mang bầu, độ tuổi giao động trong khoảng 22 – 37 tuổi Đây lànhóm đối tượng mang thai có kế hoạch hoặc tự nguyện, họmuốn được trang bị những kiến thức cần thiết, chuyên sâu,chính xác về chế độ ăn uống, ngủ nghỉ và các vấn đề khác liênquan đến mẹ bầu và em bé để có một thai kỳ khỏe mạnh cho
cả mẹ và em bé
Nhóm 2: Nhóm phụ nữ chưa kết hôn nhưng có con ngoài ý
muốn Đây là nhóm đối tượng tập trung trong độ tuổi 17 – 21tuổi Bên cạnh một số lượng không nhỏ phụ nữ lựa chọn nạophá thai thì cũng có rất nhiều phụ nữ trong nhóm tuổi này lựachọn giữ lại thai nhi Họ là nhóm đối tượng rất trẻ, chưa có
kinh nghiệm, kỹ năng sống, tài chính đầy đủ để sẵn sàng làm mẹ
Trang 32Chương 3
WIFREAM CỦA ỨNG DỤNG 1.
Chào mừng Đăng ký/ Đăng nhập Trang chủ
Thai kỳ Nhật Ký
Cá nhân
THIẾT KẾ GIAO DIỆN
"TRỢ LÝ MẸ BẦU" APP
Trang 33Danh sách wireframe
Trang 351.USERFLOW CỦA ỨNG DỤNG
1.
Để bắt đầu sử dụng ứng dụng, người dùng đăng nhập hoặc đăng ký tài
khoản (nếu chưa có) Sau đó người dùng nhập thông tin dự sinh của bé
để hoàn tất quá trình khởi tạo ứng
dụng trong lần đầu tiên sử dụng Tiếp
đó người dùng có thể tự do lựa chọn những tác vụ chức năng mà mình
muốn xem.
Trang 36Chương 3
2 THIẾT KẾ UI
Logo: Thay đổi màu sắc của logo để
phù hợp hơn với những định hướng thiết kế tiếp theo.
THIẾT KẾ GIAO DIỆN
"TRỢ LÝ MẸ BẦU" APP
Trang 37THIẾT KẾ GIAO DIỆN
"TRỢ LÝ MẸ BẦU" APP
Trang 38Chương 3
2 THIẾT KẾ UI
Màu sắc – Color: Lựa chọn hai màu
chủ đạo là màu hồng và màu xanh dương Màu hồng là biểu tượng của
sự lãng mạn, bay bổng, đại diện cho phái đẹp ở châu Á Những thiết kế sử dụng màu hồng có tác dụng đem đến
sự thư thái, dễ chịu, giải tỏa stress và mang tới những cảm xúc tích cực
cho người dùng Còn màu dương có ý nghĩa thể hiện sự bảo vệ, an toàn,
che chở
THIẾT KẾ GIAO DIỆN
"TRỢ LÝ MẸ BẦU" APP
Trang 39Chương 3 2 THIẾT KẾ UI
Hệ thống lưới: Sử
dụng hệ thống lưới 5 cột giúp cấu trúc các thành phần trong ứng dụng một cách gọn gàng, cân đối, giúp người dùng dễ dàng đọc các thông tin trên ứng dụng, Đồng thời tạo sự chuyên nghiệp cho app.
THIẾT KẾ GIAO DIỆN
"TRỢ LÝ MẸ BẦU" APP
Trang 40Chương 3
2 THIẾT KẾ UI
2.5 Biểu tượng – Icon: Sử dụng
icon dạng outline (icon có viền đơn giản, không nền, viền đơn sắc) tạo sự hiện đại, trẻ trung cho ứng dụng,
đồng thời giúp điều hướng giao diện, tiết kiệm không gian trực quan và
tạo kết nối với người dùng
THIẾT KẾ GIAO DIỆN
"TRỢ LÝ MẸ BẦU" APP
Trang 41Danh sách giao diện hoàn chı̉nh