微信小程序tabBar图标设计：iconPath与selectedIconPath的实战解析

1. 从两个图标文件说起：iconPath与selectedIconPath到底是什么？

很多刚开始做微信小程序的朋友，第一次在 app.json 里配置 tabBar 的时候，都会对 iconPath 和 selectedIconPath 这两个属性感到困惑。名字看起来挺直白，但具体怎么用，为什么要用两个，心里可能没底。我刚开始那会儿也这样，以为随便放个图标就行，结果做出来的小程序，底部导航栏切换起来总感觉“差点意思”，用户反馈也说有时候不知道自己点没点中。

其实，你可以把 tabBar 想象成你家客厅的开关面板。iconPath 就是那个开关在“关闭”状态下的样子，通常是灰色或者线条勾勒的图标；而 selectedIconPath 就是开关被“打开”后亮起来的样子，可能是高亮的彩色或者填充了颜色的图标。用户点击哪个标签页，哪个标签页的图标就应该“亮起来”，这是一种最基础、也最有效的视觉反馈。

在微信小程序的官方定义里，iconPath 就是指定标签栏（tabBar）某个选项在未选中状态时显示的图片路径。而 selectedIconPath 则指定了同一个选项在被选中状态时显示的图片路径。这两个属性永远是成对出现的，它们共同决定了用户与底部导航栏交互时的视觉体验。少了任何一个，或者用错了，导航的“手感”和“观感”都会大打折扣。这不仅仅是美观问题，更直接关系到用户能否清晰、无困惑地使用你的小程序。

2. 不只是好看：为什么必须区分两种状态图标？

你可能觉得，不就是个图标变个色嘛，有那么重要吗？我实测过好几个项目，可以很负责任地说：非常重要。这背后是交互设计的基本原则——提供清晰的系统状态可见性。

2.1 核心价值：给用户即时的“我在哪”反馈

想象一下，你打开一个资讯类小程序，底部有“首页”、“视频”、“我的”三个 tab。如果你点击“视频” tab，页面内容切换到了视频流，但底部的“视频”图标却没有任何变化，和旁边的“首页”图标长得一模一样。你会不会心里犯嘀咕：“我到底点进去没有？现在这个视频页面是‘首页’ tab 里的内容，还是‘视频’ tab 里的？” 这种不确定性会带来糟糕的用户体验。

selectedIconPath 的存在，就是为了瞬间消除这种不确定性。当用户点击一个 tab，对应的图标立刻从 iconPath 切换到 selectedIconPath（通常是颜色加深、填充或设计风格变化），这是一种强烈的、即时的视觉确认：“嘿，你成功切换到这里了，当前就在这个页面。” 这种反馈是本能级的，用户甚至不需要思考就能理解。

2.2 设计一致性：构建专业的品牌印象

除了功能性，这对属性也是维护小程序整体设计语言一致性的关键。一个成熟的、注重细节的产品，其交互反馈机制一定是统一的。按钮点击有态，输入框聚焦有态，那么作为核心导航的 tabBar，其选中态更是必不可少。

通过精心设计的两套图标（未选中/选中），你可以将品牌的色彩、风格融入到这个高频交互组件中。比如，你的品牌色是蓝色，那么 selectedIconPath 的图标就可以使用品牌蓝色作为主色。用户每次切换，都能强化一次对品牌色彩的认知。反之，如果这里做得粗糙，会让人觉得整个产品不够精致、完成度低。

2.3 降低认知负荷：让导航变得“无脑”

好的设计是让用户不用动脑。清晰的选中态图标，让导航这个行为变成了肌肉记忆。用户的眼睛只需要扫一眼底部，哪个图标是“亮着”的，就知道当前位于哪个功能模块。这极大地降低了用户在应用内穿梭的认知成本，让他们能把注意力完全集中在核心内容上，而不是花心思去理解导航结构。

3. 手把手配置：从图片准备到代码写入

理论说再多，不如动手配一遍。下面我就以一个简单的“社区小程序”为例，带你完整走一遍流程，里面有不少我踩过的坑和经验之谈。

3.1 图标设计与资源准备（避坑指南）

在写代码之前，你得先准备好图标文件。这里有几个关键点：

1. 尺寸与格式：微信官方推荐 tabBar 图标的尺寸为 81px * 81px。这个尺寸不是随便定的，它是为了在不同像素密度的手机屏幕上都能清晰显示