Knowlede
Last updated
Was this helpful?
Last updated
Was this helpful?
Trong bối cảnh công nghệ, Icon (biểu tượng) là một sự biểu diễn đồ họa nhỏ, đơn giản của một chương trình, chức năng hoặc tệp được sử dụng để khởi chạy hoặc truy cập nó trên máy tính hoặc thiết bị di động. Các biểu tượng có thể được sử dụng để truyền đạt thông tin nhanh chóng và hiệu quả, đồng thời chúng thường được sử dụng làm công cụ hỗ trợ trực quan để giúp người dùng điều hướng và tương tác với các giao diện kỹ thuật số.
Các biểu tượng đóng một vai trò quan trọng trong giao diện người dùng (UI) bằng cách cung cấp các tín hiệu trực quan và giúp người dùng nhanh chóng xác định cũng như hiểu các chức năng và tính năng khác nhau. Các biểu tượng có thể được sử dụng trong các thành phần giao diện người dùng, chẳng hạn như các button, menu và toolbars.
Biểu tưởng được thiết kế đơn giản hóa dựa trên sự liên đới với nội dung mà chúng thể hiện, thông qua phép ẩn dụ, hoán dụ hoặc chuyển nghĩa.
Symbols và Pictograms cũng là các dạng khác của icons.
Symbols là các biểu tượng, ký hiệu đã được quy ước theo các tiêu chuẩn hoặc quy định cụ thể. Ví dụ như các biểu tượng toán học, âm nhạc, tiền tệ…
Ví dụ: ∞ ∫ ± × ~ ♩ ♪ ♫ $ ₫ € ₭ £
Pictograms thường dùng minh họa một khái niệm, cụm từ, một câu… Do đó nó có phần phức tạp, nhiều đường nét và hình tượng hơn.
Ví dụ: các biển báo giao thông sử dụng pictogram để minh họa phương tiện
Icons đại diện cho một tính năng, hành động hoặc một thuộc tính nào đó. Nhờ đó, người dùng có thể dễ dàng nhận biết và sử dụng các tính năng một cách nhanh chóng và thuận tiện hơn.
Ví dụ, thanh text format giúp người dùng nhanh chóng nhận diện chức năng cần thực hiện.
Icons giúp tối ưu không gian thiết kế bằng cách thay thế các văn bản mô tả bằng hình ảnh hoặc biểu tượng trực quan nhưng vẫn đảm bảo nội dung thể hiện
Icons được thiết kế với độ chi tiết nhỏ và hình dáng đẹp mắt, giúp cho giao diện trở nên thẩm mỹ hơn và thu hút sự chú ý của người dùng.
Icons có thể được thiết kế chuyên biệt cho 1 thương hiệu, với phong cách và đường nét phù hợp với lĩnh vực, sản phẩm. Từ đó tăng tính nhận diện, thu hút và gợi nhớ cho thương hiệu.
Icons được sử dụng trong các nút chức năng hoặc các liên kết trong giao diện, giúp cho người dùng có thể tương tác với giao diện một cách nhanh chóng và thuận tiện hơn.
Icons có thể được sử dụng để tăng tính truyền cảm, thông qua màu sắc và hình dáng nó thể hiện. Ví dụ một biểu tượng cảnh báo đi kèm văn bản sẽ khiến user phải thực sự cảnh giác hơn
Cảnh báo: Chó dữ!
Tương tự văn bản, Icons cũng có nhiều kích thước khác nhau như: 16px, 20px, 24px, 32xpx,...
Size = Trim Area = Live Area + Padding
Điều này dẫn đến trường hợp một số icons có Size (Trim area) giống nhau nhưng live area và padding khác nhau khiến cho phần “hình ảnh” trông không bằng nhau
Live Area: (khu vực màu tím) có kích thước 20dp x 20dp, Padding là 2dp => Trim area là 24dp.
Luôn đặt icon nằm trong Live area và nhất quán padding để tạo sự cân đối giữa các icon
Target area: (phạm vi tương tác) cần đảm bảo phạm vi tương tác nhất định cho icon, mặc dù có thể hiển thị chúng ở kích thước nhỏ hơn
Icon có size 24 đặt trong Target area 48
Icon có size 20 đặt trong Target area 40
Theo nhiều nguồn khác nhau, target area tối thiểu dao động từ 40px-48px cho mobile device, 24dp cho Desktop device
Weight là độ dày của icon. Độ dày của icon cần phù hợp với kích thước của nó. Nếu icon quá mỏng hoặc quá dày so với kích thước của nó, thì nó có thể làm cho người dùng khó nhận ra và gây ra sự lộn xộn trên giao diện.
Tương tự Weight, Grade cũng ảnh hưởng trọng lượng nét vẽ (độ dày) của ký hiệu, nhưng cấp độ có tác động nhỏ hơn đến kích thước của ký hiệu. Nó giúp tạo sự hài hòa và cân đối với các font chữ nếu chúng được điều chỉnh Grade (có sẵn trong một số phông chữ). Ví dụ: nếu phông chữ văn bản có giá trị grade -25, thì icons có thể khớp phông chữ đó với giá trị phù hợp là -25.
Clarifying icon: dùng để minh họa, giải nghĩa
Decorative icon: dùng để trang trí
Outline: Chỉ dùng nét, đường viền
Solid (Fill): Icon phủ màu
3D: Icon 3D
Rounded: Bo tròn viền
Sharp: Vuông vức, sắc nhọn
Sử dụng những biểu tượng phổ biến và thường gặp tạo cảm giác thân thuộc, giúp người dùng dễ dàng nhận biết và hiểu rõ tính năng của chúng. Ví dụ, biểu tượng "điện thoại" để biểu thị cho tính năng gọi điện thoại, “ngôi nhà” để biểu thị cho hành động đi đến trang chủ.
Sử dụng icons cần đảm bảo tính nhất quán về size, weight, styles… để đảm báo trải nghiệm xuyên suốt, tính nhất quán của thiết kế. Các icons tương đồng cũng giúp người dùng dễ dàng làm quen và tương tác nhanh chóng với giao diện hơn. Icons sử dụng ở những khu vực, chức năng, cấp độ khác nhau có thể style khác nhau để phù hợp với mục đích sử dụng.
Do đó, việc sử dụng cùng 1 icons pack phù hợp là tối quan trọng.
Thông thường, nhãn văn bản có phông chữ nhỏ ngay bên dưới biểu tượng. Việc bao gồm nhãn văn bản sẽ đảm bảo rằng người dùng sử dụng trình đọc màn hình hoặc người sử dụng công nghệ mới có thể nhận dạng được biểu tượng. Ngoài ra, nhãn văn bản có thể mô tả rõ ràng (bằng một từ!) ý nghĩa của biểu tượng, chẳng hạn như viết nhãn "Tìm kiếm" bên dưới biểu tượng kính lúp.
Mọi thứ, bao gồm cả biểu tượng của bạn, phải phản ánh hình ảnh bạn đã tạo cho thương hiệu của mình. Điều đó có nghĩa là mọi thứ trên ứng dụng của bạn cần phải có cùng cách phối màu, cùng phông chữ và cùng kiểu dáng.
Biểu tượng phải được sử dụng theo đúng ngữ cảnh của nó, tránh gây nhầm lẫn. Ví dụ, biểu tượng "hộp thư" được sử dụng để biểu thị cho hộp thư đến hoặc hộp thư đi sẽ dễ gây nhầm lẫn.
