UI 标签栏怎么设计？内容标签、底部导航与切换状态

UI标签栏是移动界面中常见的导航形式，可以帮助用户在相关内容或主要页面之间切换。UI标签栏可以保持界面的可控性，并提高可用性。简而言之，UI标签栏能够加强互动并让用户熟悉界面。因此，UI标签栏设计是移动UI的重中之重，它生动地模拟了用户在现实生活中与产品的交互方式。

绘制标签栏时，可以在界面设计软件中保留相同的页面内容，只切换当前标签与导航状态，检查用户能否区分“切换这一组内容”和“进入另一页”。

1. UI标签栏有哪些具体作用

• 导航变得清晰可见。

移动导航扮演着主要界面控制的角色。UI标签栏考虑到了用户习惯的实际视觉外观，并能轻松划分层级。

• 内容会变得更有条理。

UI标签栏可以组织内容并将其划分为合理的部分，使空间有限的移动屏幕不会显得杂乱。

• 使视觉上更加一致。

UI标签栏让用户能够确定优先次序，并了解重点界面的功能。扁平风UI趋势往往能赢得用户的喜爱，如果你想了解扁平风标签栏的绘制教程，不妨阅读《如何绘制扁平风标签栏？2分钟教你搞定》。

2. UI标签栏的应用场景有哪些

2.1 分类同级别的视图

同一层级的内容可以用标签切换，例如保单详情中的“保障内容”和“投保须知”。下方汽车保险界面中的“保存图片”和“分享邀请”则属于执行动作的按钮，不能仅因它们并排排列就当作标签。标签切换的是内容视图，按钮触发的是一项操作。

2.2 展示平行内容

当多组内容处于同一层级、用户通常只需阅读其中一组时，可以用标签切换。如果任务要求同时比较几组内容，就不宜把它们全部藏在不同标签后面，否则来回切换会加重记忆负担。

bio.links 登录页

2.3 过滤器和范围栏

标签可以嵌入整个范围栏，这样用户就可以看到他们可以搜索的所有领域和类别。如UI设计工具Pixso的设计模板服装电商类app设计界面所示，标签将商品分类为男装、女装、儿童、婴儿等类别。

3. 怎么设计UI标签栏

先区分页面内的内容标签和切换主要目的地的底部导航。内容标签通常与它控制的内容放在一起，常见于内容上方；底部导航则承载应用的主要目的地，不适合套用“必须在顶部”的规则。具体设计法则如下：

3.1 标记活动标签

APP菜单中的一个常见错误是没有向用户显示他们当前所处的位置。为了成功地导航，应该总是突出当前活动的标签，可以用字重、颜色、下划线等视觉指示。

3.2 预先选择标签

首次进入时应有明确的默认标签，并同时展示其他可选标签，帮助用户识别当前内容和可切换的范围。如手机直播APP界面所示，默认预选第一个标签。

3.3 按顺序排列标签

合理地安排标签可以给用户一种秩序和专业的感觉。APP的用途和它所提供的选项将决定如何排序，但同时应考虑未来受众的喜好。

3.4 文本应简单易懂

之所以使用标签而不是大的文本框，是为了使内容易于理解，并让用户了解点击某个标签后会看到什么。标签文本应该简单易懂、短小精悍。

3.5 谨慎使用图标

标签可以使用文字，也可以在语义清楚时配合图标；不要为了减少文字而仅保留难以理解的图标。

如果选择了图标，必须使用大众熟悉的图标，其使用将取决于语义，而不是图标的外观。

这样一来，标签可以为用户应该在哪里搜索具体信息提供清晰的视觉线索。因为设计独特而又易于理解的图标具有一定难度，所以使用文字来代替图标会更加清晰明了。

移动端暗黑模板（来自社区）

3.6 不要将标签放在多行中

尽量避免多于一排的标签。增加更多行只会让导航变得复杂，所以尽量把所有必要的标签放在一行中。当标签之间靠得太近时，会导致视觉混乱。

3.7 适当的标签尺寸

如果想让目标被看到并被点击，就要让尺寸足够大。计算每个标签的平均宽度，可以看到页面上能容纳多少个标签。如招聘求职APP，在保证足够大的尺寸后，一行能容纳3个标签。

3.8 保持未被选中的标签可见

未选择的标签可读性越高，用户越清楚还有更多的选项可以探索。因此，选中一个标签后仍应保留其他选项的入口，避免用户误以为只有当前内容。

横向滚动可以容纳更多标签，但隐藏的选项需要有可发现的线索，避免用户反复寻找。

如果采用向下阅读时收起、向上滚动时恢复标签栏的方式，应先验证用户能否找到其他选项并保留当前选中态。任务测试或A/B测试可以帮助发现问题，但不能据此保证所有用户都不受影响。

资源分享类界面设计模板（来自社区）

3.9 用动画控制过渡

切换后应及时更新选中态和对应内容，动画只是可选的过渡方式。可以用短而克制的过渡帮助理解位置变化，但不能让动画遮住内容，也应考虑减弱动效时的稳定切换。

3.10 数据细分

用户喜欢掌握选择权，因此可以利用标签将内容分割成更小、更容易管理的模块。如Pixso社区中的医疗app，此时的日期标签实际上不是一般类别的高级过滤器，而是涵盖了医生的有效值班时间。

4. 怎么设计底部UI标签栏

无论是网站还是APP，设计的意义远远超过良好的外观。好的导航就像双向的对话，如果用户不能理解，那么APP的外观将毫无价值。

底部标签栏适合让用户在少量稳定的主要目的地之间切换，例如学习、课表和个人中心。“新建”“提交”等执行动作不应仅因常用就混入目的地标签；它们更适合放在对应任务中的操作入口。

例如，在招聘求职APP中，只需点击一下就能抵达所有核心功能，并能在不同的功能之间轻松地切换。

不管有多少个标签，不要在同一个UI标签栏中使用太多的不同颜色和图标。相反，应选择单一的颜色，并围绕它的变化来表示标签的状态。这个规则很简单，使用APP的主题色来提亮选中的标签的颜色，包括里面的文字和图标，其他未选中的标签仍需保持清晰可读，不能看起来像被禁用。

如果底部标签栏使用了不同背景色，应选择对比清晰的文字与图标，并用稳定的选中态标识当前位置。

医疗app

课程应用：底部导航和内容标签不要混成一组

以课程应用为例，底部“学习、课表、我的”对应三个主要目的地；打开某节课后，页面内的“内容、作业、讨论”才是这节课下的并列内容标签。两组入口都能切换界面，但它们控制的范围不同，不能把“讨论”直接插到全局底部栏中，让用户不知道它属于哪一门课。

切换标签时还要明确保留哪些状态。用户在“讨论”中滚动到某条回复，暂时查看“内容”后再回来，通常不希望被无理由地送回列表顶部；从讨论详情返回时，也应能找回原位置。反过来，更换课程之后，旧课程的标签内容和未完成输入不能未经说明地沿用到新课程。

标签太长、内容很慢时怎么办

先缩短含糊或重复的名称，再决定是否允许横向滚动。隐藏一半标签时，应留下可发现后续选项的线索；当前标签被选中后要进入可见区域，不能让内容已切换而选中态仍藏在屏幕外。若用户必须对照两组信息才能完成任务，则应考虑同时展示或提供对照视图，而不是让他们反复切换记忆。

对网页内容标签，键盘操作与鼠标点击应有一致结果。W3C 的 Tabs 模式 区分自动激活与手动激活：当内容显示存在明显等待时，可以先移动焦点，再由用户确认打开，避免每经过一个标签就触发一次耗时加载。底部页面导航则不应机械照搬内容标签的全部角色与行为。

在 Pixso 中用同一课程搭出“学习首页—课程内容—讨论详情”的画板路径，再补上返回后的滚动位置和选中态。用真实长度的课程标题、标签名和一条待发布回复检查布局，比只摆三段等长文字更容易发现导航层级和状态丢失问题。

5. UI标签栏设计总结

UI标签栏设计应定义明确、易于识别，能为用户带来有效的导航。优秀的UI标签栏设计应保证以下要点：

• 可识别性。全局底部导航中的同一组目的地应保持相同层级，并在主要页面中提供稳定入口。如果设计手法符合用户认知，他们就能毫不费力地找到。

• 可预测性。用户希望事情总是以完全相同的方式进行，所以要避免复杂的设计，以免使他们感到困惑。

• 清晰的目标。设计师应定义好哪些是可用的功能，并组成用户需要的确切动作来实现目标。

• 效率。用户不应该花时间学习如何使用功能，或者迷失在不连贯、不清晰的页面内容中。

通过上述的设计法则和技巧，你一定有不少感悟，不妨打开Pixso工作台亲自动手试试看吧！如果你想了解更多关于设计规范的信息，欢迎进入Pixso社区查看更多高质量的UI标签栏设计，相信能给你带来学习上的帮助和启发。