Graphic Fundamental

Trước đó UI từng được gọi với cái tên GUI (graphic user interface). UI là giao diện để giao tiếp với user & khi dính đến phần nhìn thì sẽ cần nói đến graphic & visual, nên thấy có chữ graphic trong đó cũng khá đúng.

Kiến thức graphic thì rất rộng (nó cũng là một nghề hẳn hoi mà), nên mình chỉ giới thiệu sơ các khái niệm mình nghĩ là quan trọng nhất cho công việc UI, mọi người có thể tham khảo để tìm hiểu thêm trên mạng nhé.

📌

Design là nghệ thuật đặt để có chủ đích.

Gestalt

Gestalt là một lý thuyết tâm lý học nhấn mạnh rằng con người nhận thức tổng thể trước khi nhận thức các phần riêng lẻ. Trong thiết kế, Gestalt được dùng để giải thích cách người dùng nhóm các yếu tố thị giác và tạo ra ý nghĩa từ chúng. Ví dụ:

Gần gũi

(Proximity): Các yếu tố gần nhau thường được xem như một nhóm.

Tương đồng

(Similarity): Các yếu tố giống nhau về hình dạng, màu sắc sẽ được liên kết với nhau.

Liên tục

(Continuity): Mắt sẽ đi theo đường liên tục hoặc đường cong hơn là các đoạn rời rạc.

Đóng kín

(Closure): Não tự điền vào các khoảng trống để nhận diện một hình dạng hoàn chỉnh.

Hình và nền

(Figure/Ground): Phân biệt yếu tố chính (figure) với nền (background).

Visual weight

Visual weight là mức độ mà một yếu tố trên giao diện hoặc thiết kế thu hút sự chú ý của người nhìn. Một thiết kế có Visual weight tốt sẽ giúp điều hướng ánh nhìn người dùng qua nội dung một cách mượt mà và theo ý đồ của thiết kế. Ví dụ:

Kích thước

(Size): Yếu tố lớn hơn thường có trọng lượng thị giác cao hơn.

Màu sắc

(Color): Màu sắc đậm, sáng, hoặc tương phản mạnh thu hút mắt hơn.

Độ đậm nhạt

(Contrast): Yếu tố tương phản với nền hoặc các yếu tố xung quanh sẽ nổi bật hơn.

Hình dạng

(Shape): Các hình dạng bất thường hoặc khác biệt có trọng lượng thị giác cao hơn so với các hình cơ bản.

Vị trí

(Position): Yếu tố nằm ở trung tâm hoặc khu vực “nóng” của thiết kế (như góc nhìn đầu tiên) sẽ có nhiều trọng lượng thị giác hơn. Hoặc độ xa gần, rõ mờ cũng được xem như vị trí trong không gian 3 chiều (z-index), nó cũng giúp quy hoạch sự chú ý của người xem.

Chi tiết

(Detail): Yếu tố nhiều chi tiết phức tạp thường thu hút sự chú ý hơn.

Balance & contrast

Hài hoà & tương phản là kim chỉ nam cho mọi thiết kế, nó như một bản nhạc với đầy đủ các nốt thăng trầm.

Balance là sự phân bổ đồng đều của các yếu tố thị giác trong một thiết kế để tạo cảm giác ổn định và hài hòa, dễ chịu cho người xem.

Contrast là sự khác biệt rõ rệt giữa các yếu tố để làm nổi bật hoặc phân biệt chúng. Contrast làm nổi bật thông tin quan trọng, tạo cấu trúc thị giác, và hướng ánh nhìn của người dùng. Để nghiên cứu thêm bạn có thể search thêm về quy tắc 60-30-10.

Rhythm

Rhythm trong thiết kế là sự lặp lại hoặc sắp xếp có tổ chức của các yếu tố thị giác để tạo ra sự chuyển động hoặc dòng chảy tự nhiên, hướng dẫn mắt người xem qua bố cục. Nó giúp thiết kế trở nên mạch lạc và thu hút hơn.

Rhythm có thể đâu đó liên quan đến tính consistent, một đặc điểm rất quan trọng trong UI, consistency này tồn tại ở nhiều hình thức khác nhau: style guide, spacing, grid, size, radius,…

Color psychology

Color psychology là nghiên cứu về cách màu sắc ảnh hưởng đến cảm xúc, hành vi và nhận thức của con người. Ví dụ:

Hue

(sắc độ): mỗi màu mang lại một cảm xúc & ý nghĩa riêng.

Saturation

(độ bão hoà): độ tinh khiết của màu, từ xám xịt đến rực rỡ cũng mang lại năng lượng khác.

Lightness

(độ sáng): tương tự sắc độ từ tối sang sáng cũng có trường năng lượng riêng.

Ngoài ra mình có thể tìm hiểu thêm về các cách phối màu như: phối màu đơn sắc, tương tự, bổ sung, tam giác, tứ giác và trung tính. Mỗi cách phối mang lại cảm giác khác nhau: từ hài hòa, cân bằng (như phối màu tương tự) đến tương phản mạnh mẽ, nổi bật (như phối màu bổ sung).

Typography

Typography trong thiết kế là nghệ thuật và kỹ thuật sắp xếp chữ viết để truyền tải thông điệp một cách hiệu quả, thẩm mỹ và dễ đọc. Gồm các thành phần chính: