大連北大青鳥(niǎo)

移動(dòng)按鈕的最佳尺寸和間距標(biāo)準(zhǔn)

據(jù)研究得出結(jié)論，12至48像素的范圍是最佳按鈕間距。

對(duì)于 UI 設(shè)計(jì)師而言，設(shè)計(jì)規(guī)范以及UX的設(shè)計(jì)原則是我們一切天馬行空做設(shè)計(jì)的根基。

我們所設(shè)計(jì)的作品中，按鈕是很普遍常用的，但是我們是否真正的了解按鈕的秘密呢？昨天小編在 UX movement上看到國(guó)外一位資深的交互設(shè)計(jì)師對(duì)按鈕的秘密進(jìn)行了解剖。

今天來(lái)跟大家分享一下按鈕的那些事兒～

1）按鈕尺寸標(biāo)準(zhǔn)

很難知道您的按鈕是否在沒(méi)有標(biāo)準(zhǔn)的情況下是最佳的。幸運(yùn)的是，對(duì)按鈕尺寸和間距的研究發(fā)現(xiàn)了一個(gè)適用于大多數(shù)用戶的標(biāo)準(zhǔn)，包括老年人。

該研究發(fā)現(xiàn)，用戶在按鈕上的觸摸精度最低，小于42像素。超過(guò)72像素的按鈕也具有低精度。

使用42-72像素之間的按鈕可以獲得最高精度。這意味著42個(gè)像素是最小值，72個(gè)像素是最適合用戶的按鈕大小。

最優(yōu)選的按鈕尺寸是60像素，大約是該范圍的中間。72像素按鈕產(chǎn)生最高的觸摸精度，是老用戶的首選。

使用按鈕數(shù)組時(shí)，指示優(yōu)先級(jí)非常重要。這樣，用戶就知道哪些操作會(huì)使他們獲得最理想的結(jié)果。按照按鈕大小標(biāo)準(zhǔn)，您可以有效地指示優(yōu)先級(jí)。您不再需要選擇任意大小并希望它是用戶友好的。

該示例演示了使用按鈕大小標(biāo)準(zhǔn)來(lái)指示優(yōu)先級(jí)。

·高優(yōu)先級(jí)按鈕= 72像素

·中優(yōu)先級(jí)按鈕= 60像素

·低優(yōu)先級(jí)按鈕= 42像素

用戶最常使用的按鈕現(xiàn)在更容易被發(fā)現(xiàn)和點(diǎn)擊。他們能夠以更快的反應(yīng)時(shí)間和更高的準(zhǔn)確度來(lái)點(diǎn)擊它。如果用戶的注意力分配在不同的任務(wù)之間，這尤其有用。

2）按鈕間距標(biāo)準(zhǔn)

當(dāng)按鈕相距太遠(yuǎn)時(shí)，用戶移動(dòng)到觸摸目標(biāo)的速度要慢得多。當(dāng)按鈕太靠近時(shí)，用戶的觸摸精度最低。

該研究得出結(jié)論，12至48像素的范圍是最佳按鈕間距。這種寬范圍很有用，因?yàn)槟梢詫⑺鼞?yīng)用于不同的按鈕大小。將寬范圍劃分為較小范圍時(shí)，可獲得與標(biāo)準(zhǔn)按鈕尺寸對(duì)應(yīng)的按鈕間距標(biāo)準(zhǔn)。

·12-24像素的大按鈕

·中等按鈕為24-36像素

·小按鈕為36-48像素

更大的按鈕允許用戶準(zhǔn)確地?fù)糁兴麄兊哪繕?biāo)，即使他們的手指略微偏離目標(biāo)。但如果他們用較小的按鈕離開(kāi)目標(biāo)，他們就會(huì)錯(cuò)過(guò)并按下相鄰的按鈕。這就是為什么較小的按鈕需要比較大按鈕更多的間距。

該示例顯示了遵循按鈕間距標(biāo)準(zhǔn)如何提高觸摸精度。用戶的手指可以輕微偏離目標(biāo)，無(wú)論大小多大，他們?nèi)匀豢梢园聪掳粹o。

3）文本按鈕的含義

這些標(biāo)準(zhǔn)可以應(yīng)用于文本按鈕嗎？這些標(biāo)準(zhǔn)可以應(yīng)用于文本按鈕的高度，但寬度會(huì)有所不同。

例如，高度為60像素的文本按鈕將具有比60像素圖標(biāo)按鈕更大的寬度，但它也很容易點(diǎn)擊。事實(shí)上，它更容易挖掘，因?yàn)檩^大的寬度需要較低的精度。

按鈕高度對(duì)準(zhǔn)確性更重要。您可以看到文本按鈕的觸摸精度與圖標(biāo)按鈕保持一致。

由于寬度較大，按鈕間距標(biāo)準(zhǔn)不適用于文本按鈕。但是至少12個(gè)像素的間隔對(duì)于視覺(jué)分離是有利的。

4）調(diào)整按鈕的大小

您的按鈕是否具有最佳尺寸和間距？按鈕尺寸和間距標(biāo)準(zhǔn)將確保您的移動(dòng)界面具有高觸摸精度。

根據(jù)您的感受決定適當(dāng)?shù)某叽绾烷g距會(huì)留下不確定的空間。最好建立一個(gè)你可以信賴的最佳標(biāo)準(zhǔn)。這就是設(shè)計(jì)系統(tǒng)的形成方式以及為什么許多公司使用它們。

想想您和您公司遵循的標(biāo)準(zhǔn)。如果您沒(méi)有，請(qǐng)建立一些，您將能夠跨平臺(tái)擴(kuò)展出色的用戶體驗(yàn)。