在 B 端的表格頁設計中，除了篩選模塊和表格組件以外，最麻煩的東西就是怎么處理頁面內的——按鈕。

這在 B 端學員提問中一直是一個很高頻出現的問題，所以就圍繞它來做個簡單的分享。

一、按鈕的功能定位認識

按鈕作為最基礎的 UI 控件，實現的功能非常基礎，就是點擊觸發(fā)某個系統(tǒng)服務（程序）。所以關注按鈕本身并不重要，重要的是按鈕實現的功能是什么，在當前界面中的權重，以及背后關聯的內容是什么。

想要合理的處理按鈕就需要先了解表格頁本身，想要進一步豐富相關知識可以看我之前做的分享：

最基礎的表格頁框架中通常就包含三個模塊，標題欄、篩選、表格組件，用原型表示的話如下所示。

而按鈕通常分布于模塊的邊緣（不會居中放），可能在模塊外部也可能再模塊內部，所以再常規(guī)表格頁面中它們可以分布的區(qū)域就如下圖演示。

從布局和視覺角度講，按鈕最適合放在"空缺位"上，比如今天下圖的案例中，社群里就有人會選擇把按鈕放到標題欄去。

我們順著這個邏輯改上去，會發(fā)視覺角度看是更合理了，也更平衡了，而且因為按鈕和標題欄合并減少一行，首屏露出內容量還提升了。

但顯然，B 端的界面不是只跟著視覺的要求來做，畫面也許好看了，但不代表好用。這部分按鈕上移后最大的問題，就是操作距離變遠了。因為這些操作先要在表格中進行選擇，多選通常在左側的首列。

再者，這個頁面是可以上下滾動的，當頁面下滾上方就被遮擋，那么選擇后的操作就看不到了，還要回滾才能操作。所以這個調整，是對交互和體驗的負優(yōu)化。

而這里就延伸出第一個按鈕設置的知識點，那就是 —— 按鈕要盡可能靠近前置操作內容的距離，且保持可見。

在這個要求下，對表格內數據項目的操作按鈕，最好的做法就是往左放，這樣它們距離多選的距離是最近的。而有些情況下，因為表格內容區(qū)域較高，我們在滾動過程中進行多選后已經移到頁面底部，所以相關操作按鈕往往也會在表格左下角（右下角是頁碼）重復放一排出來。

第二個問題，就是并排的按鈕需要具有相關性。以上面的案例為例，除了刪除、導出、批量操作是針對表格內選項進行的，刷新則是刷新整個頁面（不止是表格），添加、導入是往表格內插入新內容，篩選按鈕用于展開篩選面板，回收站是切換表格內容，這幾個按鈕的作用和意義可以說截然不同。

很多項目按鈕堆積在一起，是因為產品經理給原型的時候就是把所有操作全部羅列出來，但不代表設計師就應該不假思索的用相同的方式進行排列。

所以每次在面向一大堆按鈕的設計需求時，要做的第一件事就是先根據面向的目標做一次整理，比如下面的案例：

1. 全局操作：刷新
2. 內容插入：添加、導入
3. 數據篩選：篩選、回收站
4. 多選操作：刪除、導出、批量操作

功能的差異是要遵循親密性原則的，而最好的親密性應用就是把功能性差的多的按鈕放置到不同的位置去，如下面的改進結果：

能這么操作屬于理想情況，因為多數情況下表格的設計會受到全局框架的影響，比如根據規(guī)范頁面中標題欄、表格右側都有其它元素占位，這些按鈕不得不擠到同一區(qū)域中。

那么面對這種情況時，我們就要通過間距、分割線等要素來對它們進行劃分，比如下面的兩個改動：

但僅靠這種區(qū)分還是有點亂，所以我們還可以做更多的細節(jié)調整，比如對一些操作不是那么頻繁的按鈕進行合并，使用帶有下拉窗口的按鈕來收納次要的選項。

這些是交互層面的調整，而做按鈕畢竟不是只做原型而已，所以我們最終還要添加樣式進去。而很多新手、不專業(yè)的設計案例中，都會往這些按鈕上填充主色不同的顏色，讓界面看起來更混亂。

所以第三個問題，就是按鈕對色彩的應用。首先是主色的使用原則，一排按鈕內，我只建議使用 1-2 個權重最高的按鈕可以使用主色背景填充。而哪些按鈕權重高需要設計師自己判斷，如果每個按鈕都要突出，都用主色或五顏六色去設計，那也等于沒有權重表現，因為它們沒有對比。

一個按鈕用主色，其它按鈕怎么辦呢？普通按鈕有兩種做法，一種使用線框按鈕，或者使用和主色同色相的淺色背景來設計。

如果還要使用其它顏色，那么最好這些顏色用于表現狀態(tài)的，第一種狀態(tài)類型就是可用和禁用狀態(tài)，如批量選擇如果沒有選中數據，那操作就是禁用的。

另一種狀態(tài)類型則和業(yè)務邏輯相關，比如有些按鈕是更改數據的狀態(tài)，而每個狀態(tài)有一個標準用色，在線綠色、忙碌紅色、隱身黃色、下線灰色，按鈕就可以跟隨這個顏色設置。

而顏色的表示上還有個世紀性誤區(qū) —— 刪除按鈕沒必要用紅色表示！雖然刪除是需要警示的，但警示是可以留給二次確認的，或者鼠標懸浮高亮，而不是默認標紅讓用戶一直注意它，讓本來不想刪的也被你給整刪了。

除了顏色外，按鈕本身的設計是有不同樣式可選的，設計師不用把自己限死在填充矩形+文字的單一模式內，還可以使用描邊矩形、圖標+文字、獨立圖標等不同按鈕樣式進行替換。

當然，這些設計的優(yōu)化都要考慮實際的應用場景，過多的樣式組合會讓畫面變亂，一些太復雜的操作改成圖標會看不懂。

同時制定的邏輯不是僅在一個頁面中使用，要盡可能考慮全局的通用性，在這個頁面建立的設計規(guī)則能不能在其它頁面通用，而不是每個頁面各做各的，形成非常割裂的按鈕使用體驗。

建議在輸出相關方案時，盡量輸出多個結果讓團隊討論和篩選。

結尾

按鈕屬于比較簡單的需求，而這種需求要做合理可以思考和調整的地方也有不少，只是設計師能不能意識到并展開實踐，用更合理的方案進行呈現或說服團隊需求方接受。

辦法總是有的，即使老板、產品就想用體驗差的土方法也無所謂，給他們就是了，但不要停止自己的思考。

我們下篇再賤~

作者：超人的電話亭