广州总部电话:020-85564311
广州总部电话:020-85564311
20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

如何做好底部导航栏图标设计?

发布日期:2025-05-29 11:19:34 浏览次数: 830 来源:婉宁交互设计

一、导航栏的重要性


将导航栏置于底部,很大程度上是基于用户拇指交互的覆盖区域。无论使用左手交互还是右手交互,底部导航栏都处于用户拇指可以自然覆盖的区域。

底部导航栏的图标是路牌,承担着指路的作用,给用户指明进入产品后可以分别通往什么页面。

二、固定布局


底部标签栏的布局是固定的。所有可用选项均显示在栏中。

由于多种原因,不建议使用可滚动的底部栏。

  1. 这不是标准模式,因此用户并不期望滚动底部栏。

  2. 这会让用户感到沮丧,因为他们需要记住是否已经滚动了该栏,或者他们可能会忘记滚动的方向。

三、导航栏尺寸


虽然图标的形状会因为设计的差异而有所不同,但是在图标外观的现实格式和基础尺寸上,应该保持一致。激活状态下的图标尺寸可能会有所增加,配色和轮廓会微调,以达到抓人眼球的目的,但是不应差异太大。

四、底部导航入口的数量


底部导航入口一般在3-5个,最常见的是4-5个。5个按钮通常会让导航的空间比较紧凑局促,用户可能会误触,这样会让体验非常差。

五、视觉和风格的一致性


保持图标在设计上的一致性其实非常重要,这是保证 APP 在设计上,有着最基本的专业性。不一致的设计非常容易被用户注意到,带来的用户体验的隐患是非常之大的。比如图标的样式尽量保持一致,风格保持统一等。

六、底部导航栏模式

底部导航栏有权重平分、强调信息、引导操作这三种模式。

1、权重平分

当产品的功能结构权重比较平均,不希望突出其中某个结构时,一般采用权重平分的模式,即每个底部入口的分量都是平均的。常规产品会采用这样的形式。

2、强调信息

当产品需要强调某些信息引起用户注意或同一个按钮承担两个功能时,设计便可以选择在某个入口添加明显的信息指示或功能。增加功能的底部导航入口不一定是首页,也可以是其它入口。

3、引导操作

当产品希望用户能够进行某个操作,需要进行强操作提醒时,可以选择引导操作的导航栏模式,在中心突出操作按钮。大众点评、百果园、转转、星巴克、闲鱼等都是采用这种模式

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!