按鈕是ui界面中最常見(jiàn)的交互元素之一，所以，如果要?jiǎng)?chuàng)建一個(gè)穩(wěn)固的互動(dòng)且積極有效的用戶(hù)體驗(yàn)，需要設(shè)計(jì)好按鈕元素。今天我們將搜集整理一些網(wǎng)頁(yè)app上常見(jiàn)的按鈕類(lèi)型，了解這些不同的按鈕設(shè)計(jì)方法。

什么是按鈕？ 

按鈕是一個(gè)交互式元素，可以根據(jù)特定命令從系統(tǒng)獲得預(yù)期的交互式反饋。基本上，按鈕是允許用戶(hù)直接與數(shù)字產(chǎn)品通信并發(fā)送必要命令以實(shí)現(xiàn)特定目標(biāo)的控件。例如，可能需要發(fā)送電子郵件，購(gòu)買(mǎi)產(chǎn)品，下載一些數(shù)據(jù)或一些內(nèi)容，打開(kāi)播放器以及大量其他可能的操作。

按鈕如此受歡迎且用戶(hù)體驗(yàn)友好的原因之一，就是它們有效地模仿了物理世界中的交互。 

現(xiàn)代UI按鈕非常多樣化，可以滿(mǎn)足各種用途。典型且經(jīng)常使用的按鈕，其呈現(xiàn)交互式區(qū)域，通常清楚地標(biāo)出可見(jiàn)性并具有特定的幾何形狀，通過(guò)該按鈕解釋將實(shí)現(xiàn)什么樣的動(dòng)作。設(shè)計(jì)師必須花費(fèi)大量的時(shí)間和精力來(lái)創(chuàng)造有效且引人注目的按鈕，這些按鈕自然地融入了一般的風(fēng)格概念中，但是它們的對(duì)比度足以在布局中脫穎而出。 

接下來(lái)讓我們一起來(lái)看看移動(dòng)app和Web界面中廣泛使用的幾種按鈕類(lèi)型。 

1，CTA按鈕

CTA按鈕的目的是在鼓勵(lì)用戶(hù)采取某種行動(dòng)的用戶(hù)界面的互動(dòng)元素。此操作為特定頁(yè)面或屏幕提供鏈接（例如：購(gòu)買(mǎi)，聯(lián)系，訂閱等），換句話(huà)說(shuō)，它將普通用戶(hù)變?yōu)橛嗛営脩?hù)。因此，從技術(shù)上講，它可以是通過(guò)號(hào)召性用語(yǔ)文本支持的任何類(lèi)型的按鈕。它與頁(yè)面或屏幕上的所有其他按鈕的不同之處在于其引人注目的特性：它必須引起注意并刺激用戶(hù)執(zhí)行所需的操作。 

這是一個(gè)為孩子們出售書(shū)籍的電子商務(wù)網(wǎng)站的主頁(yè)。在首頁(yè)中，有一個(gè)核心操作作為頁(yè)面的目標(biāo)：讓用戶(hù)訂閱郵件，留下郵箱地址。因此，按鈕被設(shè)計(jì)為布局中最引人注目的元素之一，以便用戶(hù)可以在他或她愿意的時(shí)候立即看到如何執(zhí)行操作。 

2，文字按鈕

這是一個(gè)帶有一段文字的按鈕。這意味著文本周?chē)鷽](méi)有任何形狀，色塊填充等。因此，在我們對(duì)物理世界中這種現(xiàn)象的標(biāo)準(zhǔn)理解中，它看起來(lái)并不像按鈕。該文本是頁(yè)面中唯一的視覺(jué)交互元素。不過(guò)，它是一個(gè)允許用戶(hù)與界面交互的實(shí)時(shí)控件，鼠標(biāo)懸停時(shí)，文字的顏色會(huì)改變，或者文字出現(xiàn)下劃線(xiàn)。此外，網(wǎng)站的標(biāo)題也是沒(méi)有任何標(biāo)記，只有文字。

文本按鈕通常用于創(chuàng)建輔助交互式區(qū)域，而不會(huì)分散主要控件或CTA元素的注意力。 

這是一個(gè)時(shí)尚商店優(yōu)雅的網(wǎng)站設(shè)計(jì)。如您所見(jiàn)，布局的交互部分都是文本按鈕。只有主要的CTA元素才會(huì)顯示為一個(gè)帶色塊的按鈕。所有其他功能按鈕都為文字按鈕。使用這種按鈕的網(wǎng)頁(yè)一般是簡(jiǎn)約風(fēng)格。 

3，下拉按鈕 

單擊下拉按鈕時(shí)，將顯示項(xiàng)目的下拉列表。您通?？梢栽谠O(shè)置按鈕中遇到此類(lèi)型。當(dāng)用戶(hù)選擇列表中的一個(gè)選項(xiàng)時(shí)，它通常被標(biāo)記為活動(dòng)。 

HealthCare應(yīng)用交互流程顯示按鈕，打開(kāi)醫(yī)生可以添加到特定帳單的詳細(xì)信息列表：?jiǎn)螕舭粹o時(shí)，將打開(kāi)選項(xiàng)下拉列表。只要您選擇一個(gè)，大按鈕就會(huì)消失，選擇選項(xiàng)和小加按鈕，以防您再次檢查列表。 

4，漢堡按鈕

它是隱藏菜單的按鈕。單擊或點(diǎn)擊它時(shí)，菜單會(huì)展開(kāi)。這種菜單（以及按鈕）的名稱(chēng)由于它的形狀由三條水平線(xiàn)組成，看起來(lái)像典型的漢堡包。今天，它是一種廣泛使用的移動(dòng)端頁(yè)面布局的互動(dòng)元素 ; 關(guān)于其利弊的爭(zhēng)論仍然很熱烈。 

漢堡菜單釋放空間使界面更簡(jiǎn)約和通風(fēng); 從功能的角度來(lái)看，它為其他重要的布局元素節(jié)省了大量空間。對(duì)于響應(yīng)和自適應(yīng)設(shè)計(jì)隱藏導(dǎo)航元素并使界面在不同設(shè)備上看起來(lái)更加和諧。 

反對(duì)漢堡包菜單的人認(rèn)為，這個(gè)設(shè)計(jì)元素可能會(huì)讓那些不經(jīng)常使用網(wǎng)站的人感到困惑，并且可能會(huì)被那些具有高度抽象性的標(biāo)志所誤導(dǎo)。

以上是使用漢堡菜單功能的網(wǎng)站示例。它允許隱藏?cái)U(kuò)展的選項(xiàng)菜單，以便將用戶(hù)的注意力集中在令人印象深刻的視覺(jué)效果和核心信息上。 

5，加號(hào)按鈕 

點(diǎn)擊加號(hào)按鈕使用戶(hù)可以向系統(tǒng)添加一些新內(nèi)容。根據(jù)應(yīng)用的類(lèi)型，它可以是列表中的新帖子，聯(lián)系人，位置，注釋?zhuān)?xiàng)目等。有些情況下點(diǎn)擊此按鈕，用戶(hù)將直接轉(zhuǎn)移到創(chuàng)建內(nèi)容的模式窗口，另外一種情況，點(diǎn)擊后出現(xiàn)更多菜單選項(xiàng)，這是在不使屏幕過(guò)載的情況下設(shè)置適當(dāng)?shù)慕换チ鞯囊环N方式，這對(duì)于屏幕空間有限的移動(dòng)界面尤其重要。 

這是Travel Planner應(yīng)用：標(biāo)簽欄的中央交互元素是一個(gè)加號(hào)按鈕，允許用戶(hù)在特定行程中添加新行程或新項(xiàng)目。為了使體驗(yàn)更簡(jiǎn)單，按鈕被擴(kuò)展為一組標(biāo)記明確類(lèi)型的內(nèi)容的按鈕，以便用戶(hù)可以在開(kāi)始時(shí)做出選擇并到達(dá)特定頁(yè)面。 

6，分享按鈕 

隨著社交網(wǎng)絡(luò)，聊天和電子郵件的高度普及，這些按鈕簡(jiǎn)化了將應(yīng)用或網(wǎng)站內(nèi)容與其它人分享的過(guò)程。此類(lèi)按鈕可以直接將內(nèi)容或成就分享給社交網(wǎng)絡(luò)帳戶(hù)。為了使分享簡(jiǎn)單清晰，它呈現(xiàn)的圖標(biāo)具有特定社交網(wǎng)絡(luò)的品牌標(biāo)志，并且易于識(shí)別。

這是一家建筑公司優(yōu)雅而簡(jiǎn)約的企業(yè)網(wǎng)站。在主頁(yè)的左下角，您可以看到企業(yè)社交帳戶(hù)的圖標(biāo)。它們很容易引人注目，不會(huì)分散核心導(dǎo)航和CTA按鈕的注意力。 

7，虛擬按鈕 

虛擬按鈕，顧名思義，也就是在設(shè)計(jì)網(wǎng)頁(yè)中的按鈕之時(shí)，不再設(shè)計(jì)復(fù)雜色彩、樣式和紋理，而是外僅以線(xiàn)框示意輪廓，內(nèi)只用文字示意功能，背景透出，與整個(gè)頁(yè)面/背景合而為一的設(shè)計(jì)方式。

這是餐館app的注冊(cè)頁(yè)面。它具有三種不同類(lèi)型的按鈕：核心CTA帶有填充按鈕，提供最流行，最簡(jiǎn)單的快速注冊(cè)方式; 虛擬按鈕提供了不太流行的選項(xiàng); 文本按鈕被集成到下一行作為問(wèn)題的答案并用顏色標(biāo)記。這種方法有助于在頁(yè)面上構(gòu)建按鈕的可靠的視覺(jué)層次結(jié)構(gòu)。 

8，浮動(dòng)操作按鈕（FAB） 

Floating Action Button (FAB)（FAB）是浮動(dòng)在用戶(hù)界面上方的圖標(biāo)。它的形狀，位置和顏色使它與界面的其余部分明顯區(qū)分開(kāi)來(lái)。

在2014年Google推出了Material Design之后，F(xiàn)AB作為一個(gè)用戶(hù)界面元素，被廣泛應(yīng)用于網(wǎng)站設(shè)計(jì)和移動(dòng)設(shè)計(jì)中。

雖然FAB可能被視為一個(gè)微小的，無(wú)關(guān)緊要的UI組件，但其效果是至關(guān)重要的。

FAB按鈕在頁(yè)面上的位置通常由高可見(jiàn)度因素決定，并且可以根據(jù)應(yīng)用的一般設(shè)計(jì)概念而變化。經(jīng)驗(yàn)法則是每個(gè)頁(yè)面僅使用一個(gè)FAB。 

按鈕的設(shè)計(jì)原則

尺寸

大小是告知用戶(hù)布局元素的重要性和構(gòu)建組件層次結(jié)構(gòu)的核心方法之一。一個(gè)有吸引力和高效的號(hào)召性用語(yǔ)按鈕需要足夠大，以便能夠快速找到，但不要太大，以免布局結(jié)構(gòu)被破壞。設(shè)計(jì)規(guī)范對(duì)按鈕對(duì)尺寸有嚴(yán)格的建議，Apple建議移動(dòng)UI中的CTA應(yīng)至少為44Х44像素，而Microsoft推薦34Х26像素。如果您為移動(dòng)設(shè)計(jì)，對(duì)不同類(lèi)型的按鈕的要求可能非常嚴(yán)格，因此要徹底研究設(shè)計(jì)規(guī)范指南，以最大限度地降低因UI設(shè)計(jì)不佳而導(dǎo)致應(yīng)用拒絕的風(fēng)險(xiǎn)。 

顏色 

為了使一些按鈕容易引人注意并且一些次要按鈕，選擇合適的顏色至關(guān)重要。問(wèn)題在于人類(lèi)的情緒和行為與視覺(jué)環(huán)境高度相關(guān)，而顏色是這方面最強(qiáng)大的工具之一。在為CTA選擇顏色時(shí)要記住這一點(diǎn)至關(guān)重要：按鈕和背景顏色必須對(duì)比良好才能使按鈕從其他UI組件中快速脫穎而出。 

形狀 

至于CTA按鈕，它們通?？雌饋?lái)像水平矩形。原因是你要清楚這個(gè)按鈕是可點(diǎn)擊和交互的，人們習(xí)慣將這個(gè)形狀看作一個(gè)按鈕。按鈕的形狀還要與網(wǎng)頁(yè)或者app的設(shè)計(jì)風(fēng)格保持一致。

位置 

按鈕的放置位置對(duì)于構(gòu)建可靠的視覺(jué)層次結(jié)構(gòu)和清晰的導(dǎo)航至關(guān)重要。如果它們位于用戶(hù)眼睛無(wú)法捕捉到的區(qū)域，則其他視覺(jué)方面（例如顏色和大小）可能無(wú)法有效工作。設(shè)計(jì)人員必須學(xué)習(xí)可掃描的區(qū)域，并在用戶(hù)可以操作的空間中放置核心功能的按鈕。 

有更多類(lèi)型的按鈕可供討論，感興趣的小伙伴們可以下載設(shè)計(jì)模板研究網(wǎng)頁(yè)中的按鈕如何設(shè)計(jì)。