網(wǎng)頁版面上的字體大小有講究，而網(wǎng)站的按鈕的尺寸及按鈕之間的間距標(biāo)準(zhǔn)非常有細節(jié)規(guī)范。
序幕
-
點擊，再點擊，重復(fù)點擊！用戶是否能夠以高觸摸精度點擊您的移動按鈕，又或者他們是錯過了按鈕的目標(biāo)？在責(zé)怪用戶之前，請檢查一下您設(shè)計的按鈕的大小與間距。如果按鈕之間沒有最佳的尺寸和間距，難怪用戶會錯過他們的目標(biāo)或按錯了按鈕。如果您不確定什么是最佳的按鈕設(shè)計方案，那么本文將揭示答案。
按鈕尺寸標(biāo)準(zhǔn)
-
很難知道您的按鈕是否在沒有標(biāo)準(zhǔn)的情況下是最佳的狀態(tài)。幸運的是，研究者在對于按鈕尺寸和間距的深入探索中，發(fā)現(xiàn)了一個適用于大多數(shù)用戶包括老年人的標(biāo)準(zhǔn)尺寸。
該研究發(fā)現(xiàn)，用戶在按鈕上的觸摸精度上，小于 42 像素或超過 72 像素的按鈕都具有最低的精度率。使用 42 一 72 像素之間的按鈕可以獲得最高精度反饋。這意味著 42 個像素是按鈕的最小值，而 72 個像素則是最適合用戶的最大值。研究發(fā)現(xiàn)最優(yōu)選的單個按鈕尺寸是 60 像素，大約是 42 一 72 像素的中間范圍，不過如果不考慮設(shè)計的因素， 72 像素按鈕產(chǎn)生會最高的觸摸精度，也是設(shè)計師對大范圍人群設(shè)計時的首選。在使用多層按鈕選擇時，指示優(yōu)先級也非常重要。這樣用戶就知道哪些操作會使他們獲得最理想的結(jié)果。按照按鈕大小標(biāo)準(zhǔn)，您可以有效地指示優(yōu)先級不再需要選擇任意大小并希望它是用戶友好的。
該音樂播放的示例演示了使用按鈕大小標(biāo)準(zhǔn)來指示優(yōu)先級。播放的按鈕最大，其次是上下選擇，再其次是循環(huán)與隨機。請記住：大小優(yōu)先級的順序
· 高優(yōu)先級按鈕= 72 像素
· 中優(yōu)先級按鈕＝ 60 像素
· 低優(yōu)先級按鈕＝ 42
像素用戶最常使用的按鈕現(xiàn)在更容易被發(fā)現(xiàn)和點擊。他們能夠以更快的反應(yīng)時間和更高的準(zhǔn)確度來點擊它。如果用戶的注意力分配在不同的任務(wù)之間，這尤其有用。
按鈕間距標(biāo)準(zhǔn)
-
當(dāng)按鈕相距太遠時，，用白的種撞精度最低用戶移動到觸摸目標(biāo)的速度要慢得多。當(dāng)按鈕
該研究得出結(jié)論， 12至 48 像素的范圍是最佳按鈕間距。這種寬范圍很有用因為您可以將它應(yīng)用于不同的按鈕大小。將寬范圍劃分為較小范圍時，可獲得與標(biāo)準(zhǔn)按鈕尺寸對應(yīng)的按鈕間距標(biāo)準(zhǔn)。
· 12 一 24 像素的大按鈕
· 中等按鈕為 24 一 36 像素
· 小按鈕為 36 一 48 像素
更大的按鈕允許用戶準(zhǔn)確地?fù)糁兴麄兊哪繕?biāo)，即使他們的手指略微偏離目標(biāo)。但如果他們用較小的按鈕離開目標(biāo)，他們就會錯過并按下相鄰的按鈕。這就是為什么較小的按鈕需要比較大按鈕更多的間距。該示例顯示了遵循按鈕間距標(biāo)準(zhǔn)如何提高觸摸精度。用戶的手指可以輕微偏離目標(biāo)，無論大小多大，他們?nèi)匀豢梢园聪掳粹o。
文本按鈕的含義
-
以下標(biāo)準(zhǔn)可以應(yīng)用于文本按鈕的高度，但寬度會有所不同。
例如，高度為 60 像素的文本按鈕將具有比 60 像素圖標(biāo)按鈕更大的寬度，但它也很容易點擊。在實際的案例運用中，它也更容易挖掘，因為較大的寬度需要較低的精度。按鈕高度對準(zhǔn)確性更重要。您可以看到文本按鈕的觸摸精度與圖標(biāo)按鈕保持一致。由于寬度較大，按鈕間距標(biāo)準(zhǔn)不適用于文本按鈕。但是至少 12 個像素的間隔對于視覺分離是有利的。
調(diào)整按鈕的大小
-
您的按鈕是否具有最佳尺寸和間距？按鈕尺寸和間距標(biāo)準(zhǔn)將確保您的移動界面具有高觸摸精度。根據(jù)你的感受決定適當(dāng)?shù)某叽绾烷g距會留下不確定的空間。所以在本文最后，各位設(shè)計者最好建立一個你可以信賴的最佳標(biāo)準(zhǔn)。這就是設(shè)計系統(tǒng)的形成方式以及為什么許多公司使用它們。想想你和你公司遵循的標(biāo)準(zhǔn)。如果您沒有，請建立一些，您將能夠獲得多種跨平臺的出色的用戶體驗。
