25學(xué)堂好久沒跟大家分享一些非常棒的APP設(shè)計干貨了，為了回報各位25學(xué)堂的網(wǎng)友對25學(xué)堂的包容和支持。

25學(xué)堂的老譚同學(xué)為大家準(zhǔn)備了一篇關(guān)于移動觸屏體驗設(shè)計教程。這堂課跟大家分享的主題是 我們手指觸屏可控范圍和相關(guān)熱區(qū)尺寸的規(guī)范解析。

一般在操作時候，用戶與觸摸屏進(jìn)行交互主要是通過不同的手勢來進(jìn)行?，F(xiàn)有的觸摸屏能夠識別用戶的手勢有：tap，double tap， touch& hold， pan，flick，pinch & strech。

一：拇指的人機(jī)工程學(xué)

在單手對觸摸屏手機(jī)進(jìn)行操作的時候，一般是以四個手指和手掌為依托，用大拇指進(jìn)行操作，因此單手操作觸屏手機(jī)變成了拇指和觸摸屏的一場“對話”。

人機(jī)工程學(xué)的研究表明中，大拇指有三個關(guān)節(jié)能夠活動（它們從上往下分別是）：

位于拇指外觀中部的“拇指第一關(guān)節(jié)”：能向前彎曲最大90度，少數(shù)人能向后彎曲

位于拇指外觀根部的“拇指第二關(guān)節(jié)”：能向前彎曲最大90度，少數(shù)人能向后彎曲

位于拇指和手腕連接處的“腕掌關(guān)節(jié)”：腕掌關(guān)節(jié)能夠進(jìn)行較大程度的屈伸，收展，所以能完成對掌運(yùn)動（對掌運(yùn)動是拇指骨外展，屈和旋內(nèi)運(yùn)動的總和。其結(jié)果使拇指尖能與其它各指掌面接觸，而這是除拇指外其他手指腕掌關(guān)節(jié)都無法完成的）

二：男女對屏幕尺寸的要求是不同的，以單手自如操控來講 ------

男子一般以4.5英寸為最大極限，大于4.5的屏例如4.7或5.0、5.3之類的屏幕絕對無法單手定位全屏操控。小于4.5的屏例如4.3或4.0也可以，單手操控感覺還有富余度，至于小于4.0的屏，對男子來說大可不必在面積上縮水。

女子一般以4.0英寸為最大極限。大于4.0的屏，女子絕對無法單手定位全屏操控（需要單手局部移位才行）。小于4.0的屏，例如3.9、3.7、3.5等都比較合適。至于再小的屏，對女子而言也沒必要犧牲面積了。

三：觸及控件設(shè)計的合理尺寸規(guī)范

iOS版本：

@2x用食指操作，觸擊范圍在7mm左右比較合適； ?約等于44px ? ??@3x 約等于 ?66px

@2x用拇指操作，合適的觸擊范圍需在9mm左右； 約等于56px， ?@3x 約等于 ?84px

這些也算是蘋果工程師給我們的 一些設(shè)計參考。

Android版：

iOS的尺寸單位為pt，Android的尺寸單位為dp。說實話，兩者其實是一回事。

單位之間的換算關(guān)系隨倍率變化：

1倍：1pt=1dp=1px（mdpi、iPhone 3gs）

1.5倍：1pt=1dp=1.5px（hdpi）

2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）

3倍：1pt=1dp=3px（xxhdpi、iPhone 6）

4倍：1pt=1dp=4px（xxxhdpi）

單位決定了我們的思考方式。在設(shè)計和開發(fā)過程中，應(yīng)該盡量使用邏輯像素尺寸來思考界面。設(shè)計Android應(yīng)用時，有的設(shè)計師喜歡把畫布設(shè)為1080x1920，有的喜歡設(shè)成720x1280。給出的界面元素尺寸就不統(tǒng)一了。

Android的最小點擊區(qū)域尺寸是48x48dp，這就意味著在xhdpi的設(shè)備上，按鈕尺寸至少是96x96px。而在xxhdpi設(shè)備上，則是144x144px。

無論畫布設(shè)成多大，我們設(shè)計的是基準(zhǔn)倍率的界面樣式，而且開發(fā)人員需要的單位都是邏輯像素。所以為了保證準(zhǔn)確高效的溝通，雙方都需要以邏輯像素尺寸來描述和理解界面，無論是在標(biāo)注圖還是在日常溝通中。

不要再說“底部標(biāo)簽欄的高度是96像素，我是按照xhdpi做的”這樣的話了。

四、幾個移動APP觸屏體驗設(shè)計的禁區(qū)

1、觸屏的邊緣0-3mm是觸屏禁區(qū)，盡量不要把可觸擊的地方 遠(yuǎn)離邊緣線。

因為邊緣線的可觸及的精準(zhǔn)度是最差的。

2、在APP設(shè)計當(dāng)中，如果導(dǎo)航欄右上角有icon，盡量不要在下面也出現(xiàn)可點擊的icon或者tab 。如果想要放置，唯一的解決辦法icon必須大。

3、盡量避免右手拇指操作的死角。

如果各位還有一些好的APP設(shè)計經(jīng)驗分享，可以給我們留言劈磚。今天就跟大家分享到這里。希望對大家有所幫助！另外此篇屬于25學(xué)堂的原創(chuàng)文章。