頂部工具欄 Header Tool Bar
「頂部工具欄」通常置于可見性最好的頁面的頂部，用于容納操作對象為整個頁面的按鈕。
根據(jù)觀察，可以把頂部工具欄的操作劃分為以下三種：
1. 專屬該頁面的操作：比如主機頁面的創(chuàng)建、啟動和關機
2.篩選/查詢操作：包括篩選select、查詢和高級篩選等
3.多頁面通用的操作：比如刷新、設置、導出
專屬該頁面的操作
1.「專屬該頁面的操作」通常分為一個「主操作」和多個「輔操作」
2.「主操作」是頁面最核心的操作，按鈕通常使用主題色填充，位于「頂部工具欄」的最左側，根據(jù)古登堡圖表法的對角線視線流，即落在頁面的「第一視覺著落點」，最易被發(fā)現(xiàn)
3.「輔操作」的使用頻率低于「主操作」，在位置上緊跟「主操作」按鈕，在視覺表達上要弱于「主操作」，一般采用線性或淺色填充
Q: 為什么「專屬該頁面的操作」要使用文字按鈕，而不是圖標按鈕？
A：「專屬該頁面的操作」一般不具備共性，每個頁面均有所不同，如果使用圖標按鈕，可識別性太弱，會給用戶增加認知負荷。
Q: 當該頁面的專屬操作過多時應該如何處理？
A：當操作過多時，應該對操作進行分組、合并成一個下拉按鈕。比如「從excel導入」和「從CMDB導入」就可以合并為一個「導入」下拉按鈕，再從下拉選項中選擇具體的導入來源。其他無法合并的低頻操作則可以合并在「更多」下拉按鈕。
篩選/查詢
篩選查詢類操作的控件在「頂部工具欄」中一般采用右對齊
1. 查詢操作：只有單獨的「查詢」時，一般由輸入框和內置的查詢按鈕組成，查詢按鈕為放大鏡樣式的圖標按鈕，但當「查詢」和多個「篩選」組合使用時，一般需要外置的文字按鈕「查詢」和「重置」。
2. 篩選操作：「篩選」根據(jù)是否可以選擇key，分成兩種：①直接選擇value，比如圖示華為云頂部工具欄中的「運行狀態(tài)」；②先選擇key，再輸入value，比如圖示華為云頂部工具欄中的先選key「名稱」再輸入value查詢。
3. 高級篩選操作：當精細化篩選為較低頻操作時，可以使用「高級篩選」按鈕隱藏眾多的篩選條件，點擊按鈕調出高級篩選的面板再進行精細化篩選。*在設計「高級篩選」時，要特別注意「篩選中」的狀態(tài)提示，尤其是當高級篩選面板可以隱藏的情況下，比如使用徽標提示。*
多頁面通用的操作
多頁面通用的操作因為較低頻使用，所以一般置于「頂部工具欄」的最右側，比如騰訊云和華為云的設計。在阿里云的設計中，可能是基于格式塔原理，按鈕間的關系更親近而將「多頁面通用的操作」圖標按鈕置于「主操作」按鈕之后。而在青云的設計中，則直接放在最左側，影響了「主操作」按鈕的突出程度，不建議使用。
Q：為什么「多頁面通用的操作」通常使用圖標按鈕而非文字按鈕？
A：「頂部工具欄」的空間是有限的，用戶的注意力也是有限的。「多頁面通用的操作」比如：刷新、設置，因為圖標復用度高所以可識別性高，還可以合理節(jié)省空間，并且與文字按鈕做區(qū)分，讓用戶更加關注文字按鈕。
