1、CTA按鈕

號(hào)召性按鈕(CTA)是界面中的交互元素，用來執(zhí)行特定的操作，例如聯(lián)系我們、訂閱信息、購(gòu)買產(chǎn)品或加入購(gòu)物車等。

CTA按鈕作為執(zhí)行重要操作的按鈕，在設(shè)計(jì)上應(yīng)該更醒目，能讓用戶快速分辨出來。

2、文字按鈕

文字按鈕是以可點(diǎn)擊的文字作為按鈕，文字底部沒有圖形背景。文字按鈕的操作面積小，突出程度低，多用于不太重要的操作。

3、下拉按鈕

在有的網(wǎng)站導(dǎo)航欄中，單擊選項(xiàng)會(huì)出現(xiàn)下拉列表，展示更多二級(jí)選項(xiàng)，方便用戶可以查看并選擇更多的操作。

4、描邊按鈕

描邊按鈕是背景透明效果的按鈕，用于輔助操作。當(dāng)界面中有多個(gè)按鈕時(shí)，使用描邊按鈕有助于劃分視覺層次結(jié)構(gòu)，高優(yōu)先級(jí)的按鈕使用填充效果，輔助按鈕使用描邊按鈕。

5\漢堡按鈕

漢堡按鈕隱藏在菜單欄中，當(dāng)我們點(diǎn)擊時(shí)，菜單將展開并顯示所有的選項(xiàng)。漢堡按鈕廣泛應(yīng)用于web和移動(dòng)應(yīng)用中。

6、懸浮按鈕

懸浮按鈕(FAB)位于界面的最高層級(jí)，優(yōu)先級(jí)高，通常為圓形，在界面中執(zhí)行最常見的操作。

FAB按鈕常用于創(chuàng)建新項(xiàng)目或者發(fā)表內(nèi)容等操作，F(xiàn)AB的位置應(yīng)確保按鈕具有較高的可訪問性和可視性。在有的產(chǎn)品中，點(diǎn)擊FAB會(huì)出現(xiàn)更多的操作，將常用的操作聚集到一個(gè)按鈕中。

二、有效的按鈕設(shè)計(jì)實(shí)踐

1、讓按鈕看起來可點(diǎn)擊

當(dāng)用戶與界面交互時(shí)，他們應(yīng)該快速明白什么是可點(diǎn)擊，什么是不可點(diǎn)擊的。作為設(shè)計(jì)師，我們不會(huì)希望用戶花很長(zhǎng)的時(shí)間來理解他們看到的元素，因?yàn)?/span>用戶花的時(shí)間越長(zhǎng)，產(chǎn)品的可用性就越差。

為了確保用戶能夠明確知道按鈕是否可點(diǎn)擊，我們可以使用用戶熟悉的按鈕樣式，例如方形邊框的填充按鈕、圓角填充按鈕、帶有陰影的填充按鈕、描邊按鈕等。

其中最為常見和熟悉的設(shè)計(jì)是帶陰影的彩色填充按鈕，當(dāng)用戶看到這樣的按鈕時(shí)，他們會(huì)立刻明白這是一個(gè)可點(diǎn)擊的按鈕。

2、考慮按鈕在界面中的位置

按鈕的位置很重要。作為設(shè)計(jì)師，我們不希望用戶花時(shí)間尋找按鈕，而是應(yīng)該將按鈕放在用戶期望的位置上，方便用戶去操作。

對(duì)于按鈕在界面中的位置，首先要了解F型和Z型的瀏覽模式。

F型瀏覽模式

在F型模式中，用戶通過水平移動(dòng)的方式讀取界面上方的內(nèi)容，構(gòu)成F的頂部欄。然后用戶向下移動(dòng)頁(yè)面，再次水平移動(dòng)，再以垂直移動(dòng)的方式瀏覽左側(cè)的內(nèi)容，形成F型的主干。當(dāng)界面中有大量數(shù)據(jù)時(shí)，通常會(huì)遵循這樣的瀏覽模式。