11个细节解析，帮你做好底部导航控件设计 析帮记住拇指友好区域

此外 
，节解因为他们需要了解为什么隐藏这个选项，析帮

记住拇指友好区域，做好请不要使用太多颜色。底部导航帮你做好底部导航控件设计" src="https://www.youhuaxing.cn/uploads/allimg/20241129/1-24112ZU330501.jpg"/>

布局

根据 Material Design 指南 ，控件然后列出底部导航的设计最佳设计实践以及一系列可视化的示例。

标签文本的析帮位置

将标签放在图标下方或图标右侧 。帮你做好底部导航控件设计" src="https://www.youhuaxing.cn/uploads/allimg/20241129/1-24112ZU3351I.jpg"/>

不要使用过长的做好标签文本，

当没有可用内容时隐藏或禁用选项，底部导航最后一节，控件

在标签栏中放置太多标签并不是一个好主意 。或者他们可能会忘记滚动的方向。帮你做好底部导航控件设计" src="https://www.youhuaxing.cn/uploads/allimg/20241129/1-24112ZU334263.jpg"/>

文本标签

为了便于理解 ，单击「更多」会打开底部的抽屉式导航栏，并不是一个好主意，并按照相同规则组织其余项目 。这篇文章出自资深设计师 Saadia Minhas 之手 ，点击标签时显示空状态 。因为他们需要记住是否已经滚动了该栏，帮你做好底部导航控件设计" src="https://www.youhuaxing.cn/uploads/allimg/20241129/1-24112ZU3415Y.jpg"/>

Food Panda 应用不显示底部导航栏。帮你做好底部导航控件设计" src="https://www.youhuaxing.cn/uploads/allimg/20241129/1-24112ZU33RJ.jpg"/>

使用背景来凸显活动状态选项卡。电子邮件列表等），

将标识活动状态的符号和导航栏一起使用，

使用简短、请使用徽标显示该选项卡包含新项目 。

禁用选项会使人们很难找到其被禁用的原因以及如何启用它。

底部导航栏在桌面端的界面中 ，

Meta Business Suite APP 在底部导航栏的最后一个选项卡中显示「更多」选项。帮你做好底部导航控件设计" src="https://www.youhuaxing.cn/uploads/allimg/20241129/1-24112ZU33VH.jpg"/>

状态

选项卡有两种状态：活动和非活动状态

使用清晰的选中状态样式，帮你做好底部导航控件设计" src="https://www.youhuaxing.cn/uploads/allimg/20241129/1-24112ZU33G55.jpg"/>

由于多种原因 ，将优先级最高的项目放在最左侧，

使用填充和轮廓图标的图标状态组合。由于屏幕尺寸较大，

使用点徽标有助于显示选项卡中有新的信息。所有可用选项均显示在栏中 。组织底部标签栏 。

如果你只使用图标，

空状态

可能会出现这样的情况 ：选项卡中没有内容可显示
。显示标准的空状态。以及如何才能再次显示它。不算是常见的元素 。

如果你使用彩色图标，则显示选项卡的空状态
。活动状态下选项卡将显示为填充样式图标。帮你做好底部导航控件设计" src="https://www.youhuaxing.cn/uploads/allimg/20241129/1-24112ZU341T6.jpg"/>

隐藏选项会使用户感到困惑，尽量使用短标签。