iPhone上的最小合理按钮尺寸

69

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

iphone  user-interface  usability  uibutton 
— 塞瓦·阿列克谢耶夫（Seva Alekseyev）
source
2
这听起来可能很老套，但是您是否考虑过使用其他UI？在极少数情况下，您需要屏幕始终保持所有可用按钮的屏幕。
— 亚历克斯·费曼
1
这可能看起来很狡猾，但是我有:)这个按钮表（不一定是按钮，在其他平台上是可单击的图像）是应用程序的定义功能。导航具有各种折叠/突出显示/过滤选项，但是默认视图是很大的-10列平均长度为63。在PC / Web上，这是三页的垂直滚动。在WinMobile上为9页。在iPhone上-待定...
— Seva Alekseyev'2009年
这个问题似乎不切实际，因为它属于UX Stackexchange网站@ ux.stackexchange.com
— kumarharsh 2014年

Answers:

108

苹果公司表示，平均手指点击率为44x44（来自WWDC）。建议所有表格行至少为该高度。图标通常以32x32的比例出现，但具有填充以使可触摸区域变为44x44。当然，如果人们非常小心，可以使用1x1，但是为什么要使人们比他们需要付出更多的努力才能使用您的应用程序？

— 锥be
source
76
当然，苹果公司用令人讨厌的App Store应用程序免费/安装按钮违反了这一规定
— Aaron
谢谢。滚动将是致命的。在Windows Mobile上，我没有使用24x24的按钮，这是因为整个斯蒂尔问题……:)然后，又一次，谁知道我因此失去了多少客户。
— 塞瓦·阿列克谢耶夫
3
当您谈论手指点击为“ 44x44”时，这是正确的吗？
— Mark Norgren
2
在发布时，它是非视网膜显示器，并参考了设备上的像素。现在，使用视网膜时，它将翻倍至88像素。
— 康尼比尔2011年
15
在谈论UI时，不要以为像素，要点。不管视网膜与否，答案仍然是44x44分。
— 乔尼2012年
54

最近的科学研究发现：

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

目标尺寸研究引用了在小型触摸屏设备上单手拇指使用的目标尺寸研究（Parhi，Karlson和Bederson，2006年）。其他消息来源对此“接近0.4英寸的规则”表示同意（例如，设计手势接口）（Saffer 2008，第42页））。

考虑到iPhone的像素密度为163 PPI（6.417px / mm），您最好将对角线的高度设置为不低于59px将任何目标。

（请注意，此操作仅用于单手拇指。）

— 简谱
source
2
+1代表实际尺寸而不是像素^^（尽管我想到目前为止Iphone都使用相同的屏幕？）
— Oskar Duveborn 2010年
@Oskar Duveborn像素密度是重要的部分。其余只是算术:)
— jensgram
太棒了 通常，这是开发触摸屏UI的重要参考。非常感谢！+1版
— Dev Kanchen 2012年
8
顺便说一句，如果您认为9.6毫米是理想的（而不是9.2毫米），那么最小尺寸为对角线61.6像素，这相应于一个44像素的正方形-正是苹果公司所建议的！再一次（2年后才在这里进行了不相关的搜索！）很好的研究。
— Dev Kanchen 2014年
我只是想添加一个正方形按钮，对角线59px在42 x 42边的正下方。相比之下，苹果推荐
— 44。– narco
5

苹果对此并不一致，也没有硬性规定。

他们建议您在UI指南中提供“指尖大小目标”，然后继续说计算器按钮为44x44。

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

我认为您只需要简单地测试您的应用程序，并确保容易按下按钮-即使您的手很大。

-t

— 提姆
source
2
“在该文档中，他们还说工具栏和导航图标的图像应为20x20，标签栏图标的图像应为30x30。” -图标，是的，但是点击框围绕图标延伸。
— Maciej Swic
2

我可能发誓他们说最小像素为37像素，但是今天我发现是44像素。无论哪种方式，33似乎都很小。

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

（如果像素大小较大，您可能会在其他设备上用更少的像素来摆脱。）

— 戴维·邓纳姆
source
8
我本来可以终生宣告42岁，因为它是生命，宇宙和一切终极问题的答案。
— WebMacheter，2012年
2

在实践中，在早期的触摸屏上创建基于Web的自定义设备UI时，我们发现重要的一点是，为我们的一个Beta测试人员所称的“我的胖手指”进行设计。他是对的：设计优雅，精细的控件很容易，很多用户会发现容易出错或无法使用。在该项目中，确切的大小取决于应用程序，但是测试人员发现40 x 40可用（对于高清晰度/ Retina显示屏的两倍），任何其他情况都会增加遗漏和错误的数量（以及挫败感）。此外，手指细长的人发现，他们感觉可以移动得更快，而又不必那么精确，这使整个过程变得更平滑，主观摩擦更少，呼吸空间更大。诀窍是使这种大小的控件看起来不笨拙或霸道。上面提到了一种解决方案

— 马林·欧弗森
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.