[翻譯]移動觸屏的手指觸發尺寸

來自各移動平台的設計指導方針

蘋果iPhone人機界面指南推薦的最小(xiǎo)目标大小(xiǎo)為(wèi)44px寬,44px高。微軟的Windows手機用(yòng)戶界面設計和交互設計指南建議一個最低目标尺寸是26px乘以34px。諾基亞的開發者指南建議,目标尺寸應不小(xiǎo)于1cm×1cm平方或28×28像素。

雖然這些指南給到了觸摸目标的一般測量建議,但彼此不同,也與人體(tǐ)實際手指大小(xiǎo)不一緻。事實上,他(tā)們建議的尺寸比用(yòng)戶平均手指尺寸小(xiǎo)得多(duō),從而導緻用(yòng)戶在觸摸移動設備時産(chǎn)生目标定位不精(jīng)準的問題

 

太小(xiǎo)的可(kě)觸目标會導緻大問題

小(xiǎo)的可(kě)觸目标會讓用(yòng)戶在使用(yòng)時非常麻煩,因為(wèi)他(tā)們需要更精(jīng)準的定位。用(yòng)戶需要調整他(tā)們的手指,從指墊調整到指尖,讓自己能(néng)清晰的擊中(zhōng)目标。當用(yòng)戶用(yòng) 手指墊操作(zuò)時,會覆蓋整個目标,以至于他(tā)們完全看不到交互反饋,而用(yòng)指尖操作(zuò)時,卻能(néng)看到部分(fēn)的交互反饋。那麽,用(yòng)戶在使用(yòng)設備時,切換指尖與手指墊,無 疑降低了他(tā)們的操作(zuò)效率。



不僅如此,小(xiǎo)的觸摸目标會導緻操作(zuò)錯誤。當幾個小(xiǎo)觸摸目标彼此靠得比較近時,用(yòng)戶會不小(xiǎo)心觸到鄰近的目标而引發意外操作(zuò)。而拇指觸屏時導緻的錯誤會更明顯,因為(wèi)它的尺寸是最大的。所以有(yǒu)時用(yòng)戶會傾斜拇指,讓其側身去觸及屏幕目标,這是一個很(hěn)不必要的操作(zuò)。


 

用(yòng)拇指交互, 在移動設備中(zhōng)其實很(hěn)常用(yòng),因為(wèi)大多(duō)數用(yòng)戶在使用(yòng)時并非兩手都處于閑暇狀态,很(hěn)多(duō)用(yòng)戶會覺得用(yòng)一隻手再加一個大拇指,這樣操作(zuò)是最方便的。用(yòng)戶不希望為(wèi)了去 擊中(zhōng)一個目标,而使原先使用(yòng)一個手的情況變成使用(yòng)兩隻手,又(yòu)或是原先喜歡用(yòng)大拇指的情況變成去使用(yòng)其他(tā)手指,可(kě)見,目标太小(xiǎo),給用(yòng)戶的操作(zuò)帶去的麻煩會有(yǒu) 多(duō)大。

 

平均食指像素寬度

麻省理(lǐ)工(gōng)學(xué)院的觸摸實驗室研究人類的指尖觸覺,發現大多(duō)數成年人的食指平均寬度為(wèi)1.6至2厘米(16–20毫米),轉換為(wèi)45–57像素,這是比之前移動設備給到的建議尺寸要更大。
 

觸摸目标45–57像素,允許用(yòng)戶的手指緊貼目标且又(yòu)能(néng)讓用(yòng)戶看到目标的邊緣,這為(wèi)他(tā)們提供了清晰的交互反饋,幫助用(yòng)戶判斷擊中(zhōng)目标的準确性,也提 升用(yòng)戶擊中(zhōng)目标的效率。這與費茨定律一緻, 就是擊中(zhōng)目标的時間與目标的大小(xiǎo)成反比,即目标越小(xiǎo),擊中(zhōng)時間就越長(cháng),因為(wèi)它會耗費用(yòng)戶額外的注意力。一個手指大小(xiǎo)的目标,為(wèi)用(yòng)戶提供了足夠的空間去擊中(zhōng) 它,而不必擔心精(jīng)準度。

 

平均拇指像素寬度

很(hěn)多(duō)用(yòng)戶會用(yòng)食指去激活目标,但也有(yǒu)很(hěn)多(duō)用(yòng)戶喜歡用(yòng)大拇指。用(yòng)拇指大的區(qū)别是,它比食指寬。一個成人大拇指平均寬度為(wèi)1英寸(2.5厘米),折算下來是72像素。


 

因此用(yòng)戶在用(yòng)拇指擊中(zhōng)一個72px寬的目标時是很(hěn)愉悅的,既能(néng)快速精(jīng)準定位,又(yòu)能(néng)獲得交互反饋,更不需要為(wèi)了擊中(zhōng)目标去傾斜拇指,這樣的話,一隻手,一個拇指足以完成操作(zuò)。

一項針對“大拇指與觸屏設備交互”的研究中(zhōng)顯示,用(yòng)戶操作(zuò)的出錯率會随着目标尺寸的變大而降低。用(yòng)戶無須為(wèi)擊中(zhōng)目标去切換手指的角色。
 

單純講手指的尺寸是比較理(lǐ)想化的,在實際運用(yòng)中(zhōng)有(yǒu)時并不可(kě)行

如果我們完全按照上述的手指尺寸去設計的話,在很(hěn)多(duō)場景的運用(yòng)是不可(kě)行的。如在移動設備中(zhōng),你的工(gōng)作(zuò)區(qū)間其實是很(hěn)小(xiǎo)很(hěn)有(yǒu)限的。這就意味着,當你有(yǒu)幾 個手指大小(xiǎo)的目标擠入移動設備屏幕中(zhōng)時,屏幕大小(xiǎo)是不足以支撐這些目标的。然而,當你适當縮減尺寸,結合進屏幕時,才會顯得更合理(lǐ)些。 你需要測量你的屏幕的物(wù)理(lǐ)尺寸和觸摸目标大小(xiǎo)探索到底多(duō)大的目标用(yòng)戶才可(kě)以觸摸。

使用(yòng)手指大小(xiǎo)的可(kě)觸目标在平闆電(diàn)腦上的應用(yòng)比移動設備要容易得多(duō),因為(wèi)平闆有(yǒu)更大的屏幕空間。你可(kě)以自由地使用(yòng)這些尺寸,而不必恐懼這些尺寸是否占 據了太多(duō)空間。然而,移動設備屏幕的局限性,手指大小(xiǎo)能(néng)觸及的目标目标是最需要去考慮的。設計師面臨的挑戰就是如何定義出最常用(yòng)的适用(yòng)于移動設備的可(kě)觸面 積大小(xiǎo)。或許,較少的可(kě)觸目标是一個合理(lǐ)的解決方案,但這個方案的前提一定是需要設計師精(jīng)簡導航内容。

那些快被玩爛的app推廣方式:再不用(yòng)就沒機會了!
thinkphp部署阿裏雲函數計算

留言

您的信息會被保密處理(lǐ). 必填字段 *

現在就與BNA技(jì )術專家交流

400-021-7895

App開發 · 小(xiǎo)程序開發 · 網站 · 電(diàn)商(shāng) · 微信 · 系統定制 · 網絡營銷

技(jì )術強團,源碼輸出,高端定制,0預付開工(gōng)
潛心緻力于技(jì )術開發,為(wèi)用(yòng)戶提供卓越的互聯網工(gōng)具(jù)
一手源碼工(gōng)廠-合同保障-免費技(jì )術服務(wù)

0.045455s