细数APP底部导航栏图标的设计及交互的表现形式
本文细数列举了目前APP底部导航栏图标的设计及交互形式,以便更加全面的了解APP导航栏的设计。
APP发展到现在,它底部导航栏图标的设计及交互表现形式是越来越丰富多样,也越来越有趣,互动性不断增强。下面我们一起来细数下它的设计及交互表现形式,以便在设计时胸有成竹,选择合理有效的形式传达产品的品牌气质,带给用户更加优质的体验。
一、未选中时是线性的,图标是灰色的,选中时还是线性的,但图标变为产品的品牌颜色(既可纯色也可渐变),图标切换时无动画效果。如:ENJOY、想去。
二、未选中时是线性的,图标是灰色的,选中时图标变为块状的,填充颜色变为产品的品牌颜色(既可纯色也可渐变),图标切换时无动画效果。如:MAKA、爱奇艺阅读。
三、未选中时是面线性图标,颜色是灰色的,选中时图标还是面性的,填充颜色变为产品的品牌颜色(既可纯色也可渐变),图标切换时无动画效果。如:快看漫画、Keep。
四、未选中时是线性的,图标是灰色的,选中时是线面结合性的图标,图标颜色变为产品的品牌颜色(既可纯色也可渐变,填充色可填满整个图标,也可有一定的留白),图标切换时无动画效果。如:站酷App、美团。
五、未选中时是线面结合的图标,图标是灰色的,选中时图标填充颜色变为产品的品牌颜色(既可纯色也可渐变,线面的色彩有一定的区分度),图标切换时无动画效果。如:小灯塔、葫芦侠。
六、导航图标用纯文字来表现的,只是采用文字的颜色变化来体现选中与未选中状态。如:小红书、抖音。
七、未选中时图标是面线性或线性的,颜色是灰色的,选中时给图标加背景块,填充颜色为产品的品牌颜色(既可纯色也可渐变),图标颜色一般为白色,图标切换时动画效果可有可无。如:爱奇艺。
八、图标来回切换时加入合理的动画效果。如:腾讯课堂、当当阅读。
九、带有轻质感的图标设计。如:QQ。
十、写实风格的图标设计。这种设计风格的导航已经很少很少,找了好久都没找到对应的例子。欢迎小伙伴们来补充。
十一、极具个性化的设计表现形式。如:东家
谢谢大家观看!