按鈕其實也是從現(xiàn)實生活中延續(xù)到屏幕上來的，一般情況下，點擊之后會做出相應反應的都可稱作是按鈕。它在界面中出現(xiàn)的頻率非常高，導致我在之前就覺得對于這個元素足夠熟悉，而忽略了它的一些設(shè)計細節(jié)。

以下從按鈕的類型、狀態(tài)、設(shè)計要點等幾點開始展開分析。

按鈕類型

由于web后端需要操作的步驟很多，而每個步驟中需要突出和強調(diào)的點不同，因此我們要根據(jù)場景做不同類型的按鈕。大致可以分為以下幾種：

主按鈕、次按鈕、圖標按鈕、文字按鈕。

主按鈕

主按鈕通常是界面中比較重要的一個功能入口，比如說新建、編輯、保存等一些正向的操作。讓用戶很快就可以看到這個界面的核心功能以及該要如何操作?；蛘呤且龑в脩酎c擊時可以使用主按鈕。

其中主按鈕有常見的面性形式和圖文結(jié)合形式兩種。圖文結(jié)合形式標對主按鈕的含義進行解釋，從而幫助用戶提高這個按鈕的識別性。如果一個按鈕你想比主按鈕更加強調(diào)，那便可使用在按鈕中添加圖標，這樣既能夠強化圖標的含義，同時也加深了用戶對于按鈕的印象。

設(shè)計時要注意文字邊框的間距，左右間距要大于上下邊距。通常左右邊距設(shè)置為16px，上下間距6-8px，保持舒適的呼吸感。

關(guān)于圓角

直角按鈕顯得嚴肅、專業(yè)，輕圓角按鈕顯得中性，而全圓角就會比較活潑、親切。因此在web后臺的界面中，通常使用直接圖標與輕度圓角的按鈕。

次按鈕

次按鈕有三種形式：低透明度的面性形式，線框形式，以及圖文形式。

次按鈕在頁面中出現(xiàn)的比較多，畢竟一個界面中不能都是主按鈕，但是可以都是次按鈕。有的界面多個按鈕層級一致時，就沒有必要硬要拿出來一個做主按鈕，可以把他們都當作次按鈕來對待。這樣才會讓頁面比較和諧舒適。

文字按鈕

文字按鈕的表現(xiàn)形式相對比較低調(diào)，通常在表單中出現(xiàn)，它的優(yōu)先級較低，但是可能會頻繁出現(xiàn)，不過即便是很多也不會使界面顯得很雜亂。比如在列表中，每一行都會有多個操作按鈕，使用文字按鈕比較合適，也可以加入小圖標使功能更直觀。

文字按鈕的顏色通常是產(chǎn)品的品牌色，或者是藍色，因為藍色在用戶的認知中通常是可點擊的。

圖標按鈕

圖標按鈕通常是指由一個圖標來代表入口，它能夠直觀的表達功能狀態(tài)。但是沒有了文字的解釋，就要注意圖標的設(shè)計要通用、常見、易于理解，降低用戶的認知成本。最好在懸浮狀態(tài)能夠顯示圖標釋義的文字。

由于按鈕的種類與場景都比較多，在使用的時候要注意保持各個層級的區(qū)別，并且同一層級使用相同類型的圖標，避免出現(xiàn)混亂。

按鈕狀態(tài)

用戶在操作時的流程通常是：鼠標對焦（懸?。?點擊-觸發(fā)-反饋。因此按鈕的狀態(tài)也就可分為這幾種：常規(guī)狀態(tài)（Normal）、懸浮狀態(tài)（Hover）、點擊狀態(tài)（Click）、加載狀態(tài)（Loading）、不可點擊狀態(tài)（Disabled）。

按鈕狀態(tài)，可以讓用戶知道這個按鈕當前是在進行哪一種操作，方便幫助用戶進行判斷。

通常情況下，主按鈕可選擇符合產(chǎn)品調(diào)性的按鈕色，而懸浮狀態(tài)和點擊狀態(tài)也需要視覺上給予反饋，否則在點擊過程中會顯得過于生硬，給用戶造成反饋比較遲鈍的感覺。這里懸浮狀態(tài)可以覆蓋15%的白色透明層，點擊狀態(tài)覆蓋15%的黑色透明層來區(qū)分。而不可點擊狀態(tài)通常選擇用灰色塊，也就是我們所說的置灰。

劃重點

由于按鈕的場景與類型眾多，因此在界面中要區(qū)分好按鈕層級，相同功能等級的按鈕前后要保持統(tǒng)一，避免出現(xiàn)多個頁面不一致的情況。

不要忽視按鈕狀態(tài)，如果沒有懸浮和點擊狀態(tài)，用戶在操作時會覺得流程很生硬；若沒有加載狀態(tài)，在頁面反應大于1s時用戶會不知所措 。因此即時的視覺反饋有助于提高用戶的體驗。