it-swarm.cn

触摸屏的最小按钮尺寸和间距

对于触摸屏(例如iPhone),您可以避免的最小按钮尺寸是多少?

以及它们能被紧密地推在一起吗?

我有一个应用程序,它将在一个屏幕上有很多按钮,并且需要对其进行设计以使其可用。

13
Mongus Pong

(由于我有点懒,所以我将从重新打印 我的回答 从SO上的线程开始)

最近的科学研究发现:

[A]离散任务的目标大小为9.2毫米[即单目标指向任务]并且用于串行任务的9.6 mm的目标应该足够大,以便单手拇指在基于触摸屏的手持设备上使用,而不会降低性能和偏好。

引自在小型触摸屏设备上单手拇指使用的目标尺寸研究(Parhi,Karlson和Bederson,2006年)。其他消息来源也同意这一“接近0.4英寸的规则”(例如设计手势界面(Saffer 2008,第42页)。

给定iPhone的像素密度 163 PPI (6.417px/mm),您最好将的目标对准对角线不低于59px任何目标。

(请注意,这仅针对单手拇指使用进行了验证。)


如果遵循这些准则,则将消除can间距。

tl; dr?都归结为像素密度。

10
jensgram

请参阅 iPhone人机界面指南 (该链接转到Web应用程序的指南)以获取Apple的建议。有一章叫做“ 提供指尖大小的目标 ”,您可能会以此为基础进行决策。

另外,不要猜测,测试。让一些人的手指大小不同(在目标受众范围内),并让他们尝试按原型中的大小不同的按钮。那会教给你很多关于期望的东西。

编辑:Microsoft Windows Phone 7的UI设计和交互指南 在第4页上详细说明了“最小触摸目标尺寸”。该指南非常出色,对于使用触摸屏UI的UI设计人员来说是必读的。

8
Rahul

在开发一些Android)的移动应用程序时,我不得不测试用户可以用手指/触摸轻松地且精确地访问的最小触摸区域(执行单击和拖动操作)。

测试是在3台Android)手机:HTC Hero,Samsung Galaxy Spica,T-Mobile Pulse。其中具有320x480像素的屏幕分辨率和电容性屏幕表面。

长话短说,所有小于20x20像素的内容都不可用。同样要记住,按钮周围应该有空间(5像素边距)。

2
Bojan Gavrovski

许多UX准则都围绕着指尖的大小,这些准则在建议的大小和间距方面也有所不同。指尖尺寸不应该是确定最小尺寸控制和间距的唯一因素。

联系补丁

当与触摸屏接触时,请考虑手指/拇指产生的实际“接触贴片”。您还需要考虑用户在认为他们的视觉上将触摸集中在目标上时做出的判断错误,但实际上与屏幕的实际接触可能会稍微偏离一侧。

设备类型

由于握持不同设备的方式以及距用户的距离不同(例如,将手机与平板电脑进行比较,可能会将手机握得更近),因此最小触摸尺寸和间距也可能会有所不同。可以说,您可以在电话上设置较小的最小值,因为它们离观众更近,而且出错的可能性较小。对于较大的设备(例如平板电脑),您可能需要增加最小尺寸,以增加发生错误的机会。


有一篇很棒的文章讨论了UXmatter上的这个和其他因素( http://www.uxmatters.com/mt/archives/ 2013/03/common-misconceptions-about-touch.php )。

文章摘录:

...只有手指或拇指的一部分与屏幕接触...接触片因压力和角度而异

物理尺寸很重要,因此所有好的准则都以毫米,英寸,印刷者的磅数或其他实际比例为单位。

无需增加可见目标的尺寸。相反,您可以简单地增大链接或按钮周围可点击区域的尺寸

针对视觉和触摸目标区域进行设计。考虑用户的期望。

大小:

enter image description here

1
Dave Haigh

作为补充:Google材料设计建议触摸目标尺寸至少为7-10mm https://www.google.com/design/spec/search.html?q=Touch+target+size

0
Andi