Thư viện thuật ngữ / UI/UX

Alignment là gì?

Còn gọi: căn chỉnh

Alignment là việc đặt các yếu tố thẳng hàng theo một cạnh hoặc một trục chung, tạo mối liên kết thị giác giữa chúng và làm bố cục trông có trật tự.

Ảnh minh hoạ Alignment (căn chỉnh): minh hoạ trực quan cho Alignment (căn chỉnh)
Minh hoạ trực quan cho Alignment (căn chỉnh)

Hiểu kỹ hơn

Mắt người tự nối các yếu tố thẳng hàng thành một nhóm, nên căn chỉnh là cách rẻ nhất để giao diện trông chỉn chu. Các kiểu chính gồm căn trái, căn phải, căn giữa và căn theo đường chân chữ (baseline). Với nội dung dài trong ngôn ngữ đọc từ trái sang phải, căn trái dễ đọc nhất vì mắt luôn quay về cùng một điểm đầu dòng; căn giữa chỉ hợp với tiêu đề ngắn. Trong giao diện, các yếu tố nên bám vào lưới cột và hệ thống khoảng cách để tạo ít đường căn nhất có thể. Trong Figma, dùng các nút căn chỉnh ở đầu bảng thuộc tính hoặc phím tắt Alt/Option kết hợp A, D, W, S, H, V, và auto layout tự giữ căn chỉnh khi nội dung thay đổi. Ví dụ: một form có nhãn, ô nhập và nút cùng căn trái theo một đường thẳng. Lỗi thường gặp là trộn căn giữa và căn trái trong cùng một khối, tạo ra nhiều mép lởm chởm.