为移动设备设计hmi的5大最佳实践

在为移动设备设计人机界面(HMIs)时,要考虑导航、布局和系统控制等关键因素。

通过Joseph Zulick, MRO电气和供应公司 2018年6月12日

精心设计的人机界面(hmi)减少了操作失误,通过减少停机时间为公司节省了数百万美元,并提高了工人的安全性。HTML5编程可以将HMI设计转移到移动设备上,但编程只是使能器。由于尺寸和界面的考虑,以下五个HMI设计的最佳实践是针对移动设备的,可以为移动设备用户创建增强的体验。

1.功能和用户友好

设计良好的HMI可以减少用户在需要做出关键决策时因误解或没有所有相关信息而产生的错误。在移动界面上设计一个成功的HMI的关键是建立一个功能性的,同时让用户高兴的界面。大多数用户将使用苹果的iOS系统或谷歌的Android系统。设计一个界面,使其融入用户熟悉的本地平台。

尽可能多地使用每个平台的本地唯一界面(UI)特性。随着平台的发展和用户更新他们的操作系统,这将使生活变得更容易,最终将使用户在打开应用程序时感到舒适。

2.导航和布局

HMI用户将需要能够做两件事:查看内容和导航到他们想要找到的内容。在大屏幕上,HMI的最佳实践是尽量减少物理屏幕的数量,以简化导航。大屏幕上设计良好的HMI的一个例子可能是这样的:内容组织良好,所有的摘要信息都是立即可见的。每个视图都可以按照分层导航结构进一步展开。

然而,在移动设备上,在一个屏幕上显示这么多的视觉信息对用户来说很难解释。相反,重要的是优先考虑用户操作和到达所需信息的路径数量,而不是最小化屏幕数量。首先展示一个系统级视图,其中包含最少级别的信息,然后为用户提供连接不同视图的导航路径。在每个视图中,内容应该充满整个屏幕,而半透明和模糊可以暗示更多信息。避免使用边框、渐变和阴影,因为它们会引入视觉噪音,将焦点从内容上转移开。

应用程序中的导航应该是直观和可预测的。导航模式的一个很好的选择是滑动导航抽屉,它一次显示许多导航目标,但在用户调用之前保持隐藏。这允许用户使用整个屏幕显示内容,同时仍然在父视图、子视图和兄弟视图之间维护丰富的导航模型。该导航模型还将允许用户在不相关的视图之间切换,同时保持呈现深层层次结构的能力。它还将帮助用户了解其他视图或功能,同时建立如何通过HMI与系统交互的心理模型。

3.用户操作

HMI设计师在创建与系统交互的HMI时必须考虑开发人员模型和用户模型。在移动设备上,清晰地向用户展示可视化控件,并使与控件的交互清晰。一般的指导原则是,当可能的操作数量超过控制数量时,用户可能会感到困惑,或者HMI的有价值的功能可能会被掩盖。例如,关键信息不应该隐藏在长按之后,因为用户可能永远都找不到它。相反,在屏幕的顶部添加一个信息按钮作为覆盖。这种设计将巧妙地引导用户发现信息,而不是侵入性的或模糊的。

4.系统控制

已经为移动界面开发了许多控制模型,以帮助减少用户的困惑。一些常见的控制模型包括:

  • 当某些东西只能打开或关闭时,使用切换按钮。
  • 如果用户只能选择一个选项,但该选项有一系列可能的值,如屏幕亮度,则使用滑块。
  • 如果用户只能选择一个值范围内的选项,但他们需要精细控制,则使用步进按钮。
  • 如果用户需要从许多分类值中选择一个,设计人员应该使用下拉菜单或滚动轮。
  • 作为最后的手段,可以使用文本输入,因为这是与移动设备交互的最慢和最容易出错的方式。

另一种选择是通过振动或声音将触觉反馈与任何这些控制功能结合起来,但触觉反馈应仅用于在视觉线索不够的情况下提高交互的可视性。

控制的设计应尽量减少任何可能的错误,或一旦发生错误,其影响。为控件保持足够的间距,这样用户就可以轻松地访问它们,而不会进行意外的触摸。此外,使用全屏弹出窗口来确认可能产生难以逆转效果的操作。

移动设备手势(见表1)是用户与HMI交互的理想范例。重用常用手势将确保应用程序以可预测的方式运行。表1列出了一些需要考虑的常见手势。

移动设备手势

表1:常用的移动手势应该包含在移动设备的HMI设计中。

5.设计时要考虑到规模

传统上,hmi有固定的屏幕和物理控制,可以在设计时考虑到这些功能。当为移动设备创建HMI时,不再保证通用的屏幕分辨率。因此,UI元素(如按钮)在低密度屏幕上看起来更大,而在高密度屏幕上看起来更小。因此,确保文本、图标和图形图像等视觉效果在用户可能拥有的每种屏幕尺寸上都清晰非常重要。为了帮助创建适合各种分辨率的HMI,请遵循表2中的比例,以便在多种屏幕尺寸上显示图像、控件和文本时看起来是相同的。

移动设备图像、控件、文本的屏幕尺寸比例

表2:hmi的设计应该考虑到不同的屏幕尺寸和分辨率,以确保用户有清晰的显示。

遵循这些最佳实践将有助于将HMI转移到更小的屏幕或移动设备上,并增强用户的整体体验。优秀设计的基本规则仍然有效,提供良好的概念模型并使事物可见。然而,某些独特的挑战需要考虑设计,例如只能显示有限的视觉信息,以及理解移动设备所需的不同用户交互范式。

约瑟夫Zulick作家兼编辑在哪里MRO电气和供应.由内容副经理艾米丽·冈瑟编辑,控制工程, CFE传媒,eguenther@cfemedia.com

更多的答案

关键字:人机界面(HMI)

如何为移动设备设计人机界面

最佳实践来增强用户在移动设备上的HMI体验。

考虑一下这个

是什么在HMI设计中需要识别的挑战是什么?