Giải mã những thuật ngữ cơ bản trong UI UX (phần 2)

Và hôm nay, để tiếp tục chuỗi bài viết về UI-UX cơ bản, chúng ta sẽ cùng nhau khám phá thêm 5 thuật ngữ khác về thiết kế giao diện người dùng nhé!

Và hôm nay, để tiếp tục chuỗi bài viết về UI-UX cơ bản, chúng ta sẽ cùng nhau khám phá thêm 5 thuật ngữ khác về thiết kế giao diện người dùng nhé!


Bạn có thể xem phần 1 tại đây.

1. CARD

Giải mã những thuật ngữ cơ bản trong UI UX

Card (Thẻ) là một mảnh ghép không thể thiếu trong UI Design, là khung chứa các phần tử, thông tin có liên quan đến nhau.

Card có 4 đặc điểm chính đó là:

- Được sử dụng để nhóm các thông tin lại với nhau

- Trình bày nội dung tóm tắt và liên kết đến các chi tiết bổ sung khác

- Card trên UI design có hình ảnh giống với một chiếc thẻ thật ngoài đời

- Cho phép bố trí phần tử một cách linh hoạt

 Giải mã những thuật ngữ cơ bản trong UI UX


2. COLOR CONTRAST

Giải mã những thuật ngữ cơ bản trong UI UX

Color contrast - sự khác biệt giữa hai màu. Đen trắng là bộ đôi tạo độ tương phản cao nhất. Màu sắc có thể tương phản về hue, value và saturation. Chúng ta thường muốn có độ tương phản cao giữa văn bản và màu nền của nó. Nhưng sự tương phản quá cao giữa các yếu tố thiết kế có thể sẽ gây khó hiểu và khá lộn xộn. Sử dụng hiệu quả độ tương phản là thành phần thiết yếu giúp mọi người xem có thể tiếp cận được nội dung mình muốn truyền tải.

Giải mã những thuật ngữ cơ bản trong UI UX


3. COLOR WHEEL

Giải mã những thuật ngữ cơ bản trong UI UX

Color Wheel cho thấy mối quan hệ giữa các màu sắc primary, secondary và tertiary. Các designer sử dụng các màu đỏ, vàng và xanh được sắp xếp tại ba điểm cách đều nhau xung quanh color wheel của họ.

Màu sắc trong UI bao gồm:

- Màu sắc chính

- Màu điều hướng

- Màu tạo điểm nhấn

- Màu tạo độ trung hoà

Trong UI màu sắc giúp thúc đẩy hành động, hay gợi ý một ý tưởng nào đó.

Giải mã những thuật ngữ cơ bản trong UI UX

Lưu ý: Không nên sử dụng màu đen tuyền 100% vì trong tự nhiên các vật thể luôn phản chiếu ánh sáng. Nên tránh màu đen tuyền #00000.

Ví dụ: Màu đen nhất trong bức ảnh không phải là #00000, mà là #0A0A10


4. GRID

Giải mã những thuật ngữ cơ bản trong UI UX

Grid (Lưới)tập hợp các đường kẻ dọc/ ngang chia Layout thành nhiều hàng (Row) và nhiều cột (Layout).

Grid tạo nên trật tự và tính nhất quán trong UI design; cung cấp một cấu trúc chung và tính linh hoạt để bố trí nội dung một cách hợp lý nhất.

Giải mã những thuật ngữ cơ bản trong UI UX


5. MODAL

Giải mã những thuật ngữ cơ bản trong UI UX

Modal là khung thông báo cho người dùng về một tác vụ và có thể chứa thông tin quan trọng, yêu cầu quyết định hoặc liên quan đến nhiều tác vụ.

Modal thường nằm trên đầu trang, có một lớp bán trong suốt (semi-transparent) phía sau để tách chúng khỏi trang chính. Chúng vô hiệu hóa tương tác với phần còn lại của trang và buộc người dùng phải tương tác đầu tiên với cửa sổ phương thức. Modal cho phép người dùng ở trong context của giao diện hiện tại trong khi vẫn có thể thực hiện các hành động liên quan mà không làm gián đoạn quy trình làm việc trên trang chính.

Giải mã những thuật ngữ cơ bản trong UI UX


TẠM KẾT

Trên đây là những thuật ngữ cơ bản nhất khi nhắc đến UI UX Design. Và nếu bạn đang muốn tìm hiểu về UI UX mà chưa biết bắt đầu từ đâu, hãy tham khảo ngay khóa học UI cho người mới bắt đầu của colorME bạn nhé!

Inspiration of the day

Everything is designed. Few things are designed well

Brian Reed, front-end developer and musician