触摸屏按钮设计尺寸与间距大学问

 

  在触摸屏按钮设计当中,尺寸对可用性的影响相当巨大。ISO和ANSI标准都推荐0.75″ x 0.75″(约19 x 19毫米)的尺寸,来自莱特州立大学心理系的一项研究也表明0.75″ x 0.75″的按钮对于用户来说是满意率最高的。

  让我们来稍微深入地探讨一下,我觉得1.25″ x 0.75″(约32 x 19毫米)才是最佳尺寸。为什么呢?这个当然和比例有关,就像陪你度过童年的普通电视机现在早已被宽屏电视剧所取代了,这背后的道理其实也是比较简单的。


  按钮本身的尺寸是一个方面,按钮间的间距呢?非常有意思的事实是按钮间的间距对于整个交互的性能和精确度影响微乎其微。所以即使在屏幕尺寸很小的情况下,仍 然建议增大按钮面积,哪怕这样做会使很多按钮紧挨着。当然如果有多余的空间,最高0.125″(约3毫米)的间隔还是有助于让界面用起来更舒服,尽管整体 精度和速度不会发生变化。

  希望在你的设计里使用尺寸更小的按钮?没问题,我们这里讨论的尺寸都是按钮的实际可触摸面积。如果你使用了更小的按钮,只要保证按钮的可触摸面积超过他本身的可视面积,达到我们的要求就好了。当然这种情况下就得考虑按钮间的间距问题了。

  如 果你要处理的触摸屏尺寸实在是非常小,你可能不得不使用小于0.75″(约19毫米)的按钮。这个时候0.375″(约9.5毫米)的尺寸可以作为参考, 但是绝对不能让按钮小于0.25″(约6.4毫米)。就像投掷飞镖一样,无论用户离触摸屏多近,都很难每次都“命中”按钮的中心区域。一个普通的人多次按 同一个点,其精度一般在0.125″(约3.2毫米)以内。

  那尺寸变大呢?不得不说这也未必是好事,因为大过一定程度之后用户点击的精度不会提高,速度反而会下降,因为移动于各个按钮间的时候手指必须移动更大的距离。


  现在让科学来告诉我们一个理想的按钮应该是什么样的。

  希腊字母 “φ” 在数学上往往表示一个定值——1.618,也就是大家非常熟悉的“黄金分割”。了解文艺复习的朋友肯定都知道黄金分割被广泛应用在非常多的地方。比如蒙娜丽莎这幅画上所使用的黄金分割就足够你写一整本书了。

  如果你把这个黄金比例用在按钮上,那这个“理想”的按钮大小就是1.25″ x 0.75″(约32 x 19毫米)

时间: 2024-11-03 18:39:08

触摸屏按钮设计尺寸与间距大学问的相关文章

设计理论:触摸屏按钮的尺寸和空间设计

在触摸屏按钮设计当中,尺寸对可用性的影响相当巨大.ISO和ANSI标准都推荐0.75" x 0.75"(约19 x 19毫米)的尺寸,来自莱特州立大学心理系的一项研究也表明0.75" x 0.75"的按钮对于用户来说是满意率最高的. 让我们来稍微深入地探讨一下,我觉得1.25" x 0.75"(约32 x 19毫米)才是最佳尺寸.为什么呢?这个当然和比例有关,就像陪你度过童年的普通电视机现在早已被宽屏电视剧所取代了,这背后的道理其实也是比较简单的

苹果手机无法无法触发LinkButton按钮时候 哪位大神指导 上支持哪个按钮可以触发asp.net后台程序的

问题描述 苹果手机无法无法触发LinkButton按钮时候哪位大神指导上支持哪个按钮可以触发asp.net后台程序的 解决方案 解决方案二:要看具体代码一般正常都可以触发事件

android webview 加载html 第一次字体正常,点击按钮后字体变大

问题描述 android webview 加载html 第一次字体正常,点击按钮后字体变大 使用android webview 加载html页面,第一次加载的没有问题,点击按钮之后,页面上非 控件的元素字体变大.哪位大神知道这是什么原因? 解决方案 public class MainActivity extends Activity { private WebView webView; private long firstTime = 0; private FrameLayout frame;

小微博里的大学问

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 说起微博,我想很多人都不陌生.最初在中国引起这股微博风的领头羊就是新浪微博.而就在这个月的16号,第一届微博开发者大会也在北京顺利的举行,并且开始启动了微博2亿元的开发者基金.足以见微博的魅力多么的吸引投资商与创业者,当然还有大量的网民. 究竟一个小小的微薄有什么吸引人的地方呢?不是就即时把自己的语言给发表到网络上去么?是的,没错.就是这样一

vc 工具栏按钮-各位路过的大神,请问如何使工具栏按钮禁止

问题描述 各位路过的大神,请问如何使工具栏按钮禁止 详细情况如下,工具栏按是我用create创建的,还填加了位图按钮,现在我想禁用其中一个按钮,但是用如下代码 void CMainFrame::OnUpdateServerConnect(CCmdUI *pCmdUI) { pCmdUI->Enable(TRUE); } 会按钮位图不见,工具栏按钮直接灰色了,请问有什么办法,直接禁用工具栏按钮,而不使按钮上的图片消失,各位大神帮忙想想

友链交换中的大学问

摘要: 想必做优化的朋友都很清楚友情链接在整个站点优化过程中所扮演的角色,友情链接是吸引蜘蛛和传递权重的很有效的技巧,是一种高质量的外链.但你知道怎么换友情链接吗?友链交换 想必做优化的朋友都很清楚友情链接在整个站点优化过程中所扮演的角色,友情链接是吸引蜘蛛和传递权重的很有效的技巧,是一种高质量的外链.但你知道怎么换友情链接吗?友链交换看似简单,但其实也是有很大的学问的,有许多细节需要我们去注意的,今天就总结归纳九大不宜交换的友链: No.1:不宜交换快照不正常的.快照是检查站点整体表现的最好的

小窗口大学问

弹出窗口 经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段javascript代码即可实现.下面俺就带您剖析它的奥秘.  [1.最基本的弹出窗口代码]  其实代码非常简单: <SCRIPT LANGUAGE="javascript"> <!-- window.op

小窗口大学问--玩转弹出窗口

弹出窗口 经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段Javascript代码即可实现.下面俺就带您剖析它的奥秘. [1.最基本的弹出窗口代码] 其实代码非常简单: <SCRIPT LANGUAGE="javascript"> <!-- window.open

交互设计笔记之产品分类管理:小分类大学问

也许把分类单独拿出来讨论有些站不住脚,范围大涉及面又广,但不想拐弯抹角,希望能有业内人士不吝指点. 分类(Classification),顾名思义的概括就是分开并且归类.学科上通常对分类的认知有以下三个方面: 1.按照种类.等级或性质分别归类 2.把无规律的事物分为有规律的.按照不同的特点分类事物,使事物更有规律! 3.推测事物间存在的一些自然关系 其实中心意思也是在讲首先区分,其次归类.在产品设计中,分类管理这种东西总是会层出不穷的跑出来让人做抉择,他们跟导航设计似乎又有着千丝万缕的干系,好的