当前位置: 首页 >> APP界面设计_APPUI设计_APP设计素材 >> 阅读正文

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

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版本:触及控件设计的合理尺寸

触及控件设计的合理尺寸2

 

@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应用时,有的设计师喜欢把画布设为1080×1920,有的喜欢设成720×1280。给出的界面元素尺寸就不统一了。

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

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

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

 

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

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

APP设计边缘

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

 

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

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

触屏死角

 

 

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



无觅相关文章插件,快速提升流量

本文标题:移动触屏体验设计教程:手指触屏尺寸规范解析

本文地址:http://www.25xt.com/appdesign/8237.html

本文关键词: , , ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。