2020-07-06 UI设计培训

一篇文章带你快速了解:标签栏与工具栏

当我们在浏览App时,是否会有这样的疑问:出现在应用程序屏幕底部的控件,怎么在这个页面中一直存在,在另外一些页面浏览中突然就隐藏了?存在于应用程序屏幕底部的控件,就一定是标签栏吗?今天UI设计培训的我们就来聊聊同样位于屏幕底部的标签栏和工具栏。

一、标签栏(Tab Bars)的特点

1、标签栏出现在应用程序屏幕的底部,并提供了在应用程序不同页面之间快速切换的功能。

2、它悬浮在当前页面之上,并且会一直存在,只有当用户点击跳转到二级页面后才会消失。

3、当用户选中某个标签时,该标签呈现适当的高亮状态,以不同样式作为区分来明确告知用户当前所在的页面。

比如我们在使用微信的过程中,一级页面底部会一直有标签栏的存在;点击对应的图标,就可以快速切换至对应的页面;当我们点击第四个图标「我」,此时「我」是选中的高亮状态,其他未选中的图标则和它的状态不一样。

UI设计培训.png 

4、标签栏可以包含任意数量标签,但可见的标签数量需根据设备的大小而变化。在App设计中,一般可见的标签数量通常控制在3到5个:

  ○  如果标签过多,会增加产品结构的复杂性,同样会使每单元标签的可触空间降低,容易导致用户发生误触,而且会影响用户的记忆跟学习成本。

  ○  如果标签过少,会增加用户浏览页面时的割裂感,使页面的整体感降低;

因此,标签的数量最好控制在3到5个。


如果存在5个以上的标签可以将最后一个标签设计成「更多」标签,点击「更多」后在单独的页面显示其他标签。比如ios自带的「iTunes store」App,最后一个图标就是「更多」。

UI设计培训.png 

注意「更多」这种形式在目前的App设计中使用很少,所以也不太建议大家使用;如果确实需要在标签栏承载更多功能,可以考虑使用舵式导航的标签形式(或者有人称之为:底部扩展式导航)。


舵式导航是底部导航的一种扩展形式,是一种变体。因为它的样式很像轮船上用来指挥的船舵,两侧是其他操作按钮。

比如闲鱼,点击中间「加号」之后就可以出现其他重要的功能,中间的「加号」体量上明显高于其他标签,通过这种方式提高了该标签的点击率。

UI设计培训.png 

虽然在设计中,一般可见的标签数量通常控制在3到5个,但这也不是绝对的,具体的需要根据产品实际来定,比如ios自带的「文件」App,底部标签就只有两个:「最近项目」和「浏览」。 

UI设计培训.png 

那么这种排列方式带来的页面的割裂感怎么办?我们可以考虑通过视觉设计的手段去调和,比如可以将标签的排版变为左图标、右文字的左右排版形式,丰富整体页面。

5、标签图标传达的意思一定要准确,也可以用辅助文字来说明,但文字不宜过长,避免出现换行的情况。

6、当有新消息时,可以在标签栏上使用数字气泡或小红点进行提示。比如QQ「消息」有新消息出现时,显示的小红点。

UI设计培训.png 

 二、工具栏(Toolbars)的特点

1、工具栏同样位于屏幕底部,悬浮在当前页面之上,并且当用户不需要使用的时候,可以隐藏它;当然部分App的工具栏是怎么滑动都不会消失的。同时许多App也对工具栏都采用了不同的控制显隐的操作手势,例如向上滑动界面时,工具栏会自动隐藏。

比如Safari浏览器的底部有一组操作图标,它们主要执行与当前页面相关的动作的按钮。它在用户开始向下滑动页面阅读时隐藏,点击屏幕底部或上滑页面时它又会再次显示。 

UI设计培训.png 

2、工具栏承载的内容主要是对当前页面相关操作的按钮。那么按钮是使用图标还是文字呢?

  ○  工具栏出现三个以上的按钮时,使用图标会更合适,因为图标所占空间比文字更小,更容易承载多个按钮,同样如果字符太多也会使整个页面变得很凌乱。比如QQ邮箱,点击进入具体的邮件列表,下方出现了四个功能按钮,使用的就是图标的形式。这些图标展示的意思是对该封邮件进行标记、删除、转发、回复等一系列操作,并且这些操作都是高频操作,所以没有采用向下滑动页面阅读时隐藏的形式。 

UI设计培训.png

  ○  当按钮为三个或更少数量时,使用文字更加直观,也更易让用户理解,并且要为文字操作按钮提供足够的空间,保证按钮不会混到一块。比如ios自带的「日历」App中,使用文字是因为图标会使三个按钮的含义造成混淆,同时三个文字按钮之间的空间也很充裕。

UI设计培训.png 

三、标签栏和工具栏的选择

1、位于屏幕底部,上下滑动都不会消失,选择标签栏;

上下滑动页面时会隐藏或显示,选择工具栏,当然少部分App的工具栏是怎么滑动都不会消失的。

2、需要同级页面之间切换,当用户选中某个标签时,该标签呈现适当的高亮状态,并且切换时显示的页面内容是不同的,选择标签栏,此时标签栏的切换通常为一级导航;

如果是对当前页面具体功能需要操作时,则选择工具栏。

比如微信读书,用于同级页面「发现」与「书架」之间切换,所以选择标签栏,同时标签栏为产品的一级导航,且不会消失;而当进入具体书籍阅读页面时,需要对当前页面的具体功能操作,所以使用了工具栏,当左右浏览页面时,工具栏会自动隐藏,同时当键盘出现时,工具栏也会被隐藏。 

了解标签栏和工具栏之间的区别很重要,因为两种类型的栏都出现在应用程序屏幕的底部。通过上面的分析,大家是不是对标签栏和工具栏有了更深的理解呢?

以上是标签栏及工具栏在iOS设计规范中描述的总结归纳,在实际使用中,遵循规范的同时,大家还需要根据实际业务场景灵活的运用与创新。




林老师:0371-5556 6060