HMI的点击区域应该多大?总监上路帮你实测。

HMI的点击区域应该多大?总监上路帮你实测!

设计师都知道根据《苹果
iPhone 人机界面设计指南》,手机 UI 的最小点击区域是 44px。但汽车 HMI
的最小点击区域业内却没有定论。考虑到汽车驾驶关系交通安全,点击区域大小与反应时间极为重要。文章的作者 Casper Kessels(德国
Snapp 汽车软件公司设计总监)通过 Figma 制作原型在实车上进行测试,得出了汽车 HMI 最小点击区域的结论。

本文译自:https://medium.com/snapp-automotive
原文作者:Casper Kessels(德国 Snapp 汽车软件公司设计总监)

HMI的点击区域应该多大?总监上路帮你实测!

我们相信汽车消费软件可以做得更好。因此,我们一直在开发基于 AndROId Automotive 的信息娱乐系统。期望看到可用性的改进。

与物理控制器相比,触摸屏没有材质和位置变化之类的反馈触感。驾驶员必须将视线从路面上转移到屏幕上,以便用手指对准屏幕。而且必须在没有错误的情况下,在尽可能短的时间内完成,避免分心造成交通事故。

触控区域的大小是优化这一点的关键。这就是为什么我们进行实验来确定最小触摸区域,这将成为我们设计的基础。

一、测试环境

我们在 Figma 里创建了 4 个原型,按钮大小分别为 60px、80px、100px 和 120px。物理尺寸分别对应 11 毫米、15 毫米、20 毫米和 23 毫米。

HMI的点击区域应该多大?总监上路帮你实测!

4 个原型

为了确保结果准确,我们决定在真实道路驾驶来进行测试。汽车的车速等情况对按钮大小也有影响。我们决定把 iPad 放在真车的 HMI
上。当然,在繁忙的城市驾驶时,让驾驶员与原型机进行交互可能会产生交通事故。所以我们把 iPad 放在中间,副驾驶和驾驶员与 iPad
距离一样。然后,注:驾驶员专注于开车,由副驾驶代替驾驶员,与 iPad 上原型进行交互实验。

HMI的点击区域应该多大?总监上路帮你实测!

由副驾驶与原型交互,请注意安全驾驶,遵守交通规则。

二、测试结果

在柏林的不同路面上驾驶之后,我们得出了以下结论:在一定程度上,增加触控区域会产生更好的效果。

60px 和 80px 的原型有明显的区别,可以看看 60px 原型的效果:

HMI的点击区域应该多大?总监上路帮你实测!

60px 的原型。由副驾驶与原型交互,请注意安全驾驶,遵守交通规则。

与 80px 的原型相比,60px 的表现要差得多:

HMI的点击区域应该多大?总监上路帮你实测!

80px 的原型,由副驾驶与原型交互,请注意安全驾驶,遵守交通规则。

80px 和 100px 之间的差异较小,但并非微不足道。

HMI的点击区域应该多大?总监上路帮你实测!

100px 的原型,由副驾驶与原型交互,请注意安全驾驶,遵守交通规则。

然而,最大的触控区域并没有产生比 100px 更好的效果。如果一个 100px 的按钮很难点击,那么在 120px 也同样困难。请看下面的极端例子。

HMI的点击区域应该多大?总监上路帮你实测!

120px 的原型,由副驾驶与原型交互,请注意安全驾驶,遵守交通规则。

我们开车在城市里转了一圈,亲自感受了一下不同之处,最后得出了这样的结果。在理想的情况下,我们应该测量驾驶员的注意力分散指标,比如离开道路的时间等等。幸运的是,已经有许多相关科学实验得出对应结论了。有趣的是,我们的研究结果与汽车界面和其他相关应用领域的学术研究结果也相符。这些结论也表明,随着触摸区域的增大,改善程度也会减弱。

结论

在实验之后,我们将最小触控区域设置为 80px。HMI 中的每个可交互元素都至少为 80px。对于更高频的交互,我们将最小触控区域定义为 100px。比如,跳过一首歌,或改变空调温度。

我们目前正在开发一个高保真的 Android Automotive 原型,来验证这些设计决策。此外,我们正在测试其他使汽车触摸界面更安全的手势,比如滑块和其他可交互元素。我们将继续在这个博客分享我们学到的新知识,敬请期待!

极氪ZED

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/239037.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚重蔚管理团队
上一篇 2023年3月7日 12:20
下一篇 2023年3月7日 12:21

相关推荐

  • 如何在交互细节中体现专业性?我归纳了4个层次。

    如何判断一个交互作品的专业性?我归纳了 4 个层次:图 1 交互作品专业性的四个层次1. 设计流程完整、方法得当设计是有章法的,我们总结了那么多设计流程,设计方法论,就是希望设计师能够学习借鉴,并运用到自己的…

    2023年3月2日 SEO操作
    07
  • 为什么推荐设计师使用4点网格系统。

    过去,我们一直在使用 8 点网格系统,它帮助我们在 UI 界面中,或者一致性上做了有力的贡献。但是今天我想说 8 点网格系统其实并非最完美的,我们可以选择 4 点网格系统,他灵活性更强,今天文章和大家一起来分享下…

    2023年3月7日 SEO操作
    03
  • UI设计技巧:卡片设计的细节要点有哪些

    在UI设计中,卡片已经是屡见不鲜的设计。不少设计师都会将神奇的动效融入到卡片的视觉设计中,藉此给用户带来很好的操作体验,例如:运用卡片设计,划分UI中模块和功能的不同,以便提高内容的识别度,并透过合理的…

    2022年6月25日 建站资讯
    0180
  • 分享常用的UI设计排版技巧和知识点 让UI产品增添异彩

    在UI设计中,合理的排版布局能突出界面重要信息,处理不必要的元素,提升产品的可读性和可访问性,从而降低用户在使用产品时的障碍和摩擦,以及减少他们对产品的认知负荷。 今天,小编将为大家总结一些常用的UI设计…

    2022年6月21日 建站资讯
    0166
  • 如何做好B端产品的体验走查?我总结了这4个方面。

    本文作者通过实践,整理出一份较为成熟的 B 端产品的设计走查流程,和大家分享一下我个人的经验,也希望能得到你的反馈和交流,让我们之后的体验走查能更有成效。 一、什么是体验走查 1. 概念 体验走查是设计走查的…

    2023年3月2日 SEO操作
    03
  • ui设计难学吗。

    UI设计是什么?难学吗?有到外面培训班参加ui基础班学习课程之后说,学ui设计真惨!尤其是女生学ui,太难了!是的,如果没有一点点美学基础,直接上机就是画图标icon,这种新手级别的学生学ui设计肯定是有一定难度…

    2023年2月22日 SEO操作
    00
  • 网页设计怎么收费?专业网页设计公司服务套餐及价格表。

    网页设计服务旨在帮助客户完成专业的网页设计,包括企业网站设计、品牌官网设计、集团网站设计、电商网站建设、门户网站建设、高端网页设计等,根据不同的网站类型收费价格略有不同,接下来一起来看看这几类网页设…

    2023年3月7日
    0126
  • 如何构建界面设计框架?4个维度帮你掌握起来。

    在UI设计中如何构建界面设计框架?本文从用户需求、业务目标、媒介属性、竞品设计4个部分,帮你掌握这个用户体验设计的知识点。如何构建界面设计框架?一个界面的框架究竟是如何设计出来的呢?我们可以从 4 个维度…

    2023年3月2日 SEO操作
    015

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息