(BÁO CÁO MÔN HỌC THỰC HÀNH CHUYÊN SÂU) NGHIÊN CỨU LÝ THUYẾT VỀ PHÂN CẤP TRONG THIẾT KẾ ỨNG DỤNG DI ĐỘNG VÀ ÁP DỤNG VÀO THIẾT KẾ GIAO DIỆN ỨNG DỤNG DI ĐỘNG

BỘ THÔNG TIN VÀ TRUYỀN THÔNG
HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG
---------------------------------------

MƠN HỌC
THỰC HÀNH CHUN SÂU

Đề 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”

Người hướng dẫn :

TH.S.NGUYỄN TUYẾT MAI

Sinh viên thực hiện:

NGUYỄN THỊ HẬU

Lớp:

D18TKDPT2

Hệ:

Đại học chính quy

Hà Nội – Năm 2022


LỜI CẢM ƠN

Lời đầu tiên, em xin gửi lời cảm ơn sâu sắc nhất đến các thầy, cô giáo Khoa Đa phương
tiện, Học viện Cơng nghệ Bưu chính Viễn thơng, những người đã tận tình giảng dạy,
truyền đạt cho em những kiến thức quý báu để phát triển các sản phẩm trong lĩnh vực
đa phương tiện nói chung và bộ mơn Thực hành chun sâu nói riêng. Đặc biệt là sự
dạy dỗ, dẫn dắt, tâm huyết của cô giáo Nguyễn Tuyết Mai. Từ những kiến thức đó, em
phát triển thêm vốn hiểu biết của mình để hồn thành đề tài và vận dụng trong công việc
sau này của bản thân. Đề tài chắc chắn vẫn còn nhiều điểm hạn chế và thiếu sót, vì vậy
em kính mong tiếp tục nhận được góp ý từ q thầy cơ để sản phẩm có thể được cải
thiện và bản thân em phát triển một cách tốt nhất. Cuối cùng xin được gửi lời cảm ơn
sâu sắc tới quý thầy cô đã tạo điều kiện tốt nhất cho em trong suốt quá trình học tập.


MỤC LỤC
CHƯƠNG 1: TỔNG QUAN LÝ THUYẾT ........................................................................... 2
I. TỔNG QUAN THIẾT KẾ UI ............................................................................................. 2
1. UI là gì ? Thiết kế UI là gì ?...................................................................................... 2
2.

Quy trình thiết kế UI (UI Design Process) .............................................................. 2

3.

Nguyên lý thiết kế UI................................................................................................. 3

II. TỔNG QUAN THIẾT KẾ ĐỐI VỚI ỨNG DỤNG DI ĐỘNG (MOBILE APP) .......... 4
1. Ứng dụng di động (Mobile app) là gì? ........................................................................ 4
2. Lợi ích của thiết kế ứng dụng di động ........................................................................ 5
3. Quy trình thiết kế giao diện ứng dụng di động? ........................................................ 6
4. Các nguyên tắc thiết kế giao diện ứng dụng di động ................................................. 6
5. Những quy tắc quan trọng trong thiết kế giao diện app iOS.................................. 10

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 (MOBILE APP) ................................................................. 11
1. Phân cấp thị giác trong thiết kế ứng dụng di động .............................................. 12
2.

Phân cấp thông tin ................................................................................................... 14

3. 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 ............................................................................................ 17
1.

Kết luận .................................................................................................................... 30

CHƯƠNG 2: NGHIÊN CỨU ỨNG DỤNG “TRỢ LÝ MẸ BẦU” ................................... 31
1.

Giới thiệu ứng dụng ................................................................................................ 31

2.

Hiện trạng của ứng dụng ........................................................................................ 31

3. So sánh thiết kế giao diện với các ứng dụng đối thủ................................................ 38
4. Đề xuất giải pháp khắc phục...................................................................................... 43
5. Nghiên cứu người dùng .............................................................................................. 43
CHƯƠNG 3: THIẾT KẾ GIAO DIỆN ỨNG DỤNG ......................................................... 46
“TRỢ LÝ MẸ BẦU” ............................................................................................................. 46
1.

Wiframe .................................................................................................................... 46

Danh sách wiframe: ........................................................................................................ 46
.......................................................................................................................................... 48
2. Thiết kế UI ................................................................................................................... 51
TÀI LIỆU THAM KHẢO .............................................................................................. 61


MỤC LỤC HÌNH ẢNH
Hình 1. 3. Hình ảnh về giao diện ứng dụng di động ...................................................... 4
Hình 1. 4. So sánh hệ điều hành Android và iOS........................................................... 5
Hình 1. 5. Giao diện đơn giản của ứng dụng BCJ .......................................................... 8
Hình 1. 6. Giao diện của ứng dụng Google maps trên app ............................................ 9
Hình 1. 7. Giao diện của ứng dụng Google maps trên trình duyệt web ......................... 9
Hình 1. 8. Giao diện phản hồi của Grab sau khi người dùng đánh giá món ăn ........... 10
Hình 1. 9. Chức năng “Thu hồi” ảnh ở Zalo ................................................................ 10
Hình 1. 10. Hình ảnh minh họa về phân cấp thị giác trong thiết kế ............................. 12
Hình 1. 11. Một website khi khơng có hệ thống phân cấp thị giác .............................. 12
Hình 1. 12. Một ứng dụng di động có áp dụng phân cấp thị giác ................................ 13
Hình 1. 13. Hệ thống phân cấp chữ trên một trang ...................................................... 14
Hình 1. 14. Ứng dụng Wineyard khi được áp dựng hệ thống phân cấp thị giác cho văn
bản ................................................................................................................................ 15
Hình 1. 15. So sánh hai đoạn văn bản được giãn dịng khác nhau ............................... 16
Hình 1. 16. Đoạn văn bản được căn lề hai bên và tạo thành một “dịng chảy”............ 16
Hình 1. 17. Một số kiểu căn lề phổ biến....................................................................... 17
Hình 1. 18. Một ứng dụng có sử dụng yếu tố tương phản ........................................... 18
Hình 1. 19. Yếu tố tương phản về màu sắc trong ứng dụng Grainger ......................... 18
Hình 1. 20. Một số màu sắc và ý nghĩa của nó theo quan điểm phương Tây .............. 19
Hình 1. 21. So sánh việc sử dụng màu sáng và tối giữa hai ứng dụng di động ........... 20
Hình 1. 22. Phối màu đơn sắc....................................................................................... 20
Hình 1. 23. Phối màu tương đồng ................................................................................ 21

Hình 1. 24. Phối màu tương phản................................................................................. 21
Hình 1. 25. Phối màu bộ ba .......................................................................................... 21
Hình 1. 26. Phối màu tam giác cân............................................................................... 22
Hình 1. 27. Phối màu chữ nhật ..................................................................................... 22
Hình 1. 28. Phối màu hình vng ................................................................................. 23
Hình 1. 29. Yếu tố kích thước được áp dụng trên một ứng dụng di động ................... 23
Hình 1. 30. Kích thước ảnh chiếm 60% trên ứng dụng Instagram............................... 24
Hình 1. 31. Hệ thống lưới (Lưới 8 cột) ........................................................................ 24
Hình 1. 32. Hệ thống các loại lưới trong thiết kế giao diện di động ............................ 25
Hình 1. 33. Lưới mo-đun .............................................................................................. 26
Hình 1. 34. Lưới đường cơ sở ...................................................................................... 26
Hình 1. 35. Yếu tố liên tục khi được áp dụng trong một ứng dụng di động ................ 27
Hình 1. 36. Yếu tố Line khi được áp dụng trong một ứng dụng di động ..................... 28
Hình 1. 37. Yếu tố tương đồng về màu sắc khi được áp dụng trong một ứng dụng di
động .............................................................................................................................. 28


Hình 1. 38. Khơng gian thiết kế ................................................................................... 29
Hình 1. 39. Hệ thống khơng gian ................................................................................. 29
Hình 1. 40. Áp dụng tỷ lệ khơng gian cho button ........................................................ 30
Hình 2. 1. Ứng dụng “Trợ lý mẹ bầu” hiển thị trên Appstore...................................... 31
Hình 2. 2. Trang “Thơng tin dự sinh” và “Trang chủ” của ứng dụng .......................... 31
Hình 2. 3. Trang chủ của ứng dụng khi được cuộn xuống dưới .................................. 31
Hình 2. 4. Một số trang chức năng của ứng dụng ........................................................ 31
Hình 2. 5. Một số trang chức năng khác của ứng dụng thiếu sụ tương
phản…………………………………………………………………………………………..31

Hình 2. 6. Một số trang sử dụng cùng một hình nền của ứng dụng ........................... 31
Hình 2. 7. Trang “Thai kỳ” của ứng dụng ................................................................... 31
Hình 2. 8. Trang đầu tiên khi người dùng bắt đầu sử dụng ứng dụng ......................... 31

Hình 2. 9. Ứng dụng sử dụng lặp lại một hình ảnh nền ............................................... 31
Hình 2. 10. Ứng dụng trợ lý bà bầu .............................................................................. 31
Hình 2. 11. Trang chủ ứng dụng Trợ lý bà bầu ........................................................... 31
Hình 2. 12. Trang “Thai nhi” trong ứng dụng Trợ lý bà bầu ....................................... 31
Hình 2. 13. Trang “Mẹ bầu” trong ứng dụng Trợ lý bà bầu ....................................... 50
Hình 2. 14. Ứng dụng bà bầu ....................................................................................... 50
Hình 2. 15 Trang chủ ứng dụng Bà bầu ....................................................................... 50
Hình 2. 16. Trang “Thai nhi” trong ứng dụng bà bầu .................................................. 51
Hình 2. 17. Trang “Bà bầu” .......................................................................................... 31
Hình 2. 18. Persona nhóm người dùng 1 của ứng dụng ............................................... 53
Hình 2. 19. Persona nhóm người dùng 2 của ứng dụng ............................................... 54
Hình 3. 1. Danh sách wireframe Chào mừng, Đăng nhập, Trang chủ của ứng dụng .. 55
Hình 3. 2. Danh sách wireframe Thai kỳ, Chỉ số, Nhật ký, Cá nhân của ứng dụng .... 56
Hình 3. 3. Danh sách wireframe Góc chia sẻ, Xem bài viêt, Tạo bài viêt của ứng
dụng .............................................................................................................................. 57
Hình 3. 4. Danh sách wireframe Kiến thức thai kỳ, Cân nặng mẹ bầu, Bác sĩ của ứng
dụng .............................................................................................................................. 58
Hình 3. 5. Logo mới của ứng dụng “Trợ lý mẹ bầu” ................................................... 59
Hình 3. 7. Màu sắc mới của ứng dụng “Trợ lý mẹ bầu” ............................................. 60
Hình 3. 8. Lưới 5 cột được sử dụng trong ứng dụng “Trợ lý mẹ bầu” ....................... 63
Hình 3. 9. Phong cách icon có viền được sử dụng ứng dụng “Trợ lý mẹ bầu” .......... 64
Hình 3. 10. Moockup giao diện ứng dụng “Trợ lý mẹ bầu” ....................................... 65
Hình 3. 11. Giao diện hoàn chỉnh của ứng dụng “Trợ lý mẹ bầu”.............................. 66


CHƯƠNG 1: TỔNG QUAN LÝ THUYẾT
I. TỔNG QUAN THIẾT KẾ UI
1. UI là gì ? Thiết kế UI là gì ?
UI (User Interface) – Giao diện người dùng là các điểm tương tác giữa người dùng và sản phẩm [2].
Về cơ bản, UI là một giao diện đồ họa giữa một con người và một máy, giống như máy tính, điện thoại

thông minh, trang web hoặc tivi của bạn. Hiểu một cách đơn giản nhất 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, website/ứng dụng sử dụng fonts
chữ gì, hình ảnh trên web có hấp dẫn hay khơng,... Hay nói cách khác, UI là tất cả các yếu tố xuất hiện
trên giao diện người dùng.
Thiết kế UI (User Interface Design) là quá trình các nhà thiết kế tạo nên toàn bộ giao diện người
dùng. Thiết kế giao diện người dùng có thể được chia thành hai yếu tố riêng biệt, lần đầu tiên là cách
người dùng tương tác với giao diện và thứ hai là cách giao diện trông như thế nào.
Tầm quan trọng của UI

UI có vai trị quan trọng trong sự thành cơng của sản phẩm. Mục đích của thiết kế UI là làm cho tương
tác của người dùng với sản phẩm hiệu quả và đơn giản nhất có thể. Mục tiêu của thiết kế UI là quản lý
bên ngồi người dùng thơng qua giao diện của sản phẩm. Một thiết kế UI tốt cung cấp cho người dùng
chính xác những gì họ cần làm theo cách nhanh chóng và đơn giản nhất đồng thời giúp sản phẩm được
ấn tượng tốt, nâng cao uy tín thương hiệu, giúp người dùng dễ dàng tiếp cận thông tin, thúc đẩy khách
hàng thực hiện chuyển đổi (quyết định mua hàng, sử dụng dịch vụ, liên hệ, để lại thơng tin…) [5]
Một sản phẩm website/app có giao diện thiết kế bắt mắt, màu sắc bắt mắt sẽ thu hút người dùng hơn
rất nhiều bởi chẳng ai muốn dùng một sản phẩm có giao diện tẻ nhạt, buồn chán.

2. Quy trình thiết kế UI (UI Design Process)
● Giai đoạn 1: Kết hợp (Collaborating)
Giai đoạn này, nhà thiết kế sẽ làm việc trực tiếp với UX Designer và Developer (lập trình
viên) để nắm được concept của sản phẩm và đối tượng người dùng sản phẩm nhắm đến
trước khi hoàn thành thiết kế. [7]
● Giai đoạn 2: Thiết kế (Design)
Để chuẩn bị cho một thiết kế vừa tương tác “tốt” vừa “mãn nhãn”, UI Designer phải qua
các bước từ tạo kiến trúc thông tin, soạn thảo Style Guide – Hướng dẫn về phong cách, thiết
kế từng panel (bảng điều khiển) , sắp xếp layout (trang) cho thiết kế tương thích
(responsive), thiết kế các yếu tố UI nhỏ (như thanh trượt, nút bấm,

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

2


icon,…), tạo một hệ thống thiết kế (design system), và tăng tính tương tác cho từng yếu tố
UI. [14]
● Giai đoạn 3: Lên mẫu thử (Prototyping)
Thường xuyên kiểm tra các bản prototype để xem nó hiển thị, chuyển động như thế nào và
tìm ra lỗi cần sửa. Sau khi hồn thiện bản thiết kế, UI Designer sẽ bàn giao thiết kế cho
team lập trình để bắt đầu giai đoạn phát triển sản phẩm. [7]
● Giai đoạn 4: Thử nghiệm, cải thiện và cập nhật
Ở giai đoạn này UI Designer sẽ phải liên tục cải thiện sản phẩm cho phù hợp với nhu cầu,
vấn đề, hành vi hay kì vọng liên tục thay đổi của người dùng để sản phẩm ngày càng hoàn
thiện. [7]

3. Nguyên lý thiết kế UI
3.1. Bộ nguyên lý DOET
Đây là bộ nguyên lý được tạo ra bởi nhà khoa học Donald A. Norman trong lúc ông nghiên cứu
về vấn đề tương tác giữa con người với máy tính trong dự án gọi là "Design of Everyday Things" DOET (tạm dịch: thiết kế cho những thứ được dùng hằng ngày) [6]. Nó được sử dụng để các nhà thiết
kế tích hợp và đánh giá xem giao diện của mình có thực sự hữu ích và giúp cho việc tương tác giữa
người với máy tính dễ dàng hơn hay khơng. Nó bao gồm những yếu tố sau:
- Hồn tất những yêu cầu từ phía người dùng
- Sử dụng cả “Knowledge in the Head" và “Knowledge in the World
- Đơn giản hóa tác vụ của người dùng
- Làm mọi thứ rõ ràng nhất có thể
- Thu hẹp khoảng cách thực thi và khoảng cách đánh giá
- Sắp xếp một cách đúng đắn
- Khai thác sức mạnh từ biện pháp hạn chế
- Thiết kế phải tính đến lỗi
- Chuẩn hóa khi cần thiết

3.2. Bộ nguyên lý Nielsen
Jakob Nielsen năm 1995 ra mắt một tập các nguyên lý mà ông đã nghiên cứu, còn được gọi là
heuristic, là một số nguyên tắc thiết kế được công nhận nhất. Các nguyên tắc là quy tắc của ngón tay
cái thay vì các hướng dẫn sử dụng cụ thể. Những nguyên tắc này đã được chứng minh rằng sẽ đem lại
kết quả tố cho thiết kế. [6] Về cơ bản thì 10 điều do Nielsen đưa ra cũng khá giống với bộ DOET nói
trên, chỉ khác một chút về cách diễn đạt và cách người ta đánh giá nó.
Bộ nguyên lý này bao gồm các nguyên tắc cơ bản sau:
- Luôn hiện rõ trạng thái của hệ thống

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

3


- Làm giao diện giống với hiện thực đời sống
- Cho người dùng kiểm soát và sự tự do
- Đề cao sự thống nhất
- Hạn chế lỗi
- Cung cấp sự linh hoạt cho người sùng
- Giảm tải những gì người dùng cần phải nhớ
- Giao diện phải có tính thẩm mỹ và tính liên quan
- Giúp người dùng xác định và khắc phục lỗi xảy ra
- Cung cấp sự trợ giúp, tài liệu hướng dẫn người dùng

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. Ứng dụng được biển đổi tùy thuộc vào chức năng giải trí, mua sắm hay

xem tin tức,… Thiết kế ứng dụng trên di động là sử dụng ngôn ngữ lập trình để thiết kế và phát triển
ra một ứng dụng nhằm gia tăng tiện ích cho thiết bị di động đến mức tốt nhất. Và tùy mục đích khác
nhau mà ứng dụng sẽ có những tính năng riêng biệt.

Hình 1. 3. Hình ảnh về giao diện ứng dụng di động

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

4


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.


So sánh hệ điều hành Android và iOS

Hình 1. 4. So sánh hệ điều hành Android và iOS

Android
Ưu điểm

iOS

+ Ở Châu Á, số lượng người dùng iOS
ít hơn người dùng Android nên ứng
dụng chạy trên Android thu được
nhiều phản hồi hơn chạy trên iOS.

+ Phần mềm ứng dụng chạy trên
iOS được xây dựng nhanh hơn và
giá thành thiết kế rẻ hơn các ứng
dụng chạy trên Android.

+ Mỗi lần tải App trên Android xuống
thường tốn ít chi phí hơn khi tải App
trên iOS xuống.

+ App thu phí trên cửa hàng ứng
dụng dễ kiếm được tiền hơn bởi
người dùng điện thoại hệ điều hành
này có xu hướng bỏ tiền mua ứng
dụng nhiều hơn.

+ Mobile app trên Android không cần
phải cập nhật thường xuyên như trên
IOS, giúp góp phần giảm chi phí bảo
trì.

+ Ngun tắc của cửa hàng ứng
dụng iOS có nhiều nguyên tắc
nghiêm ngặt nhằm đảm bảo chất
lượng App.
+ App chạy trên iOS dễ sử dụng hơn
bởi ít gặp sự cố phần mềm hơn.

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

5


Nhược
điểm

+ Thiết kế ứng dụng Android mất
nhiều thời gian nghiên cứu vì ứng
dụng đó phải vận hành trên nhiều loại
thiết bị với kích cỡ, hiệu suất và độ
phân giải màn hình khác nhau.

+ Chi phí lưu trữ ứng dụng trên App
Store khoảng gần 200$.

+ Quá trình phát triển ứng dụng
Android mất nhiều thời gian hơn iOS.

+ Ở Châu Á, người dùng Android
chiếm số lượng nhiều hơn iOS.

+ Các quy định nghiêm ngặt của
Apple khiến quá trình phê duyệt từ
kho ứng dụng khó.

Thiết kế ứng dụng di động khơng chỉ bắt kịp xu hướng chung, đáp ứng nhu cầu hiện đại của xã hội mà
cịn tạo ra nhiều lợi ích ưu việt khác cho các doanh nghiệp. Có thể kể đến như: Tạo nên ứng dụng riêng
cho doanh nghiệp chất lượng, có thể 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ả qua ứng dụng di động; đưa sản phẩm đến gần hơn với khách hàng, giúp họ

dễ dàng tìm hiểu sản phẩm từ nhiều nguồn thơng tin.

3. Quy trình thiết kế giao diện ứng dụng di động?
Thông thường, quá trình tạo ra một mobile app bao gồm 4 bước sau:
•

•

•

Bước 1: Xác định yêu cầu:
o Xác định đối tượng mục tiêu sẽ sử dụng ứng dụng.
o Xác định ngữ cảnh sử dụng ứng dụng.
o Những hoạt động của người dùng với ứng dụng.
Bước 2: Thiết kế phác thảo
o Xây dựng thiết kế phác thảo cho ứng dụng: Các chức năng của ứng dụng và cách thức nó
hoạt động.
Bước 3: Xây dựng bản mẫu
o Xây dựng bản dùng thử để người dùng trải nghiệm, hiểu ứng dụng.

•

Bước 4: Đánh giá
o Đánh giá ứng dụng sau mỗi bước thực hiện để xem ứng dụng có đạt mục tiêu
hay khơng.

4. Các ngun tắc thiết kế giao diện ứng dụng di động
Thực tế là có khoảng 3,8 tỷ người dùng điện thoại thơng minh trên tồn thế giới có nghĩa là việc tối ưu
hóa trang web của bạn để sử dụng trên thiết bị di động là rất quan trọng.
Thiết kế web di động là q trình tối ưu hóa trải nghiệm web cho người dùng di động. Quá trình này

bao gồm việc tạo: một thiết kế ưu tiên thiết bị di động. Điều này có nghĩa là thiết kế sẽ bắt đầu với nền

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

6


tảng di động và tối ưu hóa nội dung cho màn hình nhỏ nhất có thể, sau đó chuyển sang kích thước màn
hình lớn hơn như máy tính bảng hoặc máy tính để bàn.
Bố cục đáp ứng là bố cục thay đổi theo kích thước thiết bị của người dùng. Nói chung, người dùng
càng có nhiều thơng tin trên màn hình, thì họ càng xem nhiều nội dung tại mỗi thời điểm
nhất định. Ngay cả nội dung hoặc chức năng hấp dẫn nhất trên trang web của bạn cũng vô dụng nếu
khách truy cập khơng thể tìm thấy trang web của bạn trong kết quả tìm kiếm.
Một số nguyên tắc khi thiết kế ứng dụng di động nhà thiết kế cần nhớ:

4.1 Nguyên tắc cấu trúc (The Structure Principle)
Nguyên tắc cấu trúc liên quan đến cấu trúc giao diện người dùng tổng thể.
Thiết kế giao diện ứng dụng nên tổ chức giao diện người dùng một cách có mục đích, có ý nghĩa và
hữu ích dựa trên các mơ hình rõ ràng, nhất quán, dễ thấy và dễ nhận biết đối với người dùng.
Với nguyên tắc này, nhà thiết kế cần đặt những thứ liên quan lại với nhau và tách những thứ không liên
quan ra. Bằng cách này bạn giúp người dùng phân biệt những thứ khác nhau và làm cho những thứ
tương tự giống nhau được gom thành 1 nhóm.
Dưới đây là một vài điều cần nhớ khi thiết kế ứng dụng di động:
- Hãy chọn lọc về thông tin muốn hiển thị.
- Chỉ cung cấp thông tin mà người dùng cần hoàn thành nhiệm vụ của họ.
- Giữ thông tin quan trọng và các nút gọi để hành động chính và trung tâm.
- Lý tưởng nhất, người dùng nên tìm những gì họ đang tìm kiếm ngay khi họ hạ cánh trên trang chủ.
- Phân phối điều hướng từ nội dung.
- Thiết kế điều hướng trang web sẽ giúp người dùng phát hiện menu.
- Sử dụng khoảng trắng để phân tách trực quan nội dung và tùy chọn điều hướng.

4.2 Nguyên tắc đơn giản (The Simple Principle)
Thiết kế giao diện mobile phải đơn giản, làm cho các thao tác thông thường được thực hiện dễ dàng,
giao tiếp rõ ràng và sử dụng ngôn ngữ dễ hiểu cho người dùng. Đồng thời cung cấp các phím tắt hữu
ích cho quá trình sử dụng ứng dụng của người dùng.
Thiết kế tối ưu các yếu tố trên giao diện, loại bỏ các yếu tố thừa, không cần thiết. Giữ thiết kế được tin
gọn và chắt lọc, duy trì những gì quan trọng và tinh túy nhất đối với người sử dụng.

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

7


Hình 1. 5. Giao diện đơn giản của ứng dụng BCJ

4.3 Nguyên tắc hiển thị (The Visibility Principle)
Thiết kế giao diện ứng dụng phải hiển thị tất cả các tùy chọn và thành phần, thông tin cần thiết cho một
tác vụ nhất định mà không làm người dùng phân tâm với thông tin không liên quan hoặc dư thừa.
Thiết kế phải chủ động kiểm soát hành vi người dùng: Khi thiết kế app điện thoại, nhà thiết kế cần hiểu
và đoán trước được thao tác mà người dùng sẽ tương tác tại các bước tiếp theo. Đây là nguyên tắc cơ
bản của thiết kế trải nghiệm người dùng UX, qua đó người dùng sẽ u thích và cảm thấy thoải mái
khi sử dụng ứng dụng

4.4 Nguyên tắc nhất quán (The Consistency Principle)
Nhiều sản phẩm kỹ thuật số có sẵn dưới dạng cả ứng dụng di động và trang web. Lý tưởng nhất, sản
phẩm phải cho phép người dùng chuyển đổi giữa ứng dụng và trang web một cách tự do. Một ví dụ
điển hình về một sản phẩm như vậy là Google Maps. Dưới đây là Ảnh chụp màn hình của trang web
Google Maps và ứng dụng di động. Bạn sẽ nhận thấy rằng họ trông giống hệt nhau.

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

8


Hình 1. 6. Giao diện của ứng dụng Google maps trên app

Hình 1. 7. Giao diện của ứng dụng Google maps trên trình duyệt web

Thiết kế giao diện mobile nên sử dụng lại các thành phần và các cấu trúc giống nhau cho tất cả các
trang nội dung của ứng dụng. Điều này giúp người dùng không phải suy nghĩ và ghi nhớ nhiều, đồng
thời tạo được sự đồng bộ, thống nhất cho sản phẩm.
Một thiết kế ứng dụng có sự nhất quán sẽ đem đến cảm giác chuyên nghiệp cho giao diện và người
dùng có thể đốn được các cấu trúc hoặc thao tác sử dụng trên ứng dụng.

4.5 Nguyên tắc phản hồi (The Feedback Principle)

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

9


Hình 1. 8. Giao diện phản hồi của Grab sau khi người dùng đánh giá món ăn

Thiết kế giao diện mobile phải thông báo cho người dùng về các hành động hoặc có các giải thích, diễn
giải cho hành động, các thay đổi của trạng thái ứng dụng và các lỗi có liên quan và được người dùng
quan tâm. Cụ thể, như hình ảnh trên khi người dùng đánh giá xong sản phẩm trên Grab với 4 sao, app
sẽ phản hồi lại để người dùng biết họ có thể làm gì tiếp theo.

4.6 Nguyên tắc dùng sai (The Tolerance Principle)
Thiết kế giao diện phải linh hoạt và dễ sử dụng, giảm thiểu các sai sót và lạm dụng bằng cách cho phép

hoàn tác và làm lại (undo và redo). Điều này có nghĩa là khi người sử dụng thực hiện sai một thao tác
nào, thì họ có tùy chọn quay trở lại để thực hiện lại thao tác.
Ví dụ như khi người dùng không muốn gửi ảnh nữa ở Zalo, họ có thể lựa chọn Thu hồi hình ảnh của
mình.

Hình 1. 9. Chức năng “Thu hồi” ảnh ở Zalo

Nguyên tắc này đồng thời ngăn ngừa lỗi có thể xảy ra do thao tác của người dùng và có các điều hướng
và hướng giải quyết, hành động hợp lý.
Các nguyên tắc được đề cập ở trên sẽ giúp bạn tạo ra một thiết kế di động tuyệt vời, nhưng điều quan
trọng là điều xác nhận thiết kế của bạn với người dùng thực sự. Ngay cả thiết kế được nghiên cứu tốt
nhất cuối cùng cũng chứa một số sai sót khơng lường trước được khi đưa nó vào thế giới thực.

5. Những quy tắc quan trọng trong thiết kế giao diện app iOS
5.1. Lựa chọn bảng màu cẩn thận
Cẩn thận lựa chọn bảng màu cho app iOS bởi cách ta sắp xếp bố cục màu sắc sẽ ảnh hưởng rất lớn đến
trải nghiệm người dùng và sự hoàn thiện của giao diện.
Pixa Studio khuyên chúng ta nên sử dụng bảng màu thiết kế đồng nhất với màu sắc của thương hiệu
cho tất cả các hình ảnh, biểu tượng. Sử dụng các màu đồng nhất cũng giúp người dùng có thể dễ dàng
phân biệt và nhớ được thương hiệu của bạn rõ hơn so với các thương hiệu khác.

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

10


5.2. Thiết kế các khối màu sắc trực quan
Nên sử dụng màu tint (kết hợp bảng màu truyền thống với màu trắng) cho các phần tử app dùng để
tương tác như: nút, phím chọn, thanh taskbar,... Màu tint là những màu bão hịa hơn với màu trắng và
có vẻ ngồi sáng hơn sẽ giúp các nút tương tác không chiếm nhiều sự chú ý cũng như gây phiền toái

cho người dùng. Nếu áp dụng màu sắc phù hợp, người dùng sẽ thoải mái hơn nhiều trong việc phân
biệt các phần tử tĩnh với các phần tử tương tác.
Cuối cùng, hãy đảm bảo rằng cách phối màu khi thiết kế app iOS phải thích ứng với cả mơi trường
nhiều ánh sáng và trong không gian tối. Hãy đảm bảo rằng app của bạn sẽ thân thiện với mắt của người
dùng: màu của app sẽ nổi bật khi sử dụng ngoài trời, và dịu nhẹ khi sử dụng trong khoảng không gian
tối.

5.3. Sử dụng những font chữ mặc định được đề xuất từ iOS
Thật sự thì khơng có một quy tắc nào khi thiết lập font chữ cho app iOS của bạn, tuy nhiên Pixa Studio
khuyên bạn nên sử dụng hai kiểu chữ tùy chỉnh của iOS: San Francisco (sans serif) và New York
(serif). iOS đã thiết kế những kiểu chữ này với cả khả năng mở rộng và khả năng thích ứng rất tốt cho
nhiều kiểu giao diện khác nhau. Hãy tận dụng chúng để quy trình duyệt app trên Appstore diễn ra
nhanh hơn.

5.4. Khơng chèn logo hình ảnh, tên thương hiệu quá nhiều
Việc tăng độ nhận diện thương hiệu rõ ràng là một việc cần thiết, tuy nhiên bạn nên hiểu rằng khơng
nên để hình ảnh thương hiệu của mình chiếm q nhiều diện tích màn hình. Điều này có thể cản trở cả
nội dung và điều hướng, gây bất lợi cho trải nghiệm người dùng.
Tuy nhiên, có những cách khác để củng cố thương hiệu của bạn. Cách tiếp cận dễ nhất và được đề xuất
nhiều nhất đó là áp dụng cùng một bảng màu với màu thương hiệu của bạn và sử dụng chúng cho các
phần tử giao diện người dùng khác nhau trong suốt thiết kế ứng dụng iOS của bạn (như đã đề cập ở
quy tắc đầu tiên). Bạn có thể sử dụng bảng màu thương hiệu của mình cho các biểu tượng, nút điều
hướng để làm nổi bật văn bản và thậm chí hấp dẫn người dùng hơn.

5.5. Luôn tuân thủ các chuẩn “motion” của iOS
Trừ những trường hợp cần thiết, hãy cố gắng tránh không nên can thiệp vào hệ thống tương tác motion
của hệ iOS trên tất cả các thiết bị đang chạy hệ điều hành này. Bởi vì những thiết lập motion đó thường
cho phép người dùng truy cập Màn hình chính, Trung tâm thơng báo, trình chuyển đổi ứng dụng và
Trung tâm điều khiển. Người dùng đã quen với những cử chỉ “motion” này trên nhiều ứng dụng iOS
và thường không đánh giá cao việc phải học lại các cử chỉ mới để thao tác một hoạt động nào đó. Một

ví dụ sẽ là vuốt từ trái sang phải để quay lại màn hình trước đó.

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 (MOBILE APP)

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

11


Để thiết kế một ứng dụng di động thành công, cụ thể là thiết kế giao diện ứng dụng di động, việc áp
dụng các nguyên tắc, nguyên lý thiết kế là vơ cùng cần thiết. Trong đó phải kể đến tầm quan trọng của
việc phân cấp thị giác.

1. Phân cấp thị giác trong thiết kế ứng dụng di động
1.1. Phân cấp thị giác là gì?

Hình 1. 10. Hình ảnh minh họa về phân cấp thị giác trong thiết kế

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ế.
Hệ thống phân cấp thị giác là một trong những kỹ thuật cốt lõi được áp dụng cho quy trình thiết kế. Nó
ban đầu 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. [2]
Hệ thống phân cấp thị giác cố gắng trình bày nội dung của một sản phẩm theo cách mà người dùng có
thể hiểu được tầm quan trọng cho từng yếu tố. Nó tổ chức các thành phần UI để não người có thể phân
biệt các vật thể trên cơ sở sự khác biệt về thể chất của chúng, chẳng hạn như kích thước, màu sắc, độ
tương phản, kiểu dáng,…

Hình 1. 11. Một website khi khơng có hệ thống phân cấp thị giác

Có một sự thật là người dùng không bắt đầu đọc tất cả nội dung, họ bắt đầu với việc quét nội dung [9].
Ví dụ: Khi thấy bài viết trên web, họ sẽ đọc được tiêu đề chính trước, sau đó là các tiêu đề phụ và chỉ
sau đó là nhìn các mục tiếp theo. Với cách này, người dùng sẽ có thể quét tiêu đề chính và tiêu đề phụ

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

12


để hiểu nếu bài viết hữu ích và thú vị đối với họ khơng thay vì cố gắng đọc tất cả các văn bản. Và nếu
tiêu đề chính và tiêu đề phụ được thực hiện đúng cách và thông báo cho người dùng về cấu trúc và nội
dung của bài viết, đây sẽ là yếu tố thuyết phục để đọc thêm. Mặt khác, nếu người dùng nhìn thấy tờ
văn bản khổng lồ và dài, họ sẽ sợ hãi theo nghĩa đen vì họ sẽ khơng hiểu mất bao lâu để đọc bài viết
và nếu nó đáng để đầu tư thời gian và cơng sức của họ.

Hình 1. 12. Một ứng dụng di động có áp dụng phân cấp thị giác

Theo Nilsen Nomand Group: “Visual hierarchy controls the delivery of the experience. If you have a
hard time figuring out where to look on a page, it’s more than likely that its layout is missing a clear
visual hierarchy.”( Hệ thống phân cấp thị giác kiểm soát việc truyền tải trải nghiệm. Nếu bạn có một
thời gian khó khăn để tìm ra nơi để xem trên một trang, nhiều khả năng bố cục của nó bị thiếu một hệ
thống phân cấp trực quan rõ ràng.)
Hệ thống phân cấp thị giác được sử dụng để xếp hạng các yếu tố thiết kế và ảnh hưởng theo thứ tự mà
người thiết kế muốn người dùng xem chúng. Bằng cách sử dụng các nguyên tắc như độ tương phản, tỷ
lệ, cân bằng và, nhiều hơn nữa, người thiết kế có thể giúp thiết lập từng yếu tố trong vị trí hợp lý của
nó và giúp các yếu tố quan trọng nhất nổi bật.

1.2. Tại sao phân cấp thị giác lại quan trọng trong thiết kế ứng dụng di động?
Hệ thống phân cấp thị giác, ở cấp độ cơ bản nhất, hướng dẫn một người thông qua nội dung được trình

bày. Nó báo hiệu cho họ nội dung nào là quan trọng nhất, cách nội dung đó được tổ chức thành các
phần hoặc danh mục liên quan và nội dung nào họ nên tập trung vào lần đầu tiên. Điều này là đúng cho
dù nội dung là văn bản, hình ảnh, video hoặc một cái gì đó khác. Bằng cách tạo mối quan hệ trực quan
giữa các phần nội dung, những người xem nội dung đó được đưa ra manh mối về cách diễn giải thông
tin. Bằng cách tăng khả năng hiểu và hướng dẫn người dùng tiêu thụ thơng tin được trình bày, thơng
điệp thiết kế đang trình bày sẽ được củng cố. Khơng có hệ thống phân cấp thị giác, tất cả các thông tin
sẽ trở lên lộn xộn, khó nắm bắt.
Trong thiết kế giao diện người dùng, một hệ thống phân cấp thị giác hiệu quả giúp thông báo, gây ấn
tượng và thuyết phục người dùng, những người có kỳ vọng - đặc biệt là về sự xuất hiện của giao diện.

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

13


Vì vậy, đối với ứng dụng di động để thành công, điều quan trọng là cấu trúc các trang hoặc màn hình
của nó để giảm thiểu sự khơng chắc chắn của người dùng, thể hiện sự đồng cảm tối đa với họ và cung
cấp cho họ một cái gì đó dễ chịu để xem.
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.

2. Phân cấp thông tin
Nội dung là một phần quan trọng của bất kỳ thiết kế UI nào. Đó là lý do tại sao thứ bậc phân cấp thị
giác thường phụ thuộc nhiều vào kiểu chữ. 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 [10].
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
nhà thiết kế sửa đổi và kết hợp các phông chữ để xây dựng sự tương phản giữa các yếu tố có ý nghĩa
nhất và nổi bật cần lưu ý thông tin văn bản đầu tiên và thông thường. Các phông chữ được sửa đổi bằng

cách điều chỉnh kích thước, màu sắc và cũng như sự liên kết của chúng.

Hình 1. 13. Hệ thống phân cấp chữ trên một trang

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 [13].
Điều quan trọng là sử dụng các kiểu chữ và trọng lượng khác nhau để tạo ra các yếu tố văn bản quan
trọng hơn nổi bật hơn. Để xây dựng một hệ thống phân cấp trực quan hiệu quả, tất cả yếu tố cần được
phân đoạn thành các cấp độ khác nhau.
Sơ cấp: Là phần nội dung lớn nhất như trong tiêu đề, nhằm mục đích cung cấp cho người dùng thông
tin cốt lõi cũng như thu hút sự chú ý của mọi người đến một sản phẩm.

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

14


Trung cấp: Đây là loại nội dung cần được thiết kế rõ ràng để mắt người dùng dễ dàng quét. Chúng
thường liên quan đến các tiêu đề phụ và chú thích giúp người dùng nhanh chóng điều hướng qua nội
dung.
Cao cấp: Nội dung văn bản và một số dữ liệu bổ sung sẽ tạo cấp độ cao nhất. Khi tạo kiểu chữ cho các
sản phẩm di động, các nhà thiết kế được khuyến nghị giữ số lượng các lớp trong vịng hai. Do màn
hình di động nhỏ khơng cung cấp đủ khơng gian cho ba cấp độ. Đó là lý do tại sao các yếu tố của một
mức trung học như phụ đề phụ bước sang một bên để làm cho giao diện của người dùng trên thiết bị di
động trơng sạch sẽ.
Văn bản đóng vai trị chính trong việc truyền tải ứng dụng đến người dùng. Vì vậy, các đoạn văn bản
cần phải gọn gàng, phân cấp rõ ràng, dễ đọc. Văn bản với định dạng phù hợp sẽ giúp người dùng thu
nạp thông tin nhanh hơn và tạo được trải nghiệm tốt. [10]
Để tạo được sự phân cấp thị giác trong văn bản cần:
-

Tạo sự tương phản giữa mỗi tiêu đề: Sử dụng kích thước, trọng lượng, độ đậm nhạt và màu sắc
để tạo sự phân tách [13].
Để phân cấp thông tin rõ ràng, hãy để tiêu đề chính ln nổi bật nhất trong trang. Tiêu đề phụ
và văn bản khác phải nhỏ hơn, kém nổi bật hơn,…
Sử dụng khoảng cách chữ và khoảng cách giữa các ký tự (kerning) chữ hợp lí .
Tách các khối văn bản rõ ràng: Các thơng tin liên quan sẽ có khoảng cách nhỏ hơn để tạo sự
kết nối và sử dụng khoảng cách lớn hơn để tạo sự phân tách các khối văn bản khác nhau [13].

Hình 1. 14. Ứng dụng Wineyard khi được áp dựng hệ thống phân cấp thị giác cho văn bản

Khoảng cách giãn dòng (leading): Là khoảng cách giữa các dòng văn bản. Khoảng trắng giữa hai
dòng văn bản tốt nhất là bằng ½ kích thước của văn bản đó. Khi để khoảng cách giãn dịng q dày,

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

15


các chữ sẽ rất gần nhau, khiến cho người dùng khó đọc. Ngược lại khi khoảng cách giãn dịng q thưa
sẽ khiến tốc độ đọc của người dùng giảm xuống.

Hình 1. 15. So sánh hai đoạn văn bản được giãn dòng khác nhau

Căn lề (Align): Là căn lề đoạn văn, có căn lề trái, căn lề phải, căn lề giữa, căn lề 2 bên,…Căn lề 2 bên
sẽ tạo cho thiết kế một bố cục gọn gàng nhất, tuy nhiên có một số trường hợp đoạn văn quá ngắn, các
chữ trong đoạn văn có thể tạo thành “dịng chảy”, làm ngắt quãng quá trình đọc của người dùng, hoặc
ngắt các ký tự của một chữ khiến người dùng khó đọc hoặc khơng nhận biết được đó là chữ gì. Vì vậy,
nhà thiết kế phải thật linh động trong quá trình sử dụng căn lề.

Hình 1. 16. Đoạn văn bản được căn lề hai bên và tạo thành một “dòng chảy”

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

16


Hình 1. 17. Một số kiểu căn lề phổ biến

3. 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
Một hệ thống phân cấp trực quan mạnh dẫn người dùng đến chức năng của trang / màn hình và cung
cấp cho họ các tín hiệu thị giác phù hợp. Nhà thiết kế sẽ cần nghiên cứu người dùng để hiểu về người
dùng của mình, nhưng đây là một số sự thật chung:
-

Khi thấy giao diện, người dùng phản ứng cực nhanh (tính bằng mili giây), họ sẽ có suy nghĩ
ngay tới việc có nên ở lại hay rời đi [13].
Người dùng có xu hướng đọc từ trái sang phải.

Vì vậy, nhà thiết kế cũng có thể thiết kế một hệ thống phân cấp để: củng cố những nghiên cứu tự nhiên
này và dẫn người dùng dọc theo một con đường được xây dựng khéo léo đến một mục tiêu mong muốn.
Xem xét những thứ này, giúp nhà thiết kế hình dung cách người dùng tập trung vào những thứ quan
trọng nhất khi họ cố gắng đạt được mục tiêu trong bối cảnh cá nhân của họ. Sau đó, có thể chọn và
chia tỷ lệ các yếu tố để tạo phân cấp thị giác phù hợp.
Có rất nhiều yếu tố ảnh hưởng đến việc xây dựng hệ thống phân cấp thị giác, sau đây là tổng hợp các
yếu tố quan trọng nhất để tạo nên hệ thống phân cấp thị giác tối ưu cho ứng dụng di động.

3.1. Độ tương phản (Contrast)
Tương phản là việc sử dụng các yếu tố trái ngược nhau trong thiết kế. Có các loại tương phản như

tương phản màu (tức là sử dụng các màu sắc tương phản nhau, ví dụ như đen với trắng), tương phản
nét (ví dụ như nét mỏng với nét dày), tương phản chất liệu (mềm và rắn), tương phản kích thước (to
và nhỏ), tương phản về ánh sáng (tối và sáng),… Nguyên tắc tương phản được sử dụng nhằm mục
đích nhấn mạnh vào đối tượng nào đó, mà người thiết kế muốn người dùng chú ý đến nó hơn, dễ
dàng tiếp nhận thông tin hơn [11].
Một trong những cách dễ nhất để tạo phân cấp trực quan trong một màn hình di động là tận dụng các
yếu tố tương phản. Tương phản có thể được xây dựng theo nhiều cách khác nhau, nhưng những điều
cơ bản bao gồm việc sử dụng màu sắc, hình dạng, kích thước và mối quan hệ. Tương phản là về việc
tạo ra sự khác biệt giữa các phần tử cho phép một số yếu tố nhất định nổi bật và cân nặng hơn - trực
quan [12]. Nếu thiết kế tất cả các yếu tố đều cố gắng nổi bật ở vị trí trung tâm sẽ chỉ tạo sự hỗn loạn
và nhầm lẫn cho người dùng, nên giữ độ tương phản về sự cân bằng để một đối tượng sẽ khơng hồn
tồn che khuất những người khác.

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

17


Hình 1. 18. Một ứng dụng có sử dụng yếu tố tương phản

3.1.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. Việc một hệ thống
phân cấp màu và biến thể giữa các phần giúp tạo độ tương phản tinh tế hơn trong số các chế độ xem
tổng thể. Nhưng với màn hình di động, độ tương phản sắc nét hơn sẽ tạo nên điểm nhấn cho thiết kế.
Người dùng di động sử dụng các thiết bị của họ bên ngồi, màn hình nhỏ hơn và đưa ra ánh sáng vật
lý ít hơn so với màn hình lớn hơn như desktop - điều này cho phép nhà thiết kế sử dụng màu sắc sáng
hơn, táo bạo hơn trong thiết kế giao diện di động [5].

Hình 1. 19. Yếu tố tương phản về màu sắc trong ứng dụng Grainger

Màu sắc cũng được gieo hạt giống với ý nghĩa và cảm xúc có thể truyền thơng tin rõ ràng đến tiềm
thức của người xem. Trong thương hiệu, rất nhiều nghiên cứu tâm lý đã được thực hiện trên màu sắc
vì nó tạo ra một phản ứng nội tạng trong người tiêu dùng trước khi họ có bất kỳ sự tương tác có ý nghĩa
nào với một thương hiệu. Ví dụ, màu xanh thường được coi là đáng tin cậy, an tồn và làm dịu, trong
khi màu đỏ đang kích thích và được biết là tăng tốc độ tim của mọi người. Tuy nhiên, màu sắc có thể
có một ý nghĩa khác nhau tùy thuộc vào văn hóa. Một ví dụ điển hình về một cách sử dụng màu sắc có
ý nghĩa, cấu trúc màu trong thiết kế web là tên cho trang web thay đổi.

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

18


Màu sắc là rất quan trọng đối với thiết kế giao diện. Thiết kế màu sắc vào các hệ thống tương tác là rất
khó khăn. Tại sao những nút bấm này có màu xanh, nút bấm kia lại có màu đỏ. Chúng ta cần hiểu được
ý nghĩa của màu sắc để sử dụng cho hợp lý. Ý nghĩa màu sắc có thể là khác nhau trong các nền văn
hóa khác nhau. Ví dụ như màu xanh lam ở nước Mỹ cũng được giải thích khác nhau trong các nhóm
sử dụng khác nhau. Trong y tế, nó có nghĩa là sự chết chóc, trong kinh doanh nó lại mang nghĩa là sự
tin tưởng. Dưới đây là một bảng quy ước màu của các nước phương Tây.

Hình 1. 20. Một số màu sắc và ý nghĩa của nó theo quan điểm phương Tây

Màu sáng (đỏ, vàng, cam,…) thường thu hút nhiều sự chú ý hơn những màu tối (xám, đen, nâu,..). 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. Màu sắc có thể được
sử dụng tương tự như kích thước và trọng lượng để tạo tầm quan trọng cho các yếu tố trong thiết kế.
Các yếu tố sáng hơn, cũng như các yếu tố có độ tương phản cao hơn đối với các yếu tố hoặc nền xung
quanh, sẽ xuất hiện nổi bật hơn trong một thiết kế.

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

19


Hình 1. 21. So sánh việc sử dụng màu sáng và tối giữa hai ứng dụng di động

Nhà thiết kế nên nhắc tạo nội dung văn bản trên màn hình có màu xám tối thay vì màu đen. Bởi màn
hình có độ tương phản mạnh hơn so với giấy, do đó, người dùng có thể sẽ mệt mỏi hơn khi đọc văn
bản ở độ tương phản tối đa. Việc sử dụng hợp lý độ tương phản của chữ giúp tạo ra phân cấp thị giác
tốt [5].
Các cách phối màu trong thiết kế giao diện:
– Phối màu đơn sắc (Monochromatic): Phương pháp này thường sử dụng đúng một màu chủ đạo, kèm
theo đó là các tone và shape của nó. Giống như trên hình tơi đưa lên đó là phương pháp phối đơn sắc.
Phương pháp phối màu đơn sắc luôn là sự lựa chọn hàng đầu bởi nó có tính thẩm mỹ cao.

Hình 1. 22. Phối màu đơn sắc

– Phối màu liền kề hay còn gọi là phối màu tương đồng (Analogus): Để sử dụng phương pháp này,
người ta sử dụng những màu cạnh nhau trên color wheel. Phương pháp này thường được chọn khi thiết
kế không yêu cầu độ tương phản cao.

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

20


Hình 1. 23. Phối màu tương đồng

– Phối màu tương phản (Complementary): Là phương pháp sử dụng những màu đối diện nhau trong
color wheel. Phương pháp này trái ngược với hai phương pháp trên vì nó nhấn mạnh vào độ tương
phản. Ví dụ như việc sử dụng nút bấm màu cam trên nền xanh dương.

Hình 1. 24. Phối màu tương phản

– Phối màu bộ ba hay còn gọi là phối tam giác đều (Triad): Nếu thiết kế yêu cầu nhiều màu sắc, chúng
ta có thể sử dụng phương pháp phối bộ ba bằng cách chọn ba màu cách đều nhau trên color wheel. Để
đảm bảo tính cân bằng với phương pháp này, bạn nên chọn màu chủ đạo, còn 2 màu cịn lại để bổ trợ
thêm.

Hình 1. 25. Phối màu bộ ba

– Phối màu tam giác cân (Split Complementary): Phương này cũng khá giống với phương pháp phối
tương phản, ngoại trừ việc nó sử dụng nhiều màu hơn. Ví dụ, nếu chọn màu xanh dương, chúng ta phải
chọn thêm 2 màu bên cạnh màu đối diện của nó là đỏ và vàng. Độ tương phản trong phương pháp này
sẽ không quá sắc nét so với phương pháp phối tương phản, nhưng nó lại có khả năng sử dụng được
nhiều màu hơn.

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2]

21