UI用戶界面中的按鈕設(shè)計技巧，和需要規(guī)避的錯誤

在UI用戶界面設(shè)計中，按鈕的設(shè)計和圖標(biāo)設(shè)計一樣至關(guān)重要，好的按鈕可以起到引導(dǎo)用戶行為的作用。

按鈕設(shè)計技巧：
對于大多數(shù)項目，您的設(shè)計系統(tǒng)將需要 3 種按鈕樣式；主按鈕、二級和三級按鈕。他們需要有一個清晰的視覺層次來代表不同重要程度的動作。同時，我們的設(shè)計目標(biāo)是至少滿足WCAG 2.0 AA 級（www.w3.org/WAI/standards-guidelines/wcag/）可訪問性要求，因為這是最常見的標(biāo)準(zhǔn)，也是一個很好的起點。


1、考慮到視力障礙者人群，為了區(qū)分用戶界面UI組件，界面需要具有至少 3:1 的顏色對比度。

2、禁用的按鈕顏色通常為淺灰色。正常的按鈕應(yīng)避免使用淺灰色按鈕以減少潛在被忽略。

3、主要和次要按鈕由于樣式相似且缺乏對比而發(fā)生沖突，需要建立視覺層次，按鈕文本對比度必須至少為 4.5:1 才能滿足 WCAG 2.0 AA 級可訪問性要求。

4、UI界面設(shè)計的每一個細(xì)節(jié)都應(yīng)該有一個合乎邏輯的目的，避免不一致的按鈕形狀，因為容易引起混淆。如果按鈕樣式相同，則按鈕之間的對比度必須至少為 3:1，以確保視力障礙者能夠區(qū)分。

5、使用較大的觸摸目標(biāo)（至少 48pt）以確保人們可以輕松點擊按鈕。 確保按鈕之間有足夠的空間，這樣人們就不會誤按錯誤的按鈕。為了安全起見，我通常使用 16pt。

最后注意，見上圖第三個按鈕看起來與文本鏈接相同，WEB時代傳統(tǒng)認(rèn)為，文本鏈接被設(shè)計為去某個地方，而按鈕被設(shè)計為執(zhí)行一個動作。當(dāng)然并不是說以上jiq是所有按鈕設(shè)計準(zhǔn)則，但按照上面提到的方法，可以保證產(chǎn)品的可用性和可訪問性，是一個非常安全的選擇，最后我希望這些按鈕設(shè)計技巧對您有所幫助。