UI設(shè)計(jì)中用戶界面的按鈕類型

　　按鈕是用戶界面中最受歡迎的交互式元素之一。此外，它們對(duì)于建立可靠的互動(dòng)和良好的用戶體驗(yàn)至關(guān)重要。你知道UI設(shè)計(jì)中用戶界面的按鈕類型嗎?下面我們來了解一下UI / UX中在網(wǎng)站和移動(dòng)應(yīng)用程序上廣泛使用的按鈕類型的定義和示例。
 

　　什么是按鈕?
 

　　按鈕是一個(gè)交互式元素，你可以在執(zhí)行特定命令后從系統(tǒng)獲取預(yù)期的交互式反饋?；旧希粹o是允許用戶直接與數(shù)字產(chǎn)品進(jìn)行通信并發(fā)送必要命令以實(shí)現(xiàn)特定目標(biāo)的控件。例如，可能的任務(wù)是發(fā)送電子郵件，購買產(chǎn)品，下載一些數(shù)據(jù)或內(nèi)容，打開播放器以及大量其他可能的動(dòng)作。按鈕之所以如此流行和用戶友好的原因之一是，它們有效地模仿了與物理世界中的對(duì)象的交互。
 

　　現(xiàn)代的UI設(shè)計(jì)按鈕確實(shí)是多種多樣的，可以滿足許多目的。典型且常用的按鈕具有交互區(qū)域，通常清楚地標(biāo)記出可見性并具有特定的幾何形狀，并且通常與副本一起使用，以說明通過此按鈕將執(zhí)行什么操作。設(shè)計(jì)師必須花費(fèi)大量的時(shí)間和精力來創(chuàng)建有效且引人注目的按鈕，這些按鈕自然地融入了一般的樣式概念，但對(duì)比度卻足以在布局中脫穎而出。
 

　　UI設(shè)計(jì)中在移動(dòng)和Web界面中廣泛使用的按鈕的類型
 

　　CTA按鈕
 

　　一個(gè)號(hào)召性用語(CTA)按鈕是用戶界面中的一個(gè)互動(dòng)元素，旨在鼓勵(lì)用戶采取某種行動(dòng)。對(duì)于特定頁面或屏幕(例如購買，聯(lián)系，訂閱等)，它會(huì)將被動(dòng)用戶變成主動(dòng)用戶。因此，從技術(shù)上講，它可以是號(hào)召性文字支持的任何類型的按鈕。它與頁面或屏幕上所有其他按鈕的不同之處在于其引人入勝的性質(zhì)：它必須引起注意并激發(fā)用戶執(zhí)行所需的操作。
 

 

　　這是電子商務(wù)網(wǎng)站為孩子們賣書。在特色幻燈片上，頁面設(shè)置了一個(gè)核心操作作為目標(biāo)：讓用戶訂閱郵件列表共享。因此，按鈕被設(shè)計(jì)為布局中最引人注目的元素之一，以便用戶可以立即看到如何進(jìn)行操作。
 

　　文字按鈕
 

　　這里的術(shù)語是透明的：它是一個(gè)帶有一段文本的按鈕。這意味著該副本不會(huì)集成到任何形狀，填充的標(biāo)簽或類似內(nèi)容中。因此，在我們對(duì)物理世界中這種現(xiàn)象的標(biāo)準(zhǔn)理解中，它看起來并不像一個(gè)按鈕。這復(fù)制是其唯一的視覺演示者。盡管如此，它還是一個(gè)實(shí)時(shí)控件，允許用戶與界面進(jìn)行交互。你還可以看到這些按鈕已標(biāo)記有顏色或帶下劃線。另外，用于網(wǎng)站標(biāo)題，文本按鈕將用戶與網(wǎng)站的核心內(nèi)容部分連接起來-在這種情況下，由于標(biāo)題區(qū)域中的所有(或大多數(shù))元素默認(rèn)都是交互式的，因此無論如何都不會(huì)對(duì)其進(jìn)行標(biāo)記。文本按鈕通常用于創(chuàng)建輔助交互區(qū)域，而不會(huì)分散主控件或CTA元素的注意力。
 

 

　　這是一家時(shí)尚商店的優(yōu)雅網(wǎng)站設(shè)計(jì)，布局的交互部分基于文本按鈕。主要的CTA元素顯示為易于解碼的按鈕，其他所有功能僅在商品的標(biāo)頭和選項(xiàng)卡中都進(jìn)行復(fù)制，這種屬于簡(jiǎn)約風(fēng)格。
 

　　下拉按鈕
 

　　單擊下拉按鈕時(shí)，將顯示一個(gè)互斥項(xiàng)的下拉列表。你通常可以在“設(shè)置”按鈕中碰到這種類型。當(dāng)用戶選擇列表中的一個(gè)選項(xiàng)時(shí)，通常將其標(biāo)記為活動(dòng)狀態(tài)，例如按顏色。
 

 

　　保健應(yīng)用交互流程顯示了用于打開醫(yī)生可以添加到特定賬單的詳細(xì)信息列表的按鈕：?jiǎn)螕粼摪粹o時(shí)，它將打開選項(xiàng)的下拉列表。一旦選擇一個(gè)，大按鈕就會(huì)消失，剩下的選項(xiàng)會(huì)被選中，小加號(hào)會(huì)消失，以防你想再次檢查列表。
 

　　漢堡按鈕
 

　　這是隱藏菜單的按鈕。當(dāng)你單擊或點(diǎn)擊它時(shí)，菜單將展開。這種菜單(以及按鈕)之所以得名，是因?yàn)樗男问绞怯扇龡l水平線組成，看起來像是典型的面包肉漢堡。如今，它已被廣泛使用互動(dòng)元素網(wǎng)絡(luò)和移動(dòng)版面設(shè)計(jì);仍然，關(guān)于其優(yōu)缺點(diǎn)的爭(zhēng)論仍然很熱烈。
 

　　默認(rèn)情況下，活躍的互聯(lián)網(wǎng)沖浪者定期訪問各種網(wǎng)站會(huì)知道此按鈕隱藏了各種類別的網(wǎng)站內(nèi)容，因此此技巧不需要其他說明和提示。好的，漢堡菜單釋放了空間，使界面更加簡(jiǎn)約和通風(fēng);從功能的角度來看，它為其他重要的布局元素節(jié)省了大量空間。對(duì)于響應(yīng)式和自適應(yīng)設(shè)計(jì)隱藏導(dǎo)航元素并使界面在不同設(shè)備上看起來和諧，可以提及其他好處。
 

　　反對(duì)漢堡菜單的論點(diǎn)是基于這樣的事實(shí)，即該設(shè)計(jì)元素可能會(huì)使那些不經(jīng)常使用網(wǎng)站的人感到困惑，并可能使他們誤以為具有高度抽象性的標(biāo)志。它可能對(duì)導(dǎo)航產(chǎn)生負(fù)面影響，并可能成為用戶體驗(yàn)不佳的原因。因此，應(yīng)在用戶研究并確定目標(biāo)受眾的能力和需求之后，做出有關(guān)應(yīng)用漢堡包按鈕的決定。
 

　　盡管漢堡菜單仍然是現(xiàn)代Web和應(yīng)用程序設(shè)計(jì)中有爭(zhēng)議的問題，但它們?nèi)员活l繁使用。它允許隱藏選項(xiàng)的擴(kuò)展菜單以將用戶的注意力集中在令人印象深刻的視覺效果 和核心信息。
 

　　加號(hào)按鈕
 

　　通過單擊或輕擊加號(hào)按鈕，用戶可以向系統(tǒng)添加一些新內(nèi)容。取決于應(yīng)用類型，它可以是列表中的新帖子，聯(lián)系人，位置，便箋，項(xiàng)目-這是數(shù)字產(chǎn)品的基本操作。有時(shí)，點(diǎn)擊此按鈕，用戶會(huì)直接轉(zhuǎn)到創(chuàng)建內(nèi)容的模式窗口，在其他情況下，還會(huì)有一個(gè)中間階段，即為他們提供其他選項(xiàng)供你選擇，并使添加內(nèi)容更加集中。
 

　　消耗性按鈕
 

　　單擊或輕擊此按鈕后，將打開各種選項(xiàng)。這是設(shè)置適當(dāng)?shù)慕换チ鞫粫?huì)使屏幕超載的另一種方法，這對(duì)于屏幕空間有限的移動(dòng)界面尤為重要。
 

 

　　這是Travel Planner應(yīng)用程序：選項(xiàng)卡欄的中央交互元素是加號(hào)按鈕，允許用戶向特定旅程添加新旅程或新項(xiàng)目。為了使體驗(yàn)更簡(jiǎn)單，該按鈕被擴(kuò)展為一組標(biāo)記了特定內(nèi)容類型的按鈕，以便用戶可以在開始時(shí)進(jìn)行選擇并進(jìn)入必要的屏幕。
 

　　分享按鈕
 

　　隨著社交網(wǎng)絡(luò)，聊天和電子郵件的高度普及，這些按鈕簡(jiǎn)化了將應(yīng)用程序或網(wǎng)站內(nèi)容連接到用戶的社交資料的過程。這種類型的按鈕使用戶可以直接向社交網(wǎng)絡(luò)帳戶共享內(nèi)容或成就。為了使連接更清晰，該圖標(biāo)上帶有圖標(biāo)，這些圖標(biāo)帶有特定社交網(wǎng)絡(luò)的品牌標(biāo)志，并且易于識(shí)別。現(xiàn)在經(jīng)常發(fā)生的是，如果共享不是頁面上用戶期望的主要操作，則它們不會(huì)被標(biāo)記為按鈕(沒有其他形狀，顏色標(biāo)記，下劃線等)–你只會(huì)看到圖標(biāo)，但它們卻是交互的。這種方法支持極簡(jiǎn)主義和有效利用負(fù)空間。它還使用戶可以專注于主要功能，但始終可以看到快速訪問其社交資料的跡象。
 

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

　　幽靈按鈕
 

　　鬼按鈕是一個(gè)透明的按鈕，看起來是空的。這就是為什么它也被稱為“空”，“空心”甚至“裸”的原因。其作為按鈕的視覺可識(shí)別性通常具有一個(gè)形狀，該形狀由圍繞按鈕副本的相當(dāng)細(xì)的線包圍。在有多個(gè)CTA元素的情況下，這種按鈕有助于設(shè)置視覺層次結(jié)構(gòu)：核心CTA在填充按鈕中顯示，而次要(仍處于活動(dòng)狀態(tài))在幻像按鈕中顯示。

 

　　這是餐廳應(yīng)用程序的注冊(cè)屏幕。它具有三種不同類型的按鈕：核心CTA帶有填充的按鈕，提供了最流行，最簡(jiǎn)單的快速注冊(cè)方式;鬼按鈕提供對(duì)較不受歡迎的選項(xiàng)的訪問;文本按鈕已集成到下一行，作為對(duì)問題的答案，并標(biāo)有顏色。這樣的方法有助于建立堅(jiān)實(shí)的基礎(chǔ)視覺層級(jí)屏幕上的y個(gè)按鈕。
 

　　浮動(dòng)動(dòng)作按鈕(FAB)
 

　　在 材料設(shè)計(jì)，浮動(dòng)操作按鈕(簡(jiǎn)稱FAB)是在應(yīng)用程序屏幕上顯示主要操作的按鈕。通常，它是一個(gè)圓形的圖標(biāo)按鈕，位于其他頁面內(nèi)容上方。通常，使用此按鈕可以立即訪問用戶使用該應(yīng)用程序執(zhí)行的基本或常用操作。根據(jù)移動(dòng)應(yīng)用程序的設(shè)計(jì)和信息體系結(jié)構(gòu)，F(xiàn)AB可以：執(zhí)行典型的核心操作(打開新電子郵件的屏幕，打開添加照片或視頻內(nèi)容的屏幕，在圖庫中搜索所需的內(nèi)容，等等)
 

　　FAB在屏幕上的位置通常由可見性高的因素決定，并且可能會(huì)根據(jù)應(yīng)用程序屏幕的一般設(shè)計(jì)概念而有所不同。經(jīng)驗(yàn)法則是每個(gè)屏幕只能使用一個(gè)FAB，而不是更多，以避免集中注意力。
 

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

　　尺寸。 大小是通知用戶布局元素的重要性和構(gòu)建組件層次結(jié)構(gòu)的核心方法之一。一個(gè)吸引人且有效的號(hào)召性用語按鈕必須足夠大以便可以快速找到，但又不能太大，以使布局結(jié)構(gòu)不會(huì)被破壞。市場(chǎng)領(lǐng)導(dǎo)者通常會(huì)在其指導(dǎo)原則中就按鈕的正確尺寸提供建議。例如，蘋果公司表示，移動(dòng)UI中的??CTA至少應(yīng)為44Х44像素，而微軟建議為34Х26像素。如果你是針對(duì)移動(dòng)設(shè)備設(shè)計(jì)的，則對(duì)不同類型按鈕的要求可能非常嚴(yán)格，因此請(qǐng)仔細(xì)研究準(zhǔn)則以最大程度地減少由于不良UI設(shè)計(jì)而導(dǎo)致應(yīng)用被拒絕的風(fēng)險(xiǎn)。
 

　　顏色。為了使某些按鈕易于顯示和輔助，對(duì)于選擇合適的顏色。事實(shí)是，人類的情緒和行為與視覺環(huán)境高度相關(guān)，而色彩是這方面最強(qiáng)大的工具之一。為CTA選擇顏色時(shí)，請(qǐng)務(wù)必牢記：按鈕和背景色必須很好地形成對(duì)比，以使按鈕在其他UI組件中快速脫穎而出。
 

　　形狀。至于CTA按鈕，它們通常看起來像水平矩形。原因是你要弄清楚此按鈕是可單擊的并且是交互式的，人們習(xí)慣于將這種形狀感知為按鈕。另外，建議設(shè)計(jì)帶有圓角的CTA，因?yàn)樗鼈冊(cè)谥赶虬粹o內(nèi)部時(shí)會(huì)被考慮，以引起對(duì)副本的注意。當(dāng)然，如果形狀與為網(wǎng)頁或移動(dòng)應(yīng)用程序屏幕選擇的一般樣式概念和諧地結(jié)合在一起，則可以做出此決定。
 

　　放置。 按鈕的位置對(duì)于建立堅(jiān)實(shí)的視覺層次 并清除 導(dǎo)航。如果它們位于用戶的眼睛無法擋住的區(qū)域，則其他視覺方面(例如顏色和大小)可能無法有效工作。設(shè)計(jì)師必須學(xué)習(xí)最多可掃描區(qū)域 并將核心功能的按鈕放置在用戶的路徑內(nèi)。
 

　　復(fù)制。功能強(qiáng)大的按鈕顯微鏡通常很短但很穩(wěn)定，因此可以迅速引起用戶的注意。它通常以大寫字母顯示，以使副本在版面設(shè)計(jì)中更具吸引力。不過，這不是必需的，而是根據(jù)總體設(shè)計(jì)概念做出決定，版式以及短信的心情。
 

　　在UI設(shè)計(jì)中有很多用戶界面按鈕類型的案例，大家可以選擇典型的案例進(jìn)行參考，在充分了解基礎(chǔ)上學(xué)習(xí)設(shè)計(jì)一定會(huì)事半功倍。