Thiết Kế Giao Diện Ứng Dụng Dành Cho Thiết Bị Di Động - 6

BÀI GIẢNG MÔN
THIẾT KẾ GIAO DIỆN ỨNG DỤNG

Cho các Thiết bị di động
THÔNG TIN GIẢNG VIÊN

Phan Thị Duy Hạ E: phanduyha93@gmail.com/
SĐT: 0906450197 phantduyha@dtu.edu.vn
CẤU TRÚC CHƯƠNG 1 : Thành phần
BÀI GIẢNG
CHƯƠNG 2: Những thành phần cơ bản
CHƯƠNG 3: Lưới và Bố cục
CHƯƠNG 4: Chữ và Khoảng trắng
CHƯƠNG 5: Màu sắc, Dải màu và Bóng đổ
CHƯƠNG 6: Nút, Biểu mẫu và Thẻ
CHƯƠNG 7: Icon, Hình minh họa & Ảnh
CHƯƠNG 8: Điều hướng
CHƯƠNG 9: Các tương tác vi mô
CHƯƠNG 5:
COLORS, GRADIENTS VÀ SHADOWS
Màu sắc (Color)
Dải màu (Gradients)
Bóng đổ (Shadows)
CHƯƠNG 5:
MÀU SẮC 5.1. COLORS - Màu sắc
DẢI MÀU
BÓNG ĐỔ
Khái niệm chữ trong UI Design
Font và Typeface
Phương pháp chọn kiểu chữ cho UI Design
Cách xây dựng Typescale
Chiều cao dòng - Line height

Màu sắc trong UI Design CHƯƠNG 5: COLORS, GRADIENTS & SHADOWS
Sử dụng màu sắc phù hợp là một trong

những khía cạnh quan trọng nhất trong thiết
kế giao diện người dùng.
Màu sắc → UX
Sử dụng màu sắc là một trong những cách

hiệu quả nhất để khơi gợi những cảm xúc
nhất định ở người dùng.
5.1.1 Các thuật ngữ về màu sắc CHƯƠNG 5: COLORS, GRADIENTS & SHADOWS
★ Hue Hue là cách gọi khác của màu sắc.
Hue = Color
★ Saturation là dải màu chuyển từ màu tinh khiết

(pure color - 100%) đến xám (0%).
*Những hình ở trên đều cùng một màu - nhưng có các giá trị bão hòa
khác nhau. Ở phía bên phải, độ bão hòa là 0%, đây là màu xám.
★ Lightness xác định độ sáng của màu, từ đen

sang trắng.
*Những hình ở trên đều có cùng giá trị màu sắc và độ bão hòa, nhưng
chúng có độ sáng khác nhau
★ Shade là màu được tạo ra khi màu đen

được thêm vào một màu Hue.
*Cách đơn giản nhất để tạo ra shade là giảm độ sáng (lightness)

của một màu nào đó
★ Tint là màu được tạo ra khi màu trắng

được thêm vào một màu Hue.
*Cách đơn giản nhất để tạo ra tint là tăng độ sáng (lightness)

của một màu nào đó
5.1.2 Trắng và đen trong UI CHƯƠNG 5: COLORS, GRADIENTS & SHADOWS
Black Màu đen nguyên chất (pure black - #000000)

hiếm khi được dùng trong UI Design vì có độ
tương phản cao, và gây khó chịu cho mắt.
Black Pure black là màu tối nhất ở đây, nó có thể

gây ra tương phản quá mức đối với nền.
Cách sử dụng
Cách sử dụng
5.1.3 Tâm lý học màu sắc CHƯƠNG 5: COLORS, GRADIENTS & SHADOWS
Tâm lý học màu sắc là hiểu về cách màu sắc tác động đến
cảm xúc và hành động của con người.
Tâm lý học màu sắc Màu sắc trong UI Design không chỉ là
vấn đề sở thích cá nhân.
Tâm lý học màu sắc
Xanh da trời là lựa chọn đúng đắn và thông minh cho bất kỳ
thương hiệu nào muốn truyền thông điệp tin tưởng đến cho
người dùng.
Bất kỳ sản phẩm nào muốn tạo cảm xúc mạnh mẽ có thể
thử sử dụng màu đỏ.
Màu vàng thường được dùng cho những sản phẩm liên quan
đến thực phẩm, như là McDonald’s
Màu cam khơi gợi lòng nhiệt thành và tính sáng tạo
Xanh lá cây là lựa chọn an toàn cho những sản phẩm về

thể thao hoặc sức khỏe
Màu tím hiếm khi được sử dụng làm màu chính của thương
hiệu. Nó phù hợp với những nhãn hàng sang trọng
5.1.4 Cách phối màu cơ bản CHƯƠNG 5: COLORS, GRADIENTS & SHADOWS
Dựa trên vòng tuần hoàn
Phối màu bổ sung (bổ túc)
tạo thành từ 2 màu đối diện

nhau trong vòng màu.
Thường nó sự tương phản lớn

giữa 2 màu.
Phối màu tương tự
tạo thành từ 3 màu nằm gần nhau.
Thường được thấy trong tự nhiên

và tạo cảm giác dễ chịu cho mắt.
Phối màu bổ túc trung gian
từ một màu chính và 2 màu ở cạnh

màu bổ sung (tam giác cân).
Phối màu bộ ba
là ba màu nằm cách đều nhau

trong vòng màu (tam giác đều).
Phối màu chữ nhật
gồm hai cặp màu bổ sung. Cần có

một màu chiếm ưu thế và 3 màu
khác là phụ.
Phối màu đơn sắc - Monochromatic
được tạo ra từ một màu bậc 1 PRIMARY

(Primary color) với màu tints và COLOR
shades của chính nó.
Phối màu đơn sắc - Monochromatic
Bảng màu đơn sắc đặc biệt dễ áp dụng khi thiết kế UI vì không
cần đến màu nhấn hoặc màu tương phản.
5.1.5 UI Color Palette CHƯƠNG 5: COLORS, GRADIENTS & SHADOWS
Tạo Bảng màu cho thiết kế Giao diện
Mục tiêu của designer khi làm việc với màu sắc trong
UI Design là tạo một bảng màu riêng cho dự án.
● Công cụ tạo bảng màu trực tuyến
● Tạo bảng màu thủ công

Công cụ tạo Color Palette trực tuyến
➔ 4 màu không giống với những chúng ta cần để tạo ra một

bảng màu hoàn chỉnh
➔ Đa số các bảng màu này thiếu những màu cơ bản nhất -

đen và trắng.
➔ Sự kết hợp của các màu này không dựa trên tâm lý học màu
sắc.


● Những màu này không phù hợp với sản phẩm mà

trang web đang quảng cáo, về mặt thẩm mỹ trông
cũng không ổn.
● Giải pháp tốt nhất là designer nên tự tạo ra cho mình

một bảng màu riêng, tương tự như typescale trong
Hệ thống chữ.
Các bước tạo Color Palette
Chọn màu chủ đạo (Primary Color)
Chọn màu thứ cấp (Secondary Color)
Chọn các màu thông báo (Semantic color)
Tạo màu tint và shade của tất cả các màu (Neutral color)
Cách áp dụng màu sắc

Bước 1: Chọn màu Chủ đạo - Primary color
● Primary color trong UI Design khác với khái niệm

trong vòng màu.
● Đây là màu được dùng cho các phần tử như Buttons,

Checkboxes, Khung nhập thông tin (Focused Inputs).
● Chúng thường là màu chủ đạo của thương hiệu và

được chọn dựa trên tâm lý học.
Bước 1: Chọn màu Chủ đạo - Primary color

Bước 2: Chọn màu Thứ cấp - Secondary color
● Màu thứ cấp sẽ không phải màu được sử dụng cho

những hành động quan trọng bậc 2.
*Màu thứ cấp có thể được chọn từ các cách phối màu bổ sung
trong Vòng màu
Bước 3: Chọn các màu Thông báo - Semantic color
● Màu thông báo là một khái niệm mới trong thiết kế UI.
● Thường được dùng để hiển thị thông điệp nhằm thông

báo cho người dùng biết các trạng thái khi tương tác
Bước 3: Chọn các màu Thông báo - Semantic color
● Nếu màu chủ đạo là một trong những màu Thông báo
Cần đảm bảo rằng màu Thông báo có một chút khác biệt với
màu Chủ đạo
Bước 4: Tạo ra dải màu Tint của tất cả các màu đang có
Bước 4: Tạo ra dải màu Tint của tất cả các màu đang có
Điều này sẽ hữu ích trong nhiều trường hợp khi thiết kế - ví
dụ như màu tints của màu Chủ đạo có thể sẽ cần dùng
cho background cho UI.
★ Tạo ra màu tint bằng cách thay đổi độ sáng - Lightness

value của màu Hue. Chọn “HSL” color mode trong công
cụ thiết kế. Có thể thêm 10% độ sáng cho mỗi màu tints.
Bước 5: Tạo ra dải màu Shade của tất cả các màu đang có
Bước 5: Tạo ra dải màu Shade của tất cả các màu đang có
Điều này sẽ hữu ích trong nhiều trường hợp khi thiết kế - ví
dụ như màu shade của màu Chủ đạo có thể sẽ cần dùng
cho Chữ cho UI.
★ Tạo ra màu shade bằng cách giảm độ sáng - Lightness

Bước 6: Tạo màu Grayscale
Hầu hết các thiết kế được phủ bằng một số dạng màu xám.
Bằng cách giảm độ bão hòa của màu chủ đạo, chúng ta
có màu Darkest grey.
Bước 6: Tạo màu Grayscale
Sau khi có màu xám đậm nhất, hãy tạo ra bảng màu xám.
Chỉ cần thêm 10% độ sáng (Lightness) vào mỗi màu tiếp.
Bước 7: Cách áp dụng màu sắc
60% thiết kế dùng một màu, 30% dùng màu khác, và

10% còn lại dùng màu để tạo nên phân cấp thị giác.
Bước 2: Chọn màu Thứ cấp - Secondary color

TỔNG KẾT CHƯƠNG 3
★ UI tốt cần đảm bảo 02 tính chất: dễ sử dụng và hấp dẫn

user. Ngoài ra cần cả những yếu tố nhận diện thương
hiệu, ví dụ như Màu sắc và Chữ viết.
★ UI Design phù hợp với kích thước màn hình và bố cục
của các phần tử ở trên giao diện đó.
★ Mỗi object đều có vài tính chất cụ thể như kích thước,
vị trí, độ xoay, độ đặc, v.v…
★ UI/UX Designer nên học cách xây dựng hệ thống phân
cấp thị giác trong toàn bộ thiết kế, không chỉ dừng lại ở
từng object.

Thiết Kế Giao Diện Ứng Dụng Dành Cho Thiết Bị Di Động - 6

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Thiết Kế Giao Diện Ứng Dụng Dành Cho Thiết Bị Di Động - 6

Uploaded by

Copyright:

Available Formats

BÀI GIẢNG MÔN

THIẾT KẾ GIAO DIỆN ỨNG DỤNG

THÔNG TIN GIẢNG VIÊN

COLORS, GRADIENTS VÀ SHADOWS

Màu sắc (Color)

Dải màu (Gradients)

Phương pháp chọn kiểu chữ cho UI Design

Cách xây dựng Typescale

Chiều cao dòng - Line height

Sử dụng màu sắc phù hợp là một trong

Sử dụng màu sắc là một trong những cách

★ Hue Hue là cách gọi khác của màu sắc.

★ Saturation là dải màu chuyển từ màu tinh khiết

★ Lightness xác định độ sáng của màu, từ đen

★ Shade là màu được tạo ra khi màu đen

*Cách đơn giản nhất để tạo ra shade là giảm độ sáng (lightness)

★ Tint là màu được tạo ra khi màu trắng

*Cách đơn giản nhất để tạo ra tint là tăng độ sáng (lightness)

Black Màu đen nguyên chất (pure black - #000000)

Black Pure black là màu tối nhất ở đây, nó có thể

Tâm lý học màu sắc

Tâm lý học màu sắc

Tâm lý học màu sắc

Tâm lý học màu sắc

Tâm lý học màu sắc

Xanh lá cây là lựa chọn an toàn cho những sản phẩm về

Tâm lý học màu sắc

Dựa trên vòng tuần hoàn

Phối màu bổ sung (bổ túc)

tạo thành từ 2 màu đối diện

Thường nó sự tương phản lớn

Dựa trên vòng tuần hoàn

Phối màu tương tự

tạo thành từ 3 màu nằm gần nhau.

Thường được thấy trong tự nhiên

Dựa trên vòng tuần hoàn

Phối màu bổ túc trung gian

từ một màu chính và 2 màu ở cạnh

Dựa trên vòng tuần hoàn

là ba màu nằm cách đều nhau

Dựa trên vòng tuần hoàn

Phối màu chữ nhật

gồm hai cặp màu bổ sung. Cần có

Phối màu đơn sắc - Monochromatic

được tạo ra từ một màu bậc 1 PRIMARY

Phối màu đơn sắc - Monochromatic

Tạo Bảng màu cho thiết kế Giao diện

● Công cụ tạo bảng màu trực tuyến

● Tạo bảng màu thủ công

Công cụ tạo Color Palette trực tuyến

➔ 4 màu không giống với những chúng ta cần để tạo ra một

Công cụ tạo Color Palette trực tuyến

➔ Đa số các bảng màu này thiếu những màu cơ bản nhất -

Công cụ tạo Color Palette trực tuyến

Công cụ tạo Color Palette trực tuyến

Công cụ tạo Color Palette trực tuyến

● Những màu này không phù hợp với sản phẩm mà

● Giải pháp tốt nhất là designer nên tự tạo ra cho mình

Các bước tạo Color Palette

Chọn màu chủ đạo (Primary Color)

Chọn màu thứ cấp (Secondary Color)

Chọn các màu thông báo (Semantic color)

Cách áp dụng màu sắc