出色的按鈕設(shè)計是大多數(shù)網(wǎng)站用戶幾乎不會關(guān)于注意的事情……因為當(dāng)它運行良好時，它幾乎是看不見的。 一個好的按鈕設(shè)計應(yīng)該易于點擊，具有明顯的功能，并可以幫助用戶不用過多思考就與設(shè)計進行交互互動。

這是一個非常簡單的道理，但是如果事后考慮，可能會很難設(shè)計。

今天，我們將來著重研究按鈕設(shè)計的趨勢，以及一些關(guān)于如何設(shè)計一個好按鈕的提示，以幫助你設(shè)計用戶將不斷產(chǎn)生點擊欲望的UI按鈕。 這些提示，趨勢和想法可激發(fā)你對按鈕設(shè)計的靈感。

1.保持簡單（Keep It Simple）



這一切都回到了設(shè)計理論中的經(jīng)典短語：保持簡單，看似愚蠢。

網(wǎng)站按鈕設(shè)計其實也并沒有什么不同。 按鈕的設(shè)計不必太復(fù)雜，它應(yīng)該是顯而易見的且具有功能。 有時，其他設(shè)計趨勢可能會影響到這種情況，并且這可能會影響網(wǎng)站上的轉(zhuǎn)化。

因此，在按鈕設(shè)計方面，請這樣思考——不要過分考慮。 一個按鈕應(yīng)該看起來像一個按鈕，就這么簡單。

2.提供大量對比（Provide Plenty of Contrast）



確保具有易于識別的按鈕幾乎與具有可識別的按鈕一樣重要。

原因在于，位于圖像或背景層頂部的按鈕樣式可能因為對比度不足以至于不易于被辨別，用戶無法立即找到它們。

不要因為對比度而影響你的按鈕發(fā)揮，你需要盡可能使它們脫穎而出，并以足夠的色彩和空間創(chuàng)建對比度以使其與屏幕上的其他元素分開。 在按鈕周圍留出足夠的空間，以使它們可以單獨引起注意。

這使按鈕更易于用戶查找和識別為可單擊元素，并使它們在物理上更易于單擊，而不會獲得錯誤的信息元素。

3.使用顏色（Use Color）



你是否注意到紅色或橙色的按鈕在實際上使用的有多廣泛？ 這是因為鮮艷的色彩可以提供吸引力，并鼓勵人們采取行動。

使用顏色也是一種非常流行的設(shè)計技術(shù)。 從鮮艷的顏色到具有簡單漸變的按鈕，顏色可能是幫助人們與設(shè)計進行交互的較簡單方法之一。

4.具有吸引力的號召短語（Write Microcopy That Creates Expectation）



不要再犯這中錯誤：一個帶有“ 點擊”或“單擊這里”字樣的按鈕。

按鈕設(shè)計中的短語應(yīng)該清楚地表明單擊以后會發(fā)生什么。 告訴用戶他們接下來會得到什么。 這可能很簡單，例如“提交”以輸入數(shù)據(jù)，或單擊“了解更多”的鏈接，或“觀看視頻”。 不管接下來展開的是什么內(nèi)容，請在短文本中告知用戶。

此信息可以幫助建立用戶的信任，并通過用戶認為理想的操作/交互來增加轉(zhuǎn)化。

5.微妙的效果（Engage with Subtle Animation）



在網(wǎng)站設(shè)計中經(jīng)常會使用到并排兩個按鈕的樣式，這也是一個不要忽視的趨勢。 一個是填充的，另一個則是邊框線的，兩者都包含一個懸停動畫，進一步強調(diào)了兩個可單擊的選擇。

動畫可以幫助引起人們對按鈕的關(guān)注，甚至可以鼓勵點擊。 在按鈕上包含懸停動畫，并已為用戶提供了一個簡單的提示，使其成為一種很常見的用戶模式。

只是不要在效果的使用上用力過猛就好。

6.易于點擊的尺寸（Make It Big Enough to Tap）



按鈕應(yīng)包括直徑至少10毫米的可單擊（可輕敲）區(qū)域，并且要始終貫徹。 該建議來自the MIT Touch Lab的一項研究，該機構(gòu)研究了指墊大小與觸摸設(shè)備的關(guān)系。

讓我們這樣想，計算機鍵盤上的典型鍵被設(shè)計為15毫米乘15毫米，這是為什么呢（請不要忘記考慮不同的屏幕尺寸，以免按鈕在小屏幕上丟失）？

如果確實需要使用較小的按鈕，請考慮為其添加較大的單擊半徑。 這樣，如果用戶錯過了按鈕本身，則按鈕周圍有足夠的空間，因此仍然可以進行所需的操作。

7.使用統(tǒng)一的風(fēng)格（Use a Familiar Style）



每個人都熟悉一些通用的按鈕樣式，使用其中之一。

· 矩形填充按鈕，內(nèi)部帶有正方形邊緣和文本

· 帶有圓角邊緣和內(nèi)部文本的矩形填充按鈕

· 具有可見陰影的矩形填充按鈕

· 矩形邊框線按鈕

· 簡單的圓形按鈕，最常用于右下角以表示幫助或聊天等

8.適當(dāng)?shù)奈恢茫≒ut in an Expected Location）



按鈕不僅需要出現(xiàn)并按預(yù)期發(fā)揮作用，還需要將其放置在用戶容易找到它們的位置。

· 對于首頁，這包括將按鈕放置在主標題或文本塊下方。 通常，按鈕與文本對齊或位于屏幕中央。

· 對于表單，輸入內(nèi)容后會出現(xiàn)按鈕。 某些單一輸入形式會將按鈕對齊在同一行的右側(cè)。

· 常規(guī)CTA按鈕直接出現(xiàn)在它們所引用的內(nèi)容下方。

· 播放或視頻或游戲的按鈕通常位于預(yù)覽屏幕的中央。

· 購物車或電子商務(wù)按鈕通常位于右上角。

9.不要忘記反饋（Don’t Forget Feedback）


按鈕是否響應(yīng)交互？ 確保按鈕界面設(shè)計中包含明顯的反饋回路。

提供按鈕已完成其工作的視覺或指導(dǎo)性提示。 有些按鈕比其他按鈕需要更多的工作。 例如，鏈接到另一個頁面或網(wǎng)站的按鈕會提供反饋，表明如果加載了新頁面，則該按鈕已起作用。 如果信息提交正確，則表單提交按鈕可能會在屏幕上顯示“謝謝”消息。

10.有目的性的使用按鈕（Use Buttons Intentionally）



太多按鈕會造成混亂。

在需要以及有意義的地方使用按鈕。 不要在各處使用按鈕使設(shè)計看起來眼花繚亂。 除了你之外，用戶對要點擊的位置和最重要的內(nèi)容一無所知。

按鈕應(yīng)該以用于網(wǎng)站的最終目標。 他們應(yīng)將訪客帶入整體網(wǎng)站設(shè)計中最重要的元素。

總結(jié)

網(wǎng)頁設(shè)計中的按鈕是將號召性用語轉(zhuǎn)換為結(jié)果的元素。 從顏色到功能再到微文本，請花點時間考慮一下這種設(shè)計。 測試按鈕設(shè)計，以確保在你的界面中使用的是具有最實用的版本。

請不要陷入趨勢陷阱，當(dāng)涉及到按鈕時，功能應(yīng)該是頭等大事。