我要投稿
在导航栏的设置能够有效地引导用户迅速访问目标页面,从而提升产品的可用性,并改善整体用户体验。那么,如何判断你的产品是否适合配置底部导航栏?如果答案是需要,那么底部导航栏应该如何进行设计呢?在本文中,小栈将结合几款国外产品,分享底部导航栏设计的策略与要点,总结了底部导航栏的设计策略,一起来看一下。
https://www.yuque.com/lch2021/bmg6es/kpk6wcg9eg9t6ckk?singleDoc# 《丝滑的导航栏底部动画效果》
1. 显示最重要的目的地
Spotify使用了每个音乐播放器App都需要的简单的导航栏,主标签用于播放或探索收听的内容,搜索标签用于搜索新歌曲和播客,音乐库标签用于播放列表中你喜欢的和保存的歌曲,以及会员标签,这对Spotify很有用,因为用户可以轻松地点击标签并立即付款成为会员。
2. 杂乱无章的同类项放在一起
大的App喜欢在导航栏内使用四到五个标签,这使得导航栏很简洁,也有助于用户点击,因为如果有五个以上的图标,用户可能会点错,因为拇指相对比较大。
3. 如果需要的话,使用标签(Labels)
Youtube和宜家的App有不同类型的复杂性,宜家的App主要是用于购买家具,没有用文字,用户也能直观的理解,Youtube也有点复杂,因此他们添加了文字标签,如果只放图标可能会看不懂,尤其是对于新用户。
在设计带有文字的导航栏方面,Pinterest是行家,因为他们在用户长期习惯后会隐藏文字,我个人喜欢这样,因此我也推荐这样做,但这一切都取决于你。
4. 文字应该简短
Tiktok在导航栏用简短的文字。
5. 按顺序排列标签
从主页到个人Pinterest习惯于显示主页,因为App的安排,重要的东西都在主屏幕上,搜索标签用于搜索内容,通知标签用于查看更新,其他东西在个人资料。
Spotify、Youtube、Pinterst、TikTok,几乎每一个App都用这种安排。但这并不意味着你也应该照搬他们的做法,应该学习的是按顺序安排。
6. 传达位置
Duolingo把图标变成彩色,来显示目前用户在哪个标签。
Headspace在当前的图标上加一条线,同时把图标变成黑色
和Duolingo和Headspace一样,确保你应该传达用户的确切位置,以方便导航。
结语
亚星管理平台菁思福科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
亚星管理平台菁思福科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。亚星管理平台菁思福科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站、APP开发)、微信定制开发(微信亚星官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。