14 UI element phổ biến bạn nên biết trong thiết kế giao diện

‍

User interface (UI) element hay còn được gọi là các phần tử giao diện người dùng được sử dụng để xây dựng ứng dụng và website. Việc sử dụng các element trong UI Design cung cấp cho người dùng khả năng tương tác vào giao diện, tạo ra các điểm tiếp xúc cho người dùng khi họ điều hướng xung quanh. Theo chân Capi để khám phá các UI element được sử dụng trong UI Design nhé!

1. Tab bar:

Sử dụng Tab bar là cách đơn giản và hiệu quả nhất để hiển thị những màn nội dung khác nhau trên ứng dụng / website. Tab bar đóng vai trò điều hướng cho người dùng khi truy cập một ứng dụng / website. Tab bar cho phép người dùng di chuyển qua lại giữa các phần chính của ứng dụng / website.

2. Breadcrumbs:

Breadcrumbs là tập hợp các liên kết giúp người dùng xác định vị trí hiện tại của mình trên cấu trúc website. Breadcrumbs thường nằm ở đầu trang web, cho phép người dùng xem di chuyển đến các trang tiếp theo bằng cách nhấp chuột vào. Thuật ngữ này gắn Hansel và Gretel trong truyện cổ Grimm, 2 nhân vật đã rải những mẩu bánh mì vụn (breadcrumbs) để tìm đường về nhà.

3. Slider:

Slider (thanh dạnh trượt) là UI element phổ biến trong thiết kế giao diện người dùng. Người dùng có thể kéo tiêu điểm đến tùy chọn mà họ mong muốn. Bằng cách kéo thanh trượt, người dùng có thể điều chỉnh dần dần các giá trị: âm lượng, độ sáng, giá tiền ...

4. Checkbox:

Trong UI Design, checkbox (hộp kiểm) xuất hiện với ô vuông nhỏ mà người dùng có thể chọn hoặc bỏ chọn, từ đó người dùng có thể chọn để hoàn thành thao tác. Checkbox cho phép người dùng chọn một hoặc nhiều tuỳ chọn từ một danh sách, được đánh dấu bằng một dấu tích nhỏ.

5. Search field:

Search field (ô tìm kiếm) là element phổ biến trong UI Design, được hiển thị dưới dạng nhập dữ liệu với một hình kính lúp nhỏ bên trong cho phép người dùng nhập thông tin để tìm kiếm trên ứng dụng / website.

6. Pagination:

Pagination (phân trang) là quá trình chia các tuyến nội dung ở ứng dụng / website, thường được tìm thấy ở cuối trang, cho phép người dùng biết họ đang ở trang nào và có thể nhấp chuột để chuyển trang khác. Sử dụng pagination để tạo kết nối giữa những trang riêng biệt, có nội dung tương tự nhau.

7. Tooltips:

Tooltips (chú giải công cụ) là một thành phần hiển thị thêm thông tin, chú thích khi người dùng hover chuột vào một đối tượng nào đó trong trang web. 

8. Tags:

Tags (thẻ tag) là element giúp đánh dấu nhãn và phân loại nội dung. Các tag thường là những từ khoá liên quan giúp tìm và hiển thị phần nội dung tương ứng nhanh hơn.

9. Notification:

Notification thường được thiết kế dưới dạng chấm đỏ, hiện thị nội dung mới cập nhật cho người dùng.

10. Progress bar:

Progress bar (thanh tiến trình) cho biết vị trí hoặc giai đoạn của người dùng khi trải qua một loạt bước trong một chu trình. 

11. Loader:

Loader được thiết kế để thông báo cho người dùng biết hệ thống đang hoàn thành một quá trình ở chế độ nền và người dùng nên đợi.

12. Toast:

Toast là một đoạn tin nhỏ hiện thị thông báo về một quá trình, sẽ tự biến mất sau vài giây.

13. Tabs:

Tabs cho phép người dùng truy cập vùng khác của website hoặc một phần khác của một trang lẻ.

14. Radio button:

Radio button gồm các hình tròn nhỏ, được sử dụng khi có 2 (hoặc nhiều) lựa chọn mà người dùng bắt buộc chọn 1 cái. 

Tổng kết

Thiết kế giao diện người dùng là một lĩnh vực rộng, đòi hỏi các UI Designer liên tục trau dồi kiến thức để hiểu rõ hơn về các phương pháp thiết kế, cách sử dụng UI element đúng trong các trường hợp. Mỗi yếu tố đều có một công dụng và vai trò khác nhau và nếu bạn không vận dụng đúng trong mỗi trường hợp, thiết kế của bạn sẽ trở thành một "đống hỗn lộn". 

Nếu bạn có câu hỏi nào đừng ngần ngại kết nối với đội ngũ Capi Demy nhé, chúng mình luôn ở đây và làm điểm tựa vững chắc cho các bạn!

Thông tin liên hệ tư vấn: 

Fanpage: Capi Demy

Email: capidemy@gmail.com

Website:

Capidemy.vn

Capidemy.com

Địa chỉ:

Cơ sở 1 HN: Tầng 6, số 35 Tô Vĩnh Diện, Khương Trung, Thanh Xuân, Hà Nội

Cơ sở 2 HN: Tầng 2 số 2 ngách 28, ngõ 93, Hoàng Văn Thái, Thanh Xuân, Hà Nội.