UI設(shè)計(jì)中按鈕交互設(shè)計(jì)中的大智慧

按鈕是UI和交互設(shè)計(jì)的基本元素，它們是用戶交互的時(shí)候，和系統(tǒng)進(jìn)行溝通交流的核心組件，也是圖形化界面當(dāng)中，最早出現(xiàn)，也是最為常見(jiàn)的一種交互對(duì)象。

按鈕控件的作用是引發(fā)即時(shí)操作，即當(dāng)用戶點(diǎn)擊后，觸發(fā)即操作。作為基礎(chǔ)控件之一，按鈕廣泛應(yīng)用于不同平臺(tái)的所有產(chǎn)品中。完整的按鈕視覺(jué)體系包括強(qiáng)、中、弱3個(gè)層次。按鈕的狀態(tài)分為正常未單擊、單擊時(shí)和不可用3種狀態(tài)。

本文小編將給大家分享一些UI設(shè)計(jì)按鈕設(shè)計(jì)的小技巧，希望可以幫助到你

1、按鈕必須得看起來(lái)像按鈕

涉及到用戶界面交互的時(shí)候，用戶需要知道哪些是可點(diǎn)擊的，而哪些不是。面對(duì)UI界面中的每個(gè)元素，用戶都需要對(duì)它們進(jìn)行辨別和判斷，而這個(gè)過(guò)程越長(zhǎng)，可用性其實(shí)就越差。

以下是絕大多數(shù)用戶都熟悉的按鈕樣式：帶有矩形邊框的、填充有色彩的按鈕；帶有圓角矩形邊框的、填充色彩的按鈕；帶有陰影有色彩和內(nèi)容填充的按鈕；還有幽靈按鈕。

在這幾種常見(jiàn)的模式當(dāng)中，帶有陰影和色彩填充的按鈕，對(duì)于用戶來(lái)說(shuō)是最清晰的，因?yàn)樗谝曈X(jué)上是有三個(gè)維度的，用戶會(huì)感知到這是一個(gè)可按下去的元素。

2、不要忘記留白

按鈕本身的視覺(jué)屬性很重要，而按鈕附近的留白同樣重要，他們讓按鈕更容易被識(shí)別，也更容易交互。

在下面的案例當(dāng)中，用戶很可能會(huì)將文本內(nèi)容和幽靈按鈕混淆。用戶在此無(wú)法判斷它到底是一個(gè)盒子元素，還是個(gè)按鈕。

3、確保按鈕用于足夠的對(duì)照

排版設(shè)計(jì)也是一門(mén)學(xué)問(wèn)，不一樣的排版就會(huì)有不一樣的視覺(jué)結(jié)果。

很多界面設(shè)計(jì)深受蘋(píng)果影響，其UI套件一看便知，按鈕在其中可能會(huì)顯得不甚顯眼。補(bǔ)救措施是利用色彩、大小、留白、字體來(lái)提高按鈕的視覺(jué)表現(xiàn)力，從而引導(dǎo)用戶交互。另外，重要的按鈕需要做出強(qiáng)調(diào)。

4、按鈕應(yīng)該擁有合理的尺寸

按鈕的大小應(yīng)該反映出屏幕上這一元素的優(yōu)先級(jí)，更大的按鈕應(yīng)該意味著更重要的交互。始終嘗試讓主要的按鈕更加突出，增加它的尺寸，并且使用高對(duì)比度的色彩來(lái)吸引用戶的注意力。

在Dropbox的界面上，設(shè)計(jì)師就是使用了大小和色彩的對(duì)比來(lái)創(chuàng)造優(yōu)先級(jí)。讓按鈕適配用戶的手指。

在許多APP當(dāng)中，按鈕的設(shè)計(jì)太小了，這可能會(huì)導(dǎo)致用戶出現(xiàn)誤觸的情況。

麻省理工學(xué)院的實(shí)驗(yàn)室研究發(fā)現(xiàn)，手指墊寬度的平均值在10-14mm之間，指尖在8-10mm之間，這使得10×10mm的按鈕尺寸是比較合理的。

5、按鈕的性格

顏色和形狀都會(huì)對(duì)設(shè)計(jì)語(yǔ)言造成影響，會(huì)影響到按鈕帶給人最直觀的感受。

方形，四平八穩(wěn)，給人一種穩(wěn)定的感覺(jué)；圓形，珠圓玉潤(rùn)，給人一種很活潑的感覺(jué)。

顏色也會(huì)給人一種感受，特別是飽和度的不同。黃色給人一種很活潑的感覺(jué)。但是降低飽和度之后變成金色，會(huì)傳達(dá)給用戶一種很成熟的感受。

6、為按鈕交互提供視覺(jué)和音頻反饋

當(dāng)用戶點(diǎn)擊按鈕的時(shí)候，他們更希望界面能夠給予適當(dāng)?shù)姆答?。基于不同的操作，界面給予視覺(jué)或者音頻的反饋。

當(dāng)用戶沒(méi)有收獲任何反饋的時(shí)候，他們可能會(huì)覺(jué)得界面沒(méi)有收到他們的操作，從而反復(fù)點(diǎn)擊，執(zhí)行多次不必要的操作。

對(duì)于某些操作，比如下載，不僅要告訴用戶他們的操作執(zhí)行成功了，而且要顯示當(dāng)前的進(jìn)度。

以上就是本文的全部?jī)?nèi)容啦~如果你有更好的UI按鈕設(shè)計(jì)技巧可以留言分享給大家哦