網(wǎng)站設計中的UI按鈕設計藝術(shù)發(fā)布者：本站     時(shí)間：2019-11-13 09:11:13

在網(wǎng)站設計中優(yōu)秀的按鈕設計是大多數網(wǎng)站用戶(hù)從未考慮過(guò)的事情，因為當它運行良好時(shí)，它幾乎是無(wú)形的。最好的按鈕很容易點(diǎn)擊，有明顯的功能，幫助用戶(hù)不加思考地與設計進(jìn)行交互。

這是一個(gè)相當簡(jiǎn)單的公式，但如果你把它作為事后的想法，它可能很難設計。

今天，我們來(lái)看看在網(wǎng)站設計中的按鈕設計趨勢，以及一些幫助你網(wǎng)站設計中用戶(hù)界面按鈕的小技巧。讓你的按鈕設計與這些提示，趨勢和想法，以激發(fā)你的按鈕設計靈感。

01、保持簡(jiǎn)單

這一切都回到了設計理論中的經(jīng)典短語(yǔ)：保持簡(jiǎn)單，愚蠢。

網(wǎng)站設計中的按鈕設計也不例外，按鈕設計不必過(guò)于復雜，它應該是明顯的和帶功能性的。有時(shí)，其他的設計趨勢可能會(huì )妨礙這一點(diǎn)，這也可能會(huì )影響網(wǎng)站的轉化率。

所以，當涉及到按鈕設計時(shí)，不要想太多，只要記得它是一個(gè)按鈕，那么一個(gè)按鈕應該要看起來(lái)像一個(gè)按鈕，就是這么簡(jiǎn)單。

02、提供足夠的對比

與擁有一個(gè)可識別的按鈕幾乎同樣重要的是確保它在網(wǎng)站設計中是容易被看到的。

圖像頂部的幻影按鈕樣式快速趨勢和褪色的原因是因為按鈕的對比度不足以使其易于辨別。用戶(hù)無(wú)法立即找到它們。

不要隱藏對比度差的按鈕，要讓他們脫穎而出，用豐富的顏色和空間對比，使他們站在屏幕上的其他元素。在按鈕周?chē)粝伦銐虻奶畛湮?，這樣他們才能呼吸。

這使得用戶(hù)更容易找到按鈕并將其標識為可單擊元素，同時(shí)也使按鈕在物理上更容易單擊，而不會(huì )錯誤地得到錯誤的元素。

03、使用顏色

你注意過(guò)網(wǎng)站設計中有多少按鈕是紅色或橙色的嗎？這是因為明亮的顏色會(huì )吸引人們注意這些元素，并鼓勵人們采取行動(dòng)。

使用顏色也是一種非常流行的設計技巧，從明亮的顏色到簡(jiǎn)單的漸變按鈕，這種顏色可能是幫助人們與設計進(jìn)行交互的最簡(jiǎn)單的方法之一。

04、寫(xiě)一份能產(chǎn)生期望的縮微報告

不要犯這樣的錯誤：一個(gè)帶有“點(diǎn)擊這里”字樣的按鈕。

按鈕設計中的微縮版本應該能夠清楚地預測單擊后的結果，告訴用戶(hù)他們接下來(lái)會(huì )得到什么。這可能是簡(jiǎn)單的“提交”輸入數據，或點(diǎn)擊鏈接“了解更多”，或觀(guān)看視頻。不管操作是什么，都要在縮微副本中告訴用戶(hù)。

這些信息可以幫助建立用戶(hù)之間的信任，并增加用戶(hù)認為可取的操作/交互之間的轉換。

05、參與微妙的動(dòng)畫(huà)

在按鈕設計中有一種趨勢，網(wǎng)站使用兩個(gè)并排的按鈕。一個(gè)是滿(mǎn)滿(mǎn)的，一個(gè)是幽靈風(fēng)格的。兩者都包含一個(gè)懸停動(dòng)畫(huà)，進(jìn)一步強調了兩個(gè)可點(diǎn)擊的選擇。

動(dòng)畫(huà)可以幫助人們關(guān)注按鈕，甚至鼓勵點(diǎn)擊。在按鈕上添加懸停動(dòng)畫(huà)已經(jīng)成為一種普遍接受的用戶(hù)模式，并為用戶(hù)提供了一個(gè)簡(jiǎn)單的提示，讓他們參與其中。

只是不要太過(guò)火，旋轉、旋轉、閃爍的按鈕與其說(shuō)有用，不如說(shuō)是討厭。

06、把它做得足夠大

按鈕應該包括一個(gè)直徑至少10毫米的可點(diǎn)擊區域（tappable），并且越大越好。這個(gè)建議來(lái)自麻省理工學(xué)院觸摸實(shí)驗室的一項研究，該研究考察了與觸摸設備相關(guān)的手指墊大小。

讓我們換個(gè)角度來(lái)看，物理計算機鍵盤(pán)上典型的鍵是15毫米乘15毫米。這個(gè)目標很好。（只是別忘了考慮不同的屏幕尺寸，這樣你的按鈕就不會(huì )在小屏幕上消失了。）

如果您確實(shí)需要使用較小的按鈕，請考慮為其添加較大的單擊半徑。這樣，如果用戶(hù)錯過(guò)了按鈕本身，它周?chē)凶銐虻目臻g，以便所需的操作仍然發(fā)生。

07、使用熟悉的風(fēng)格

有幾個(gè)大家都熟悉的通用按鈕樣式，用其中一個(gè)。

一個(gè)矩形填充按鈕，內有正方形邊和文本

一個(gè)矩形填充按鈕，里面有圓角和文字

帶有可見(jiàn)投影的矩形填充按鈕

矩形重影按鈕

簡(jiǎn)單的圓形按鈕，最常用在右下角表示支持、幫助或聊天

08、放置在期望的位置

按鈕不僅需要按預期的方式出現和發(fā)揮作用，還需要放在用戶(hù)可以找到它們的地方。

對于主頁(yè)，這包括在主標題或文本塊下面放置按鈕。按鈕通常與文本保持左對齊，或者位于屏幕的中心。

對于表單，按鈕出現在輸入之后。一些單獨的輸入表單將同一行的按鈕對齊到輸入的右側。

一般的CTA按鈕直接出現在它們引用的內容下面。

播放或啟動(dòng)視頻或游戲的按鈕通常位于預覽屏幕的中心。

購物車(chē)或電子商務(wù)按鈕通常在右上角。

09、別忘了反饋

按鈕是否響應交互？確保按鈕界面設計中包含明顯的反饋循環(huán)。

提供按鈕已經(jīng)完成其工作的視覺(jué)或指導性提示。有些按鈕會(huì )比其他的需要更多的工作。例如，鏈接到另一個(gè)頁(yè)面或網(wǎng)站的按鈕會(huì )在新頁(yè)面加載時(shí)提供反饋，說(shuō)明按鈕已經(jīng)工作。如果信息正確提交，表單提交按鈕可能會(huì )在屏幕上顯示“謝謝”消息。

10、故意使用按鈕

按鈕太多會(huì )造成混亂。

在有意義的地方使用按鈕，不要在網(wǎng)站設計中添加過(guò)多的按鈕。用戶(hù)不會(huì )清楚地知道點(diǎn)擊哪里和什么是最重要的。

保存按鈕用于網(wǎng)站目標。他們應該引導訪(fǎng)問(wèn)者去看那些在你的整體設計中最重要的元素。

結論

網(wǎng)站設計中的網(wǎng)站按鈕是一個(gè)元素，它可以將你的動(dòng)作調用轉換成結果?；c(diǎn)時(shí)間考慮一下這個(gè)設計，從顏色到功能再到微縮圖。測試按鈕設計，以確保您的界面具有最實(shí)用的版本。

如果你有一個(gè)工作的按鈕，不要落入趨勢的陷阱而改變設計。當涉及到按鈕時(shí)，函數應該是優(yōu)先級最高的。