Vấn đề với icon mặc định
Mọi plugin điều hướng đều đi kèm cùng bộ icon. Ngôi nhà cho Trang chủ. Kính lúp cho Tìm kiếm. Giỏ hàng cho Giỏ hàng. Bóng người cho Tài khoản. Những biểu tượng này đã được dùng trong giao diện kỹ thuật số quá lâu đến mức trở nên phổ quát — và phổ quát đến mức nhạt nhẽo. Chúng truyền đạt chức năng tức thì, điều đó có giá trị, nhưng không nói lên điều gì về thương hiệu sở hữu chúng — một cơ hội bị bỏ lỡ.
Hãy mở một chục cửa hàng Shopify trên điện thoại ngay bây giờ. Các Tab Bar sẽ trông đáng ngạc nhiên giống nhau. Cùng hình dạng icon. Cùng độ dày nét. Thường là cùng một thư viện — Material Icons, Feather, hoặc các biến thể Font Awesome bo tròn. Điều hướng hoạt động tốt, nhưng nó vô hình như một yếu tố thương hiệu. Mỗi cửa hàng sử dụng icon mặc định của thư viện đều đang bỏ qua cơ hội để điều hướng của họ cảm giác như của riêng họ.
Đây chính là vấn đề icon mặc định: nhận diện phổ quát nhưng không có sự phân biệt. Với nhiều cửa hàng, sự đánh đổi đó hoàn toàn chấp nhận được. Với các cửa hàng định hướng thương hiệu nơi bản sắc thương hiệu là một phần của đề xuất mua hàng, đây là sự thất bại thương hiệu âm thầm nhưng dai dẳng diễn ra trong mỗi phiên di động.
Khi nào icon tùy chỉnh có ý nghĩa
Quyết định đầu tư vào icon điều hướng tùy chỉnh là quyết định đầu tư thương hiệu, không phải quyết định kỹ thuật. Lợi nhuận phụ thuộc vào việc bản sắc thương hiệu của bạn có thực sự là động lực mua hàng hay không.
Các cửa hàng định hướng thương hiệu nơi bản sắc thúc đẩy doanh số — nhãn thời trang, thương hiệu làm đẹp, sản phẩm phong cách sống và sức khỏe, hàng cao cấp — được hưởng lợi có ý nghĩa từ icon tùy chỉnh. Khách hàng của họ đã chọn họ một phần vì cách thương hiệu trông và cảm nhận. Icon điều hướng là một phần của ngoại hình và cảm nhận đó. Mỗi chi tiết củng cố thẩm mỹ thương hiệu đều giúp khách hàng tin tưởng hơn rằng họ đang ở đúng nơi.
Các cửa hàng hàng hóa hoặc hàng tổng hợp nơi quyết định mua hàng được thúc đẩy bởi giá cả, tính sẵn có, hoặc tính tiện ích, ít được hưởng lợi hơn từ đầu tư icon tùy chỉnh. Khi thương hiệu là cơ chế chứ không phải bản sắc, icon tiêu chuẩn phục vụ hoàn toàn tốt. Một cửa hàng bán phụ tùng thay thế, hàng tiêu dùng số lượng lớn, hoặc hàng hóa cạnh tranh giá cả, hưởng lợi nhiều hơn từ điều hướng rõ ràng, nhanh chóng hơn là điều hướng độc đáo.
Câu hỏi thành thật cần đặt ra là: nếu một khách hàng ghé thăm cửa hàng của bạn lần đầu qua một quảng cáo mạng xã hội và thấy Tab Bar của bạn trước khi thấy sản phẩm, liệu các icon có củng cố ấn tượng thương hiệu mà quảng cáo tạo ra không? Với các thương hiệu phong cách sống và thời trang, icon tùy chỉnh có thể trả lời có. Với các cửa hàng hàng hóa, câu hỏi hầu như không quan trọng.
"Chúng tôi bán sản phẩm chăm sóc da cao cấp. Mỗi điểm tiếp xúc đều được cân nhắc — chai lọ, bao bì, trải nghiệm mở hộp. Khi chúng tôi thiết lập Tab Bar với icon bo tròn mặc định từ thư viện miễn phí, nó đã phủ nhận tất cả những điều đó. Trông giống như ứng dụng của hiệu thuốc. Icon tùy chỉnh chỉ mất một buổi chiều làm việc của nhà thiết kế, và giờ đây điều hướng cảm giác như được xây dựng cho thương hiệu. Đó là điều nhỏ nhất với lợi ích thương hiệu lớn nhất."
— Khách hàng Navi+, thương hiệu chăm sóc da cao cấp
Thông điệp mà icon tùy chỉnh truyền tải
Khách truy cập không phân tích icon điều hướng một cách có ý thức. Nhưng họ ghi nhận chúng. Trọng lượng thị giác, độ hoàn thiện, và sự độc đáo của các icon trong Tab Bar của bạn đóng góp vào đánh giá chất lượng tiềm thức diễn ra trong vài giây đầu tiên của một phiên.
Các icon độc đáo báo hiệu sự đầu tư thiết kế. Một thương hiệu đã đầu tư vào icon điều hướng tùy chỉnh đã suy nghĩ về từng chi tiết — tín hiệu tương tự được gửi đi bởi bao bì tùy chỉnh, giấy lụa tùy chỉnh, trải nghiệm mở hộp được cân nhắc kỹ lưỡng. Những khách truy cập đến từ một điểm tiếp xúc có ý thức thương hiệu (một chiến dịch Instagram được đạo diễn nghệ thuật đẹp, một video sản phẩm chất lượng cao) đến với kỳ vọng về chất lượng hình ảnh kéo dài đến mọi yếu tố giao diện họ gặp phải. Icon tùy chỉnh đáp ứng kỳ vọng đó. Icon thư viện chung thì âm thầm làm suy yếu nó.
Tín hiệu không phải là "icon của chúng tôi đẹp." Tín hiệu là "thương hiệu này quan tâm đến từng chi tiết." Ấn tượng bậc hai đó là thứ xây dựng sự tin tưởng trước khi mua hàng, đặc biệt trong các danh mục nơi nhận thức thương hiệu là một phần có ý nghĩa của giá trị sản phẩm.
Ba cấp độ tùy chỉnh icon
Icon tùy chỉnh tồn tại trên một phổ từ tinh chỉnh nhỏ đến hoàn toàn nguyên bản. Hiểu ba cấp độ giúp bạn điều chỉnh đầu tư phù hợp với nhu cầu thương hiệu.
Cấp độ 1 — Điều chỉnh phong cách. Lấy hình dạng icon tiêu chuẩn và điều chỉnh chúng để phù hợp với thẩm mỹ thương hiệu của bạn. Giảm bán kính góc để phù hợp với thương hiệu sắc nét, góc cạnh. Tăng độ dày nét để phù hợp với hệ thống thị giác đậm, quyết đoán. Thêm hoặc bớt chi tiết trang trí để phù hợp với mức độ trang sức của thương hiệu. Các icon vẫn được nhận ra là biểu tượng quy ước (nhà, giỏ hàng, người) nhưng đã được tinh chỉnh theo ngôn ngữ thị giác của bạn. Đây là đầu tư thấp nhất với sự cải thiện nhất quán thị giác có ý nghĩa.
Cấp độ 2 — Thay thế biểu tượng. Thay thế icon chung bằng biểu tượng đặc trưng của thương hiệu vẫn truyền đạt cùng ý nghĩa điều hướng. Một thương hiệu thời trang có thể dùng móc áo nơi các thương hiệu khác dùng lưới cho "Mua sắm." Một thương hiệu đồ gia dụng có thể dùng vòm kiến trúc nơi những thương hiệu khác dùng ngôi nhà cho "Trang chủ." Icon vẫn truyền đạt chức năng điều hướng, nhưng biểu tượng được chọn đặc trưng cho thế giới của thương hiệu. Điều này đòi hỏi phán đoán thiết kế nhiều hơn — biểu tượng phải truyền đạt rõ ràng ý nghĩa, không chỉ gần với thương hiệu — nhưng nó tạo ra sự khác biệt thực sự.
Cấp độ 3 — Minh họa hoàn toàn tùy chỉnh. Các icon độc đáo được vẽ từ đầu, không tồn tại ở bất kỳ thư viện icon nào khác. Không được điều chỉnh, không được thay thế — được thiết kế đặc biệt cho thương hiệu này, theo phong cách này, cho ngữ cảnh điều hướng này. Các icon mang DNA thị giác của thương hiệu trong mọi quyết định đường nét. Đây là đầu tư cao nhất và tạo ra sự khác biệt thương hiệu mạnh mẽ nhất, phù hợp với các thương hiệu xa xỉ hoặc những thương hiệu nơi bản sắc thương hiệu là lợi thế cạnh tranh chính.
Ràng buộc về khả năng đọc
Ràng buộc quan trọng nhất đối với tùy chỉnh icon là: icon vẫn phải truyền đạt chức năng của nó tức thì. Một icon giỏ hàng quá trừu tượng sẽ thất bại bất kể nó đẹp đến đâu. Sự rõ ràng là không thể thương lượng.
Lý do các icon tiêu chuẩn trở thành tiêu chuẩn là vì chúng đã được nhận diện phổ quát qua nhiều thập kỷ sử dụng. Bất kỳ sự rời bỏ nào khỏi những quy ước đó đòi hỏi icon phải thực hiện công việc bù đắp — nó phải đủ độc đáo để thú vị nhưng đủ quy ước để được hiểu. Sự rõ ràng đến trước. Sự độc đáo là thành tích thứ hai được xếp lên trên sự rõ ràng, không phải là sự thay thế cho nó.
Hàm ý thực tế: di chuyển ra ngoài từ biểu tượng được nhận diện, không phải ra xa khỏi nó. Một icon giỏ hàng trừu tượng thành hình kim cương tối giản có thể trông tinh tế nhưng sẽ gây nhầm lẫn cho khách truy cập. Một icon giỏ hàng được vẽ với các đường mỏng đặc trưng của thương hiệu và hình học góc cạnh vẫn truyền đạt "giỏ hàng" — chỉ là nó truyền đạt theo giọng của thương hiệu.
Đầu tư so với lợi nhuận
Một bộ icon tùy chỉnh cho năm điểm đến Tab Bar thường tốn $300–800 từ một nhà thiết kế icon hoặc UI lành nghề — nhiều hơn với minh họa hoàn toàn tùy chỉnh ở cấp độ cao cấp, ít hơn với công việc điều chỉnh phong cách. Câu hỏi là liệu trường hợp sử dụng thương hiệu có biện minh cho khoản đầu tư đó so với lựa chọn miễn phí của thư viện icon tiêu chuẩn không.
Với các cửa hàng định hướng thương hiệu nơi bản sắc thúc đẩy quyết định mua hàng, phép tính ROI đơn giản: các icon xuất hiện trong mỗi phiên di động, với mỗi khách truy cập, trong suốt vòng đời của cửa hàng. Khoản đầu tư một lần $500 phân bổ nhanh so với ấn tượng thương hiệu liên tục mà nó tạo ra. Với các cửa hàng hàng hóa, $500 đó chi tiêu tốt hơn cho việc thu hút khách hàng hoặc chụp ảnh sản phẩm.
Điểm giữa — các cửa hàng có bản sắc thương hiệu nhất quán nhưng không phải định vị xa xỉ — được hưởng lợi nhiều nhất từ điều chỉnh phong cách Cấp độ 1, thường tốn $100–200 và mang lại cải thiện nhất quán có ý nghĩa mà không cần đầu tư đầy đủ cho minh họa riêng.
Định dạng file và yêu cầu kỹ thuật
Icon điều hướng nên là SVG. Đây không phải là sở thích — đó là yêu cầu nếu chất lượng thị giác quan trọng. Icon SVG độc lập với độ phân giải, hiển thị sắc nét trên màn hình tiêu chuẩn, màn hình retina, và màn hình di động DPI cao mà không bị vỡ điểm ảnh hay mờ. Một icon PNG trông chấp nhận được trên điện thoại cũ sẽ trông mềm hoặc mờ trên màn hình retina hiện đại. SVG không có vấn đề này.
Các file SVG được tối ưu hóa nên có độ phức tạp đường dẫn tối thiểu. Nhà thiết kế icon làm việc cho màn hình loại bỏ các nút không cần thiết, đơn giản hóa đường cong, và giảm kích thước file mà không ảnh hưởng đến chất lượng thị giác. Một đường dẫn icon SVG quá phức tạp có thể làm chậm render và tạo ra render cạnh không nhất quán ở kích thước nhỏ — cả hai đều không chấp nhận được trong Tab Bar tải trên mỗi trang.
Trọng lượng thị giác nhất quán trên toàn bộ icon set quan trọng không kém chất lượng icon riêng lẻ. Các icon trong một set nên chia sẻ cùng độ dày nét, cùng kích thước quang học (bao nhiêu phần của hộp giới hạn chúng lấp đầy), và cùng mức độ chi tiết. Một set mà một icon dùng độ dày nét 1.5px và icon khác dùng 2.5px trông không nhất quán ngay cả khi mỗi icon riêng lẻ được vẽ tốt. Khi tóm tắt cho nhà thiết kế, hãy xác định độ dày nét mục tiêu và kích thước quang học và yêu cầu tất cả năm icon nhất quán với các thông số đó.
Kiểm tra icon tùy chỉnh
Trước khi cam kết với một bộ icon tùy chỉnh trên toàn bộ cửa hàng trực tiếp, hãy kiểm tra khả năng nhận diện. Chỉ số quan trọng là tỷ lệ hoàn thành nhiệm vụ, không phải sở thích thẩm mỹ.
Một bài kiểm tra nhận diện đơn giản: cho năm người dùng xem các icon Tab Bar tùy chỉnh không có nhãn. Yêu cầu họ chỉ vào giỏ hàng. Yêu cầu họ chỉ vào icon trang chủ. Yêu cầu họ chỉ vào icon tìm kiếm. Nếu tất cả năm người dùng xác định chính xác tất cả năm icon mà không do dự, các icon đủ rõ ràng. Nếu bất kỳ icon nào gây nhầm lẫn hoặc xác định sai, icon đó cần được sửa đổi theo hướng quy ước hơn.
Một cách tiếp cận chặt chẽ hơn là kiểm tra A/B: chạy icon thư viện tiêu chuẩn trong một tuần, sau đó bộ icon tùy chỉnh trong một tuần, và so sánh tỷ lệ hoàn thành nhiệm vụ điều hướng — tỷ lệ thêm vào giỏ hàng từ icon giỏ hàng, mức sử dụng tìm kiếm từ icon tìm kiếm, v.v. Nếu icon tùy chỉnh tạo ra tỷ lệ hoàn thành nhiệm vụ tương đương hoặc tốt hơn, chúng đang hoạt động tốt. Nếu tỷ lệ hoàn thành giảm, các icon không truyền đạt chức năng đủ rõ ràng và cần sửa đổi.
Mục tiêu của kiểm tra không phải là chọn giữa đẹp và chức năng — mà là xác nhận rằng icon tùy chỉnh là cả hai. Một bộ icon vượt qua bài kiểm tra này đã xứng đáng mang bản sắc thương hiệu vào điều hướng.
| Icon thư viện tiêu chuẩn | Icon thương hiệu tùy chỉnh | |
|---|---|---|
| Khác biệt thương hiệu | Không — cùng icon như mọi cửa hàng khác | Cao — icon đặc trưng cho hệ thống thị giác thương hiệu này |
| Tốc độ nhận diện icon | Tức thì — quy ước phổ quát được thiết lập tốt | Nhanh nếu ưu tiên sự rõ ràng trong thiết kế |
| Đầu tư thiết kế cần thiết | Không — thư viện miễn phí có sẵn ngay | $100–800 tùy mức độ tùy chỉnh |
| Nhất quán thị giác với thương hiệu | Chung chung — có thể không nhất quán với thẩm mỹ thương hiệu | Chính xác — được thiết kế để phù hợp với hệ thống thị giác thương hiệu |
| Chất lượng render trên màn hình retina | Khác nhau — thư viện SVG render tốt, bộ PNG có thể không | Sắc nét — được cung cấp dưới dạng SVG tối ưu hóa |
| Phù hợp với cửa hàng nào | Hàng hóa, tiện ích, hàng tổng hợp | Định hướng thương hiệu, thời trang, làm đẹp, phong cách sống, xa xỉ |
Chi tiết có khả năng mở rộng
Icon điều hướng là một bề mặt thiết kế nhỏ. Chúng chiếm vài chục pixel mỗi cái trong Tab Bar. Nhưng chúng xuất hiện trong mỗi phiên di động, với mỗi khách truy cập, trong suốt vòng đời của cửa hàng. Tín hiệu thương hiệu mà chúng mang — dù tín hiệu đó là "chung chung" hay "được cân nhắc" — được truyền tải ở quy mô lớn, nhiều lần, qua mỗi phiên mà cửa hàng đó sẽ phục vụ.
Icon tùy chỉnh không phải là xa xỉ dành cho các thương hiệu quan tâm đến từng chi tiết. Chúng là việc sử dụng hiệu quả một điểm tiếp xúc thương hiệu tần suất cao mà hầu hết các cửa hàng để ở cài đặt mặc định. Với các cửa hàng nơi bản sắc thương hiệu là động lực mua hàng, nâng cấp điểm tiếp xúc đó là một trong những đầu tư thiết kế có lợi nhuận cao nhất hiện có.
Navi+ chấp nhận icon SVG tùy chỉnh trong cấu hình Tab Bar trực tiếp — không cần công việc developer, không cần code. Tải lên các file icon, gán chúng cho các điểm đến, và Tab Bar phản ánh hệ thống thương hiệu mà bạn đã xây dựng ở khắp nơi khác.
Dùng thử miễn phí — không cần code, không cần lập trình viên
Cài đặt trong vài phút trên Shopify, WordPress hoặc bất kỳ website nào.