底部标签栏(也称导航栏)在 UI 界面当中是相当常见、直接影响用户体验的基础组件，是移动端设计中必备的导航类型之一。

通常底部标签栏会涉及图标、文本标签等元素，这些元素需要在视觉、交互、体验、逻辑上确保质量，本文将告诉你UI 标签栏的基础知识要点以及设计要点，希望能给你带来一些设计帮助。

标签栏知识要点

1、标签栏的作用

• 用户可以快速检索到他们在哪个区域
• 允许用户快速在不同的功能模块间切换
• 让用户快速了解到不同界面的功能

2、标签栏的结构

1. 1）承载标签栏元素的控件容器
2. 2）激活状态下的文本标签（可选）
3. 3）非激活状态下的文本标签（可选）
4. 4）激活状态下的图标
5. 5）非激活状态下的图标
6. 
   

3、标签栏的尺寸

虽然图标的形状会因为设计的差异而有所不同，但是在图标外观的现实格式和基础尺寸上，应该保持一致。

设计标签栏的5大要点

1、导航选项数不超过5个

底部标签栏最适合放置3-5个导航选项。5个选项通常会让导航的空间比较紧凑局促，用户可能会误触，影响使用体验感。

 如果选项过多，超过5个时，可以使用汉堡菜单将它们隐藏在其他更加易于访问的地方。

2、避免可滑动式的设计

可滑动的标签栏会对导航可见性产生影响，由于并非所有的标签选项都是一次可见，用户可能很容易错过后面的选项。

3、文本标签不要截断或换行

底部标签栏的空间有限，因此在标签中使用文字时，每个字符都显得很重要。不要对文本标签截断或换行，这样会造成用户不清楚标签的含义，尽量使用单个词汇来表达含义。

4、图标和文字的颜色不能太浅

图标的颜色对比度差、导航标签的字体小是在底部标签栏设计中两个最常见问题。

在底部栏设计过程中，我们不仅要区分已选标签和未选标签的状态，保证已选标签更突出，还要注意观察图标与文字之间、图标与背景之间的颜色对比度，确保未选状态的图标和文字也能够清晰易读。

5、保持设计风格的一致性

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

这里是「行空设计」，一款专为产研团队研发的设计协作平台，操作顺畅，页面简洁，兼容Sketch，复制链接：https://xk.design?c=huicn 至PC端即可使用~

Powered by Froala Editor