Please enable JavaScript.
Coggle requires JavaScript to display documents.
20 Nguyên tắc Thiết kế đồ họa cơ bản - Coggle Diagram
20 Nguyên tắc Thiết kế đồ họa cơ bản
Line & Stroke (Đường nét): Là yếu tố cơ bản nhất giúp điều hướng mắt người xem, tạo sự nhấn nhá và mang lại cảm giác chuyển động cho các thành phần tĩnh trên giao diện.
Scale & Size (Tỷ lệ & Kích thước): Việc thay đổi kích thước có chủ đích giúp thu hút sự chú ý vào các thành phần quan trọng và tạo ra sự kịch tính, ấn tượng cho thiết kế.
Color Scheme (Hệ màu): Màu sắc đóng vai trò cực kỳ quan trọng. Tác giả nhấn mạnh việc sử dụng các màu sắc mang tính quy ước trong công nghệ (Xanh lá - thành công, Đỏ - lỗi, Vàng - cảnh báo) và sự hài hòa của bảng màu tổng thể.
Repetition (Sự lặp lại): Giúp nhận diện thương hiệu nhất quán và kết nối các thành phần riêng lẻ lại với nhau mà không cần dùng quá nhiều yếu tố liên kết rườm rà.
Negative Space (Không gian âm): Sử dụng các khoảng trắng xung quanh đối tượng để tạo "khoảng thở" cho mắt, giúp chủ thể trở nên nổi bật và sang trọng hơn.
Symmetry (Đối xứng): Đây là lựa chọn an toàn vì mắt người thường bị thu hút bởi sự cân đối hoàn hảo, tạo cảm giác dễ chịu và thuận mắt.
Transparency (Độ trong suốt): Giúp các lớp (layer) tương tác với nhau, tạo ra hiệu ứng thị giác chồng lớp thú vị và cảm giác về chiều sâu.
Texture & Pattern (Họa tiết): Tuy phong cách thiết kế phẳng hiện nay ít dùng hơn, nhưng nếu biết sử dụng khéo léo, họa tiết sẽ giúp giao diện sinh động và gợi xúc giác bề mặt tốt hơn.
Balance (Cân bằng): Không chỉ là đối xứng, mà là sự cân bằng về "trọng lượng thị giác". Một yếu tố nhỏ nhưng đậm màu có thể cân bằng với một yếu tố lớn nhưng nhạt màu.
Contrast (Tương phản): Sự khác biệt về màu sắc, hình dáng hoặc mật độ giúp tăng tính dễ đọc (readability) và tạo điểm nhấn rõ rệt cho những thông tin quan trọng.
11. Hierarchy (Phân cấp)
Mục đích là chỉ ra "thứ tự quan trọng" của các đối tượng.
Giúp người dùng điều hướng và tìm kiếm nội dung dễ dàng hơn thông qua việc điều chỉnh kích thước, màu sắc, độ tương phản và khoảng trắng.
12. Framing (Đóng khung)
Kỹ thuật trình bày các yếu tố trong một "khung hình" (có thể là khung vật lý hoặc các hình khối, đường viền).
Giúp tạo sự cân bằng, thống nhất và thu hút sự chú ý vào yếu tố chính, tránh sự nhàm chán cho bố cục.
13. Grid (Lưới)
Là hệ thống khung xương vô hình giúp sắp xếp các yếu tố đồ họa ngăn nắp và có ý đồ.
Các loại lưới phổ biến trong UI bao gồm: Lưới cột (Column grid), Lưới mô-đun (Modular grid), Lưới pixel và Lưới đường cơ sở (Baseline grid).
14. Randomness (Sự ngẫu nhiên)
Đôi khi việc tạo ra các yếu tố "trông có vẻ ngẫu nhiên" (nhưng có chủ đích) sẽ mang lại sự tươi mới và thú vị cho thiết kế.
Cần tiết chế để tránh làm giao diện trở nên lộn xộn.
15. Direction (Điều hướng)
Tạo ra "sự dẫn dắt" thị giác dựa trên thói quen đọc (quét theo hình chữ F, Z) và các điểm neo mắt.
Giúp người dùng tốn ít năng lượng và thời gian hơn khi sử dụng sản phẩm.
16. Movement (Sự chuyển động)
Tạo cảm giác về sự di động cho các thiết kế tĩnh bằng cách sử dụng đường chuyển động (motion lines), hiệu ứng làm mờ (blur) hoặc thay đổi độ trong suốt (opacity).
Giúp thiết kế trở nên sống động và có "hơi thở" hơn.
17. Depth (Chiều sâu)
Biến mặt phẳng 2D thành không gian có chiều sâu bằng kỹ thuật đổ bóng (shadow), chồng lớp (layering), phối cảnh (perspective) hoặc quy tắc "gần rõ xa mờ".
18. Typography (Chữ)
Chữ mang tính trực quan và dễ hiểu rõ ràng hơn hình ảnh trong nhiều trường hợp.
Mẹo nhỏ: Nên canh trái cho đoạn văn dài, không dùng quá nhiều font, và sử dụng tỷ lệ vàng (1.618) để xác định kích thước chữ giữa tiêu đề và nội dung.
19. Composition (Bố cục)
Đây là sự tổng hợp của tất cả các nguyên tắc trên để sắp xếp nội dung.
Một bố cục tốt phải đảm bảo được mục đích thiết kế ban đầu và luôn có thể được cải thiện thông qua việc thử nghiệm nhiều phương án khác nhau.
20. Break the Rules (Phá luật)
Khi đã thực sự am hiểu và làm chủ các quy tắc, bạn có thể bước ra khỏi khuôn khổ để tạo ra phong cách riêng và những trải nghiệm đột phá. Tác giả nhấn mạnh: "Để phá luật, bạn phải thật hiểu luật".