Các quy tắc thiết kế trực quan an toàn để làm theo

• Không nhất thiết phải tuân thủ tuyệt đối, nhưng các quy tắc này luôn có thể áp dụng nguyên trạng

Dùng các màu gần đen/trắng thay vì đen/trắng thuần túy

• Màu đen thuần trông thiếu tự nhiên trên màn hình, còn trắng thuần thì quá chói
• Dùng #222222 và #F2F2F2 thay cho #000000 và #FFFFFF
• Từ đây về sau, khi nói black/white là đang nói đến các màu này

Nhuộm màu cho các màu trung tính (neutral)

• Màu trung tính thường là đen/trắng/xám
• Nếu dùng màu, hãy chỉ thêm một chút sắc màu vào các màu trung tính (ví dụ light red thay cho grey, dark blue thay cho black)
• Làm vậy sẽ khiến bảng màu có cảm giác nhất quán hơn
• Nếu dùng HSB thì chỉ cần thêm độ bão hòa khoảng 5% trở xuống

Dùng độ tương phản cao (high contrast) cho các thành phần quan trọng

• Mọi yếu tố người dùng cần chú ý: nút, nội dung, v.v.
• Với đường phân cách, đổ bóng, v.v. thì nên dùng mức tương phản thấp nhất có thể

Mọi yếu tố trong thiết kế đều phải có chủ đích

• Bao gồm khoảng trắng, căn chỉnh, kích thước, khoảng cách, màu sắc, bóng đổ
• Khi ai đó hỏi về một phần cụ thể trong thiết kế, bạn phải có thể giải thích vì sao lại làm như vậy

Căn chỉnh optical (thị giác) thường tốt hơn căn chỉnh theo toán học

• Có những hình dạng sẽ trông căn thẳng hơn nếu được thể hiện theo cảm nhận của mắt
• Căn bằng mắt cần luyện tập, nhưng nếu làm đều đặn thì có thể nhanh chóng nắm bắt

Chữ lớn thì giảm khoảng cách chữ và chiều cao dòng, chữ nhỏ thì tăng lên

• Áp dụng cho mọi loại văn bản
• Chữ càng lớn thì càng cần ít khoảng trống hơn giữa các ký tự và giữa các dòng. Chiều ngược lại cũng đúng

Viền của container phải tương phản với cả container và nền

• Viền nên dùng màu tối hơn nền, chứ không phải một màu nằm giữa phần bên trong container và màu nền

Mọi thứ đều phải căn chỉnh với thứ khác

• Căn chỉnh cho biết các đối tượng có liên quan với nhau
• Nếu một thứ không thẳng hàng với thứ khác, nó sẽ tạo cảm giác như không thuộc về thiết kế đó
• Lý tưởng nhất là mỗi phần tử nên được căn với các phần tử khác theo một dạng logic nào đó

Mỗi màu trong palette nên có giá trị độ sáng riêng

• Khi các màu có giá trị độ sáng khác nhau, chúng có thể tạo ra look-and-feel riêng không chỉ ở sắc độ mà còn ở độ sáng
• Nhờ vậy các màu sẽ ít cạnh tranh với nhau hơn và tạo nên một bảng màu tốt hơn

Nếu nhuộm màu cho màu trung tính, chỉ dùng một trong hai: Warm hoặc Cool. Đừng dùng cả hai

• Nếu trộn cả màu ấm/lạnh vào màu trung tính, bảng màu sẽ mất cảm giác nhất quán

Kích thước nên có quan hệ toán học với nhau

• Khoảng cách hay kích thước giữa các phần tử nên được quyết định theo một thang tỷ lệ nào đó. Như vậy sẽ giúp thiết kế trông nhất quán hơn
• Trong ví dụ, mọi phần tử đều dùng bội số của 8. Khoảng cách là 8/16/24/32, chiều cao dòng là 48/40/24, cỡ chữ là 40/32/16

Các phần tử nên được sắp xếp theo thứ tự trọng lượng thị giác

• Nếu trong một hàng hoặc cột có nhiều phần tử và một số phần tử nặng về mặt thị giác hơn phần còn lại (ví dụ 2 nút và 3 liên kết), thì phần tử nặng nhất về mặt thị giác nên đứng trước, còn các phần tử nhẹ hơn xếp dần về sau
• Điểm cần lưu ý là phần tử nặng nhất về mặt thị giác nên nằm ngoài cùng

Nếu dùng lưới ngang, hãy dùng 12 cột

• Khi chia theo đơn vị cột, 12 cột cho phép dùng các nhóm 1, 2, 3, 4 cột nên rất linh hoạt

Hãy chừa khoảng cách giữa các điểm có độ tương phản cao

• Mắt chúng ta xác định rìa của phần tử dựa trên độ tương phản, nên sẽ kỳ vọng có khoảng trống giữa các điểm tương phản với nhau

Yếu tố ở gần hơn nên sáng hơn

• Các phần tử trên màn hình càng gần người dùng hơn (càng ở phía trước) thì càng nên sáng hơn
• Điều này cũng áp dụng cho cả light/dark mode, vì thế giới thực vận hành như vậy

Đặt giá trị blur của drop shadow bằng gấp đôi giá trị khoảng cách

• Nếu đặt bóng đổ lan theo trục Y là 4 pixel, thì giá trị blur nên là 8 pixel
• Khi phần tử “tiến lại gần” người xem, cũng nên giảm opacity của bóng đổ

Đặt thứ đơn giản lên trên thứ phức tạp, hoặc đặt thứ phức tạp lên trên thứ đơn giản

• Nền phức tạp (ví dụ gradient nhiều chi tiết) sẽ hiển thị tốt nhất khi phần phía trước (văn bản) đơn giản
• Nếu phần phía trước phức tạp, thì nền đơn giản là phù hợp nhất
• Đặt thứ đơn giản lên trên thứ đơn giản vẫn được, nhưng dễ trông nhạt nhẽo
• Đặt thứ phức tạp lên trên thứ phức tạp sẽ gây rối mắt nên cần tránh

Giữ màu của container trong giới hạn độ sáng

• Chênh lệch độ sáng giữa nền và container nên nằm trong 12% với giao diện tối, và trong 7% với giao diện sáng (theo giá trị brightness của hệ màu HSB)
• Đây là kết quả rút ra từ một nghiên cứu so sánh độ sáng của container với nền trên khoảng 100 website được thiết kế tốt

Padding ngoài nên bằng hoặc lớn hơn padding trong

• Padding trong của container là khoảng trống giữa các phần tử bên trong container. Padding ngoài là khoảng trống giữa phần tử và mép container
• Padding ngoài nên bằng hoặc lớn hơn padding trong

Giữ cỡ chữ nội dung từ 16px trở lên

• 16px là cỡ chữ mặc định trong phần lớn trình duyệt
• Văn bản nhỏ hơn mức này khó đọc, nên an toàn nhất là không dùng cho nội dung chính

Dùng độ dài dòng khoảng 70 ký tự

• Dòng dài 60 hay 80 ký tự không quá quan trọng, nhưng nếu đi quá xa về một phía thì khả năng đọc có thể bị ảnh hưởng

Đặt padding ngang của nút bằng gấp đôi padding dọc

• Mẫu nút tiêu chuẩn là rộng hơn cao
• Nếu muốn mọi người nhận ra đó là nút, tốt nhất nên theo mẫu này

Chỉ dùng tối đa 2 phông chữ

• Phông chữ thứ hai là cơ hội để củng cố concept đứng sau thiết kế
• Nó cũng giúp bổ sung sự đa dạng cho thiết kế
• Gần như không cần dùng quá hai phông, và nếu dùng nhiều hơn thì thiết kế có thể trở nên rối mắt

Xử lý đúng các góc lồng nhau

• Đôi khi có trường hợp hai hoặc nhiều góc bo tròn lồng vào nhau
• Để trông đúng, hãy đặt bán kính góc bên trong bằng bán kính góc bên ngoài trừ đi khoảng cách giữa chúng
• Ví dụ: nếu bán kính góc ngoài là 30px và góc trong cách nó 20px, thì bán kính góc trong nên là 10px

Đừng đặt hai đường phân cách cạnh nhau

• Chuyển tiếp nền, cạnh container và đường chia rất khó phân biệt về mặt thị giác
• Đừng để hai hay nhiều đường phân cách dính sát nhau

[sungwoo]

@xguru
Tôi đang xem với kiểu dáng như bên dưới để cải thiện khả năng đọc trên GeekNews. ;-)
https://userstyles.org/styles/179148#comments-section-wrapper

Cảm ơn.

[metis041]

Cái này thật sự rất hay.. Lúc nào tôi cũng đau đầu về thiết kế, nên nếu có những hướng dẫn như thế này thì năng suất có lẽ sẽ tăng lên đáng kể.

[greenhead]

Cảm ơn bạn đã dịch! Rất hữu ích với tôi.

[laeyoung]

Hay quá!

[cbk1411]

@xguru
Xin phép góp ý là có chỗ dịch sai
"Các yếu tố ở gần hơn phải nhẹ hơn" -> "Các yếu tố ở gần hơn phải sáng hơn"

[xguru]

À đúng rồi, cảm ơn nhé~!