user-interface - 如何针对高延迟条件设计用户界面？

Question

正在开发一个控制远程机器人的应用程序，在按下按钮和实际发生的操作之间可能存在显着的延迟。此外，该命令有可能最终未能成功到达预期接收者(由于网络不可靠等)。此外，还有一些变量的变化不是瞬时的。例如，命令速度和当前速度都有一个变量；更改命令速度不会立即使当前速度与该值匹配。

问题是，如何使应用程序反射(reflect)远程机器人正在报告的当前状态，以及向用户确认他的命令已被应用程序理解，但系统尚未收到来自远程机器人的通知机器人它已经被承认了？ (绝对禁止弹出窗口。)

已经讨论过的一些想法:

禁用按钮

按下命令按钮时，启动计时器一段合理的秒数，并在此期间禁用该按钮。不要直接更新相应的标签，而是等待机器人的响应。 (例如，如果您按下速度 + 按钮，右侧是显示当前速度的文本标签，请不要立即更改标签，而是等待机器人的响应)。一旦发生此响应，或者当计时器到期时，请重新启用该按钮。

优点:页面上不需要额外的控制小部件。标签始终反射(reflect)机器人的当前状态。

缺点:如果您想连续发送两个速度更新，则必须等到第一个更新被接收并确认。会感到迟钝和 react 迟钝。

记录信息

拥有一个用户可以查看的日志，其中显示用户已采取的所有操作的文本表示、时间戳，并且历史记录清晰可见。可以根据用户偏好进行颜色编码。

优点:用户可以立即得到反馈，表明他的命令已被理解，如日志中所示

缺点:无法解决如何处理按钮(尤其是单选按钮)行为的问题。

是否有人有为操作和响应之间存在显着延迟的环境构建 UI 的经验？我将不胜感激任何和所有的意见。

Answer 1

我不会选择日志:您的主要焦点是小部件。有多种技术可以报告不同组件的状态，我将在这里讨论一种简单的技术:

• 按钮旁边有一个状态图标，显示其状态。使用不同的颜色来表示延迟。绿色表示“就绪”，当用户单击按钮时，图标变为“橙色”，表示忙碌。当用户再次点击时，颜色变为“红色”，这意味着已排队。当队列为空时，颜色变回橙色。如果执行了该操作，颜色将变为绿色。

• slider 可用于 float 值:使用两个“ slider ”。第一个更明显，并且可以拖动。第二个(第一层之下的一层)是“实际报告值”，它显示延迟。

• 文本输入也可以使用绿色/橙色状态图标。编辑时，颜色变为橙色。如果您的队列/网络协议(protocol)支持取消编辑操作，则您可以在用户每次按键时重新发送新字符串。如果不是:更改后将图标更改为橙色，发送字符串，然后等待状态报告。状态报告应包含实际值，如果该实际值等于组件中的值，则将图标更改为绿色。如果实际值不等于组件中的值，则重新发送组件中的值。

• 单选按钮/复选框应该双屏显示。一种可编辑，一种不可编辑。第一个用于用户输入，第二个用于实际报告的状态。与 slider 组件的行为相同。

这些需要制作自定义组件或小部件。您可以扩展原始组件或从头开始重新创建它们。

如果你的机器人也可以“操纵”:
创建一个可以拖动的矩形。该矩形上画有一个当前值的小十字。当您拖动时，您会看到交叉的延迟。您可以使用插值和时间值来平滑机器人控制。用户会注意到延迟，因为十字“跟随”他的鼠标指针。 (通常在太空射击模拟游戏中控制虚拟飞船时使用，例如效忠)