Điều chỉnh thị giác

Cách tiếp cận này có vẻ logic nhưng đó không phải cách tốt nhất khi làm thiết kế.

Những tính toán của phần mềm có vẻ hợp lý nhưng không thể so sánh được với cách chúng ta nhận biết hình khối, màu sắc và kích cỡ. Phần mềm không hiểu được tương quan giữa các đối tượng (object) với nhau, sự tương quan tổng thể của ngôn ngữ thị giác cũng như là cách chúng ta nhận thức về các vật thể.

Bộ não “bất hợp lý” của con người cần quyết định một vật có đúng về mặt thị giác hay không, bởi chúng ta có thể nhìn và hiểu được sự tương quan trong khi máy tính thì không thể. Chính việc hiểu được những “tiểu tiết” này và biết cách điều chỉnh chúng sẽ làm cho một nhà thiết kế tốt trở nên giỏi hơn. Sẽ không nhiều người biết và để ý đến sự thay đổi nhỏ này, nhưng nếu không có nó mọi người sẽ thấy khó chịu.

Máy tính không thể nhận biết chính xác được Trọng Lượng của đối tượng nằm ở đâu, nó phải dựa vào một vài thông tin nhất định như độ rộng, chiều cao hay vị trí. Là nhà thiết kế, chúng ta cần bù lại những thiếu sót của máy móc bằng một thứ gọi là Optical Adjustment (điều chỉnh thị giác). 

Bạn thấy hình tam giác của nút Play này đang căn giữa với hình tròn đúng không?
Sai rồi!

Khi vẽ một hình chữ nhật bao quanh hình tam giác, ta có thể thấy nó không nằm chính giữa hình tròn. 

Thoạt nhìn, hình tam giác có vẻ nằm ở chính giữa hình tròn, nhưng thật ra không phải vậy. Tại sao lại thế? Đó là nhờ Visual Weight (trọng lượng thị giác. Trọng lượng và khối lượng của hình tam giác nằm ở bên trái. Nó tạo một ảo ảnh thị giác làm hình tam giác có vẻ nằm lệch khỏi tâm hình tròn sang bên trái trong khi nó đang được căn chính giữa hình tròn.

Để giải quyết vấn đề này, chúng ta phải điều chỉnh hình tam giác sao cho nó “xuất hiện” ở chính giữa.

Optical Adjustment trong màu sắc thì “tiểu tiết” hơn. Ở ví dụ này, một lần nữa, mọi thứ nằm ở trọng lượng của đối tượng và có bao nhiêu màu sắc được hiển thị.

Ở hình bên trái, cùng một màu xanh lá cây nhưng màu trong logo đậm hơn màu của dòng chữ.

Ở hình bên trái, cả icon và text đều dùng một mã màu có giá trị hex như nhau, hình bên phải sử dụng hai giá trị màu khác nhau. Để được như vậy, tôi đã giảm độ sáng của màu xanh trong bảng giá trị “HSB”

Ở cặp hình bên trái, cả hình tròn và hình vuông đều có kích cỡ là 120 x 120 pixel, điều này khiến hình tròn có vẻ quá nhỏ. Ở bên phải, hình tròn có cỡ 126 x 126 pixel, nên có thể bù lại cho bề mặt của hình vuông.

Tôi sẽ gợi ý bạn dùng giá trị màu HSB thay vì RGB. Một lợi ích lớn là nó cho phép nhà thiết kế thay đổi độ sáng của màu.

Tỉ lệ là cách bộ não của bạn tiếp nhận kích cỡ của đối tượng, bao gồm cả Text. Một hình vuông cỡ 120 x 120 pixel có bề mặt diện tích lớn hơn một hình tròn cỡ 120 x 120 pixel. Vì vậy, hình tròn sẽ cần nhiều phần để bù lại so với hình vuông.

Bạn có thể thấy hình icon đang nặng hơn dòng text. Để điều chỉnh có 2 cách, một là làm màu của icon nhạt đi, hai là làm màu text đậm hơn. Tôi gợi ý bạn hãy chọn những màu sắc có thể giúp bạn đạt được mức độ AA trong  Nguyên tắc về Nội dung Web Tiếp cận (Web content Accessibility Guidelines, viết tắt là WCAG).

Những điều chỉnh này có thể mang tính tiểu tiết, nhưng sẽ làm cho tổng thể của bản thiết kế nhìn hợp lý hơn. Dưới đây là ví dụ cho việc tinh chỉnh một yếu tố, tăng hoặc giảm 1 đơn vị pixel để thiết kế “có vẻ đúng”.

Để ý phần dưới/trên của một vài chữ cái thì nhô ra hơn so với đường X-height ( Đường gióng biểu thị chiều cao của chữ cái thường). 

Điều này còn có thể áp dụng trong Typography. Khi bạn vẽ một nét qua baseline (đường cơ sở mà các chữ nằm trên) và x-height của text (text dùng font Garamond), bạn sẽ thấy những đoạn cong của chữ cái nhô ra ngoài một chút so với những đường này. Nếu không có những overshoot này, ta sẽ có cảm giác một vài chữ cái hơi bé so với các chữ cùng thuộc kiểu chữ còn lại. 

Khi đặt ra tiêu chuẩn của các chữ hoa khi đứng cạnh standard case text, chữ hoa thì nổi bật hơn chữ thường và cần được điều chỉnh để có thể bù lại cho nhau.

Chữ hoa ở dòng trên có vẻ to hơn dòng text còn lại. Chữ hoa ở dòng dưới đã được điều chỉnh nhỏ lại 2 pixel để có được cảm giác chúng cùng kích cỡ.

Trừ khi mục đích của bản design là làm cho chữ cái in hoa nổi bật hơn, luôn nên giảm pixel của chữ xuống.

Khi làm việt trên một giao diện, những điều chỉnh nhỏ này bổ sung và tác động đến tổng thể của website. Chú ý đến từng tiểu tiết là điều làm cho một bản thiết kế trở nên tuyệt vời.

Máy tính hay các công nghệ AI không thể hiểu được sự tương quan trong các thiết kế. Vì thế chúng không đưa ra được những điều chỉnh chính xác như những nhà thiết kế. Cho đến khi máy móc có thể đưa ra được những đánh giá hợp lý về từng thành phần riêng biệt trong ngữ cảnh của thiết kế, chúng ta vẫn chưa thể để công cụ đưa ra những quyết định phức tạp của bản thiết kế. 

Chúng ta không nên phụ thuộc vào máy tính để làm hết các bước tư duy, cần phải dựa vào con mắt và bản năng của mình. Các nhà thiết kế trau dồi bản năng bằng những thiết kế họ phải làm hằng ngày. Vì vậy, ta nên tin họ, kể cả khi máy móc bảo ta làm khác.