Slide Báo cáo MÔN HỌC THỰC HÀNH CHUYÊN SÂU| KHOA ĐA PHƯƠNG TIỆN| Học viện Công nghệ Bưu chính Viễn Thông (PTIT)

THỰC HÀNH CHUYÊN SÂU
GVHD: Th.S. Nguyễn Thị Tuyết Mai

Đề 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"
Họ và tên: Nguyễn Thị Hậu
MSV: B18DCPT078


Nội dung
Chương 1:
Cơ sở lý thuyết về thiết kế UI/UX và phân tích
nguyên lý Phân cấp thị giác trong thiết kế giao diện
ứng dụng di động

Chương 2:
Nghiên cứu về ứng dụng
“Trợ lý mẹ bầu”

Chương 3:
Thiết kế giao diện ứng dụng
“Trợ lý mẹ bầu”


Chương 1
CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX

I. TỔNG QUAN THIẾT KẾ UI/UX
UI là gì ? Thiết kế UI là gì ?
UX là gì ? Thiết kế UX là gì ?
Những khái niệm liên quan tới thiết
kế UI/UX
Quy trình thiết kế UI
Nguyên lý thiết kế UI


Chương 1
CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX

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ì?
2. Lợi ích của thiết kế ứng dụng di động
3. Quy trình thiết kế một ứng dụng di động?
4. Các nguyên tắc thiết kế ứng dụng di động


Chương 1
CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX

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.


Chương 1
CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX

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ả,...


Chương 1
CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX

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á


Chương 1
CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX

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)


Chương 1

CƠ SỞ LÝ THUYẾT VỀ
THIẾT KẾ UI/UX

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
DI ĐỘNG
Phân cấp thị giác trong thiết kế ứng
dụng di động là gì ?
Tại sao phân cấp thị giác lại quan
trọng trong thiết kế ứng dụng di
độ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


III. Nghiên cứu lý thuyết về phân cấp thị giác trong ứng dụng di động

Phân cấp thị giác

trong thiết kế ứ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

Tạ i sao phân cấp
thị giác lạ i quan trọ ng

trong thiết kế ứ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
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
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


III. Nghiên cứu lý thuyết về phân cấp thị giác trong ứng dụng di động

Phân cấp chữ

Nội dung là một phần quan trọng của bất kỳ

thiết kế UI nào
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
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
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


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

Độ tương phản (Contrast)

Lưới (Gird)

Sự liên tục (Continuance)


Độ tương phả n
1

Màu sắc (color)

Màu sắc là cách nhanh nhất và dễ nhất để tạo sự
tương phản trên thiết kế di động. Sử dụng một
màu sáng làm tâm điểm có thể giúp thu hút sự
chú ý của người dùng

2

Kích thước (size)
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 đó


Lưới
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ế

2

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.

3

Hệ thống lưới bao gồm: Columns (cột),
Gutters (khoảng trống giữa cột), và

Margins (lề).


Sự liên tụ c
1

2

Những yếu tố thiết kế được đặt trên một đường
liền mạch thường được xem như một nhóm, giúp
căn gióng các yếu tố và hướng đường mắt của
ngườ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ế giao
diện di động, có 3 yếu tố được sử dụng: Đường
kẻ (lines), sự tương đồng (similarity) và không
gian (space)


Chương 2
NGHIÊN CỨU ỨNG DỤNG
“TRỢ LÝ MẸ BẦU”

1.TỔNG QUAN VỀ ỨNG DỤNG
Giới thiệu ứng dụng
Hiện trạng của ứng dụng
So sánh với các ứng dụng liên quan
Đề xuất cách khắc phục
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ững
giả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.


Giới thiệu ứng dụ ng

Trợ 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ó chun 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


Hiện trạ ng củ a ứng dụ ng
Ưu điểm

Ứ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ười
dùng không bị bối rối, hay gặp nhiều khó khăn khi lần đầu
tiên sử dụng ứng dụng.
Những thông tin quan trọng như “Dự sinh, tuổi thai, kì kinh

cuối” được bơi đậm giúp người dùng nhận biết đó là thơng tin
quan 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ố thai
nhi”, Số ngày còn lại của thai kỳ cũng tạo được sự chú ý của
ngườ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 ứng dụ ng
Ưu điểm

Ứ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à được
căn gióng chính giữa màn hình giúp hướng đường mắt
củ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 ứng dụ ng
Ưu điểm

Ứ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ủ đạo
của ứng dụng là màu xanh lá cây đơn sắc được sử dụng
xuyê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 ứng dụ ng
Nhược điểm

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:
Mặc dù ứng dụng có ứng dụng yếu tố màu sắc khi
phân cấp các vùng nội dung để làm nổi bật các nội
dung chính, tuy nhiên nó khơng đem lại nhiều hiệu
quả. Trong ứng dụng này chỉ sử dụng chủ yếu một
mà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ển
màu giữa các phần của trang khiến cho ứng dụng
trở 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ủ đạo
cho một ứng dụng dành cho mẹ bầu cũng chưa
thực sự phù hợp, bởi màu xanh lá cây thường đại
diệ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.


Hiện trạ ng củ a ứng dụ ng
Nhược điểm

Ứ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ụng
lẫ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ến
cho 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ệt
tiêu hồn tồn khi các button chức năng bố trí q to,
bị lẫn vào hình nền, thiếu sự nổi bật và khiến người
dùng phải lướt nhiều lần để có thể xem và lựa chọn
button. Ứng dụng rất ít khoảng trắng để giúp mắt
người dùng nghỉ ngơi trong khi dùng ứng dụng.


Hiện trạ ng củ a ứng dụ ng
Nhược điểm

Thiếu sự phân cấp nội dung trong một số trang của
ứ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, q í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.

Hệ thống lưới chưa được áp dụng trong thiết kế giao
diện ứng dụng:
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ự quy
chuẩn, căn gióng. Chính điều này đã càng làm cho ứng

dụng thiếu sự thống nhất, rõ ràng.


Hiện trạ ng củ a ứng dụ ng
Nhược điểm
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:

Thiếu phần giới thiệu, hướng dẫn sử dụng cho
người mới sử dụng.
Giao 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
Sử dụng lặp đi lặp lại một hình ảnh nền
kết hợp với việc sử dụng chủ đạo một
màu xanh lá khiến cho ứng dụng trở
lên nhạt nhịa, khơng tạo được điểm
nhấn, sự gần gũi thực sự dành cho
người dùng