按鈕UI設(shè)計(jì)中的三大設(shè)計(jì)原則和方法

今天我們給大家介紹再按鈕設(shè)計(jì)中的的三大設(shè)計(jì)原則和方法。

1. 可識(shí)別性
首先必須優(yōu)先考慮到移動(dòng)端用戶的體驗(yàn)，因?yàn)槿虺^(guò) 48% 的頁(yè)面瀏覽量是通過(guò)移動(dòng)設(shè)備進(jìn)行的。您的按鈕對(duì)于移動(dòng)用戶應(yīng)該是觸摸友好的，對(duì)于桌面用戶應(yīng)該是可點(diǎn)擊的。 與桌面用戶不同，移動(dòng)用戶沒(méi)有機(jī)會(huì)將鼠標(biāo)懸停在元素上以檢查交互性，因此，請(qǐng)確保您的按鈕對(duì)用戶而言是交互式的。

尺寸
據(jù)某觸控實(shí)驗(yàn)室的一項(xiàng)研究表明，由于指尖的平均尺寸，10mm x 10mm 是按鈕的最佳最小尺寸。 在下面的示例中，我們可以看到用戶與較大的按鈕進(jìn)行交互是多么容易。所以，按鈕的觸摸目標(biāo)必須至少為 38 像素 x 38 像素。

形狀
最受歡迎的按鈕形狀是方形或帶圓角的方形。圓角似乎比方角更有優(yōu)勢(shì)。研究表明，圓角通過(guò)將我們的注意力吸引到元素的內(nèi)容上，使信息更容易處理。

2. 可聚焦性
按鈕應(yīng)易于讓用戶更容易發(fā)現(xiàn)，UX設(shè)計(jì)師同意你不應(yīng)該讓用戶尋找按鈕。 在您的網(wǎng)站或應(yīng)用程序中與按鈕放置保持一致也很重要。如果一個(gè)表單的主要號(hào)召性用語(yǔ)在右側(cè)，另一個(gè)在左側(cè)，它將使用戶感到困惑。

3.狀態(tài)清晰
按鈕操作和狀態(tài)應(yīng)該清晰，以便用戶知道并了解他們?cè)谀木W(wǎng)站上采取了哪些操作。以下是一些有助于此過(guò)程的設(shè)計(jì)提示和技巧方法：
顏色
某些顏色具有用戶習(xí)慣看到的特殊含義。例如，紅色通常用于表示不法行為或破壞性行為。另一方面，綠色通常表示成功的行動(dòng)。使用這樣的約定可以讓用戶更容易理解按鈕的操作和狀態(tài)。

等級(jí)制度
按鈕不僅需要與頁(yè)面上的其他元素區(qū)分開來(lái)，而且還需要相互區(qū)分，因?yàn)槎鄠€(gè)按鈕通常組合在一起。例如，主要操作按鈕應(yīng)該比次要或第三操作按鈕更具視覺(jué)優(yōu)勢(shì)。在下面的示例中，“添加更多”和“號(hào)召性用語(yǔ)”按鈕的樣式相似并且靠得很近。這可能會(huì)使用戶感到困惑并導(dǎo)致他們選擇錯(cuò)誤的按鈕，因?yàn)樗鼈冊(cè)谝曈X(jué)上彼此之間的差異不夠大。

類型
按鈕類型有助于表明它們的重要性和功能。一些示例包括 text、ghost、toggle 和 floating。

命令
按鈕的順序?qū)τ趯?shí)現(xiàn)視覺(jué)層次很重要。在做出訂購(gòu)決定時(shí)，重要的是要注意大多數(shù)用戶希望首先列出的內(nèi)容具有高優(yōu)先級(jí)，而最后列出的內(nèi)容具有低優(yōu)先級(jí)。

狀態(tài)
按鈕是多狀態(tài)元素。讓用戶清楚地知道這個(gè)狀態(tài)是很重要的。我們可以通過(guò)遵守符合用戶期望的約定來(lái)做到這一點(diǎn)，例如禁用按鈕顯示為灰色，焦點(diǎn)元素包含藍(lán)色圓環(huán)。

反饋
在單擊或點(diǎn)擊按鈕后，用戶期望以視覺(jué)或音頻反饋的形式得到響應(yīng)，具體取決于操作。反饋包括從上面顯示的狀態(tài)變化到進(jìn)度或錯(cuò)誤動(dòng)畫等行為的所有內(nèi)容。

希望以上文章對(duì)您有幫助，在團(tuán)隊(duì)UI項(xiàng)目中可以找到創(chuàng)建按鈕的設(shè)計(jì)靈感。