網(wǎng)站設(shè)計(jì)中的UI按鈕設(shè)計(jì)藝術(shù)發(fā)布者：本站 時(shí)間：2019-11-13 09:11:13
在網(wǎng)站設(shè)計(jì)中優(yōu)秀的按鈕設(shè)計(jì)是大多數(shù)網(wǎng)站用戶從未考慮過的事情，因?yàn)楫?dāng)它運(yùn)行良好時(shí)，它幾乎是無形的。最好的按鈕很容易點(diǎn)擊，有明顯的功能，幫助用戶不加思考地與設(shè)計(jì)進(jìn)行交互。
這是一個(gè)相當(dāng)簡單的公式，但如果你把它作為事后的想法，它可能很難設(shè)計(jì)。
今天，我們來看看在網(wǎng)站設(shè)計(jì)中的按鈕設(shè)計(jì)趨勢，以及一些幫助你網(wǎng)站設(shè)計(jì)中用戶界面按鈕的小技巧。讓你的按鈕設(shè)計(jì)與這些提示，趨勢和想法，以激發(fā)你的按鈕設(shè)計(jì)靈感。
01、保持簡單
這一切都回到了設(shè)計(jì)理論中的經(jīng)典短語：保持簡單，愚蠢。
網(wǎng)站設(shè)計(jì)中的按鈕設(shè)計(jì)也不例外，按鈕設(shè)計(jì)不必過于復(fù)雜，它應(yīng)該是明顯的和帶功能性的。有時(shí)，其他的設(shè)計(jì)趨勢可能會妨礙這一點(diǎn)，這也可能會影響網(wǎng)站的轉(zhuǎn)化率。
所以，當(dāng)涉及到按鈕設(shè)計(jì)時(shí)，不要想太多，只要記得它是一個(gè)按鈕，那么一個(gè)按鈕應(yīng)該要看起來像一個(gè)按鈕，就是這么簡單。
02、提供足夠的對比
與擁有一個(gè)可識別的按鈕幾乎同樣重要的是確保它在網(wǎng)站設(shè)計(jì)中是容易被看到的。
圖像頂部的幻影按鈕樣式快速趨勢和褪色的原因是因?yàn)榘粹o的對比度不足以使其易于辨別。用戶無法立即找到它們。
不要隱藏對比度差的按鈕，要讓他們脫穎而出，用豐富的顏色和空間對比，使他們站在屏幕上的其他元素。在按鈕周圍留下足夠的填充物，這樣他們才能呼吸。
這使得用戶更容易找到按鈕并將其標(biāo)識為可單擊元素，同時(shí)也使按鈕在物理上更容易單擊，而不會錯(cuò)誤地得到錯(cuò)誤的元素。
03、使用顏色
你注意過網(wǎng)站設(shè)計(jì)中有多少按鈕是紅色或橙色的嗎？這是因?yàn)槊髁恋念伾珪藗冏⒁膺@些元素，并鼓勵(lì)人們采取行動。
使用顏色也是一種非常流行的設(shè)計(jì)技巧，從明亮的顏色到簡單的漸變按鈕，這種顏色可能是幫助人們與設(shè)計(jì)進(jìn)行交互的最簡單的方法之一。
04、寫一份能產(chǎn)生期望的縮微報(bào)告
不要犯這樣的錯(cuò)誤：一個(gè)帶有“點(diǎn)擊這里”字樣的按鈕。
按鈕設(shè)計(jì)中的微縮版本應(yīng)該能夠清楚地預(yù)測單擊后的結(jié)果，告訴用戶他們接下來會得到什么。這可能是簡單的“提交”輸入數(shù)據(jù)，或點(diǎn)擊鏈接“了解更多”，或觀看視頻。不管操作是什么，都要在縮微副本中告訴用戶。
這些信息可以幫助建立用戶之間的信任，并增加用戶認(rèn)為可取的操作/交互之間的轉(zhuǎn)換。
05、參與微妙的動畫
在按鈕設(shè)計(jì)中有一種趨勢，網(wǎng)站使用兩個(gè)并排的按鈕。一個(gè)是滿滿的，一個(gè)是幽靈風(fēng)格的。兩者都包含一個(gè)懸停動畫，進(jìn)一步強(qiáng)調(diào)了兩個(gè)可點(diǎn)擊的選擇。
動畫可以幫助人們關(guān)注按鈕，甚至鼓勵(lì)點(diǎn)擊。在按鈕上添加懸停動畫已經(jīng)成為一種普遍接受的用戶模式，并為用戶提供了一個(gè)簡單的提示，讓他們參與其中。
只是不要太過火，旋轉(zhuǎn)、旋轉(zhuǎn)、閃爍的按鈕與其說有用，不如說是討厭。
06、把它做得足夠大
按鈕應(yīng)該包括一個(gè)直徑至少10毫米的可點(diǎn)擊區(qū)域（tappable），并且越大越好。這個(gè)建議來自麻省理工學(xué)院觸摸實(shí)驗(yàn)室的一項(xiàng)研究，該研究考察了與觸摸設(shè)備相關(guān)的手指墊大小。
讓我們換個(gè)角度來看，物理計(jì)算機(jī)鍵盤上典型的鍵是15毫米乘15毫米。這個(gè)目標(biāo)很好。（只是別忘了考慮不同的屏幕尺寸，這樣你的按鈕就不會在小屏幕上消失了。）
如果您確實(shí)需要使用較小的按鈕，請考慮為其添加較大的單擊半徑。這樣，如果用戶錯(cuò)過了按鈕本身，它周圍有足夠的空間，以便所需的操作仍然發(fā)生。
07、使用熟悉的風(fēng)格
有幾個(gè)大家都熟悉的通用按鈕樣式，用其中一個(gè)。
一個(gè)矩形填充按鈕，內(nèi)有正方形邊和文本
一個(gè)矩形填充按鈕，里面有圓角和文字
帶有可見投影的矩形填充按鈕
矩形重影按鈕
簡單的圓形按鈕，最常用在右下角表示支持、幫助或聊天
08、放置在期望的位置
按鈕不僅需要按預(yù)期的方式出現(xiàn)和發(fā)揮作用，還需要放在用戶可以找到它們的地方。
對于主頁，這包括在主標(biāo)題或文本塊下面放置按鈕。按鈕通常與文本保持左對齊，或者位于屏幕的中心。
對于表單，按鈕出現(xiàn)在輸入之后。一些單獨(dú)的輸入表單將同一行的按鈕對齊到輸入的右側(cè)。
一般的CTA按鈕直接出現(xiàn)在它們引用的內(nèi)容下面。
播放或啟動視頻或游戲的按鈕通常位于預(yù)覽屏幕的中心。
購物車或電子商務(wù)按鈕通常在右上角。
09、別忘了反饋
按鈕是否響應(yīng)交互？確保按鈕界面設(shè)計(jì)中包含明顯的反饋循環(huán)。
提供按鈕已經(jīng)完成其工作的視覺或指導(dǎo)性提示。有些按鈕會比其他的需要更多的工作。例如，鏈接到另一個(gè)頁面或網(wǎng)站的按鈕會在新頁面加載時(shí)提供反饋，說明按鈕已經(jīng)工作。如果信息正確提交，表單提交按鈕可能會在屏幕上顯示“謝謝”消息。
10、故意使用按鈕
按鈕太多會造成混亂。
在有意義的地方使用按鈕，不要在網(wǎng)站設(shè)計(jì)中添加過多的按鈕。用戶不會清楚地知道點(diǎn)擊哪里和什么是最重要的。
保存按鈕用于網(wǎng)站目標(biāo)。他們應(yīng)該引導(dǎo)訪問者去看那些在你的整體設(shè)計(jì)中最重要的元素。
結(jié)論
網(wǎng)站設(shè)計(jì)中的網(wǎng)站按鈕是一個(gè)元素，它可以將你的動作調(diào)用轉(zhuǎn)換成結(jié)果?；c(diǎn)時(shí)間考慮一下這個(gè)設(shè)計(jì)，從顏色到功能再到微縮圖。測試按鈕設(shè)計(jì)，以確保您的界面具有最實(shí)用的版本。
如果你有一個(gè)工作的按鈕，不要落入趨勢的陷阱而改變設(shè)計(jì)。當(dāng)涉及到按鈕時(shí)，函數(shù)應(yīng)該是優(yōu)先級最高的。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032