移动触屏的手指触发尺寸

   来自各移动平台的设计指导方针

  苹果iPhone人机界面指南推荐的最小目标大小为44px宽,44px高。微软的Windows手机用户界面设计和交互设计指南建议一个最低目标尺寸是26px乘以34px。诺基亚的开发者指南建议,目标尺寸应不小于1cm×1cm平方或28×28像素。

  虽然这些指南给到了触摸目标的一般测量建议,但彼此不同,也与人体实际手指大小不一致。事实上,他们建议的尺寸比用户平均手指尺寸小得多,从而导致用户在触摸移动设备时产生目标定位不精准的问题

  太小的可触目标会导致大问题

  小的可触目标会让用户在使用时非常麻烦,因为他们需要更精准的定位。用户需要调整他们的手指,从指垫调整到指尖,让自己能清晰的击中目标。当用户用 手指垫操作时,会覆盖整个目标,以至于他们完全看不到交互反馈,而用指尖操作时,却能看到部分的交互反馈。那么,用户在使用设备时,切换指尖与手指垫,无 疑降低了他们的操作效率。


  不仅如此,小的触摸目标会导致操作错误。当几个小触摸目标彼此靠得比较近时,用户会不小心触到邻近的目标而引发意外操作。而拇指触屏时导致的错误会更明显,因为它的尺寸是最大的。所以有时用户会倾斜拇指,让其侧身去触及屏幕目标,这是一个很不必要的操作。


  用拇指交互, 在移动设备中其实很常用,因为大多数用户在使用时并非两手都处于闲暇状态,很多用户会觉得用一只手再加一个大拇指,这样操作是最方便的。用户不希望为了去 击中一个目标,而使原先使用一个手的情况变成使用两只手,又或是原先喜欢用大拇指的情况变成去使用其他手指,可见,目标太小,给用户的操作带去的麻烦会有 多大。

  平均食指像素宽度

  麻省理工学院的触摸实验室研究人类的指尖触觉,发现大多数成年人的食指平均宽度为1.6至2厘米(16–20毫米),转换为45–57像素,这是比之前移动设备给到的建议尺寸要更大。


  触摸目标45–57像素,允许用户的手指紧贴目标且又能让用户看到目标的边缘,这为他们提供了清晰的交互反馈,帮助用户判断击中目标的准确性,也提 升用户击中目标的效率。这与费茨定律一致, 就是击中目标的时间与目标的大小成反比,即目标越小,击中时间就越长,因为它会耗费用户额外的注意力。一个手指大小的目标,为用户提供了足够的空间去击中 它,而不必担心精准度。

  平均拇指像素宽度

  很多用户会用食指去激活目标,但也有很多用户喜欢用大拇指。用拇指大的区别是,它比食指宽。一个成人大拇指平均宽度为1英寸(2.5厘米),折算下来是72像素。


  因此用户在用拇指击中一个72px宽的目标时是很愉悦的,既能快速精准定位,又能获得交互反馈,更不需要为了击中目标去倾斜拇指,这样的话,一只手,一个拇指足以完成操作。

  一项针对“大拇指与触屏设备交互”的研究中显示,用户操作的出错率会随着目标尺寸的变大而降低。用户无须为击中目标去切换手指的角色。

  单纯讲手指的尺寸是比较理想化的,在实际运用中有时并不可行

  如果我们完全按照上述的手指尺寸去设计的话,在很多场景的运用是不可行的。如在移动设备中,你的工作区间其实是很小很有限的。这就意味着,当你有几 个手指大小的目标挤入移动设备屏幕中时,屏幕大小是不足以支撑这些目标的。然而,当你适当缩减尺寸,结合进屏幕时,才会显得更合理些。 你需要测量你的屏幕的物理尺寸和触摸目标大小探索到底多大的目标用户才可以触摸。

  使用手指大小的可触目标在平板电脑上的应用比移动设备要容易得多,因为平板有更大的屏幕空间。你可以自由地使用这些尺寸,而不必恐惧这些尺寸是否占 据了太多空间。然而,移动设备屏幕的局限性,手指大小能触及的目标目标是最需要去考虑的。设计师面临的挑战就是如何定义出最常用的适用于移动设备的可触面 积大小。或许,较少的可触目标是一个合理的解决方案,但这个方案的前提一定是需要设计师精简导航内容。

时间: 2024-10-22 00:22:43

移动触屏的手指触发尺寸的相关文章

WIN8系统下FORM的触屏滚动问题

问题描述 VS2012C#开发的一个平板电脑程序,使用win8系统,画面用FORM控件设计的,有许多输入框,目前由手触纵向滚动条来实现Form的滚动,希望实现手触屏滑动带动Form的滚动.菜鸟一枚,希望各位大侠赐教. 解决方案 解决方案二:手触屏滑动会触发MouseMove事件你把输入框放到一个panel中,在事件中改变Top就可以了

触屏手机操作的“热区死角”与“控件尺寸”

Part 1 研究背景 1.1 触屏手机界面设计的背景与挑战 挑战1:发展时间短,国内外的研究都尚处在探索阶段,充满未知和不确定. 触屏技术最早被应用到手机上要追溯到1999年(motorola A6188),至今虽然已有12年时间,但真正为手指操作的触屏界面设计带来革命性变化还是07年1月9日发布的iphone1代以及他的多点触摸技术.时至今日,不过4年时间,以苹果设计团队为先驱国内外相关研究领域,包括触摸的手势.触屏界面的规范.触摸的可用性研究等等,都还处在探索阶段,这也意味着有很多现有的东

为触屏手机而设计:拇指操作的“热区/死角”与“控件尺寸”

Part 1 研究背景1.1 触屏手机界面设计的背景与挑战 挑战1:发展时间短,国内外的研究都尚处在探索阶段,充满未知和不确定.触屏技术最早被应用到手机上要追溯到1999年(motorola A6188),至今虽然已有12年时间,但真正为手指操作的触屏界面设计带来革命性变化还是07年1月9日发布的iphone1代以及他的多点触摸技术.时至今日,不过4年时间,以苹果设计团队为先驱国内外相关研究领域,包括触摸的手势.触屏界面的规范.触摸的可用性研究等等,都还处在探索阶段,这也意味着有很多现有的东西都

WPF技术触屏上的应用系列(五): 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果

原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果         去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体机.要求有很炫的展示效果,要有一定的视觉冲击力,可触控操作.当然满足客户的要求也可以有其它途径.但鉴于咱是搞 .NET技术的,首先其冲想到的微软WPF方面,之前对WPF的了解与学习也只是停留在比较浅的层面,没有进一步深入学习与应用.所以在项目接来以后,也就赶鸭子

【IOS-COCOS2D游戏开发之六】对触屏事件追加讲解,解决无法触发CCTOUCHMOVED事件[重要!]

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/453.html 上一章节中介绍了,如何利用两种方式对用户触屏进行监听,那么今天要重点讲解一个问题: 要讲的问题主要是在使用注册监听(事件分配方式监听触屏)中的问题,上一章节中说过,此种方式首先要注册:如下代码: 1 2 //注册独立触摸事件   [[CCTouchDispatcher sharedDispatc

[Android] 触屏setOnTouchListener实现图片缩放、移动、绘制和添加水印

    前一篇文章讲述了Android实现图片Matrix矩阵类缩放.旋转.对比度.亮度.饱和度处理,但是真正的图片软件都是使用触屏实现图片缩放.移动.添加水印等功能,所以该篇文章主要通过setOnTouchListener监听实现该功能.希望文章对大家有所帮助. 一.图片缩放实现     首先先简单介绍Android如何实现触屏缩放图片和移动图片,新建TouchImageViw工程.设计XML中activity_main.xml布局: <RelativeLayout xmlns:android

触屏版网页交互设计:体现少即是多的设计精髓

文章描述:触屏版网页应用,实现移动场景用户需求.体现少即是多的设计精髓并表现主流的触屏界面气质,可算初步达标.在设计过程中需不断打磨细节,提升体验,令设计日臻完美. 触屏版网页应用,实现移动场景用户需求.体现少即是多的设计精髓并表现主流的触屏界面气质,可算初步达标.在设计过程中需不断打磨细节,提升体验,令设计日臻完美.下篇将结合案例讲述其中的故事.  >>提升体验的细节   让消息更随手  翻页大讨论  重要数字了然于胸  关于软键盘  大话横竖屏切换  让界面更"可触模"

触屏设备用户界面设计中 要注意的几个问题

印象当中,最近这些年的春天总是会带来让人觉得真心别扭的气候体验,雨和冷风就像催化剂一样,让生活和工作当中的人和事也变得异常凌乱,仿佛一团被咀嚼到完全失去味道的槟榔.November Rain前奏当中的钢琴旋律多少可以让心安然一些,一旦摘下耳机便又是个令人想要把自己的脑袋拧下来吃掉的世界. 可脑袋一旦被拧下来,就什么也无法吃的样子了,不是吗.说正事儿吧.Designing for touch,关于这个话题及相关的文章,最近貌似已然铺到大街上了,不过我还是做我的吧.在标题里加了个不伦不类的"又是&q

从四个维度探讨触屏手机的网站设计

文章描述:触屏手机网站设计. 随着智能手机iphone和Android的热潮,衍生出基于Safari和Chrome浏览器的触屏手机网站Touch Screen Mobile Website.触屏手机网站在中国还属于起步阶段,从行业的现状来看,其体验参差不齐,笔者将从设备.系统.浏览器.网络.四个维度来与大家共同探讨触屏手机的网站设计: 一.设备 ·分辨率与屏幕尺寸·触屏机的交互特点·性能 1. 分辨率是设计师做网站时首要考虑的问题,iphone/ipod touch目前有2种分辨率:480*32