为什么库存图标是品牌的妥协
图标库 — Heroicons、Feather、Font Awesome、Phosphor — 解决了一个实际问题：它们无需任何设计投资就能提供即用的、视觉一致的图标。对于导航是功能组件而非品牌表达组件的店铺来说，库存图标是完全合适的选择。但对于品牌标识围绕独特视觉语言构建的店铺 — 特定的插画风格、手工艺美学、奇幻或复古风格 — 在导航中使用库存图标传达了一种无声的断层：产品摄影、包装、品牌故事都表达一种个性，然后导航却使用了任何互联网店铺都可能使用的图标。
插画导航用品牌凝聚力取代了这种断层。当导航图标与品牌的产品插画出自同一双手时，菜单成为品牌创意世界的延伸，而不是强加在其上的功能层。因品牌视觉个性而来的访客，在整个购物体验中都会遇到这种个性 — 在产品图片中、在主页设计中，以及在移动端浏览时标注导航分类的小图标中。这种一致性不是奢侈的细节；它是区分拥有成熟品牌标识的品牌与那些没有统一手法拼凑设计系统的店铺的信号之一。
"我们的品牌围绕宽松的手绘植物学插画风格构建 — 我们所有的包装都有那种外观。当我们从Tab Bar中的Heroicons切换到我们的插画师专门为导航绘制的自定义图标 — '花园'用手绘的小植物，'厨房'用宽松的墨水杯，我们的'蜂蜜与腌制品'类别用一只小绘蜜蜂 — 访客开始在评论中提及导航。不是'我喜欢导航'；更多的是'整个网站感觉手工制作且用心'。这就是插画导航为像我们这样的品牌所做的。它让界面成为品牌的一部分，而不仅仅是围绕它的脚手架。"
— 一位Navi+客户，手工食品与园艺品牌
插画导航何时是正确选择
当几个条件同时满足时，插画导航会带来最大价值：
品牌已经有插画风格。 自定义导航图标作为现有视觉语言的延伸效果最佳。如果品牌在产品摄影、包装、电子邮件营销或社交内容中使用插画，以相同风格绘制的导航图标会创造凝聚力。如果品牌没有既定的插画风格，专门为导航开发一种插画风格是错误的操作顺序 — 先建立品牌插画语言，然后再延伸到导航。
产品类别适合视觉表达。 一些产品类别具有天然的插画潜力：食品与饮料、植物与园艺、手工艺与文具、儿童产品、生活方式与健康。对于这些类别，插画导航图标可以同时充当导航路标和产品世界的迷你表达 — 一只绘制的浓缩咖啡杯同时也让访客想到他们即将浏览的咖啡。对于精确度和专业性是主要品牌价值的类别（专业工具、工业用品、医疗设备），插画导航可能会削弱品牌的权威定位。
插画支持导航理解，而不仅仅是美学。 插画导航仍然必须作为导航发挥功能。艺术上比功能上更复杂的自定义图标 — 插画的风格比它所描绘的内容更突出 — 会创造视觉趣味但削弱导航可用性。任何插画图标的测试是：第一次看到这个图标的访客能否立即理解它代表哪个类别？无法传达信息的美丽是伪装成导航问题的装饰问题。
| 导航图标方法 | 最适合 | 品牌信号 |
|---|---|---|
| 库存图标库 | 功能性店铺、科技品牌 | 专业且高效 |
| 自定义风格图标（相同风格，原创） | 拥有设计系统的品牌 | 精致且一致 |
| 手绘插画图标 | 手工艺、生活方式、奇幻品牌 | 手工制作、个性化、独特 |
| 摄影分类图标 | 食品、时尚、以产品为中心的品牌 | 富有抱负且以产品为重 |
在不牺牲性能的情况下执行插画导航
插画导航的实际担忧是文件大小：自定义插画如果随意导出，可能会产生比标准SVG图标大得多的图标文件，增加页面重量并减慢导航加载速度。解决方案是格式和优化规律：导航插画应导出为SVG（矢量格式，无限可缩放，通常文件大小非常小）而不是PNG或WebP，并从SVG代码中删除所有不必要的元素（图层名称、元数据、编辑器工件）。经过适当优化为SVG的手绘插画通常每个图标为2–8KB — 比许多在单个文件中包含数百个未使用图标的标准图标库还要小。
Navi+的Tab Bar接受每个导航槽的自定义SVG图标，而Slide Menu支持可包含插画标题或装饰性分区分隔符的自定义HTML。Tab Bar或Slide Menu的一套6–8个导航图标 — 适当优化为干净的SVG — 在将导航从通用功能组件转变为访客记住的品牌创意元素的同时，对页面几乎没有增加任何重量。