IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

移动触屏的手指触发尺寸

TaoBaoUED 2013-05-28 14:53:01 累计浏览 2,113 次
本机暂存

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

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

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

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

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

fingers1

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

finger-thumb2

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

平均食指像素宽度

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

finger-57

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

平均拇指像素宽度

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

thumb-72

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

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

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

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

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

   文章原址:http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/

同分类推荐文章

  1. 「置顶」我做了什么 (2026-05-05 12:13:28)
  2. 万字长文推演:手机不再从 App 开始,Agent OS 如何接管任务入口 (2026-04-28 14:57:22)
  3. Android Perfetto 系列 10 - Binder 调度与锁竞争 (2025-11-16 15:33:30)

查看更多 移动开发 文章 →

建议继续学习

  1. Web表单设计之注册表单 (累计阅读 8,884)
  2. 用色彩打造专业的视觉效果 (累计阅读 7,236)
  3. 视觉设计师应该略懂交互 (累计阅读 6,089)
  4. 这些反人类设计,你肯定也碰到过 (累计阅读 5,632)
  5. 行进在产品经理的路上 (累计阅读 5,045)
  6. 浅谈如何留住用户 (累计阅读 4,968)
  7. 人人都能用的10条网站易用性技巧 (累计阅读 4,939)
  8. 在程序员的眼里,用户是这样使用他们开发的软件的 (累计阅读 4,930)
  9. 产品细节、用户体验和学习的态度 (累计阅读 4,726)
  10. Google User Experience (累计阅读 4,388)