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

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

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

一：拇指的人機工程學

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

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

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

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

位于拇指和手腕連接處的“腕掌關節(jié)”：腕掌關節(jié)能夠進行較大程度的屈伸，收展，所以能完成對掌運動（對掌運動是拇指骨外展，屈和旋內運動的總和。其結果使拇指尖能與其它各指掌面接觸，而這是除拇指外其他手指腕掌關節(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等都比較合適。至于再小的屏，對女子而言也沒必要犧牲面積了。

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

iOS版本：

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

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

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

Android版：

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

單位之間的換算關系隨倍率變化：

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）

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

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

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

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

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

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

因為邊緣線的可觸及的精準度是最差的。

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

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

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