细数APP底部导航栏图标的设计及交互的表现形式

APP发展到现在，它底部导航栏图标的设计及交互表现形式是越来越丰富多样，也越来越有趣，互动性不断增强。下面我们一起来细数下它的设计及交互表现形式，以便在设计时胸有成竹，选择合理有效的形式传达产品的品牌气质，带给用户更加优质的体验。

一、未选中时是线性的，图标是灰色的，选中时还是线性的，但图标变为产品的品牌颜色（既可纯色也可渐变），图标切换时无动画效果。如：ENJOY、想去。

二、未选中时是线性的，图标是灰色的，选中时图标变为块状的，填充颜色变为产品的品牌颜色（既可纯色也可渐变），图标切换时无动画效果。如：MAKA、爱奇艺阅读。

三、未选中时是面线性图标，颜色是灰色的，选中时图标还是面性的，填充颜色变为产品的品牌颜色（既可纯色也可渐变），图标切换时无动画效果。如：快看漫画、Keep。

四、未选中时是线性的，图标是灰色的，选中时是线面结合性的图标，图标颜色变为产品的品牌颜色（既可纯色也可渐变，填充色可填满整个图标，也可有一定的留白），图标切换时无动画效果。如：站酷App、美团。

五、未选中时是线面结合的图标，图标是灰色的，选中时图标填充颜色变为产品的品牌颜色（既可纯色也可渐变，线面的色彩有一定的区分度），图标切换时无动画效果。如：小灯塔、葫芦侠。

六、导航图标用纯文字来表现的，只是采用文字的颜色变化来体现选中与未选中状态。如：小红书、抖音。

七、未选中时图标是面线性或线性的，颜色是灰色的，选中时给图标加背景块，填充颜色为产品的品牌颜色（既可纯色也可渐变），图标颜色一般为白色，图标切换时动画效果可有可无。如：爱奇艺。

八、图标来回切换时加入合理的动画效果。如：腾讯课堂、当当阅读。

九、带有轻质感的图标设计。如：QQ。

十、写实风格的图标设计。这种设计风格的导航已经很少很少，找了好久都没找到对应的例子。欢迎小伙伴们来补充。

十一、极具个性化的设计表现形式。如：东家

谢谢大家观看！