控件集——Tool Bars/工具栏

定义

工具栏出现在应用程序页面的下方，其中的按钮可以对现有页面中的相关行为或内容进行操作。工具栏和底部导航栏一样是半透明的，可能有背景色，通常当用户可能不需要时会被隐藏。例如在苹果的 Safari 中，在用户滑动屏幕时工具栏将被隐藏，点击屏幕下方则恢复显示。在用户使用键盘时其也会被隐藏。

苹果Safari的工具栏

使用规范

请提供与页面相关的工具栏。工具栏应当包括有序而有用的指令，使其在现在的页面上起到相关作用。

Icon 或 相关文字要简洁直观。当工具栏中包含三个以上的工具时，图标是较为好的表达方式。三个或三个以下时，文字表达则较为清晰。例如苹果的「日历」，icon 可能会让人迷惑。

避免使用没有关联的 icon。不相关联的 icon一般会用在页面的切换上。如果你想提供页面之间的切换，请使用底部导航栏。详见底部导航栏。

给予文字 icon 足够的间距。如果你的工具栏包括多个按钮，则这些按钮的文本可能会显示为一起运行，从而使按钮无法区分。通过在按钮之间插入固定间距来添加分隔。

TIP

严格区分底部导航栏和工具栏。底部导航栏目的是让用户方便在一个应用程序的不同功能之间快速切换；工具栏则是列出了在一个功能中进行操控的一些工具。一般而言底部导航栏和工具栏不会同时出现在一个应用程序中。

满足个性化场景

可考虑将工具栏中的各个 icon 孤立，但保持它们对齐在工具栏的区域内。将 icon 分别单独设计在相同大小的形状中，并隐藏工具栏原本的矩形背景，而完全露出后方的正文内容以提高沉浸感。例如 Zcool 的文章阅读页。

小结

在基础的 ToolBar 的基础上，目前的底部导航栏已经逐渐在向「沉浸式」、「极简」的方向发展。越来越增加图形元素在语义符号中的比重。