web design uiNovember 5, 20268 min read

点击目标尺寸:为什么 24px 太小,以及该用的 44pt 和 48dp 规则

24px 的图标没问题,24px 的点击区域就不行。Apple 要求 44 pt,Android 要求 48 dp,而 WCAG 的 24 px 只是底线。四个修复方案并排重做,附上可以直接交给开发的代码。

By Boone

X LinkedIn

Tap Target Size: Why 24px Is Too Small and the 44pt and 48dp Rule to Use

24 px 的图标没问题。24 px 的点击区域就不行。人们用的是指尖,常常单手操作,还在移动中,这么小的目标要么点不中,要么点到旁边的东西。图标画小,目标做大,照下面的数字来。

为什么人人都画 24 px

图标就是按 24 画的。比如 Material Symbols 就以 24 px 作为推荐尺寸。于是设计师交出一个 24 px 的图标,开发把按钮做得和图标一样大,点击区域最后只有邮票那么大。

这个数字的第二个来源是无障碍。WCAG 2.2 在 AA 级要求指针目标至少为 24 x 24 CSS 像素。这只是最低要求,而且还有例外。很容易把底线当成目标,而刚好踩在底线上的设计能通过检查工具,却依然让人抓狂。

需要记住的四个数字

四个按相同比例绘制的方块,尺寸分别为 24、28、44 和 48,每个方块里都有同样的箭头图标。24 和 28 的方块标为红色,表示太小,44 和 48 的方块标为绿色 — 同一个 24 px 图标放在不同的点击区域内,按相同比例绘制。红色是底线,绿色是目标。

来源	尺寸	含义
Apple,iOS 和 iPadOS	44 x 44 pt	默认控件尺寸
Apple,iOS 和 iPadOS	28 x 28 pt	最小控件尺寸
Android,Material	48 x 48 dp	推荐的触控目标
WCAG 2.2,2.5.8 (AA)	24 x 24 CSS px	最低要求,有例外
WCAG 2.2,2.5.5 (AAA)	44 x 44 CSS px	增强目标

Apple 自己的指南说得很直接:按钮需要至少 44 x 44 点的点击区域。点、dp 和 CSS 像素都是与密度无关的单位,所以设计师可以把它们放在同一个网格上并排使用,就像图里那样。

其中一条 WCAG 例外值得了解。如果以每个目标为中心画一个 24 px 的圆,且这个圆不碰到另一个目标,那么两个尺寸不足的目标是允许的。这是关于间距的规则,所以一排间隔很远的小图标可以通过,而同样的图标挤在一起就不行。

修复 1:把图标撑到 44

一个标题为 Workout 的导航栏,有返回箭头、分享图标和三点图标,每个都包在一个红色虚线的 24 x 24 小框里

同一个导航栏,每个图标都包在一个绿色虚线的 44 x 44 框里,相邻的框互相接触

点击区域是按钮的外框,而不是里面的图案。所以修复方法是调整按钮的尺寸,而不是图标:图标保持 24,给按钮两边至少 44。这适用于每一个单独存在的小控件:返回箭头、工具栏里的分享和更多按钮、列表行上的信息按钮、收藏星标、复选框、步进器的加号和减号。

当两个控件并排时,框可以互相接触。这没问题,因为相接的框之间没有可以点空的缝隙。

修复 2:让整行都能点

一个包含 Wi-Fi、Bluetooth 和 Airplane mode 的设置列表,只有 Bluetooth 的开关被红色虚线框标出

这一行本来就在那里,本来就清晰可读,而且远大于 44。把标签和控件包进同一个可点击元素里,让整行都能切换。这也帮助使用屏幕阅读器或开关控制的人,因为只有一个带名称的控件,而不是一个标签加一个孤零零的开关。

修复 3:给关闭按钮一个真正的目标

横幅上的关闭按钮、搜索框里的清除按钮、标签上的小删除图标也是同样的道理。符号画轻,目标做重。

修复 4:把主操作放在底部

一个 New workout 页面,右上角有一个小的 Save 链接,被红色虚线框标出

同一个页面,底部有一个全宽的黑色 Save workout 按钮,被绿色虚线框标出

这是一条设计规则,不是实测统计数据:重点是,控件放在哪里和它有多大同样重要。主操作放低、放宽。取消和其他次要操作可以留在顶部栏里。

如何实现

在 Web 上,调整按钮的尺寸,而不是图标:

css

.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
}
.icon-button svg { width: 24px; height: 24px; }

/* one tappable row: label and switch together */
.row { display: flex; align-items: center; min-height: 44px; }

在 Android 上,Google 的指南是:当控件根据内容决定自身尺寸时,用 android:minWidth 和 android:minHeight 设置下限:

xml

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="48dp"
    android:minHeight="48dp" />

在 iOS 的 SwiftUI 中,给控件一个 frame,并让整个 frame 都能响应:

swift

Button(action: close) { Image(systemName: "xmark") }
    .frame(minWidth: 44, minHeight: 44)
    .contentShape(Rectangle())

这三段代码是我们自己对这条规则的示例,不是从某个平台复制来的代码。

五分钟检查你自己的界面

在设计文件里,把每个可点击的东西都画成一个 44 x 44 的框,盖在图标上面。放不下的框,就是需要放大的目标。
列表行、标签页、芯片和分页控件:整个条目都能点,还是只有带字的那一部分能点?
找出每一个关闭、清除和删除控件。每一个都需要自己的 44。
找出每个页面唯一的主操作。它在拇指所在的位置吗?
在真机上单手走一遍主流程。任何你点失两次的地方都太小了。

FAQ

最小点击目标尺寸是多少?

在 iPhone 上,Apple 的默认值是 44 x 44 点,最小控件尺寸是 28 x 28。在 Android 上,推荐值是 48 x 48 dp。在 Web 上,WCAG 2.2 在 AA 级设定的最低要求是 24 x 24 CSS 像素,有例外。

手机上的按钮应该多大?

在 iOS 上至少 44 x 44 点,在 Android 上至少 48 x 48 dp,宽和高都要满足。屏幕底部的全宽主按钮已经远超这两个数字。

图标本身必须是 44 px 吗?

不用。图标可以保持 24 px 或更小。必须达到 44 的是响应点击的区域,也就是图标周围的按钮。给按钮加内边距,或者设置最小宽度和高度。

24 x 24 px 的目标满足 WCAG 吗?

对 AA 级来说,大多数情况下满足:该标准要求至少 24 x 24 CSS 像素,间距、行内链接等少数情况有例外。增强级 AAA 要求 44 x 44。通过 AA 只是合规的最低要求,不是值得设计的好尺寸。

pt、dp 和 px 有什么区别?

它们都是与密度无关的单位。pt 是 iOS 的单位,dp 是 Android 的,CSS 像素是 Web 的。它们在物理上并不完全相同,但设计师把它们放在同一个网格上排布,所以 44 pt 和 48 dp 被视为大致相同的尺寸。

主按钮应该放在手机的哪个位置?

放在屏幕底部,全宽,拇指停靠的地方。把取消之类的次要操作放在顶部栏。这是一条布局经验法则,不是实测数据。

来源

Apple Human Interface Guidelines,Accessibility:iOS 和 iPadOS 默认控件尺寸 44 x 44 点,最小控件尺寸 28 x 28 点。
Apple Human Interface Guidelines,Buttons:按钮需要至少 44 x 44 点的点击区域。
Android Accessibility Help,Touch target size:宽高至少 48dp,以及用 android:minWidth 和 android:minHeight 作为按内容决定尺寸的控件的下限。
W3C,WCAG 2.2, 2.5.8 Target Size (Minimum):AA 级至少 24 x 24 CSS 像素,包括间距例外;以及 2.5.5 Target Size (Enhanced):AAA 级 44 x 44。
Google Fonts,Material Symbols guide:24 px 为推荐图标尺寸。
上面的界面是我们自己的示例。底部放置的建议是设计规则,不是统计数据。
更多类似的一条规则式帖子,请看 UX Brainy。