实时应用程序中的 UI/UX 设计

Question

最近我一直在使用Meteorjs开发应用程序，我注意到大多数开发人员/设计师不会将不需要刷新浏览器的想法传递给用户。

在 Meteor 中，刷新浏览器是完全没用的，数据更改直接推送到客户端。

哪些 UI/UX 设计实践与这种应用程序行为相匹配？

我想过在UI中添加一个刷新按钮，希望用户不刷新浏览器，但这是糟糕的设计，这不是一个诚实的设计。用这种方法，我是在对用户撒谎。

Answer 1

我最近一直在处理这个问题，根据场景，我有几种不同的处理方式。

有时，对于用户体验来说，用户刷新并不重要。通常，对于经常更改的数据，可以使用此链接中描述的有关实时设计的方法（由 larsbuur 的答案提供）来让用户了解他们不需要刷新。一般的想法是使用不显眼但可见且清晰的线索来表明数据已更改。

如果没有太多无法从路由中恢复的 UI 状态，则刷新浏览器应该几乎按照用户预期的方式工作。通常，您不想尝试使浏览器功能以意外的方式工作。如果要在刷新后保留UI状态，可以尝试使用类似Meteor包u2622：持久会话的内容。

您还可以提醒用户，他们不需要在刷新后刷新。例如，使用 Web 存储 API：

Meteor.startup(function() {
  var reload = !!sessionStorage.getItem('reload');
  var manualReload = reload && !Session.get('hotReload');
  if (manualReload) {
    // Tell the user they don't need to manually reload the browser
  }
  sessionStorage.setItem('reload', true);
  Session.set('hotReload', true);
});

在某些情况下，更重要的是用户了解他们不应该刷新。例如，在网络游戏中，您通常有一个赛前大厅系统，可以调整游戏设置，大厅领导者是在大厅中时间最长的玩家。如果游说领袖刷新，他们将失去他们的职位。

可以通过

具有重新连接时间窗口来实现此工作，用户可以在该时间窗口中收回其位置，否则用户将在超时后失去其在大厅中的位置。mizzao：user-status对此很有帮助。在我看来，这是最友好的UX选项，您甚至可以在用户名旁边显示一个微调器图标，以向其他用户指示用户可能正在重新连接。然而，在数据完整性/服务器可靠性方面，我实现这一点的尝试被证明有点错误和不可预测。

现在，我选择简单地使用 beforeunload 事件，就像 StackOverflow 在你打字时所做的那样。它不是很可定制，也不像透明重新加载/重新连接那样友好，但有时当你只是想警告用户为什么他们现在可能不想刷新时，这是最好的折衷方案。