UI element là gì? 13 UI element phổ biến trong thiết kế giao diện

UI element là những "viên gạch" tạo nên mọi ứng dụng và website. Chúng là nơi người dùng bấm, chọn, nhập liệu và di chuyển trong suốt quá trình sử dụng sản phẩm. Trong bài viết này, Capi Demy giới thiệu 13 UI elements phổ biến nhất mà bạn sẽ gặp khi thiết kế giao diện

UI element là gì?

UI element (thành phần giao diện người dùng) là những thành phần riêng lẻ mà người dùng nhìn thấy hoặc tương tác trên giao diện, như nút bấm, ô tìm kiếm, thanh điều hướng hay thông báo. Mỗi element có một chức năng riêng, và UI Designer ghép chúng lại để tạo thành một màn hình hoàn chỉnh.

Các UI element thường được chia thành 4 nhóm theo chức năng như sau:

• Điều khiển nhập liệu (input controls): Cho người dùng nhập hoặc chọn thông tin
• Điều hướng (navigation): Giúp người dùng di chuyển trong sản phẩm
• Thông tin (informational): Hiển thị trạng thái hoặc phản hồi
• Chứa nội dung (containers): Nhóm các nội dung liên quan

UI element là một phần của UI Design. Nếu bạn mới tìm hiểu, hãy đọc trước bài UI Design là gì? UI Designer làm những gì? để có bức tranh tổng quan.

13 UI element phổ biến trong thiết kế giao diện

1. Tab bar

Tab bar là thanh điều hướng giúp người dùng chuyển qua lại giữa các phần chính của ứng dụng hoặc website. Đây là cách điều hướng đơn giản và quen thuộc nhất với người dùng.

2. Breadcrumbs

Breadcrumbs là chuỗi liên kết cho biết người dùng đang ở đâu trong cấu trúc website và cho phép quay lại các cấp trên. Tên gọi này bắt nguồn từ truyện cổ tích Hansel và Gretel của anh em nhà Grimm.

3. Slider

Slider (thanh trượt) cho phép người dùng kéo để chọn một giá trị. Slider thường dùng để điều chỉnh âm lượng, độ sáng hoặc khoảng giá tiền.

4. Checkbox

Checkbox là ô vuông cho phép người dùng chọn một hoặc nhiều tùy chọn trong một danh sách.

5. Search field

Search field là ô nhập liệu có biểu tượng kính lúp, giúp người dùng tìm kiếm nội dung.

6. Pagination

Pagination (phân trang) chia nội dung thành nhiều trang và cho người dùng biết mình đang ở trang nào. Pagination thường được đặt ở cuối trang.

7. Tooltips

Tooltip là hộp thông tin bổ sung hiện ra khi người dùng di chuột vào một đối tượng.

8. Tags

Tag là nhãn từ khóa dùng để phân loại nội dung, giúp người dùng tìm nội dung liên quan nhanh hơn.

9. Notification

Notification (thông báo) thường là một chấm đỏ báo cho người dùng biết có cập nhật mới.

10. Progress bar

Progress bar (thanh tiến trình) cho người dùng biết họ đang ở bước nào trong một quy trình gồm nhiều bước.

11. Loader

Loader báo hiệu hệ thống đang xử lý ở phía sau và người dùng cần chờ trong giây lát.

12. Toast

Toast là thông báo ngắn về một thao tác vừa thực hiện và tự biến mất sau vài giây.

13. Radio button

Radio button là nút hình tròn nhỏ, dùng khi người dùng bắt buộc chọn đúng một trong hai hoặc nhiều lựa chọn.

Tuy nhiên

Biết tên và công dụng của từng UI element mới chỉ là bước đầu. Để dùng chúng đúng chỗ và kết hợp thành một giao diện hoàn chỉnh, bạn cần thực hành trên các dự án thực tế.

Khóa học UI Design tại Capi Demy sẽ giúp bạn làm được điều đó!

👉 Xem chi tiết khóa UI Design và đăng ký ngay!

Chưa biết phải bắt đầu từ đâu? Xem bài viết Bắt đầu học UI/UX từ đâu: lộ trình cho người mới học hoặc So sánh các khóa học của Capi Demy.

Kết luận

Thiết kế UI là một lĩnh vực rộng và UI Designer cần học liên tục để dùng đúng từng UI element. Mỗi element có mục đích riêng; dùng sai chỗ sẽ khiến giao diện trở nên rối và khó dùng. Hãy thử áp dụng từng element vào thiết kế của bạn nhé!

Muốn luyện cách kết hợp các element thành một màn hình hoàn chỉnh, bạn có thể đọc tiếp bài Học thiết kế giao diện cho người mới bắt đầu và Nguyên tắc thiết kế button UI. 

Nếu còn câu hỏi, đừng ngần ngại liên hệ đội ngũ Capi Demy!

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

Fanpage: Capi Demy

Email: capidemy@gmail.com

Website: Capidemy.com

Địa chỉ: Tầng 6, số 35 Tô Vĩnh Diện, Khương Đình, Hà Nội