恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
打造触摸友好的交互设计:移动端触摸屏的目标尺寸
0.0°
2014-11-20 好文转载 经验/观点 原作者: 原作者 举报 2824 35 12 1

交互设计中关于触摸屏尺寸的简述

在飞镖游戏中,红心非常难以命中,原因在于红心是整个镖盘上最小的目标。同样,推及到触摸屏设备中,我们的目标尺寸如何呢?



小型的触摸目标比大型的难于操控。当设计移动用户界面时,最好把目标尺寸做大一点,这样就能便于用户敲击。但这个“大”究竟需要多“大”,才能方便大多数用户呢?很多移动端开发者也非常想知道这个问题的答案,最后大部分都在各个平台的用户界面设计规范中找到了答案。



移动平台设计指导规范告诉了我们什么?



在苹果的《iPhone人机界面设计规范》中指出,最小的目标尺寸是44 x 44像素。微软的《Windows手机用户界面设计和交互指南》中建议使用34 x 34px的目标尺寸,最小也要26 x 26 px。诺基亚开发指南中建议,目标尺寸应该不小于1cm x 1cm或者28 x 28px。

 

尽管这些指导书给予了触摸屏目标尺寸的大致尺寸标准,但是彼此的标准并不一致,更无法和人体手指的实际尺寸相一致,他们的建议尺寸比手指的平均尺寸要小,这会导致触摸屏的目标选择问题。

 

小的触摸目标尺寸会导致大问题

 

小的触摸目标尺寸,对于用户来说操作非常困难,因为如要更精确的触控。用户需要调整手指的操作方式,从指心操作,变为指尖操作,这样才能操作尺寸较小的目标。使用指心操作通常会整个覆盖操作对象,让用户无法分辨、看清他们所要操作的目标,也无法收到操作过程中的视觉反馈,也就无法知晓,他们的操作是否有效。当用户不得不用指尖进行操作时,又出现了一个新问题,这种操作方式非常的慢,而且很吃力,体验很差。



问题不仅这些,目标的尺寸过小还会导致失误的触摸操作。因为尺寸小,所以容易拥挤在一起,用户容易触碰到附近的目标,导致运行结果非用户所愿。手指太大,目标尺寸太小,一根手指的宽度大概能覆盖两个目标的宽度。如果不按压到错误的位置,就会导致错误的操作。食指容易出错,但是拇指更容易出错。因为拇指更大、更笨拙。有时候用户会倾斜拇指,使用拇指的侧边进行操作,但是目标尺寸过小,依然失误频繁。



在移动用户的日常操作中,拇指的使用非常频繁。有时用户无法腾开两只手操作,只能用一只手握住手机,用拇指和食指操作。在这种场景下,用户的操作精度有限,就需要提高目标尺寸来避免操作错误,这就是所谓的触摸友好型交互设计。

 

食指操作下的平均像素宽度

 

MIT触摸实验室的做了一项研究,以手指指尖作为调查,分析其感觉机能。研究发现,成年人的食指宽度一般是1.6——2 cm。转换成像素就是45——57 px,这比那些指导书上建议的宽度都要宽。



45——57 px的目标尺寸非常够用,用户可以将整个手指紧贴在目标上。在操作的过程中,用户也能看到目标的边缘。这样用户与目标之间的反馈与信息传达变的非常清晰,用户也能知晓他们的操作是否有效。因为尺寸大,定位更快,拖移也更方便。费茨法则中提到过,目标越小,操作耗时就越长。小目标减慢了用户的操作速度,因为需要用户集中精力去精准定位。手指大小的目标则不一样,这种目标给予用户足够的空间操作,容错率也很高。

 

拇指操作情况下的像素宽度

 

也有很多用户用拇指敲击屏幕上的目标。拇指比食指要宽,平均宽度大概在2.5cm,转换成像素是72 px



72像素的实际使用效果很棒,更容易定位、操作的舒适感更好。同样的可以看到操作目标的边缘。这意味着用户不用费力的调整手指,使用指尖去操作了。也不用倾斜拇指,用拇指侧面点击目标。

 

在《小型触摸设备上单手操作研究:关于拇指操作的目标尺寸》这篇文章中发现,目标尺寸的增加会降低失误操作的次数。更多的空间提供了更高的容错率和更精确的操作,同时因为大型的尺寸,目标的表现力也变强。

 

另外一篇《移动端触摸设计:关于目标选择的关键》中也表达了同样的看法。

 

手指大小的目标尺寸很理想,但也有特殊情况



将目标尺寸的大小,设置为跟手指大小相近,其中的好处不再赘述。但并不是适合所有的设计场景。在移动设备上,空间有限。这就意味着,如果每个目标的大小都很大,那么屏幕空间根本不够,就需要不断的翻页,这在体验上很糟糕。你需要测量屏幕尺寸,然后计算比例,搞清楚“在这种尺寸的屏幕上,合适的、最大的目标尺寸是多少?”倘若你按照手指大小进行尺寸调整,整个界面的比例很糟糕;再次按照比例调整后,最大的目标尺寸效果也不假,那么就只能使用指导规范上的建议尺寸了。

 

对于平板设备来说,情况就没有手机那么复杂,因为平板的空间更多。不用害怕没有空间去放置目标,空间足够,你可以非常悠然的通过提高尺寸来提高操作适用性。手机是最麻烦的,触摸目标的尺寸非常不好拿捏。但正是因为手机的空间有限,容易操作失误,所以才需要设置真实手指大小的目标尺寸。设计师的挑战就在于,要想办法,让屏幕上大多数的目标,尺寸都跟手指大小一致。但也有好处,这迫使设计师设计时更注重功能性、风格更加极简。

 

为游戏应用设计拇指大小的目标尺寸

 

我们无法推测的问题是,用户使用你的应用时,是用食指操作更多?还是用拇指更多?因此,针对这一点,我们要非常细致的做调研,然后设置合理的目标尺寸。 然而,如果你的应用是一款游戏的话,大多数用户会使用拇指。这就是为什么很多游戏应用中,一些控件的尺寸一般有拇指那么大,这样用户就能更稳固的双手持握,更精准的操作。



结论:

 

通过调整目标尺寸的大小,结合实际的应用情况,能够有效的提高移动端的适用性,同时提高用户体验。不管你的应用是游戏还是别的什么。触摸屏上的目标就是用来让用户点击的。如果用户需要去想“我该怎样去点击,才能完成精确的操作”,需要再交互前思考方法,需要调整操作方法,使用多种方法才能完成交互。这说明交互设计是不成功的。在这篇文章里,我抛出了个人的一些观点,在触摸屏即将完成操作方式一统的时代,如何达到交互设计的触摸友好?这是我们将要面临的问题。期待更多的想法,以及更规范的标准。

 

谢谢观看!


更新:2014-11-20

收藏

35人已收藏

Cyy_Emma

接设计私活,q交流群:145065052

  • 35

    作品

  • 425

    粉丝

  • 21

    关注

  • 利用Tableau开发通用性Dashboard指南
  • 优雅Dashboard,附送Sketch源文件~
  • 第二阶段C4D练习
  • 2016年11月移动端交互设计Top 5
相关标签

    猜你喜欢

      2014-11-20 好文转载 经验/观点 原作者: 原作者 举报 2824 35 12 1

      打造触摸友好的交互设计:移动端触摸屏的目标尺寸

      0.0°

      你确定要举报打造触摸友好的交互设计:移动端触摸屏的目标尺寸

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年11月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      12
      35
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录