一、按鈕的種類(lèi)

按鈕屬于命令控件，包括普通按鈕，圖標按鈕，文字按鈕。

1. 普通按鈕

2. 圖標按鈕

3. 文字按鈕

二、如何保證按鈕的識別性與易學(xué)性

1. 用視覺(jué)樣式告訴人們此處可以點(diǎn)擊

在扁平化設計之前，按鈕都具有三維凸起的特征，這一特征我們仍可以學(xué)習。給按鈕添加適當的陰影，陰影可以使元素突出于背景，這樣更容易使用戶(hù)識別它的可點(diǎn)擊性。

2. 保持一致性

一個(gè)網(wǎng)站的按鈕形狀盡量保持一致，用矩形就都用矩形，用圓角矩形就都用圓角矩形，用戶(hù)會(huì )將特定形狀的元素識別為「按鈕」，一致性會(huì )為用戶(hù)提供更加熟悉的體驗，減少用戶(hù)學(xué)習成本。

一致的

不一致的

3. 使用高效率，易懂的文案

按鈕上的文字「確定、取消」用更加生動(dòng)確切的文字替換。

4. 使用合適的圖標

箭頭朝右，可能意味著(zhù)離開(kāi)此頁(yè)；箭頭朝下，可能意味著(zhù)打開(kāi)下面的內容，或者打開(kāi)下面的菜單。

網(wǎng)易郵箱里的「發(fā)送」按鈕用了圖標紙飛機，不僅提高了按鈕的易讀性，同時(shí)也和其他按鈕做了很好的區分，提高了發(fā)送按鈕的優(yōu)先級。

三、按鈕的反饋狀態(tài)

按鈕在操作中一定要有反饋，來(lái)讓用戶(hù)明白自己的操作發(fā)生了什么。

按鈕的狀態(tài)有默認狀態(tài)、懸停狀態(tài)、點(diǎn)擊狀態(tài)、禁用狀態(tài)、忙碌狀態(tài)。

四、禁用狀態(tài)又有以下幾點(diǎn)要注意

1. 明顯區分

禁用狀態(tài)和可用狀態(tài)的樣式要有明顯的區別，讓用戶(hù)清晰的知道這個(gè)按鈕不可點(diǎn)擊。

2. 禁用狀態(tài)下要給用戶(hù)相應的反饋

當鼠標移動(dòng)到禁用狀態(tài)下的按鈕時(shí)，用提示工具向用戶(hù)解釋禁用的原因。

如百度里某圖片不能下載，當鼠標移動(dòng)到下載按鈕上時(shí)，提示工具會(huì )解釋按鈕不可用的原因。

3. 禁用狀態(tài)的按鈕是可見(jiàn)還是隱藏

禁用狀態(tài)下的按鈕的可見(jiàn)性取決于它在界面中的位置與功能屬性。

如：谷歌瀏覽器禁用狀態(tài)的按鈕是可見(jiàn)的。

safari 瀏覽器也是可見(jiàn)的。

這是因為這兩個(gè)瀏覽器都有三個(gè)按鈕，如果禁用狀態(tài)下不可見(jiàn)，那右側的按鈕的位置就會(huì )不固定，這違反了設計的一致性原則。用戶(hù)想要在固定的位置看到固定的功能，如果每次登錄進(jìn)來(lái)按鈕的位置都會(huì )變化，會(huì )讓用戶(hù)非常困惑，按鈕時(shí)有時(shí)無(wú)，在點(diǎn)擊頁(yè)面的時(shí)候工具欄會(huì )有明顯的變化，體驗也不好。

而 firfox 瀏覽器在改版之前前進(jìn)按鈕在禁用狀態(tài)下是不可見(jiàn)的

因為火狐瀏覽器這里只有兩個(gè)按鈕，不會(huì )出現明顯的跳動(dòng)。

上面是以前的版本，改版后的火狐如下：

所以禁用狀態(tài)下的按鈕的可見(jiàn)性，要根據按鈕的功能和在界面中的位置進(jìn)行具體分析。

五、確定放左還是右？

對于這一問(wèn)題，不同的平臺，不同的軟件都不太一樣。

windows 是確定在左，取消在右。

而 mac 系統是確定在右，取消在左。

為了使用戶(hù)有一致的體驗，最好的方式是不同的平臺使用不同平臺的規范，但是當我們的設計是基于網(wǎng)頁(yè)的時(shí)候，就需要設計師自己取舍了。

六、不同優(yōu)先級按鈕的設計

當我們的界面功能比較多時(shí)，就會(huì )出現比較多的功能按鈕，這些功能按鈕肯定會(huì )有優(yōu)先級，這個(gè)時(shí)候我們就需要設計一套一級按鈕，二級按鈕和三級按鈕，甚至更多。