按鈕是用戶界面中最普遍的交互元素之一。更重要的是，它們對(duì)于創(chuàng)建可靠的交互和積極的用戶體驗(yàn)至關(guān)重要。今天，我們?cè)谶@里收集了網(wǎng)站和移動(dòng)應(yīng)用程序中常見(jiàn)的按鈕類型的定義

本文共計(jì)2836字，閱讀大約需要10分鐘

按鈕是用戶界面中最普遍的交互元素之一。更重要的是，它們對(duì)于創(chuàng)建可靠的交互和積極的用戶體驗(yàn)至關(guān)重要。今天，我們?cè)谶@里收集了網(wǎng)站和移動(dòng)應(yīng)用程序中常見(jiàn)的按鈕類型的定義和示例。

什么是按鈕？

按鈕是一個(gè)交互元素，可以讓您能夠根據(jù)特定的命令從系統(tǒng)獲得預(yù)期的交互反饋。基本上，按鈕是一個(gè)控件，允許用戶直接與數(shù)字產(chǎn)品通信，并發(fā)送必要的命令來(lái)實(shí)現(xiàn)特定的目標(biāo)。例如，發(fā)送電子郵件、購(gòu)買產(chǎn)品、下載一些數(shù)據(jù)或內(nèi)容、打開(kāi)播放器以及其他大量可能的操作。按鈕之所以如此普遍，原因之一是它們能有效地模擬與現(xiàn)實(shí)世界中對(duì)象的交互。

現(xiàn)代UI按鈕非常多樣化，可以滿足各種用途。典型且經(jīng)常使用的按鈕，其呈現(xiàn)交互部分，一般顯示為可見(jiàn)性并具有特定的幾何圖形，同時(shí)有副本支持說(shuō)明通過(guò)該按鈕將執(zhí)行的操作。設(shè)計(jì)師需要精心設(shè)計(jì)有效且引人注目的按鈕，這些按鈕要自然地融入整體設(shè)計(jì)風(fēng)格，在對(duì)比度及布局上要明顯突出。

接下來(lái)讓我們看看移動(dòng)和 Web 界面中廣泛使用的按鈕類型 ??

CTA按鈕

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

文本按鈕

顧名思義。文本按鈕意味著沒(méi)有任何形狀、填充標(biāo)簽或類似的東西。因此，直觀的看，它看起來(lái)并不像按鈕。不過(guò)，可以用到標(biāo)有顏色或帶下劃線的這些按鈕，依然可以實(shí)現(xiàn)用戶交互轉(zhuǎn)換。文本按鈕通常用于創(chuàng)建輔助交互部分，并不會(huì)分散主標(biāo)題或CTA元素的注意力。

某網(wǎng)站設(shè)計(jì)：整體交互部分采用文本按鈕，所有其他功能僅包含標(biāo)題和標(biāo)簽中的復(fù)制功能，這種文本按鈕方式一般用于簡(jiǎn)約風(fēng)格的網(wǎng)頁(yè)

下拉按鈕

單擊下拉按鈕時(shí)，將顯示互斥項(xiàng)目的下拉列表。一般在設(shè)置按鈕中常見(jiàn)。當(dāng)用戶選擇列表中的一個(gè)選項(xiàng)時(shí)，通常按顏色被標(biāo)記為活動(dòng)的。

以下圖為例：?jiǎn)螕舭粹o時(shí)，將打開(kāi)選項(xiàng)下拉列表。只要您選擇完成其中一項(xiàng)后，下拉列表就會(huì)消失，只保留選擇選項(xiàng)和加號(hào)按鈕，以防您再次重復(fù)選擇下拉列表。

“漢堡”按鈕

它是隱藏菜單式按鈕。單擊或光標(biāo)選擇按鈕時(shí)，菜單會(huì)展開(kāi)。這種菜單（或按鈕）的名稱由于它的形狀由三條水平線組成，看起來(lái)像典型的面包 - 肉 - 面包，顧名“漢堡”按鈕?，F(xiàn)在它已是一種廣泛應(yīng)用的 Web 和移動(dòng)布局的交互元素; 關(guān)于其利弊的爭(zhēng)論也很激烈。

對(duì)于活躍互聯(lián)網(wǎng)用戶來(lái)說(shuō)，默認(rèn)情況下知道此按鈕隱藏了各種類別的網(wǎng)站內(nèi)容，因此這個(gè)技巧不需要額外的解釋和提示。好的是，漢堡按鈕菜單釋放空間使界面更簡(jiǎn)約和舒服; 從功能的角度來(lái)看，它為其他重要的布局元素節(jié)省了大量空間。可以提到的響應(yīng)和自適應(yīng)設(shè)計(jì)隱藏導(dǎo)航元素使界面在不同設(shè)備上看起來(lái)更和諧。

不喜歡“漢堡”按鈕的人認(rèn)為，這個(gè)設(shè)計(jì)元素可能會(huì)讓那些不經(jīng)常使用網(wǎng)站的人感到困惑，并且會(huì)被那些具有高度抽象性的標(biāo)志誤導(dǎo)。這可能會(huì)對(duì)導(dǎo)航產(chǎn)生負(fù)面影響，并成為用戶體驗(yàn)不佳的原因。因此，應(yīng)在用戶調(diào)研和定義目標(biāo)受眾的能力和需求后做出關(guān)于應(yīng)用“漢堡”按鈕的決定。

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

可伸展按鈕

此按鈕在被單擊或點(diǎn)擊后打開(kāi)多種選項(xiàng)。這是另一種在不使屏幕過(guò)載的情況下設(shè)置適當(dāng)交互流的方法，這對(duì)于屏幕空間有限的移動(dòng)接口尤其重要。

某 APP ：標(biāo)簽欄的中央交互元素是一個(gè)加號(hào)按鈕，用戶可以在操作過(guò)程中添加新行程或新項(xiàng)目。為了使體驗(yàn)更簡(jiǎn)單，按鈕被擴(kuò)展為一組標(biāo)記明確類型的內(nèi)容的按鈕，以便用戶可以在開(kāi)始時(shí)做出選擇并到達(dá)必要的屏幕

分享按鈕

分享按鈕可以將內(nèi)容或直接共享到社交網(wǎng)絡(luò)帳戶。為了使這種聯(lián)系更加清晰，網(wǎng)站上會(huì)出現(xiàn)一些圖標(biāo)，這些圖標(biāo)具有特定社交網(wǎng)絡(luò)的 logo 。如果用戶不是專門(mén)為了分享登錄網(wǎng)站的話，一般不需要將分享按鈕詳細(xì)化（沒(méi)有額外圖形、顏色標(biāo)記、下劃線等），只看到圖標(biāo)也是可以的，這種方法適合簡(jiǎn)約風(fēng)格和有效利用負(fù)空間。不會(huì)讓用戶過(guò)于關(guān)注分享按鈕，而搶了頁(yè)面主要內(nèi)容的風(fēng)頭。

一家風(fēng)格簡(jiǎn)約的某網(wǎng)站。在主頁(yè)的左下角，您可以看到社交平臺(tái)的 logo 圖標(biāo)。它們很容易引人注目但又不影響網(wǎng)站內(nèi)容平衡，不會(huì)分散核心導(dǎo)航和 CTA按鈕 的注意力

鏤空按鈕

鏤空按鈕是一個(gè)看起來(lái)透明的按鈕。視覺(jué)上是以細(xì)線形狀環(huán)繞按鈕呈現(xiàn)的。這種按鈕有助于歸類視覺(jué)層次結(jié)構(gòu)，以防出現(xiàn)多個(gè)CTA元素導(dǎo)致用戶難以分辨主次信息：核心 CTA 以填充按鈕顯示，而輔助（仍然活動(dòng)）以鏤空按鈕給出。

某 APP 首頁(yè)：有三種不同類型的按鈕：核心 CTA 以填充按鈕，提供快速注冊(cè)方式; 鏤空按鈕提供了次要的選項(xiàng); 文本按鈕被放到下一行并用顏色標(biāo)注。這種方法有助于在屏幕上構(gòu)建按鈕的可靠視覺(jué)層次結(jié)構(gòu)

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

浮動(dòng)操作按鈕（簡(jiǎn)稱 FAB）是在 APP 屏幕上顯示主要操作的按鈕。通常，它是一個(gè)高于其他頁(yè)面內(nèi)容的圓形圖標(biāo)按鈕。此按鈕通?？梢约磿r(shí)訪問(wèn)用戶使用 APP 執(zhí)行的基本操作或熱門(mén)操作。根據(jù)移動(dòng) APP 的設(shè)計(jì)和信息架構(gòu)，F(xiàn)AB 可以：

1. 執(zhí)行典型的核心操作（打開(kāi)新電子郵件的屏幕，打開(kāi)添加照片或視頻內(nèi)容的屏幕，在庫(kù)中搜索所需內(nèi)容等）

2. 顯示其他操作

3. 轉(zhuǎn)換為其他 UI 元素。

FAB在屏幕上的位置通常由高可見(jiàn)度因素決定，并且可以根據(jù)屏幕的一般設(shè)計(jì)概念而變化。最好是每個(gè)屏幕僅使用一個(gè) FAB，以避免注意力分散。

某 APP 底部應(yīng)用欄：重疊 FAB 和排列圖像列表的交互流程

有效按鈕設(shè)計(jì)的因素

?尺寸 

按鈕大小是告知用戶布局元素的重要性和組成部分層次結(jié)構(gòu)的核心方法之一。一個(gè)有吸引力和高效的 CTA按鈕 要足夠大，以便快速找到，但不要太大，以免布局結(jié)構(gòu)被破壞。例如：Apple 表示移動(dòng) UI 中的 CTA 應(yīng)至少為 44Х44 像素，而 Microsoft 推薦 34Х26 像素。

?顏色

為了使次要按鈕同樣容易引起注意 ，選擇合適的顏色至關(guān)重要。人類的情緒和行為與視覺(jué)環(huán)境息息相關(guān)，顏色是這方面最強(qiáng)大的工具之一。在為 CTA 選擇顏色時(shí)謹(jǐn)記：按鈕和背景顏色必須對(duì)比度恰到好處，才能使按鈕從其他 UI 內(nèi)容中一目了然。

?形狀

關(guān)于 CTA按鈕，普遍使用水平矩形。原因是人們已經(jīng)習(xí)慣將這個(gè)形狀看作成一個(gè)按鈕了。此外，建議設(shè)計(jì)帶圓角的CTA，因?yàn)閳A角可以起到指向按鈕內(nèi)部，引起對(duì)按鈕本身的注意。當(dāng)然，這個(gè)形狀是在與網(wǎng)頁(yè)或 APP 屏幕風(fēng)格一致時(shí)使用的。

?布局

按鈕的布局對(duì)于構(gòu)建良好的視覺(jué)層次和清晰的導(dǎo)航至關(guān)重要。如果它們位于用戶一眼無(wú)法找到的位置，即便運(yùn)用顏色和大小也于事無(wú)補(bǔ)。設(shè)計(jì)師必須掌握核心功能的按鈕放置最有效的位置。

某少兒網(wǎng)站的登陸頁(yè)面設(shè)計(jì)。讓我們回顧一下頁(yè)面上使用的所有按鈕：

邀請(qǐng)?jiān)L問(wèn)者加入的 核心CTA按鈕 一目了然：設(shè)計(jì)師使用了一個(gè)圓角矩形填充按鈕，其顏色與背景形成對(duì)比，但設(shè)計(jì)了動(dòng)畫(huà)人物，其顏色與按鈕形成了視覺(jué)聯(lián)系。這是頁(yè)面上最突出的視覺(jué)元素。

標(biāo)題包含4個(gè)文本按鈕，用于將用戶轉(zhuǎn)換到網(wǎng)站上的重要內(nèi)容部分。

標(biāo)題的左側(cè)部分具有快速瀏覽的輔助CTA按鈕，允許已注冊(cè)的用戶輸入其帳戶。

在分享按鈕被放置在圓形框中，有少許顏色對(duì)比，這樣可以很容易地找到，同時(shí)沒(méi)有從主 CTA 分散用戶注意力。

原文作者：Marina Yalanska

原文鏈接：https://tubikstudio.com/ui-design-basic-types-of-buttons-in-user-interfaces/

- End -

以上就是本次 譯文內(nèi)容 ，

更有新鮮內(nèi)容 微信關(guān)注公眾號(hào)：像素大廚PxCook 體驗(yàn)一下吧！

專為“產(chǎn)●設(shè)●研”而生！

可獲取更多設(shè)計(jì)資訊，和各種作圖小技巧