1、CTA按鈕

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

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

2、文字按鈕

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

3、下拉按鈕

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

4、描邊按鈕

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

5\漢堡按鈕

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

6、懸浮按鈕

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

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

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

1、讓按鈕看起來可點擊

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

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

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

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

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

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

F型瀏覽模式

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

Z型瀏覽模式

Z型瀏覽模式模仿了人眼閱讀的路徑——從左到右，從上到下。

用戶首先從左上角到右上角掃描，形成Z的頂部條。然后向左下角掃描，最后再向右看，形成Z型的瀏覽動線。

3、標(biāo)注按鈕的作用

按鈕應(yīng)該始終有清晰的注釋，展示點擊時將執(zhí)行的操作。過于通用或者模糊的注釋可能會讓用戶感到困惑。

4、正確調(diào)整按鈕大小

按鈕的大小代表了元素優(yōu)先級的高級。尺寸較大的按鈕表示更重要的操作。

當(dāng)在一個界面中存在多個操作按鈕時，為了讓最重要的按鈕看起來更突出，可以考慮讓這個按鈕比其他按鈕的尺寸更大，并且利用顏色和對比，讓這個最重要的按鈕更吸引視線。

5、始終提供反饋

每當(dāng)用戶點擊按鈕時，他們期望界面能有提示或者反饋。在激活按鈕時，按鈕應(yīng)該改變狀態(tài)，給用戶一個反饋，便于用戶知道點擊按鈕發(fā)生了什么。

最后

以上總結(jié)了設(shè)計中按鈕的6種類型以及5種改進(jìn)按鈕設(shè)計的方法，希望通過這些內(nèi)容能讓大家對按鈕設(shè)計更重視，對已了解的按鈕設(shè)計知識查缺補(bǔ)漏！

慢慢來比較快，如覺得有幫助，

作者： Clippp

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》如何改進(jìn)UI中的按鈕設(shè)計，試試這5個方法！

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司