iPhone 上的最小合理按钮大小

Posted 2023-04-13

【中文标题】iPhone 上的最小合理按钮大小

【英文标题】：Minimum sensible button size on iPhone

【发布时间】：2010-12-28 02:11:02

【问题描述】：

我正在设计一个 iPhone 应用程序，该应用程序具有一组相当大的屏幕圆形矩形按钮。给定基于手指的触摸屏 UI，您认为最小的合理按钮尺寸是多少？我需要在视口中尽可能多地放置它们，而不会过多地损害可用性。也许有苹果推荐的最小尺寸？现在是 33x33，在模拟器上看起来还不错，但我昨晚在真机上玩这个应用，感觉很尴尬 - 按钮太小了。

【问题讨论】：

这可能听起来很尖刻，但您是否考虑过不同的用户界面？在极少数情况下，您需要让屏幕上的按钮始终可用。

这可能看起来很刻薄，但是我有 :) 这个按钮表（不一定是按钮，在其他平台上它是可点击的图像）是应用程序的定义功能。有各种用于导航的折叠/突出显示/过滤选项，但默认视图是，是的，有点大 - 10 列平均长度为 63。在 PC/Web 上，它是三页的垂直滚动。在 WinMobile 上，它是 9 页。在 iPhone 上 - 待定...

这个问题似乎是题外话，因为它属于 UX Stackexchange 站点@ux.stackexchange.com

【参考方案1】：

Apple 表示平均手指点击是 44x44（来自 WWDC）。建议所有表格行至少为该高度。图标通常显示为 32x32，但具有填充以使可触摸区域为 44x44。当然，如果人们非常小心，他们可以点击 1x1，但为什么要让人们比他们需要的更努力地尝试才能使用您的应用呢？

【讨论】：

当然，Apple 违反了这一点，使用了令人愤怒的 App Store 应用程序免费/安装按钮...

谢谢。滚动将是一个杀戮。在 Windows Mobile 上，我无法使用 24x24 按钮，因为整个触控笔的事情...... :) 再说一次，谁知道我因此失去了多少客户。

当您说的手指敲击是“44x44”时，这点数对吗？

在发布这篇文章时，它是非视网膜显示屏，并参考了设备上的像素。现在，使用视网膜，它会加倍到 88 像素。

在谈论 UI 时不要考虑像素，要考虑点。无论视网膜与否，答案仍然是 44x44 点。

【参考方案2】：

最近的科学研究发现：

[A] 目标尺寸为 9.2 mm，用于离散 任务[即单目标指向任务] 和 9.6 毫米的串行目标 任务应该足够大 单手拇指使用 基于触摸屏的手持设备 降低性能和偏好。

引用自 Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices（Parhi、Karlson 和 Bederson 2006）。其他来源同意这一“接近 0.4 英寸规则”（例如 Designing Gestural Interfaces（Saffer 2008，第 42 页））。

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

（请注意，此验证仅适用于单手拇指使用。）

【讨论】：

+1 用于提及实际尺寸而不是像素 ^^（尽管我猜 iPhone 到目前为止可能使用相同的屏幕？）

@Oskar Duveborn 像素密度是重要的部分。剩下的只是算术:)

太棒了。这是开发触摸屏 UI 的一个很好的参考点。非常感谢！ +1 了

顺便说一句，如果您认为 9.6 毫米是理想的（而不是 9.2），那么最小尺寸就是对角线 61.6 像素，这又对应于 44 像素的正方形 - 究竟是什么苹果推荐！再一次（在 2 年后进行了不相关的搜索！）很好的研究。

我只是想添加，对于一个方形按钮，59px 对角线正好在 42 x 42 边之下。这与 Apples 推荐的 44 相比。

【参考方案3】：

苹果在这方面并不一致，也没有硬性规定。

他们建议您在 UI 指南中提供 Fingertip-Size Targets，然后继续说计算器按钮是 44x44。

在该文档中，他们还说工具栏和导航图标的图像应为 20x20，标签栏图标的图像应为 30x30。

我认为您必须简单地测试您的应用程序并确保按下按钮很容易 - 即使您的手相当大...

-t

【讨论】：

“在该文档中，他们还说工具栏和导航图标的图像应为 20x20，标签栏图标的图像应为 30x30。” - 图标，是的，但是 hitbox 在图标周围延伸。

【参考方案4】：

我可以发誓他们说最小像素是 37 像素，但我今天找到了 44 像素。不管怎样，33 看起来很小。

（请注意，图像可以更小，因为它们通常是较大矩形区域的一部分。）

（如果像素尺寸更大，您可能会在其他设备上使用更少的像素。）

【讨论】：

我可以发誓我的生命是 42 岁，因为它是生命、宇宙和一切终极问题的答案。

【参考方案5】：

在实践中，在早期的触摸屏上创建基于 Web 的自定义设备 UI 时，我们发现为我们的一位 Beta 测试人员所说的“我的胖手指”进行设计非常重要。他是对的：设计优雅、精细的控件很容易，大量用户会发现这些控件容易出错或无法使用。在那个项目中，确切的尺寸取决于应用程序，但测试人员发现 40 x 40 是可用的（是高清/Retina 显示器的两倍），任何更少的东西都会增加未命中和错误的数量（以及挫败感）；作为奖励，手指细长的人发现他们感觉可以更快地移动并且不必那么精确，这使得整个事情感觉更顺畅，更少的主观摩擦，更多的呼吸空间。诀窍是使这种尺寸的控件看起来不笨重或霸道。上面提到了一种解决方案，使控件的视觉部分小于其实际尺寸，尽管这不是通用解决方案。

【参考方案6】：

根据 HIG，它至少应为 44pt x 44pt：

为交互元素提供充足的触摸目标。尽量保持所有控件的最小可点击区域为 44pt x 44pt。

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/