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

這在 B 端學(xué)員提問中一直是一個(gè)很高頻出現(xiàn)的問題，所以就圍繞它來做個(gè)簡單的分享。

一、按鈕的功能定位認(rèn)識(shí)

按鈕作為最基礎(chǔ)的 UI 控件，實(shí)現(xiàn)的功能非?；A(chǔ)，就是點(diǎn)擊觸發(fā)某個(gè)系統(tǒng)服務(wù)（程序）。所以關(guān)注按鈕本身并不重要，重要的是按鈕實(shí)現(xiàn)的功能是什么，在當(dāng)前界面中的權(quán)重，以及背后關(guān)聯(lián)的內(nèi)容是什么。

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

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

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

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

我們順著這個(gè)邏輯改上去，會(huì)發(fā)視覺角度看是更合理了，也更平衡了，而且因?yàn)榘粹o和標(biāo)題欄合并減少一行，首屏露出內(nèi)容量還提升了。

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

再者，這個(gè)頁面是可以上下滾動(dòng)的，當(dāng)頁面下滾上方就被遮擋，那么選擇后的操作就看不到了，還要回滾才能操作。所以這個(gè)調(diào)整，是對(duì)交互和體驗(yàn)的負(fù)優(yōu)化。

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

在這個(gè)要求下，對(duì)表格內(nèi)數(shù)據(jù)項(xiàng)目的操作按鈕，最好的做法就是往左放，這樣它們距離多選的距離是最近的。而有些情況下，因?yàn)楸砀駜?nèi)容區(qū)域較高，我們?cè)跐L動(dòng)過程中進(jìn)行多選后已經(jīng)移到頁面底部，所以相關(guān)操作按鈕往往也會(huì)在表格左下角（右下角是頁碼）重復(fù)放一排出來。

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

很多項(xiàng)目按鈕堆積在一起，是因?yàn)楫a(chǎn)品經(jīng)理給原型的時(shí)候就是把所有操作全部羅列出來，但不代表設(shè)計(jì)師就應(yīng)該不假思索的用相同的方式進(jìn)行排列。

所以每次在面向一大堆按鈕的設(shè)計(jì)需求時(shí)，要做的第一件事就是先根據(jù)面向的目標(biāo)做一次整理，比如下面的案例：

1. 全局操作：刷新
2. 內(nèi)容插入：添加、導(dǎo)入
3. 數(shù)據(jù)篩選：篩選、回收站
4. 多選操作：刪除、導(dǎo)出、批量操作

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

能這么操作屬于理想情況，因?yàn)槎鄶?shù)情況下表格的設(shè)計(jì)會(huì)受到全局框架的影響，比如根據(jù)規(guī)范頁面中標(biāo)題欄、表格右側(cè)都有其它元素占位，這些按鈕不得不擠到同一區(qū)域中。

那么面對(duì)這種情況時(shí)，我們就要通過間距、分割線等要素來對(duì)它們進(jìn)行劃分，比如下面的兩個(gè)改動(dòng)：

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

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

所以第三個(gè)問題，就是按鈕對(duì)色彩的應(yīng)用。首先是主色的使用原則，一排按鈕內(nèi)，我只建議使用 1-2 個(gè)權(quán)重最高的按鈕可以使用主色背景填充。而哪些按鈕權(quán)重高需要設(shè)計(jì)師自己判斷，如果每個(gè)按鈕都要突出，都用主色或五顏六色去設(shè)計(jì)，那也等于沒有權(quán)重表現(xiàn)，因?yàn)樗鼈儧]有對(duì)比。

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

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

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

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

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

當(dāng)然，這些設(shè)計(jì)的優(yōu)化都要考慮實(shí)際的應(yīng)用場(chǎng)景，過多的樣式組合會(huì)讓畫面變亂，一些太復(fù)雜的操作改成圖標(biāo)會(huì)看不懂。

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

建議在輸出相關(guān)方案時(shí)，盡量輸出多個(gè)結(jié)果讓團(tuán)隊(duì)討論和篩選。

結(jié)尾

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

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

我們下篇再賤~

作者：超人的電話亭