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

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

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

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


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

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


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



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


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


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


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


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


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



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



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

谢谢大家观看!

15
举报
|
31
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
高级感金属拟物 UI设计组件库
UI 登录界面设计模板包
高级表盘系列UI源文件
【新年UI图标】30个图标
【新年UI图标】影音icon
UI应用平面图标
盲盒APP UI设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
手表表盘UI系列
【新年UI图标】珠宝icon
新能源APP应用UIKit
【新年UI图标】会员icon
钱包ui模板
拟物风质感写实UI卡片合集源文件
UI界面 组件
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】秒杀icon
【新年UI图标】钱包icon
UI通用设计素材1
【新年UI图标】银行卡icon
3D渐变流体抽象矢量UI背景图
抽象液态渐变UI背景模版
我的钱包-UI界面设计-app
你可能喜欢
相关收藏夹
大家都在看
登录注册