2022-3-24 鶴鶴
簡介： 按鈕組是把相關(guān)的動作組織成一組按鈕的設(shè)計模式。按鈕組的內(nèi)部內(nèi)容彼此水平或垂直對齊，并采用相似的視覺設(shè)計。如果超過三個或四個動作，往往會采取多個分組。
例子： 語雀編輯器的頂部工具欄
按鈕組可以讓界面不言自明。在復(fù)雜的布局中，被精心安排過的按鈕組會很容易被用戶感知和使用。一方面，它們在界面上往往非常明顯，用戶能夠一眼看到有這些功能可以進行相關(guān)操作。
大家所熟知的格式塔原則（Gestalt principles）也在這里起作用。彼此相鄰的按鈕往往暗示著這些按鈕的功能相近，因此會讓用戶感覺到這一組按鈕可以完成類似的功能。相對的，不同的按鈕分組往往暗示著不同的功能類型，因此彼此間應(yīng)該保持間距，或用不同的形狀，或用分割線進行區(qū)分。
如果你需要在界面上展示許多操作按鈕，且需要確保它們隨時在界面上可見。但同時，你又需要用圖形化的方式組織它們，以使它們看起來不會特別散亂。
這些動作中有許多是彼此相似的 —— 它們有相似或互補的效果，比如，它們的功能語義相類似 —— 由此它們可以三五成組地放在一起。
按鈕組可以用在對產(chǎn)品全局有效的操作上（例如「打開」和「選項」操作），或特定的一些通用操作（「保存」、「編輯」和「刪除」），或特定的某些操作（例如布局的「對齊」、「分布」）。不同范圍的操作不應(yīng)當被到一個組中。
使用條件：
· 存在大量操作按鈕；
· 希望用圖形化的方式組織這些按鈕；
· 操作按鈕間存在功能相關(guān)性和差異性；
這個模式的總結(jié)簡單到像是一句廢話：把相關(guān)的操作按鈕分成一組。
但如果詳細展開就會有更多的介紹。比如：
· 如果需要包含文本說明，盡量使用兩個字或三個字的動詞短語，不要使用專業(yè)術(shù)語。
· 不要把不同功能范圍的按鈕放在一個組，應(yīng)當將它們分成不同的分組。
· 同一組的按鈕應(yīng)該有同樣的視覺設(shè)計：邊框、顏色、高度或?qū)挾取D標風(fēng)格、動態(tài)效果等。
· 在空間排布上，可以將它們并排起來作為橫排放置，如果空間不太適用的話，也可以考慮一列縱列放置（例如Photoshop的左側(cè)工具欄）。
· 如果某一個動作是核心動作，可以將其區(qū)別對待。例如網(wǎng)頁表單中的“提交”按鈕。核心動作是希望大部分用戶都需要（或期待）執(zhí)行的動作。讓這個按鈕擁有更加強烈的圖形或視覺風(fēng)格來讓它在顯得更為突出。
· 如果按鈕足夠多，而且它們都有小圖標，你也可以把它們放在工具條或者像工具條那樣的狹長條上，放置在頁面的頂部。
通過使用按鈕組可以避免界面上按鈕或鏈接過于擁擠混亂，也可以避免一長串冗長的動作列表看起來毫無關(guān)聯(lián)或區(qū)別。
通過這一模式，你可以創(chuàng)建一個較為清晰的元素層級結(jié)構(gòu)：用戶可以一眼看出哪些動作是彼此相關(guān)的，哪些是重要的。
用戶需求：編輯設(shè)計文件中的對象
Sketch 也是個很典型的應(yīng)用了按鈕組的設(shè)計工具。Sketch頂部的按鈕不少于15個， 有很多要理解和追查。 但是得益于精心的視覺和語義組織，界面按鈕始終保持一定的可理解性。
用戶需求：按自己需求對文件進行顯示修改和操作
這個案例顯示了來自 macOS 的 Finder 窗口的頂部按鈕組。 秉承其設(shè)計傳統(tǒng)，按鈕風(fēng)格明顯。 導(dǎo)航組是放置在左側(cè)中的按鈕組。 布局相關(guān)的按鈕組放在了中間，文件操作相關(guān)的按鈕組放在了右側(cè)。這樣的設(shè)計使得界面變得易于理解和使用。
用戶需求：項目執(zhí)行相關(guān)操作
這個案例顯示了 Webstorm 的頂部功能操作區(qū)。WebStorm 采用了按鈕組的模式，將項目執(zhí)行的相關(guān)操作和Git相關(guān)的操作聚合在一起，中間使用了分割線進行了區(qū)分。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.lzhte.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.lzhte.cn