2018-11-23 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
按鈕在UI設計中是一種常用的UI控件，在界面中作為主要的行動點，引導用戶進行相應的操作，它在用戶和產品的交互中承擔著重要的作用。
按鈕設計看似簡單，但是如果想要更好的交互體驗，引導用戶進行相應的操作，提升產品的轉化率這仍是我們需要研究的問題。下面小編將從按鈕功能類型和設計要點兩個方面進行分析。
一、按鈕功能類型
按鈕的功能類型往往決定了一個按鈕的設計方式，是需要強調還是需要弱化；文案是需要強引導，還是直接闡述功能；按鈕上是放圖標還是不放圖標等。按鈕根據功能的不同，可以分為不同的類型，主要有行為召喚按鈕、表格按鈕、標簽按鈕、命令按鈕、懸浮按鈕、開關按鈕這六大類型。
1.行為召喚按鈕
行為召喚（CTA）按鈕其目的是誘使用戶采取某些操作， 從而提高產品的轉行率。簡單來說就是通過設計誘導或激勵用戶點擊按鈕，例如立即購買、訂閱關注、利益誘導、文字誘導等。
1）誘導購買
當行為召喚的目的是誘導購買時，按鈕的設計不管從顏色、形狀、樣式都需要突出。讓按鈕看上去可點擊，讓用戶進來第一眼就能知道該按鈕的用途。如下圖所示：
以美團外賣為例，該按鈕的顏色采用黑黃對比、形狀采用具有親和力的圓角，在樣式上加入投影同時加入送餐員的元素，配上小紅點，能夠清晰的給用戶傳遞出可點擊部分有去結算、送餐員。另外加入價格誘導，讓你可直觀看到優惠了多少錢，促使你進一步操作。
以淘寶詳情為例，該按鈕是一個組合按鈕，由加入購物車和馬上搶以及店鋪、客服、收藏等組成，作為行為召喚按鈕我們可以明確的看到，不管從顏色、形狀、樣式都能夠讓我們快速注意到。
2）訂閱關注
當行為召喚的目的是訂閱關注時，其重要程度相比誘導購買低很多，但是在設計時我們仍然需要考慮一個問題，這個問題可直接決定該按鈕大小、樣式等，這個問題就是需要根據產品目的判斷是誘導用戶訂閱關注重要還是讓用戶閱讀內容重要。如下圖所示：
當內容重要時，按鈕的設計需要弱化處理，以優酷視頻的發現頁和星球頁為例，這兩個頁面很明顯是以內容為主的界面，在設計時直接弱化了按鈕形式，讓按鈕和整個界面相融合，但是按鈕設計的原則是讓其看上去像按鈕，因此當按鈕只是文字時可以加圖標進行引導比如優酷視頻發現頁，也可以加入弱底紋進行引導還能讓界面看上去整潔，比如優酷視頻星球頁面。
當訂閱關注重要時，按鈕的設計需要強化處理，以橘子娛樂和土豆視頻為例，橘子娛樂采用粗描邊漸變按鈕，同時加入圖標進行引導，具有較強的視覺引導作用，很容易喚起用戶的關注。土豆視頻采用黃色填充加圖標引導，在視覺上和產品內容形成強烈對比，明顯的以關注為主的界面。
3）利益誘導
當行為召喚的目的是利益誘導時，該按鈕設計根據重要程度較高，因此在設計時可以考慮顏色、形狀、加入圖標、誘導文字等設計方法。如下圖所示：
以大眾點評為例，其領獎按鈕明顯比賺積分的層級高，因此為了突出領獎按鈕采用了色塊設計的樣式，同時賺積分按鈕采用描邊設計進行弱化處理。
以騰訊doki為例，其打榜頁面沖榜的重要層級較高，因此在設計時不僅采用了色塊、加入動效圖標、同時還加入了誘導文字，讓按鈕更明顯同時誘導用戶點擊，其他去瀏覽按鈕則采用描邊樣式弱化處理。
4）文字誘導
文字誘導簡單來說就是通過文字，誘導用戶進行下一步操作，多用于空頁面、活動頁面中，因此在設計時采用簡單的色塊填充即可，如果該頁面為活動頁面也可增加漸變或投影樣式，讓按鈕更有空間感，進而突出按鈕。如下圖所示：
以得到為例，當你還沒有學習計劃時，它會對你進行提示“開始制定學習計劃”，同時其按鈕采用重要程度較高的色塊+投影的方式，誘導用戶點擊。
以大眾點評為例，當你還沒有攻略時，它會對你進行提示“我也要創建攻略”，同時其按鈕采用漸變填充的方式，誘導用戶點擊。
2.懸浮按鈕
懸按鈕浮是 Android 應用中最常見的一個控件。不過隨著Android和iOS規范的不斷融合，在iOS中也經常會看到各種各樣的懸浮按鈕。在設計上懸浮按鈕應該采用顯眼的顏色，以抓住用戶的注意力。同時它應該是積極正向的交互，比如創建、分享、探索等，同時并不是所有頁面都需要加懸浮按鈕。如下圖所示：
以UC瀏覽器為例，懸浮按鈕在訂閱頁面的右下角出現，將按鈕和界面結合很容易看出創建內容的意思，同時點擊按鈕還可呼出圖文、視頻等操作圖標。
3.標簽按鈕
標簽按鈕往往呈多個出現，多使用在二級導航或條件篩選下面；以及表單頁面作為切換條件選中。因此在設計樣式上有選中狀態和默認狀態，同時其重要程度較低，在設計時不能喧賓奪主，需要弱化處理。如下圖所示：
以支付寶為例，它主要用在投保的表單頁面，其主要目的就是一個切換條件，重要程度遠不及我要投保按鈕，因此在設計時默認用的描邊處理；選中采用淡淡的色塊。
以轉轉為例，它主要用在導航下方，其主要目的也是切換條件，用戶主要操作是看下方篩選出的內容，因此在設計時也進行弱化處理。
4.表格按鈕
表格按鈕也就是由一個白色網格加文字組成的按鈕，從視覺上看和頁面融為一體，特別不突出。因此多用在個人中心中不太重要信息或者不想讓用戶操作的退出登錄界面中。如下圖所示：
以愛奇藝為例，在我的界面中，關于我們和退出登錄都是用的表格按鈕，由于關于我們是不太重要信息，退出登錄又是不想讓用戶操作的內容，因此采用表格按鈕最為合適。
5.命令按鈕
命令按鈕也就是該按鈕具有明確的指令，多出現在彈框中，通常會有一個文字或2個文字出現的情況。其要求是文字語義要明確，盡量不要用確定、好的、要等詞匯，同時根據用戶右手操作習慣居多，因此將重要的按鈕放在右側。如下圖所示：
以京東金融為例，左圖是京東金融退出的二次確認頁面，右圖是我調整文字之后的頁面。我們說到文字需要表意明確，因此將確定換成退出后表意更加直白，降低用戶理解度。
6.開關按鈕
開關按鈕也是我們很常見的一個組件。表示兩種相互對立的狀態間的切換，多用于表示功能的開啟和關閉。當按鈕開啟后可能還會帶來其他的相應操作。開關按鈕最常見的就是手機設置中，但是也有很多APP將其用到界面中使用。如下圖所示：
以美團外賣和小豬短租為例，它們在提交訂單頁面時都采用了開關按鈕，同時在小豬短租中，當按鈕打開底部會將“您可再入住完成10天內補全信息”進行展開顯示，提示用戶去填寫。這種點擊展開的操作還可增加更多的功能相關內容。
二、按鈕設計要點
1.根據產品為按鈕選擇適合的形狀
在按鈕設計時，需要根據整個界面風格設計合適的按鈕，按鈕樣式主要有直角、小圓角、全圓角三種樣式。
直角的含義：嚴謹、力量、高端。適用于金融類、奢品類產品中，讓產品給人嚴謹安全、高端的感覺。例如寺庫。
半圓角的含義：活潑、年輕、安全。適用于兒童類、年輕化、娛樂類、購物類的產品中，提升親和力，拉近用戶的距離。例如土豆。
小圓角的含義：穩定、中性。適用于用戶跨度較大的常規類產品中，例如微信。
以寺庫、微信、土豆為例，寺庫是品類電商，因此在設計時需要提現高端，因此在按鈕設計時采用直角設計。而微信的用戶群體上到七八十歲，下到幾歲其年齡范圍廣，因此采用穩重的小圓角較為穩妥。土豆短視頻其用戶群體較為年輕活潑，因此采用全圓角較為適合。
2.使用合適的狀態
在部分界面設計中需要考慮按鈕的不同狀態的設計，從而提高用戶操作流暢度。移動端完整的系統按鈕可以分為正常狀態、按壓狀態、禁用狀態。
其中，正常狀態和加載狀態展示的是APP的主色；按壓狀態在正常態的基礎上疊加不透明度15%的黑色#000；禁用狀態是設置灰色或者將正常態設置不透明度45%，該狀態適用于提交界面中使用，比如登陸注冊、轉賬等。如下圖所示：
以京東金融為例，當未輸入轉賬金額時，按鈕禁用為灰色，當輸入金額時按鈕為正常狀態。不過隨著互聯網的發展，寬帶速度不斷的提高，按壓狀態慢慢被拋棄，他存在的意義不像以前網絡不發達的時候，點擊還需要時間反應。
3.提供恰當的反饋
當用戶點擊按鈕時，他們希望界面可以給些恰當的反饋。如果沒有任何反饋，用戶會以為系統沒有收到他們的操作，然后就會重復點擊。這種行為常常導致多個不必要的操作。如下圖所示：
以土豆短視頻為例，當點擊關注時為了避免用戶點擊沒有反應的情況，可在按鈕上添加加載狀態，當關注成功后圖標狀態改為禁用狀態，同時文字變為已關注。
總結
按鈕設計看似簡單，但是如果想要更好的交互體驗，引導用戶進行相應的操作，提升產品的轉化率這仍是我們需要研究的問題。本篇主要將從按鈕功能類型和設計要點兩個方面進行歸納總結。
按鈕功能類型：主要有行為召喚按鈕、表格按鈕、標簽按鈕、命令按鈕、懸浮按鈕、開關按鈕這六大類型。在使用我們需要根據對應的功能和重要程度選擇適合的設計。
按鈕設計要點：主要有根據產品為按鈕選擇適合的形狀；使用適合的狀態；提供恰當的反饋這三大注意要點。
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
