Nguyên Tắc Định Hướng Thị Giác Create Visual Hierarchy

Cách con người đọc một trang web 
Để tạo được đúng Visual Hierachy cần phải hiểu cách con người xử lý một trang web. Quan 
trọng hơn cả ý tưởng, một nghệ sỹ giỏi ln phải suy xét đến các vấn đề về bố cục, kích 
thước, màu sắc, phải đưa vào cái gì ­ điều gì là quan trọng ­ điều gì có thể bỏ qua. Điều này 
khơng hề dễ dàng, điều đó lý giải tại sao các bậc thầy như Van Gohg và da Vinci được coi 
trọng. 
Một giao diện website cũng vậy, nó là một nghệ thuật trực quan và phải đem theo những 
dạng quy tắc nghệ thuật truyền thống kết hợp với những ngun tắc thương mại. Đồng thời 
một website đặc biệt ​
cần tạo lên sự lơi cuốn và hấp dẫn. 
Trong bài này chúng ta tìm hiểu làm thế nào để tạo visual hierachy và sự liên quan có nó với 
mắt con người khi quan sát website. 

Tổ chức trực quan (Visual Organization) 
Trong bài “Kết nối với Visual Hierachy" tác giả Luke đã giải thích về vấn đề này như sau: 
●

Thơng tin người dùng (Informating Users): Như một bàn tay vơ hình chỉ, hướng dẫn 
người dùng (khơng q độc đốn) để họ có thể dễ dàng từng bước qua các thơng tin 
­ các bước khác nhau trên giao diện website.  />
●

Kết nối các mối quan hệ nội dung (Comunicating content relationship): Giao diện nên 
giới thiệu nội dung theo các thứ tự ưu tiên cho người dùng để thể hiện một cách phù 
hợp. ​
​
 đã đưa thơng tin chun mục ở trên đầu, nội dung nổi bật 
ở giữa và phân trang ở cuối. 

●

Tạo ảnh hưởng về cảm xúc (Creating emotional impact): Mọi người ghé thăm nhà 
hàng khơng chỉ vì bữa ăn, họ muốn nếm, thưởng thức, trải nghiệm xem có gì đáng 
nhớ. Thiết kế giao diện khơng có gì đáng nhớ thì họ cũng chẳng quan tâm nhiều, ví 
dụ với trang web ​
​
 là một ví dụ hồn hảo về hữu dụng và dễ 
chịu. 

Mục đích cuối cùng của Thiết kế UI là trả lời 3 câu hỏi: 
●

Cái gì đây? (​
tính hữu ích​
) 

●

Làm sao sử dụng nó? (​
tính khả dụng) 

●

Tại sao tơi phải quan tâm? (​
sự thèm muốn​
) 


Dự đốn trước mắt con người (Human eyes) 

 

Trong bài “Kết nối với Visual Hierachy" tác giả Luke đã giải thích về vấn đề này như sau: 
Người dùng thường đọc lướt, nên ta phải có chiến thuật để nội dung gây chú ý vào các vị trí 
họ đọc lướt. 

Mơ hình chữ F

 


●

Người dùng ít khi đọc từng chữ 

●

2 Đoạn đầu tiên rất quan trọng, cần đưa nội dung câu kéo vào 

●

Đoạn đầu tiên, tiêu đề con, danh sách các đặc điểm chính,... 

Mơ hình Z

Mơ hình này phù hợp với web thương hiệu, vì  nó tạo ra giao diện đơn giản. 
●

Background ­ nền để tách chia và giữ tầm nhìn người dùng 

●

Point #1 ­ đây là vị trí đắc địa cho logo 

●

Point #2 ­ thêm màu thứ cấp để giữ và hướng dẫn mắt người xem đến phần tiếp 
theo dọc theo Z 

●

Center of Page ­ đây là phần để Featured Image Slider nhằm  tách phần đầu và 
phần dưới 

●

Point #3, Point #4 

Túm lại ​
sử dụng mơ hình F  hoặc Z ​
để dẫn dắt mắt người xem chỉ hướng người xem một 
cách tế nhị. 
 


4 chìa khố để tạo visual hierachy 
01. Contrast (Tương phản) 
Tương phản là giữa 2 thành phần khác nhau được đặt gần . Trong thiết kế UI web có thể là 
màu sắc, văn hoa, hình dáng, hướng, hoặc kích thước  … để có thể đặt tên cho những thứ 
quan trọng. 

 

 
Sự xem kẽ giữa các chữ có kích thước, màu sắc khác nhau cũng tạo ra sự phân cấp. 


 
Kết hợp với mơ hình Z sẽ tạo lên sự nổi bật và dẫn dắt người dùng bấm vào nút Try it Free. 

 
Túm lại độ tương phải sẽ tách động mạnh mẽ đến sự phản ứng cơ bản của con người. 

02. Color (Màu sắc) 
Khai thác tính chất màu sắc để tạo lên sự nổi bật, gây chú ý cho người xem. Ngồi ra màu 
sắc cịn quyết định tâm trạng của website (vd: xanh n tĩnh, đỏ hoạt động,...) 


 
Kết hợp với mơ hình Z tạo lên màu gọi (đỏ), ngủ (xanh). 

03. Size (Kích thước) 

 

04. Space (Khoảng cách) 
Khoảng cách giúp tạo ra điểm thở của bố cục, tạo sự dễ dàng khi xem và kích thích tương 
tác. 


 
 

Túm lại cần cân nhắc để kết hợp: 
1. Tương phản (contrast) 
2. Màu sắc và Hịa sắc (color and tint) 
3. Kích thước & Định kiểu (size and style) 
4. Khoảng trống và Kết cấu (space and texture) 
5. Hướng và Bố cục (Z, F) (direction and layout) 
6. Văn bản đồ họa (typography) 
 

Hiểu về Visual Hierachy trong thiết kế Web 
Thiết kế = Kết nối 
Hãy nên hiểu rằng mọi người sẽ xem thiết kế của chúng ta  thieo chiều hướng quan trọng, 
cho nên cần để họ thấy sự thiết kế hiệu quả của chúng ta. 


 
Hình đơn giản rất dễ nhận ra và khơng nói là 2 hình trịn mà là một đen, một đỏ. 

 
Với hình phức tạp hơn cần phải phân cấp trực quan để tạo lên thiết kế dễ dàng. 

Phân cấp thị giác thất bại ­  Visual Hierachy 
Một phân cấp thị giác tốt khơng phải  làm đồ họa một cách hoang dã, khơng phải là các hiệu 
ứng Photoshop mới nhất, nó là về việc tổ chức thơng tin theo cách có thể tiếp cận 
(accessible), sử dụng được (usable) và logic để mọi người viếng thăm mỗi ngày. 

Cách kiểm tra phân cấp thị giác
1. Đưa ra một danh sách những điểm then chốt về thơng tin mà khách hàng có thể 
thích tìm kiếm hoặc quan tâm (có thể sử dụng AB testing) 

2. Gán giá trị (1­10) cho tầm quan trọng của thơng tin mà người dùng sẽ truy cập trung 
bình. 
3. Bây giờ hãy nhìn vào thiết kế một lần nữa. 
4. Gán giá trị (1­10) cho hình ảnh thực sự quan trọng mà bạn nhìn thấy trong thiết kế. 
(các thành phần xem live) 
5. Xem xét: Liệu dự kiến quan trọng có khớp với thiết kế trực quan mà đã tạo ra để 
quan trọng hay khơng? Cải tiến nó. 

Kiểm tra Visual Hierachy (cơng nghệ mờ) 
Làm mờ thiết kế rồi kiểm tra 

 


Khi người dùng vào website chúng ta có ​
5s để gây sự chú ý cho họ, tạo ấn tượng cho họ ​
do 
đó website cần phải có ​
“một phân cấp trực quan và tạo ra các trật tự quan trọng”, ​
tạo ra Call 
to actions, các H1, H2 là tiêu đề quan trọng, H3, H4, link, paragraph và hình ảnh sẽ được 
xét sau. 
Vậy hệ thống phân cấp trực quan sẽ là rất quan trọng. 
Hãy quan sát website theo cách mờ đi, điều này sẽ kiểm tra được những thứ nổi bật vẫn sẽ 
nhìn thấy ngay cả khi bị mờ. 
Cách thức sử dụng Photoshop tạo một screenshot > Gaussion Blur khoảng 5px; 

 
Kết quả sẽ như thế này: 

 
Cách kiểm tra: 
Nếu thấy cần thiết phải thay đổi để quan sát tốt hơn, nổi bật những điều quan trọng hơn thì 
có thể thay đổi những vấn đề sau: 
●

Size 

●

Contrast 

●

Colour 

●

Shape 

●

Position 

●

Whitespace and padding 

 

 
Có thể muốn tốt hơn thì sử dụng Blur lên hẳn 10px để nhìn xem cịn tốt khơng? 
 

On Visual Hierarchy ­ Ví dụ cụ thể 
Ví dụ