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

一般在操作时候,用户与触摸屏进行交互主要是通过不同的手势来进行。现有的触摸屏能够识别用户的手势有:tap,doubletap,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等都比较合适。至于再小的屏,对女子而言也没必要牺牲面积了。

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

@2x用食指操作,触击范围在7mm左右比较合适;约等于44px@3x约等于66px

@2x用拇指操作,合适的触击范围需在9mm左右;约等于56px,@3x约等于84px

这些也算是苹果工程师给我们的一些设计参考。

Android版:

iOS的尺寸单位为pt,Android的尺寸单位为dp。说实话,两者其实是一回事。

单位之间的换算关系随倍率变化:

1倍:1pt=1dp=1px(mdpi、iPhone3gs)

1.5倍:1pt=1dp=1.5px(hdpi)

2倍:1pt=1dp=2px(xhdpi、iPhone4s/5/6)

3倍:1pt=1dp=3px(xxhdpi、iPhone6)

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必须大。

THE END
1.全国首批人形机器人具身智能标准发布:按下肢运动上肢作业等分4...IT之家 10 月 29 日消息,据浦东发布消息,人形机器人及具身智能创新论坛昨日在上海召开,国家地方共建人形机器人创新中心联合行业内头部企业和机构,共同发布全国首批人形机器人具身智能标准 《人形机器人分类分级应用指南》《具身智能智能化等级分级指南》。▲ 图源浦东发https://www.robot-china.com/news/202411/05/90352.html
2.《人机工程学》第6章工作台椅与手握工具设计.PPT《人机工程学》第6章工作台椅与手握工具设计.PPT,②、保持手腕顺直状态:避免处于尺偏、桡偏、掌屈、背屈状态。 可以将把手设计把手与工作部分 弯曲10度。 ③、避免掌部组织受压力,好的把手应有较大的接触面,使压力分布于较大的手掌面上或不敏感的区域如虎口处。指槽的设https://max.book118.com/html/2021/0505/8051067045003100.shtm
3.2人机工程学(123467章)ppt大学课件预览四、人体尺寸的 应用 三、常用的人体测量数据 (见, 普通人机工程学, P8-13 一、人体测量的基本知识 一、人体测量的基本知识 Foudamentals of Anthropometry 1、定义: 人体测量学是一门用测量方法研究人 体的体格特征的科学。它是通过测量人体 各部位尺寸来确定个体之间和群体之间在 ...http://read.cucdc.com/cw/73949/162122.html
4.鼠标的人机工程学分析.doc该【鼠标的人机工程学分析 】是由【胜利的喜悦】上传分享,文档一共【9】页,该文档可以免费在线阅读,需要了解更多关于【鼠标的人机工程学分析 】的内容,可以使用淘豆网的站内搜索功能,选择自己适合的文档,以下文字是截取该文章内的部分文字,如需要获得完整电子版,请下载此文档到您的设备,方便您编辑和打印。鼠标旳人...https://www.taodocs.com/p-964708182.html
1.探索“人体测量与百分位”的奥秘——环境设计专业《人机工程学...为充分发挥优质课堂的引领示范作用,搭建教师交流学习平台,促进教师队伍整体教学能力的提升。10月10日,艺术设计学院环境设计专业教师潘璐在S南206开设《人机工程学》公开课。 在课程内容上,潘璐老师首先回顾了人机工程学的基本概念,随后重点转入第二章人体测量与百分位概念的课程内容。课程详细介绍了百分位概念在环境设计中...https://ysxy.naujsc.edu.cn/2024/1101/c266a17657/page.htm
2.搬运机械手设计机械手是在在机械化、自动化生产过程中发展的一种新型装置,使用的一种具有抓取和移动工件功能的自动化装置。机械手能代替人类、重复枯燥完成危险工作,提高劳动生产力,减轻人劳动强度。该装置涵盖了位置控制技术可编程控制技术、检测技术等。本课题拟开发的物料气动机械手可在空间抓放物体,动作灵活多样,根据工件的变化及...https://blog.csdn.net/m0_68525899/article/details/142652329
3.AI创作图手部资料图伸开的手掌五指紧握人体局部一个人的手掌逆...作品尺寸: 4096*4096像素 作品格式: JPG 颜色模式: RGB 作品价格: 20元(CNY) 立即下载 本作品使用AI技术生成,仅供网友学习交流,未经书面授权,请勿作他用。若您的权利被侵害,请联系copyright@nipic.com。 相关搜索 手部资料图 伸开的手掌 五指紧握 人体局部 一个人的手掌 逆光下的手势 五指张开 五指相连...https://www.nipic.com/show/48669915.html
4.一只“手”,难倒人形机器人人形机器人传感器动作灵巧手▲人手解剖学示意图(图源:知乎博主任赜宇,此前担任珞石机器人首席系统工程师) 从运动学角度来看,灵巧手需满足两个必要条件:在指关节运动时使物体产生任意运动、指关节固定时能完全限制物体运动,所以在此基础上,灵巧手需要至少3根手指、9个自由度。 目前,从形态来看,灵巧手主要有五指和三指两种,也有人形机器人厂商选...https://m.163.com/dy/article/JG4SLKDU055631LA.html
5.人机工程学2人体测量参数与数据应用第二章 人体测量参数与数据应用 2.1 人体测量的基本知识 2.1.1工业设计与人体尺度 问题引入概念: 同学们:我们学习的专业是工业设计,我们将来是要为消费者设计产品的,人机工程学_2人体测量参数与数据应用。消费者的需求是设计的出发点,也是设计的目的和归宿。我们设https://www.unjs.com/ziliaoku/gc/2176.html
6.人机工程学椅子设计8篇(全文)该部分的作业是要求学生按照人机工程学的要求设计、制作一个计算机工作环境, 包括:产品的尺寸测量与比例关系、计算机界面操纵—显示人机系统设计、使用行为的分析、鼠标等手握式工具的设计, 如图3-6。通过这样的练习, 学生可以树立并加深人机工程学“以人为本”的综合设计思维 ...https://www.99xueshu.com/w/filedl8k1m3p.html
7.人机工程学复习总结篇1:人机工程学复习总结 1、人体工程学的定义是什么?英文名? 人体工程学是研究人及人相关的物体、系统及其环境,使其符合于人体的生理、心理及解剖学特性,从而改善工作与休闲环境,提高舒适性和效率的边缘科学。(Human Ergonomics) 2、人体工程学的三大要素? https://www.360wenmi.com/f/filewe6m9e66.html
8.人机工程学课程论文通用5篇人机工程学课程论文通用郑州市公交车设计与改进项目报告郑州公交车设计与改进(一)前言随着城市的发展和现代化水平的提高,公交车作为城市公共交通的重要组成部分,不下面是小编为大家整理的人机工程学课程论文通用5篇,供大家参考。 人机工程学课程论文通用篇1 http://www.hxatcapital.com/zhuantifanwen/gongwenfanwen/2023/0810/172401.html
9.在汽车的造型设计中,人机工程学扮演着什么样的角色?人机工程学,也常被称为人机工学,在车门设计中起着至关重要的作用。车门外把手作为用户与车辆首次接触的部件,其操作的舒适性、安全性以及便捷性对用户满意度有着直接且深远的影响。接下来,我们将探讨在前期造型检查阶段,需要纳入考虑的人机工学要素。 首先是把手的高度,标记为H1和H2(参考图1)。这一因素直接关系到...https://www.yoojia.com/ask/17-13767292294750611047.html
10.基于人机工程学的虚拟人手的模型建立及运动学仿真首先,对人手的生理结构进行了重点分析并建立了人手的3D模型,该虚拟手具有两大创新点:一是手指和手掌的结构尺寸与人手实际统计下的平均尺寸一致;二是手指不仅能实现伸屈功能,同时也可作左右的收展运动。针对仿生人手存在尺寸过大、运动性能与人手实际运动性能差别明显这一问题,基于人机工程学,本文采用实际测量与理论...https://wap.cnki.net/touch/web/Dissertation/Article/1011104136.nh.html
11.从人机工程学研究削皮刀的使用过程资源描述: 从人机工程学研究削皮刀的使用过程 文章作者郭辉来源北京理工大学设计艺术学院 随着科学技术地不断发展,自动工具也越来越普遍了。尽管如此,日常生活中的许多工作仍然需要人们手工操作,削皮刀就是其中的一种。 通过实际经验,我们意识到,绝大多数的人不知道怎样正确使用削皮刀,这种错误使用的结果就是无尽的麻烦...https://m.mayiwenku.com/p-12463853.html
12.基于Jack的农机驾驶室人机工程学分析及仿真为此,结合人机工程学原理与人体尺寸数据,用Rhion对农机驾驶室进行虚拟现实建模,并将其导入人机工程学软件JACK,在JACK中创建01%、05%、50%、95%、99%男女数字人模型。通过研究驾驶舒适H点、驾驶员背部受力危险临界值,以及手拉手刹、脚踩离合踏板的静态强度受伤风险值,对座椅及操纵装置进行改进。对驾驶室内部空间布局...https://www.cnki.com.cn/Article/CJFDTotal-NJYJ201806047.htm
13.汽车方向盘舒适性设计思考汽车技术3/9点侧面设计手掌心休息区域,手掌休息区的设计目前在跑车中比较多,目前AUDI运动方向盘、奔驰AMG方向盘均有设计手掌休息区。 3)7点→5点→12点截面设计 截面设计需要符合人机工程学舒适性要求,应以手掌可全部握紧为基准,常见的截面形状都是椭圆形设计,截面的尺寸一般在28*35mm左右,对于运动风格的方向盘,截面会设计...https://www.auto-testing.net/news/show-107263.html