按鈕是用戶界面中最普遍的交互元素之一。更重要的是，它們對于創(chuàng)建可靠的交互和積極的用戶體驗(yàn)至關(guān)重要。今天，我們在這里收集了網(wǎng)站和移動應(yīng)用程序中常見的按鈕類型的定義
本文共計(jì)2836字，閱讀大約需要10分鐘
按鈕是用戶界面中最普遍的交互元素之一。更重要的是，它們對于創(chuàng)建可靠的交互和積極的用戶體驗(yàn)至關(guān)重要。今天，我們在這里收集了網(wǎng)站和移動應(yīng)用程序中常見的按鈕類型的定義和示例。
什么是按鈕？
按鈕是一個交互元素，可以讓您能夠根據(jù)特定的命令從系統(tǒng)獲得預(yù)期的交互反饋。基本上，按鈕是一個控件，允許用戶直接與數(shù)字產(chǎn)品通信，并發(fā)送必要的命令來實(shí)現(xiàn)特定的目標(biāo)。例如，發(fā)送電子郵件、購買產(chǎn)品、下載一些數(shù)據(jù)或內(nèi)容、打開播放器以及其他大量可能的操作。按鈕之所以如此普遍，原因之一是它們能有效地模擬與現(xiàn)實(shí)世界中對象的交互。
現(xiàn)代UI按鈕非常多樣化，可以滿足各種用途。典型且經(jīng)常使用的按鈕，其呈現(xiàn)交互部分，一般顯示為可見性并具有特定的幾何圖形，同時有副本支持說明通過該按鈕將執(zhí)行的操作。設(shè)計(jì)師需要精心設(shè)計(jì)有效且引人注目的按鈕，這些按鈕要自然地融入整體設(shè)計(jì)風(fēng)格，在對比度及布局上要明顯突出。
接下來讓我們看看移動和 Web 界面中廣泛使用的按鈕類型 ??
CTA按鈕
一個號召性用語（CTA）按鈕是用戶界面的一個交互元素，目的是鼓勵用戶采取交互行為，然后提供特定頁面或屏幕的 轉(zhuǎn)換（例如，購買，聯(lián)系，訂閱等），換句話說，它將被動用戶變?yōu)橹鲃訝顟B(tài)。因此，從技術(shù)上講，它可以是通過號召性用語文本支持的任何類型按鈕。它與頁面或屏幕上的所有其他按鈕不同之處在于其引人注目的特性：CTA按鈕必須引起注意并刺激用戶執(zhí)行所需的操作。
文本按鈕
顧名思義。文本按鈕意味著沒有任何形狀、填充標(biāo)簽或類似的東西。因此，直觀的看，它看起來并不像按鈕。不過，可以用到標(biāo)有顏色或帶下劃線的這些按鈕，依然可以實(shí)現(xiàn)用戶交互轉(zhuǎn)換。文本按鈕通常用于創(chuàng)建輔助交互部分，并不會分散主標(biāo)題或CTA元素的注意力。
某網(wǎng)站設(shè)計(jì)：整體交互部分采用文本按鈕，所有其他功能僅包含標(biāo)題和標(biāo)簽中的復(fù)制功能，這種文本按鈕方式一般用于簡約風(fēng)格的網(wǎng)頁
下拉按鈕
單擊下拉按鈕時，將顯示互斥項(xiàng)目的下拉列表。一般在設(shè)置按鈕中常見。當(dāng)用戶選擇列表中的一個選項(xiàng)時，通常按顏色被標(biāo)記為活動的。
以下圖為例：單擊按鈕時，將打開選項(xiàng)下拉列表。只要您選擇完成其中一項(xiàng)后，下拉列表就會消失，只保留選擇選項(xiàng)和加號按鈕，以防您再次重復(fù)選擇下拉列表。
“漢堡”按鈕
它是隱藏菜單式按鈕。單擊或光標(biāo)選擇按鈕時，菜單會展開。這種菜單（或按鈕）的名稱由于它的形狀由三條水平線組成，看起來像典型的面包 - 肉 - 面包，顧名“漢堡”按鈕。現(xiàn)在它已是一種廣泛應(yīng)用的 Web 和移動布局的交互元素; 關(guān)于其利弊的爭論也很激烈。
對于活躍互聯(lián)網(wǎng)用戶來說，默認(rèn)情況下知道此按鈕隱藏了各種類別的網(wǎng)站內(nèi)容，因此這個技巧不需要額外的解釋和提示。好的是，漢堡按鈕菜單釋放空間使界面更簡約和舒服; 從功能的角度來看，它為其他重要的布局元素節(jié)省了大量空間?？梢蕴岬降捻憫?yīng)和自適應(yīng)設(shè)計(jì)隱藏導(dǎo)航元素使界面在不同設(shè)備上看起來更和諧。
不喜歡“漢堡”按鈕的人認(rèn)為，這個設(shè)計(jì)元素可能會讓那些不經(jīng)常使用網(wǎng)站的人感到困惑，并且會被那些具有高度抽象性的標(biāo)志誤導(dǎo)。這可能會對導(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)交互流的方法，這對于屏幕空間有限的移動接口尤其重要。
某 APP ：標(biāo)簽欄的中央交互元素是一個加號按鈕，用戶可以在操作過程中添加新行程或新項(xiàng)目。為了使體驗(yàn)更簡單，按鈕被擴(kuò)展為一組標(biāo)記明確類型的內(nèi)容的按鈕，以便用戶可以在開始時做出選擇并到達(dá)必要的屏幕
分享按鈕
分享按鈕可以將內(nèi)容或直接共享到社交網(wǎng)絡(luò)帳戶。為了使這種聯(lián)系更加清晰，網(wǎng)站上會出現(xiàn)一些圖標(biāo)，這些圖標(biāo)具有特定社交網(wǎng)絡(luò)的 logo 。如果用戶不是專門為了分享登錄網(wǎng)站的話，一般不需要將分享按鈕詳細(xì)化（沒有額外圖形、顏色標(biāo)記、下劃線等），只看到圖標(biāo)也是可以的，這種方法適合簡約風(fēng)格和有效利用負(fù)空間。不會讓用戶過于關(guān)注分享按鈕，而搶了頁面主要內(nèi)容的風(fēng)頭。
一家風(fēng)格簡約的某網(wǎng)站。在主頁的左下角，您可以看到社交平臺的 logo 圖標(biāo)。它們很容易引人注目但又不影響網(wǎng)站內(nèi)容平衡，不會分散核心導(dǎo)航和 CTA按鈕 的注意力
鏤空按鈕
鏤空按鈕是一個看起來透明的按鈕。視覺上是以細(xì)線形狀環(huán)繞按鈕呈現(xiàn)的。這種按鈕有助于歸類視覺層次結(jié)構(gòu)，以防出現(xiàn)多個CTA元素導(dǎo)致用戶難以分辨主次信息：核心 CTA 以填充按鈕顯示，而輔助（仍然活動）以鏤空按鈕給出。
某 APP 首頁：有三種不同類型的按鈕：核心 CTA 以填充按鈕，提供快速注冊方式; 鏤空按鈕提供了次要的選項(xiàng); 文本按鈕被放到下一行并用顏色標(biāo)注。這種方法有助于在屏幕上構(gòu)建按鈕的可靠視覺層次結(jié)構(gòu)
浮動操作按鈕（FAB）
浮動操作按鈕（簡稱 FAB）是在 APP 屏幕上顯示主要操作的按鈕。通常，它是一個高于其他頁面內(nèi)容的圓形圖標(biāo)按鈕。此按鈕通?？梢约磿r訪問用戶使用 APP 執(zhí)行的基本操作或熱門操作。根據(jù)移動 APP 的設(shè)計(jì)和信息架構(gòu)，F(xiàn)AB 可以：
1. 執(zhí)行典型的核心操作（打開新電子郵件的屏幕，打開添加照片或視頻內(nèi)容的屏幕，在庫中搜索所需內(nèi)容等）
2. 顯示其他操作
3. 轉(zhuǎn)換為其他 UI 元素。
FAB在屏幕上的位置通常由高可見度因素決定，并且可以根據(jù)屏幕的一般設(shè)計(jì)概念而變化。最好是每個屏幕僅使用一個 FAB，以避免注意力分散。
某 APP 底部應(yīng)用欄：重疊 FAB 和排列圖像列表的交互流程
有效按鈕設(shè)計(jì)的因素
?尺寸
按鈕大小是告知用戶布局元素的重要性和組成部分層次結(jié)構(gòu)的核心方法之一。一個有吸引力和高效的 CTA按鈕 要足夠大，以便快速找到，但不要太大，以免布局結(jié)構(gòu)被破壞。例如：Apple 表示移動 UI 中的 CTA 應(yīng)至少為 44Х44 像素，而 Microsoft 推薦 34Х26 像素。
?顏色
為了使次要按鈕同樣容易引起注意 ，選擇合適的顏色至關(guān)重要。人類的情緒和行為與視覺環(huán)境息息相關(guān)，顏色是這方面最強(qiáng)大的工具之一。在為 CTA 選擇顏色時謹(jǐn)記：按鈕和背景顏色必須對比度恰到好處，才能使按鈕從其他 UI 內(nèi)容中一目了然。
?形狀
關(guān)于 CTA按鈕，普遍使用水平矩形。原因是人們已經(jīng)習(xí)慣將這個形狀看作成一個按鈕了。此外，建議設(shè)計(jì)帶圓角的CTA，因?yàn)閳A角可以起到指向按鈕內(nèi)部，引起對按鈕本身的注意。當(dāng)然，這個形狀是在與網(wǎng)頁或 APP 屏幕風(fēng)格一致時使用的。
?布局
按鈕的布局對于構(gòu)建良好的視覺層次和清晰的導(dǎo)航至關(guān)重要。如果它們位于用戶一眼無法找到的位置，即便運(yùn)用顏色和大小也于事無補(bǔ)。設(shè)計(jì)師必須掌握核心功能的按鈕放置最有效的位置。
某少兒網(wǎng)站的登陸頁面設(shè)計(jì)。讓我們回顧一下頁面上使用的所有按鈕：
邀請?jiān)L問者加入的 核心CTA按鈕 一目了然：設(shè)計(jì)師使用了一個圓角矩形填充按鈕，其顏色與背景形成對比，但設(shè)計(jì)了動畫人物，其顏色與按鈕形成了視覺聯(lián)系。這是頁面上最突出的視覺元素。
標(biāo)題包含4個文本按鈕，用于將用戶轉(zhuǎn)換到網(wǎng)站上的重要內(nèi)容部分。
標(biāo)題的左側(cè)部分具有快速瀏覽的輔助CTA按鈕，允許已注冊的用戶輸入其帳戶。
在分享按鈕被放置在圓形框中，有少許顏色對比，這樣可以很容易地找到，同時沒有從主 CTA 分散用戶注意力。
- End -
以上就是本次 譯文內(nèi)容 ，
更有新鮮內(nèi)容 微信關(guān)注公眾號：像素大廚PxCook 體驗(yàn)一下吧！
專為“產(chǎn)●設(shè)●研”而生！
可獲取更多設(shè)計(jì)資訊，和各種作圖小技巧
0
喜歡他，就推薦他上首頁吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)（CNDESIGN）會員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有，任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處，作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
