【ToB Web设计】顶部工具栏 Header Tool Bar——以云产品为例

顶部工具栏 Header Tool Bar

「顶部工具栏」通常置于可见性最好的页面的顶部，用于容纳操作对象为整个页面的按钮。

---

腾讯云的顶部工具栏

华为云的顶部工具栏

阿里云的顶部工具栏

青云的顶部工具栏

根据观察，可以把顶部工具栏的操作划分为以下三种：

1. 专属该页面的操作：比如主机页面的创建、启动和关机

2.筛选/查询操作：包括筛选select、查询和高级筛选等

3.多页面通用的操作：比如刷新、设置、导出

专属该页面的操作

1.「专属该页面的操作」通常分为一个「主操作」和多个「辅操作」

2.「主操作」是页面最核心的操作，按钮通常使用主题色填充，位于「顶部工具栏」的最左侧，根据古登堡图表法的对角线视线流，即落在页面的「第一视觉着落点」，最易被发现

3.「辅操作」的使用频率低于「主操作」，在位置上紧跟「主操作」按钮，在视觉表达上要弱于「主操作」，一般采用线性或浅色填充

Q: 为什么「专属该页面的操作」要使用文字按钮，而不是图标按钮？

A：「专属该页面的操作」一般不具备共性，每个页面均有所不同，如果使用图标按钮，可识别性太弱，会给用户增加认知负荷。

Q: 当该页面的专属操作过多时应该如何处理？

A：当操作过多时，应该对操作进行分组、合并成一个下拉按钮。比如「从excel导入」和「从CMDB导入」就可以合并为一个「导入」下拉按钮，再从下拉选项中选择具体的导入来源。其他无法合并的低频操作则可以合并在「更多」下拉按钮。

筛选/查询

筛选查询类操作的控件在「顶部工具栏」中一般采用右对齐

1. 查询操作：只有单独的「查询」时，一般由输入框和内置的查询按钮组成，查询按钮为放大镜样式的图标按钮，但当「查询」和多个「筛选」组合使用时，一般需要外置的文字按钮「查询」和「重置」。

2. 筛选操作：「筛选」根据是否可以选择key，分成两种：①直接选择value，比如图示华为云顶部工具栏中的「运行状态」；②先选择key，再输入value，比如图示华为云顶部工具栏中的先选key「名称」再输入value查询。

3. 高级筛选操作：当精细化筛选为较低频操作时，可以使用「高级筛选」按钮隐藏众多的筛选条件，点击按钮调出高级筛选的面板再进行精细化筛选。*在设计「高级筛选」时，要特别注意「筛选中」的状态提示，尤其是当高级筛选面板可以隐藏的情况下，比如使用徽标提示。*

Eagle的筛选提示

多页面通用的操作

多页面通用的操作因为较低频使用，所以一般置于「顶部工具栏」的最右侧，比如腾讯云和华为云的设计。在阿里云的设计中，可能是基于格式塔原理，按钮间的关系更亲近而将「多页面通用的操作」图标按钮置于「主操作」按钮之后。而在青云的设计中，则直接放在最左侧，影响了「主操作」按钮的突出程度，不建议使用。

Q：为什么「多页面通用的操作」通常使用图标按钮而非文字按钮？

A：「顶部工具栏」的空间是有限的，用户的注意力也是有限的。「多页面通用的操作」比如：刷新、设置，因为图标复用度高所以可识别性高，还可以合理节省空间，并且与文字按钮做区分，让用户更加关注文字按钮。