按钮的最佳尺寸到底是多少?这篇给你权威答案!

为什么很多产品甚至苹果本身并没有遵循 44pt 的标准规范?为什么有些场景下的 CTA 按钮那么小?

很多设计师包括我在内对按钮尺寸有着颇多困惑。为什么很多产品甚至苹果本身并没有遵循 44pt 的标准规范?为什么有些场景下的 CTA 按钮那么小?按钮的最佳尺寸到底是多少?按钮规范背后到底是什么样的科学依据?这些依据可否量S I ` {化?

emmmm,如果你和我一样有着这些困惑,本篇文章应该可以给你很多启发。

按钮尺1 \ ) –寸对点击行为的影响

按钮的( i M E | E n z \尺寸具体影响到的依旧是视觉和交互的两种能力。

视觉能力上很好理解。当一个元素尺寸越大,人眼就越容易抓捕到这个元素。所以那些越重要的东西,往往会给予更大的尺寸来强制用户注意到= 4 a它,这也可以解释为什么甲方总喜欢不停地在背后指指点点嫌弃元素] g t _ / , 7 G太小,就是因为这! L C v P些元素对他们来说非常重要,只是他们没有我们/ Z } W那么专业,知道强调一个东西的手法不仅仅P d k / r是放大一种策略。

因此,相对较大的按钮尺寸从视觉上,可以迅速捕获用户的注意力,对点击行为是有益的。

而在G G % 8 ) n 2交互能力上,涉及到的依然是前篇提到的菲茨定律——目标尺寸越大,移动至目标所花费的时间就越短。所以,较大的按钮尺寸可以降低用户交互的交互成本,使得目标更加”易点“,对@ * A点击行为同样是有益的。

但是,按钮尺寸并非越大越好,一方面是避免视觉上的失衡,另一方c . _ * Z 6 @面也会受到界面空间限制、以及场景– 4 Z ! m + – &差异等因素的影响。

规范中的定义

我们先来看下 iOS 的。苹果规定的最小点击区域是 44pt,这意味着一旦点击区域低于 44^ d %pt,将可能会出现点击失准的情况。当然,一些控件(标签栏图标、文字链)可以在视觉表现上只有 24pt*24pt,但是4 J 0 *会在周围加入额外的填充] ; T D ~ & / Y使其达到 44pt。

但是,\ ; : ` e U f在实际的 iOS 原生产品界面中,a R D N l . 3 r很多按钮并未严格执行 44pt 这个数值。小于 44pt 的按钮比比^ o , T K G y皆是,比如信息页的发送、App Store 的获取、购买浮层的确认、添加 siri、导% m V航类C T x 5 g X ]右上角的工具型按钮,它们的点击区域为按钮本身,但是均未达到 44pt。况且其中有一些还是非` F p P T常典型的 CTA 按钮,比如 App Stor5 $ 9 T * 9 s 6e 产品详情页中的获取按, P y : k g钮,它的高度仅r 4 3 ,仅是 27pt。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

而 Android 中的按钮建议尺寸& q M P ~是 56dp,但是和 iOS 一样存在着大量低于这个尺寸的情况。其中不乏那些 CTA 按钮。