Quy tắc cơ bản khi sử dụng icon (biểu tượng) trong thiết kế giao diện người dùng

Quy-tac-su-dung-icon-trong-ui-design.

Biểu tượng là những ký tự tượng hình nhỏ bổ sung cả hình thức và chức năng cho thiết kế giao diện người dùng của bạn khi được sử dụng đúng cách. Chúng giúp tiết kiệm không gian màn hình, tăng tốc độ tương tác của người dùng bằng cách dễ dàng nhận ra ngay lập tức và chúng cũng có thể thêm phong cách và sở thích trực quan cho các thiết kế giao diện người dùng của bạn.

Việc sử dụng các biểu tượng không cần phải phức tạp, nhưng để sử dụng đúng cách cũng không hề dễ dàng. Các biểu tượng sẽ ảnh hưởng trực tiếp đến khả năng khám phá tính năng và cải thiện trải nghiệm tương tác của người dùng, các biểu tượng được sắp xếp lộn xộn hay thiết kế khó hiểu có thể tác động tiêu cực đến trải nghiệm người dùng đối với sản phẩm của bạn.

Trong bài viết hôm nay, chúng tôi muốn trình bày những quy tắc cơ bản khi sử dụng icon trong thiết kế giao diện người dùng.

Đơn giản và dễ nhận biết

Bạn không cần phải phức tạp hóa các thiết kế biểu tượng của bạn, giữ chúng càng đơn giản càng tốt. Các biểu tượng tốt nhất là các hình dạng và chữ tượng hình đơn giản khi mà người dùng nhìn vào có thể hiểu được ngay.

Hình ảnh được sử dụng cho các biểu tượng phải được gắn trực tiếp với chức năng của biểu tượng, chẳng hạn như biểu tượng ngôi nhà đại diện cho trang chủ, biểu tượng kính lúp đại diện cho tìm kiếm,...

Đừng để người dùng băn khoăn về ý nghĩa của một biểu tượng, vì điều đó sẽ gây hại cho trải nghiệm người dùng nói chung.

Đảm bảo kích thước cho biểu tượng của bạn

Các biểu tượng thường được sử dụng ở kích thước nhỏ, nhưng đôi khi bạn có thể sẽ gặp trường hợp mà bạn cần sử dụng các phiên bản lớn hơn hay nhỏ hơn. Do đó, hãy đảm bảo rằng các biểu tượng của bạn trong đẹp bất kể chúng được hiển thị ở kích thước nào.

Ví dụ, nếu bạn thiết kế cho máy tính để bàn, bạn có thể sử dụng 24 x 24 pixel cho các biểu tượng thông thường, 16x16 pixel cho các biểu tượng nhỏ và 32 x 32 pixel cho các biểu tượng lớn. Khi bạn thiết kế một ứng dụng dành cho thiết bị di động, kích thước của các biểu tượng của bạn phải được chọn dựa trên kích thước được đề xuất của mục tiêu cảm ứng. Vì người dùng tương tác với màn hình cảm ứng bằng ngón tay cái của họ, nên các biểu tượng của bạn phải thân thiện với ngón tay cái.

Tính nhất quán

Tính nhất quán cải thiện khả năng hiểu giao diện của người dùng. Khi sử dụng một bộ biểu tượng, tất cả các biểu tượng phải đồng nhất về kiểu dáng và kích thước. Sử dụng các biểu tượng không có phong cách nhất quán sẽ gây nhầm lẫn cho người dùng và làm cho giao diện của bạn trông lộn xộn.

Tính nhất quán có nghĩa là sử dụng cùng một kiểu đồ họa cho toàn bộ biểu tượng của bạn, các thuộc tính như hình dạng, độ dày nét vẽ và phối cảnh phải duy trì nhất quán cho các biểu tượng.

Không phải mọi thiết kế giao diện người dùng đều cần bao gồm các biểu tượng, nhưng khi được sử dụng đúng cách, chúng có thể cải thiện trải nghiệm người dùng đồng thời mang lại sức hấp dẫn thẩm mỹ bổ sung cho trang web. Hy vọng những quy tắc cơ bản khi sử dụng icon trên sẽ giúp bạn thực hiện đúng.

Đọc thêm bài viết: Tải xuống icon miễn phí: Top 5 địa chỉ tốt nhất

Xem thêm tại website Anothemes hoặc page Facebook Anothemes

Có thể bạn sẽ thích

website-header
05 July 2022

Website Header là gì? 5 mẹo để thiết kế một header trang web 2022

Header là điều đầu tiên mà khách truy cập nhìn thấy khi họ truy cập trang web của bạn và nó xuất hiện trên mọi trang của trang web. Một header trang web tốt cân bằng giữa…

website-footer
30 June 2022

Website Footer là gì? Những lưu ý khi thiết kế website footer

Footer (Chân trang) là một trong những khu vực trên trang web mà nhiều người bỏ qua thay vì tối ưu hóa nội dung của tiêu đề hoặc điều hướng của họ, nhưng đây là một sai…

thiet-ke-web-du-dich
28 June 2022

Thiết kế website du lịch: 8 mẹo để trang web của bạn trông tuyệt vời năm 2022

Trong Báo cáo Các vấn đề và Tác động Kinh tế Toàn cầu năm 2017, hơn 80% việc lập kế hoạch du lịch được thực hiện trực tuyến và 33% người dùng tham khảo các blog du…