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

1年前发布

原创文章 / UI / 观点
mikey_1898 原创,如需商业用途或转载请与mikey_1898联系,谢谢配合。

本文细数列举了目前APP底部导航栏图标的设计及交互形式,以便更加全面的了解APP导航栏的设计。

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


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

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


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



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


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


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


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


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


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



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



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

谢谢大家观看!

8
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息