UI設計：用戶界面中按鈕的基本類型

本文介紹了用戶在Web和移動界面中遇到的流行按鈕的基本分類：使用UI示例檢查其類型。

本文共計2836字，閱讀大約須要10分鐘

按鈕是用戶界面中最廣泛的交互元素之一。更重要的是，它們對於建立可靠的交互和積極的用戶體驗相當重要。今天，咱們在這裏收集了網站和移動應用程序中常見的按鈕類型的定義和示例。

什麼是按鈕？

按鈕是一個交互元素，可讓您可以根據特定的命令從系統得到預期的交互反饋。基本上，按鈕是一個控件，容許用戶直接與數字產品通訊，併發送必要的命令來實現特定的目標。例如，發送電子郵件、購買產品、下載一些數據或內容、打開播放器以及其餘大量可能的操做。按鈕之因此如此廣泛，緣由之一是它們能有效地模擬與現實世界中對象的交互。 現代UI按鈕很是多樣化，能夠知足各類用途。典型且常用的按鈕，其呈現交互部分，通常顯示爲可見性並具備特定的幾何圖形，同時有副本支持說明經過該按鈕將執行的操做。設計師須要精心設計有效且引人注目的按鈕，這些按鈕要天然地融入總體設計風格，在對比度及佈局上要明顯突出。

接下來讓咱們看看移動和Web界面中普遍使用的按鈕類型。

CTA按鈕

一個號召性用語（CTA）按鈕是用戶界面的一個交互元素，目的是鼓勵用戶採起交互行爲，而後提供特定頁面或屏幕的 轉換（例如，購買，聯繫，訂閱等），換句話說，它將被動用戶變爲主動狀態。所以，從技術上講，它能夠是經過號召性用語文本支持的任何類型按鈕。它與頁面或屏幕上的全部其餘按鈕不一樣之處在於其引人注目的特性：CTA按鈕必須引發注意並刺激用戶執行所需的操做。

文本按鈕

顧名思義。文本按鈕意味着沒有任何形狀、填充標籤或相似的東西。所以，直觀的看，它看起來並不像按鈕。不過，能夠用到標有顏色或帶下劃線的這些按鈕，依然能夠實現用戶交互轉換。文本按鈕一般用於建立輔助交互部分，並不會分散主標題或CTA元素的注意力。

這是一個時尚商店優雅的網站設計。總體交互部分採用文本按鈕。全部其餘功能僅包含標題和標籤中的複製功能。這種文本按鈕方式通常用於簡約風格的網頁

下拉按鈕

單擊下拉按鈕時，將顯示互斥項目的下拉列表。通常在設置按鈕中常見。當用戶選擇列表中的一個選項時，一般按顏色被標記爲活動的。 如下圖爲例：單擊按鈕時，將打開選項下拉列表。只要您選擇完成其中一項後，下拉列表就會消失，只保留選擇選項和加號按鈕，以防您再次重複選擇下拉列表。

「漢堡」按鈕

它是隱藏菜單式按鈕。單擊或光標選擇按鈕時，菜單會展開。這種菜單（或按鈕）的名稱因爲它的形狀由三條水平線組成，看起來像典型的麪包 - 肉 - 麪包，顧名「漢堡」按鈕。如今它已經是一種普遍應用的 Web 和移動佈局的交互元素; 關於其利弊的爭論也很激烈。 對於活躍互聯網用戶來講，默認狀況下知道此按鈕隱藏了各類類別的網站內容，所以這個技巧不須要額外的解釋和提示。好的是，漢堡按鈕菜單釋放空間使界面更簡約和舒服; 從功能的角度來看，它爲其餘重要的佈局元素節省了大量空間。能夠提到的響應和自適應設計隱藏導航元素使界面在不一樣設備上看起來更和諧。 不喜歡「漢堡」按鈕的人認爲，這個設計元素可能會讓那些不常用網站的人感到困惑，而且會被那些具備高度抽象性的標誌誤導。這可能會對導航產生負面影響，併成爲用戶體驗不佳的緣由。所以，應在用戶調研和定義目標受衆的能力和需求後作出關於應用「漢堡」按鈕的決定。

以上是使用「漢堡」按鈕功能的網站示例。它能夠隱藏擴展的選項菜單，以便將用戶的注意力集中在使人印象深入的視覺效果和核心信息上。

可伸展按鈕

此按鈕在被單擊或點擊後打開多種選項。這是另外一種在不使屏幕過載的狀況下設置適當交互流的方法，這對於屏幕空間有限的移動接口尤爲重要。

某 APP ：標籤欄的中央交互元素是一個加號按鈕，用戶能夠在操做過程當中添加新行程或新項目。爲了使體驗更簡單，按鈕被擴展爲一組標記明確類型的內容的按鈕，以便用戶能夠在開始時作出選擇併到達必要的屏幕。

分享按鈕

分享按鈕能夠將內容或直接共享到社交網絡賬戶。爲了使這種聯繫更加清晰，網站上會出現一些圖標，這些圖標具備特定社交網絡的 logo 。若是用戶不是專門爲了分享登陸網站的話，通常不須要將分享按鈕詳細化（沒有額外圖形、顏色標記、下劃線等），只看到圖標也是能夠的，這種方法適合簡約風格和有效利用負空間。不會讓用戶過於關注分享按鈕，而搶了頁面主要內容的風頭。

這是一家風格簡約的某網站。在主頁的左下角，您能夠看到社交平臺的 logo 圖標。它們很容易引人注目但又不影響網站內容平衡，不會分散核心導航和 CTA按鈕 的注意力

鏤空按鈕

鏤空按鈕是一個看起來透明的按鈕。視覺上是以細線形狀環繞按鈕呈現的。這種按鈕有助於歸類視覺層次結構，以防出現多個CTA元素致使用戶難以分辨主次信息：核心 CTA 以填充按鈕顯示，而輔助（仍然活動）以鏤空按鈕給出。

某 APP 首頁：有三種不一樣類型的按鈕：核心 CTA 以填充按鈕，提供快速註冊方式; 鏤空按鈕提供了次要的選項; 文本按鈕被放到下一行並用顏色標註。這種方法有助於在屏幕上構建按鈕的可靠視覺層次結構

浮動操做按鈕（FAB）

浮動操做按鈕（簡稱 FAB）是在 APP 屏幕上顯示主要操做的按鈕。一般，它是一個高於其餘頁面內容的圓形圖標按鈕。此按鈕一般能夠即時訪問用戶使用 APP 執行的基本操做或熱門操做。根據移動 APP 的設計和信息架構，FAB能夠：

• 執行典型的核心操做（打開新電子郵件的屏幕，打開添加照片或視頻內容的屏幕，在庫中搜索所需內容等）
• 顯示其餘操做
• 轉換爲其餘 UI 元素。

FAB在屏幕上的位置一般由高可見度因素決定，而且能夠根據屏幕的通常設計概念而變化。最好是每一個屏幕僅使用一個 FAB，以免注意力分散。

某 APP 底部應用欄：重疊 FAB 和排列圖像列表的交互流程。

有效按鈕設計的因素

• 尺寸

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

• 顏色

爲了使次要按鈕一樣容易引發注意 ，選擇合適的顏色相當重要。人類的情緒和行爲與視覺環境息息相關，顏色是這方面最強大的工具之一。在爲 CTA 選擇顏色時謹記：按鈕和背景顏色必須對比度恰到好處，才能使按鈕從其餘 UI 內容中一目瞭然。

• 形狀

關於 CTA按鈕，廣泛使用水平矩形。緣由是人們已經習慣將這個形狀看做成一個按鈕了。此外，建議設計帶圓角的CTA，由於圓角能夠起到指向按鈕內部，引發對按鈕自己的注意。固然，這個形狀是在與網頁或 APP 屏幕風格一致時使用的。

• 佈局

按鈕的佈局對於構建良好的視覺層次和清晰的導航相當重要。若是它們位於用戶一眼沒法找到的位置，即使運用顏色和大小也於事無補。設計師必須掌握核心功能的按鈕放置最有效的位置

這是某少兒網站的登錄頁面設計。讓咱們回顧一下頁面上使用的全部按鈕：

• 邀請訪問者加入的 **核心CTA按鈕 **一目瞭然：設計師使用了一個圓角矩形填充按鈕，其顏色與背景造成對比，但設計了動畫人物，其顏色與按鈕造成了視覺聯繫。這是頁面上最突出的視覺元素。
• 標題包含4個文本按鈕，用於將用戶轉換到網站上的重要內容部分。
• 標題的左側部分具備快速瀏覽的輔助CTA按鈕，容許已註冊的用戶輸入其賬戶。
• 在分享按鈕被放置在圓形框中，有少量顏色對比，這樣能夠很容易地找到，同時沒有從主 CTA 分散用戶注意力。

原文做者：Marina Yalanska

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

---

End

以上就是本次 譯文內容

更有新鮮內容 微信關注公衆號：像素大廚PxCook 體驗一下吧！

專爲「產●設●研」而生！

可獲取更多設計資訊，和各類做圖小技巧