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

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

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

什么是按鈕？

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

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

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

CTA按鈕

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

文本按鈕

顧名思義。文本按鈕意味著沒有任何形狀、填充標(biāo)簽或類似的東西。因此，直觀的看，它看起來并不像按鈕。不過，可以用到標(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)頁

下拉按鈕

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

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

“漢堡”按鈕

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

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

不喜歡“漢堡”按鈕的人認(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)菜單，以便將用戶的注意力集中在令人印象深刻的視覺效果和核心信息上

可伸展按鈕

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

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

分享按鈕

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

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

鏤空按鈕

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

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

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

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

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

2. 顯示其他操作

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

FAB在屏幕上的位置通常由高可見度因素決定，并且可以根據(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)重要。人類的情緒和行為與視覺環(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)頁或 APP 屏幕風(fēng)格一致時(shí)使用的。

?布局

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

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

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

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

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

在分享按鈕被放置在圓形框中，有少許顏色對(duì)比，這樣可以很容易地找到，同時(shí)沒有從主 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ì)資訊，和各種作圖小技巧