Nguyên tắc thứ 7: Hệ thống cấp bậc

Có thể nói hệ thống cấp bậc là nguyên tắc quan trọng nhất trong thiết kế.
nó bao gồm nhiều nguyên tắc khác để mang lại 1 trải nghiệm xem rõ ràng.
việc không nắm được nguyên tắc này là lý do hàng đầu thiết kế của bạn
thiếu sự rõ ràng & dễ xem

Hệ thống cấp bậc là gì?

Hệ thống cấp bậc hoặc phân cấp thị giác hiểu đơn giản là việc Designer
sử dụng các yếu tố để sắp sếp các thành phần theo thứ tự quan trọng
của chúng trong thiết kế, nhằm điều hướng mắt người xem theo 1 lộ trình
mà Designer đã sắp đặt trước.

Các yếu tô ảnh hưởng tới hệ thống cấp bậc

Tương tự như các yếu tố khác hệ thống cấp bậc củng bị ảnh hưởng bởi các yếu
tố nhỏ hơn như

• Kích thước: thành phần nào lớn hơn thì nổi bật hơn

• Màu sắc: màu sắc tươi sáng hơn thì nổi bật hơn những màu nhạt

• Tương phản: thành phần nào có độ tương phản rõ rệt hơn thì nổi bật hơn

• Căn chỉnh: phần tử nào không đi theo đường lối thì nổi bật hơn

• Gần: các thành phần gần nhau thì liên quan tới nhau

• Khoảng trắng: thành phần nào có nhiều khoảng trắng hơn thì nổi bật hơn

• Kết cấu & Kiểu dáng: thành phần có yếu tố 3D hay kiểu giáng khác, thì nổi bật hơn

Đây là các yếu tố tác động tới sự phân cấp, trong thiết kế UI chúng ta sử dụng
nhiều các yếu tố này để tạo ra sự dễ dùng cho sản phẩm.

Xây dựng hệ thống phân cấp mạnh mẽ

Phản ứng: Trong các thiết kế đặc biệt là UI design, thì tính phân cấp phải cực kỳ chú trọng
vì quyết định ở lại hay rời đi được tính bằng mili giây
Việc phân cấp rõ ràng sẽ giúp người xem tìm được thông tin họ cần nhanh nhất.

Mô hình phân cấp Z & F, người phương tây hay những ngôn ngữ đọc từ trái qua phải
chúng ta có thể dùng sơ đồ theo chữ cái Z hoặc F

Nhưng có những nước lại đọc từ phải qua trái nên bạn phản nghiên cứu trước
các đối tượng người xem để đưa rả giải pháp tối ưu

Quét qua hơn là đọc kỹ: chúng ta có xu hướng đọc lướt qua để xem các thông tin
quan trọng hơn là đọc kỹ từng nội dung, vậy nên hệ thống phân cấp phải làm rõ các
thành phần quan trọng trong quá trình người dùng đọc lướt qua 1 Design.

Nguyên tắc Gestalt: đây là 1 nguyên tắc thú vị và quan trọng tôi sẽ có 1 bài viết
cụ thể hơn về nó, hiểu đơn giản thì nguyên tắc grestalt mô tả cách con người nhóm
các đối tượng hoặc hoàn thiện các đối tượng còn thiếu, dựa vào các kiến thức trong
thực tế. Các nhà thiết kế có thể lợi dụng nó để đưa ra thiết kế phù hợp.

Tính nhất quán: các icon hay font chữ quen thuộc thì sẽ dễ dàng được nhận dạng hơn
ví dụ như icon thùng rác nó có nghĩa là nơi bạn có thể xoá file hay những việc mà
thùng rác có thể làm, bạn không thể thay icon thùng rác thành bồn tắm được
nó sẽ gây ra sự khó hiểu. Nó áp dụng tương tự với màu sắc, font…

Center stage: hiểu đơn giản thì, đó là các thành phần quen thuộc mà người dùng
hay sử dụng như phần đăng nhập hay thanh tìm kiếm. Thì tốt nhất nên sử dụng nó
chứ đừng sửa đổi quy trình nó sẽ làm thiết kế của bạn khó dùng… (tìm hiểu thêm nhé)

Khoảng trắng: thiết kế có nhiều khoảng trắng là thiết kế mà người dùng có thể
tìm các thông tin quan trọng hơn (khoảng trắng có thể là bất kỳ màu nào).

Kiểu chữ: Một font được sử dụng tốt có thể tạo ra sự phân cấp rõ ràng giữa các
tiêu đề hay văn bản, giúp người xem dễ dàng đọc

Chi tiết: ở các màn hình lớn bạn thường sử dụng các icon hay font bé nhưng khi
xem ở các màn hình nhỏ hơn thì chúng cần được tối ưu lại

Kiểu chữ & Phong cách: việc lựa chọn 1 font đúng với loại người xem củng là cách
giúp thiết kế có hệ thống phân cấp trực quan hơn
primary: các đoạn văn chính
secondary: các đoạn văn phụ
Tertiary: các đoạn văn nhỏ hơn nhưng vẫn dễ đọc.
(cái này bạn nên tìm hiểu thêm nhé)

Phía trên là đại khái các ý bạn cần nắm về sự phân cấp, bạn cứ hiểu đơn giản là
sự phần cấp trong thiết kế

Ví dụ thực tế về cấp bậc

đây là 1 thiết kế khi nhìn vào chúng ta thấy 2 cụm đối tượng là hình ảnh & chữ
chúng ta chưa biết nội dung chính nằm ở đâu trong thiết kế khi nhìn thoáng qua.

bây giờ cấp bậc trong thiết kế đã rõ ràng hơn, chúng ta biết nội dung chính là
tên bài hát, tiếp theo là hình ảnh tác giả, sau đó là lời bài hát, và cuối cùng là
tên tác giả.

Kết luận

Cấp bậc trong thiết kế là kỹ năng thể hiện tư duy của Designer, 1 thiết kế
mất quá nhiều thời gian để biết nó là gì là một thiết kế tồi (hoặc 1 trường phái nào đấy)
hãy ưu tiên sự dễ dàng hiểu của thiết kế của mình

Phần tiếp theo ta sẽ nói về Khoảng trắng & Hoa văn