頂部工具欄 Header Tool Bar
「頂部工具欄」通常置于可見性最好的頁面的頂部，用于容納操作對象為整個頁面的按鈕纷责。
根據(jù)觀察，可以把頂部工具欄的操作劃分為以下三種：
1. 專屬該頁面的操作：比如主機頁面的創(chuàng)建撼短、啟動和關(guān)機
2.篩選/查詢操作：包括篩選select再膳、查詢和高級篩選等
3.多頁面通用的操作：比如刷新、設(shè)置曲横、導出
專屬該頁面的操作
1.「專屬該頁面的操作」通常分為一個「主操作」和多個「輔操作」
2.「主操作」是頁面最核心的操作喂柒，按鈕通常使用主題色填充不瓶，位于「頂部工具欄」的最左側(cè)，根據(jù)古登堡圖表法的對角線視線流灾杰，即落在頁面的「第一視覺著落點」蚊丐，最易被發(fā)現(xiàn)
3.「輔操作」的使用頻率低于「主操作」，在位置上緊跟「主操作」按鈕艳吠，在視覺表達上要弱于「主操作」麦备，一般采用線性或淺色填充
Q: 為什么「專屬該頁面的操作」要使用文字按鈕，而不是圖標按鈕昭娩？
A：「專屬該頁面的操作」一般不具備共性凛篙，每個頁面均有所不同，如果使用圖標按鈕题禀，可識別性太弱鞋诗，會給用戶增加認知負荷。
Q: 當該頁面的專屬操作過多時應該如何處理迈嘹？
A：當操作過多時削彬，應該對操作進行分組、合并成一個下拉按鈕秀仲。比如「從excel導入」和「從CMDB導入」就可以合并為一個「導入」下拉按鈕融痛，再從下拉選項中選擇具體的導入來源。其他無法合并的低頻操作則可以合并在「更多」下拉按鈕神僵。
篩選/查詢
篩選查詢類操作的控件在「頂部工具欄」中一般采用右對齊
1. 查詢操作：只有單獨的「查詢」時雁刷，一般由輸入框和內(nèi)置的查詢按鈕組成，查詢按鈕為放大鏡樣式的圖標按鈕保礼，但當「查詢」和多個「篩選」組合使用時沛励，一般需要外置的文字按鈕「查詢」和「重置」。
2. 篩選操作：「篩選」根據(jù)是否可以選擇key炮障，分成兩種：①直接選擇value目派，比如圖示華為云頂部工具欄中的「運行狀態(tài)」；②先選擇key胁赢，再輸入value企蹭，比如圖示華為云頂部工具欄中的先選key「名稱」再輸入value查詢。
3. 高級篩選操作：當精細化篩選為較低頻操作時智末，可以使用「高級篩選」按鈕隱藏眾多的篩選條件谅摄，點擊按鈕調(diào)出高級篩選的面板再進行精細化篩選。*在設(shè)計「高級篩選」時系馆，要特別注意「篩選中」的狀態(tài)提示送漠，尤其是當高級篩選面板可以隱藏的情況下，比如使用徽標提示由蘑。*
多頁面通用的操作
多頁面通用的操作因為較低頻使用螺男，所以一般置于「頂部工具欄」的最右側(cè)棒厘，比如騰訊云和華為云的設(shè)計。在阿里云的設(shè)計中下隧，可能是基于格式塔原理奢人，按鈕間的關(guān)系更親近而將「多頁面通用的操作」圖標按鈕置于「主操作」按鈕之后。而在青云的設(shè)計中淆院，則直接放在最左側(cè)何乎，影響了「主操作」按鈕的突出程度，不建議使用土辩。
Q：為什么「多頁面通用的操作」通常使用圖標按鈕而非文字按鈕支救？
A：「頂部工具欄」的空間是有限的，用戶的注意力也是有限的拷淘「髂「多頁面通用的操作」比如：刷新、設(shè)置启涯，因為圖標復用度高所以可識別性高贬堵，還可以合理節(jié)省空間，并且與文字按鈕做區(qū)分结洼，讓用戶更加關(guān)注文字按鈕黎做。
