網(wǎng)頁(yè)版面上的字體大小有講究，而網(wǎng)站的按鈕的尺寸及按鈕之間的間距標(biāo)準(zhǔn)非常有細(xì)節(jié)規(guī)范。

創(chuàng)新互聯(lián)公司專注于梅列企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),電子商務(wù)商城網(wǎng)站建設(shè)。梅列網(wǎng)站建設(shè)公司,為梅列等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站建設(shè)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

序幕

-

點(diǎn)擊，再點(diǎn)擊，重復(fù)點(diǎn)擊！用戶是否能夠以高觸摸精度點(diǎn)擊您的移動(dòng)按鈕，又或者他們是錯(cuò)過(guò)了按鈕的目標(biāo)？在責(zé)怪用戶之前，請(qǐng)檢查一下您設(shè)計(jì)的按鈕的大小與間距。如果按鈕之間沒(méi)有最佳的尺寸和間距，難怪用戶會(huì)錯(cuò)過(guò)他們的目標(biāo)或按錯(cuò)了按鈕。如果您不確定什么是最佳的按鈕設(shè)計(jì)方案，那么本文將揭示答案。

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

-

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

該研究發(fā)現(xiàn)，用戶在按鈕上的觸摸精度上，小于 42 像素或超過(guò) 72 像素的按鈕都具有最低的精度率。使用 42 一 72 像素之間的按鈕可以獲得最高精度反饋。這意味著 42 個(gè)像素是按鈕的最小值，而 72 個(gè)像素則是最適合用戶的最大值。研究發(fā)現(xiàn)最優(yōu)選的單個(gè)按鈕尺寸是 60 像素，大約是 42 一 72 像素的中間范圍，不過(guò)如果不考慮設(shè)計(jì)的因素， 72 像素按鈕產(chǎn)生會(huì)最高的觸摸精度，也是設(shè)計(jì)師對(duì)大范圍人群設(shè)計(jì)時(shí)的選。在使用多層按鈕選擇時(shí)，指示優(yōu)先級(jí)也非常重要。這樣用戶就知道哪些操作會(huì)使他們獲得最理想的結(jié)果。按照按鈕大小標(biāo)準(zhǔn)，您可以有效地指示優(yōu)先級(jí)不再需要選擇任意大小并希望它是用戶友好的。

該音樂(lè)播放的示例演示了使用按鈕大小標(biāo)準(zhǔn)來(lái)指示優(yōu)先級(jí)。播放的按鈕最大，其次是上下選擇，再其次是循環(huán)與隨機(jī)。請(qǐng)記住：大小優(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ù)之間，這尤其有用。

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

-

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

該研究得出結(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)。但如果他們用較小的按鈕離開目標(biāo)，他們就會(huì)錯(cuò)過(guò)并按下相鄰的按鈕。這就是為什么較小的按鈕需要比較大按鈕更多的間距。該示例顯示了遵循按鈕間距標(biāo)準(zhǔn)如何提高觸摸精度。用戶的手指可以輕微偏離目標(biāo)，無(wú)論大小多大，他們?nèi)匀豢梢园聪掳粹o。

文本按鈕的含義

-

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

例如，高度為 60 像素的文本按鈕將具有比 60 像素圖標(biāo)按鈕更大的寬度，但它也很容易點(diǎn)擊。在實(shí)際的案例運(yùn)用中，它也更容易挖掘，因?yàn)檩^大的寬度需要較低的精度。按鈕高度對(duì)準(zhǔn)確性更重要。您可以看到文本按鈕的觸摸精度與圖標(biāo)按鈕保持一致。由于寬度較大，按鈕間距標(biāo)準(zhǔn)不適用于文本按鈕。但是至少 12 個(gè)像素的間隔對(duì)于視覺(jué)分離是有利的。

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

-

您的按鈕是否具有最佳尺寸和間距？按鈕尺寸和間距標(biāo)準(zhǔn)將確保您的移動(dòng)界面具有高觸摸精度。根據(jù)你的感受決定適當(dāng)?shù)某叽绾烷g距會(huì)留下不確定的空間。所以在本文最后，各位設(shè)計(jì)者最好建立一個(gè)你可以信賴的最佳標(biāo)準(zhǔn)。這就是設(shè)計(jì)系統(tǒng)的形成方式以及為什么許多公司使用它們。想想你和你公司遵循的標(biāo)準(zhǔn)。如果您沒(méi)有，請(qǐng)建立一些，您將能夠獲得多種跨平臺(tái)的出色的用戶體驗(yàn)。

網(wǎng)頁(yè)標(biāo)題：手機(jī)移動(dòng)端網(wǎng)頁(yè)按鈕設(shè)計(jì)尺寸及間距規(guī)范
瀏覽地址：http://chinadenli.net/article22/sspocc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站策劃、標(biāo)簽優(yōu)化、Google、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)