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

用户头像
广州/设计爱好者/6年前/3063浏览
细数APP底部导航栏图标的设计及交互的表现形式

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

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


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

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


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



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


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


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


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


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


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



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



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

谢谢大家观看!

15
举报
|
31
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】银行卡icon
【新年UI图标】美食icon
我的钱包-UI界面设计-app
【新年UI图标】礼物/活动icon
3D渐变流体抽象矢量UI背景图
APP/小程序商业项目UI模板|99个高保真UI+79个原型
科技医疗透明柜UI界面设计
手表表盘UI系列
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】旅行icon
高级感金属拟物 UI设计组件库
【新年UI图标】体育icon
UI界面 组件
盲盒APP UI设计
Security Camera UI kit
钱包ui模板
【新年UI图标】积分icon
智能家居中心 简约 UI设计组件库
【新年UI图标】活动icon
森系3D渐变流体抽象矢量UI背景图
UI通用设计素材1
户外旅行飞机情侣假日出行
高级表盘系列UI源文件
UI应用平面图标
你可能喜欢
相关收藏夹
大家都在看
登录注册