出色的按鈕設(shè)計(jì)是大多數(shù)網(wǎng)站用戶幾乎不會關(guān)于注意的事情……因?yàn)楫?dāng)它運(yùn)行良好時，它幾乎是看不見的。 一個好的按鈕設(shè)計(jì)應(yīng)該易于點(diǎn)擊，具有明顯的功能，并可以幫助用戶不用過多思考就與設(shè)計(jì)進(jìn)行交互互動。
這是一個非常簡單的道理，但是如果事后考慮，可能會很難設(shè)計(jì)。
今天，我們將來著重研究按鈕設(shè)計(jì)的趨勢，以及一些關(guān)于如何設(shè)計(jì)一個好按鈕的提示，以幫助你設(shè)計(jì)用戶將不斷產(chǎn)生點(diǎn)擊欲望的UI按鈕。 這些提示，趨勢和想法可激發(fā)你對按鈕設(shè)計(jì)的靈感。
1.保持簡單（Keep It Simple）
這一切都回到了設(shè)計(jì)理論中的經(jīng)典短語：保持簡單，看似愚蠢。
網(wǎng)站按鈕設(shè)計(jì)其實(shí)也并沒有什么不同。 按鈕的設(shè)計(jì)不必太復(fù)雜，它應(yīng)該是顯而易見的且具有功能。 有時，其他設(shè)計(jì)趨勢可能會影響到這種情況，并且這可能會影響網(wǎng)站上的轉(zhuǎn)化。
因此，在按鈕設(shè)計(jì)方面，請這樣思考——不要過分考慮。 一個按鈕應(yīng)該看起來像一個按鈕，就這么簡單。
2.提供大量對比（Provide Plenty of Contrast）
確保具有易于識別的按鈕幾乎與具有可識別的按鈕一樣重要。
原因在于，位于圖像或背景層頂部的按鈕樣式可能因?yàn)閷Ρ榷炔蛔阋灾劣诓灰子诒槐鎰e，用戶無法立即找到它們。
不要因?yàn)閷Ρ榷榷绊懩愕陌粹o發(fā)揮，你需要盡可能使它們脫穎而出，并以足夠的色彩和空間創(chuàng)建對比度以使其與屏幕上的其他元素分開。 在按鈕周圍留出足夠的空間，以使它們可以單獨(dú)引起注意。
這使按鈕更易于用戶查找和識別為可單擊元素，并使它們在物理上更易于單擊，而不會獲得錯誤的信息元素。
3.使用顏色（Use Color）
你是否注意到紅色或橙色的按鈕在實(shí)際上使用的有多廣泛？ 這是因?yàn)轷r艷的色彩可以提供吸引力，并鼓勵人們采取行動。
使用顏色也是一種非常流行的設(shè)計(jì)技術(shù)。 從鮮艷的顏色到具有簡單漸變的按鈕，顏色可能是幫助人們與設(shè)計(jì)進(jìn)行交互的較簡單方法之一。
4.具有吸引力的號召短語（Write Microcopy That Creates Expectation）
不要再犯這中錯誤：一個帶有“ 點(diǎn)擊”或“單擊這里”字樣的按鈕。
按鈕設(shè)計(jì)中的短語應(yīng)該清楚地表明單擊以后會發(fā)生什么。 告訴用戶他們接下來會得到什么。 這可能很簡單，例如“提交”以輸入數(shù)據(jù)，或單擊“了解更多”的鏈接，或“觀看視頻”。 不管接下來展開的是什么內(nèi)容，請?jiān)诙涛谋局懈嬷脩簟?/p>
此信息可以幫助建立用戶的信任，并通過用戶認(rèn)為理想的操作/交互來增加轉(zhuǎn)化。
5.微妙的效果（Engage with Subtle Animation）
在網(wǎng)站設(shè)計(jì)中經(jīng)常會使用到并排兩個按鈕的樣式，這也是一個不要忽視的趨勢。 一個是填充的，另一個則是邊框線的，兩者都包含一個懸停動畫，進(jìn)一步強(qiáng)調(diào)了兩個可單擊的選擇。
動畫可以幫助引起人們對按鈕的關(guān)注，甚至可以鼓勵點(diǎn)擊。 在按鈕上包含懸停動畫，并已為用戶提供了一個簡單的提示，使其成為一種很常見的用戶模式。
只是不要在效果的使用上用力過猛就好。
6.易于點(diǎn)擊的尺寸（Make It Big Enough to Tap）
按鈕應(yīng)包括直徑至少10毫米的可單擊（可輕敲）區(qū)域，并且要始終貫徹。 該建議來自the MIT Touch Lab的一項(xiàng)研究，該機(jī)構(gòu)研究了指墊大小與觸摸設(shè)備的關(guān)系。
讓我們這樣想，計(jì)算機(jī)鍵盤上的典型鍵被設(shè)計(jì)為15毫米乘15毫米，這是為什么呢（請不要忘記考慮不同的屏幕尺寸，以免按鈕在小屏幕上丟失）？
如果確實(shí)需要使用較小的按鈕，請考慮為其添加較大的單擊半徑。 這樣，如果用戶錯過了按鈕本身，則按鈕周圍有足夠的空間，因此仍然可以進(jìn)行所需的操作。
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ā)揮作用，還需要將其放置在用戶容易找到它們的位置。
· 對于首頁，這包括將按鈕放置在主標(biāo)題或文本塊下方。 通常，按鈕與文本對齊或位于屏幕中央。
· 對于表單，輸入內(nèi)容后會出現(xiàn)按鈕。 某些單一輸入形式會將按鈕對齊在同一行的右側(cè)。
· 常規(guī)CTA按鈕直接出現(xiàn)在它們所引用的內(nèi)容下方。
· 播放或視頻或游戲的按鈕通常位于預(yù)覽屏幕的中央。
· 購物車或電子商務(wù)按鈕通常位于右上角。
9.不要忘記反饋（Don’t Forget Feedback）
按鈕是否響應(yīng)交互？ 確保按鈕界面設(shè)計(jì)中包含明顯的反饋回路。
提供按鈕已完成其工作的視覺或指導(dǎo)性提示。 有些按鈕比其他按鈕需要更多的工作。 例如，鏈接到另一個頁面或網(wǎng)站的按鈕會提供反饋，表明如果加載了新頁面，則該按鈕已起作用。 如果信息提交正確，則表單提交按鈕可能會在屏幕上顯示“謝謝”消息。
10.有目的性的使用按鈕（Use Buttons Intentionally）
太多按鈕會造成混亂。
在需要以及有意義的地方使用按鈕。 不要在各處使用按鈕使設(shè)計(jì)看起來眼花繚亂。 除了你之外，用戶對要點(diǎn)擊的位置和最重要的內(nèi)容一無所知。
按鈕應(yīng)該以用于網(wǎng)站的最終目標(biāo)。 他們應(yīng)將訪客帶入整體網(wǎng)站設(shè)計(jì)中最重要的元素。
總結(jié)
網(wǎng)頁設(shè)計(jì)中的按鈕是將號召性用語轉(zhuǎn)換為結(jié)果的元素。 從顏色到功能再到微文本，請花點(diǎn)時間考慮一下這種設(shè)計(jì)。 測試按鈕設(shè)計(jì)，以確保在你的界面中使用的是具有最實(shí)用的版本。
請不要陷入趨勢陷阱，當(dāng)涉及到按鈕時，功能應(yīng)該是頭等大事。
----圖文來自：design shack
----由深圳網(wǎng)站建設(shè)公司-Clh翻譯編輯整理，為您提供更多有關(guān)深圳網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)及其他互聯(lián)網(wǎng)應(yīng)用服務(wù)