iPhone 上的最小合理按钮大小答案

【问题标题】：Minimum sensible button size on iPhoneiPhone 上的最小合理按钮大小
【发布时间】：2010-12-28 02:11:02
【问题描述】：

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

【问题讨论】：

这可能听起来很尖刻，但您是否考虑过不同的用户界面？在极少数情况下，您需要让屏幕上的按钮始终可用。
这可能看起来很刻薄，但是我有 :) 这个按钮表（不一定是按钮，在其他平台上它是可点击的图像）是应用程序的定义功能。有各种用于导航的折叠/突出显示/过滤选项，但默认视图是，是的，有点大 - 10 列平均长度为 63。在 PC/Web 上，它是三页的垂直滚动。在 WinMobile 上，它是 9 页。在 iPhone 上 - 待定...
这个问题似乎是题外话，因为它属于 UX Stackexchange 站点@ux.stackexchange.com

标签： iphone user-interface usability uibutton

【解决方案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/

【讨论】：