移动触屏体验设计教程：手指触屏尺寸规范解析

25学堂好久没跟大家分享一些非常棒的APP设计干货了，为了回报各位25学堂的网友对25学堂的包容和支持。

25学堂的老谭同学为大家准备了一篇关于移动触屏体验设计教程。这堂课跟大家分享的主题是 我们手指触屏可控范围和相关热区尺寸的规范解析。

一般在操作时候，用户与触摸屏进行交互主要是通过不同的手势来进行。现有的触摸屏能够识别用户的手势有：tap，double tap， touch& hold， pan，flick，pinch & strech。

一：拇指的人机工程学

在单手对触摸屏手机进行操作的时候，一般是以四个手指和手掌为依托，用大拇指进行操作，因此单手操作触屏手机变成了拇指和触摸屏的一场“对话”。

人机工程学的研究表明中，大拇指有三个关节能够活动（它们从上往下分别是）：

位于拇指外观中部的“拇指第一关节”：能向前弯曲最大90度，少数人能向后弯曲

位于拇指外观根部的“拇指第二关节”：能向前弯曲最大90度，少数人能向后弯曲

位于拇指和手腕连接处的“腕掌关节”：腕掌关节能够进行较大程度的屈伸，收展，所以能完成对掌运动（对掌运动是拇指骨外展，屈和旋内运动的总和。其结果使拇指尖能与其它各指掌面接触，而这是除拇指外其他手指腕掌关节都无法完成的）

二：男女对屏幕尺寸的要求是不同的，以单手自如操控来讲 ------

男子一般以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等都比较合适。至于再小的屏，对女子而言也没必要牺牲面积了。

三：触及控件设计的合理尺寸规范

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）

单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080x1920，有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。

Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。

无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。

不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。

四、几个移动APP触屏体验设计的禁区

1、触屏的边缘0-3mm是触屏禁区，尽量不要把可触击的地方 远离边缘线。

因为边缘线的可触及的精准度是最差的。

2、在APP设计当中，如果导航栏右上角有icon，尽量不要在下面也出现可点击的icon或者tab 。如果想要放置，唯一的解决办法icon必须大。

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

如果各位还有一些好的APP设计经验分享，可以给我们留言劈砖。今天就跟大家分享到这里。希望对大家有所帮助！另外此篇属于25学堂的原创文章。