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

Question

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

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

什么样的 UI/UX 设计实践与这种应用程序行为相匹配？

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

Answer 1

我最近一直在处理这个问题，根据具体情况，我有几种不同的处理方法。

有时，用户刷新对于用户体验来说并不那么重要。一般来说，对于经常变化的数据，您可以使用有关实时设计的链接中描述的方法（由larsbuur的答案提供），让您的用户明白他们不需要刷新。总体思路是使用不显眼但可见且清晰的线索来表明数据已发生变化。

如果没有太多无法从路线恢复的 UI 状态，刷新浏览器应该与用户期望的差不多。一般来说，您不想尝试让浏览器功能以意想不到的方式工作。如果你想在刷新时保持 UI 状态，你可以尝试类似 Meteor 包

u2622:persistent-session。

您还可以提醒用户刷新后无需刷新。例如，使用

web storage 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 对此很有帮助。在我看来，这是最友好的用户体验选项，您甚至可以在用户名旁边显示一个旋转图标，以向其他用户表明该用户可能正在重新连接。然而，事实证明，当涉及到数据完整性/服务器可靠性时，我实现这一点的尝试有点错误且不可预测。

目前，我选择简单地使用

beforeunload