设计用户友好的概览屏幕：最佳实践和主要功能：作者：Joris Lochy

在软件开发中，我们经常发现自己在重新发明轮子，特别是在处理更高级别的抽象时。正如我在博客中提到的“释放商业价值：超越低级编程”，虽然开源减少了技术层面的冗余，但用户界面仍然看到许多基础模式被反复重建。

一个经典的例子是 “概览”屏幕，用户搜索一组数据并与之交互，执行查看或编辑特定结果等操作。每个应用程序往往会在多次争论后以不同的方式设计此屏幕。 为了避免每次都重新发明轮子，开发一个可重复使用的基本功能清单会很有帮助。尽管成本限制可能会导致排除某些项目，但此列表可确保针对每个功能做出有意识的决策。

典型的概览屏幕分为 三个主要部分:

• 标头部分：这包括导航选项（例如面包屑、后退按钮…​）、设置（例如用户语言）以及“创建/添加”或“导入/上传”等操作按钮，使用户能够创建（或更新）单个或多个实体。

• 过滤/搜索块：用户定义和应用搜索条件的区域。

• 结果块：显示搜索结果，用户可以对这些结果执行操作。

让我们更详细地分解这些部分。

过滤/搜索块

此部分允许用户指定搜索条件并优化其结果。它通常包括
四个关键要素:

• 过滤器和搜索条件：从简单的文本搜索到复杂的多标准过滤器。

• 保存和检索选项：能够保存过滤器、调用存储的过滤器、对其进行分类以及与他人共享。您还可以包含预定义过滤器的模板，提示用户输入特定变量。

• 清除按钮：重置所有活动过滤器的简单功能。

• 应用过滤器概述：显示当前选定的过滤器，以及删除或修改它们的选项。

设计过滤部分时，请考虑所需的过滤类型。存在多种过滤选项：

• 文字搜索：用户输入自由文本以返回包含特定字符串的结果。

• 标签过滤：单击标签或类别可自动应用过滤器。

• 深入过滤：从广泛的过滤器（例如年）开始，用户可以单击动态缩小范围（例如几个月，然后是几天）。

• 选择过滤器：用户根据特定属性定义过滤器，其范围可以从简单到非常复杂。

• 高级过滤器：使用预定义的脚本语言（例如SQL或特定于域的语言）进行自定义过滤。

此外，您还需要解决其他问题，例如：

• 允许单个或多个过滤器值，包括“包含”或“排除”模式。

• 是否支持数字或日期过滤器的通配符、模糊搜索和运算符（如、⇐、>=…​）。

• 相对日期过滤器的选项（例如“过去 7 天”、“当前月份”或“去年”）。

• 使用 AND、OR 和 NOT 等运算符组合多个过滤器。

结果块

结果块是概览屏幕的核心，用户花费大部分时间的地方。必须避免此部分因过多的标题或筛选内容而过度拥挤，以最大化与数据交互的工作空间。

结果块可以分为以下关键部分：

• 快速建议、轮播和/或横幅：这些可能包括个性化推荐、营销横幅、动态轮播，甚至与搜索结果相关的数据可视化（例如统计数据或图表）。

• 结果配置和结果操作:

  • 在不同的视图类型之间切换（列表、网格、地图……）。

  • 自定义每页的结果数。

  • 使用各种选项导出数据（例如输出类型 XLS、CSV 或 PDF、当前页面或所有页面以及列配置）。

  • 执行批量操作，例如一次删除或批准多个结果，通常使用“全选/取消全选”选项。

• 结果统计：显示结果总数、总页数和当前页码，以便更好地了解用户上下文。

• 结果概览：显示数据的核心表或其他显示格式（例如平铺或地图视图）。

  • 栏目定制：允许用户重新排列、调整列大小和对列进行排序。多标准排序很有价值，可操作的列也很有价值（例如，将项目标记为最喜欢的或重要的、选择批量操作或在结果集中进行直接编辑）。

  • 列标题：显示列名称和排序状态，滚动时标题保持固定。

  • 分页或无限滚动：分页是传统的，用户单击页面，而无限滚动会在用户向下滚动时加载更多结果。通过预加载技术实现无限滚动可以提供更流畅的体验，以避免延迟。

  • 行数：行对应于搜索结果，通常可以对每一行执行各种操作。
    最常见的操作发生在单击一行时，这通常会打开该条目的“查看详细信息”屏幕。但是，可以根据用户与行交互的方式来分配不同的行为。例如，一些实现可以区分单击、双击或右键单击。在某些情况下，单击行中的特定列可能会触发附加功能。例如，单击列可能会打开一个对话框，该对话框根据该列的属性应用过滤器，允许用户选择具有匹配值的所有记录或从结果集中排除这些值。
    此外，上下文操作通常在每行末尾可用。这些可以呈现为带有各种选项的操作菜单或单独的图标。可见或启用的具体操作取决于用户的角色和返回结果的特征。常见操作包括查看、编辑、删除、批准、拒绝、打印、评论、附加文档或克隆/复制条目。

非功能性考虑因素

除了功能之外，性能、安全性和可用性等非功能方面对于无缝体验也至关重要。

• 表现：显然，您希望确保用户尽快获得搜索结果，并避免用户发起大量查询导致平台瘫痪（或对其他用户的系统稳定性和性能产生负面影响）。为此存在许多技巧：
  • 智能过滤：限制通配符等重型过滤器并确保正确的索引
  • 缓存：缓存数据或搜索结果以提高性能，平衡性能、基础设施成本和搜索结果的新鲜度。
  • 异步导出：可以在后台处理大量导出，让用户继续工作。
  • 超时管理：前端和后端超时都要妥善处理，避免系统过载。
  • 寻呼：分页一次仅返回数据的子集，有助于限制资源消耗。分页的实现方式会显着影响性能。例如，如果系统检索所有结果但仅向 API 发送一页，则收益仅限于减少网络负载和加快用户界面渲染速度。然而，就数据检索而言，性能优势微乎其微。
    为了获得最佳性能，应在数据检索层本身应用分页。这可确保仅从数据库中获取必要的数据子集，从而实现更实质性的性能改进。
  • 避免双击：如果用户没有看到即时反馈，他们通常会多次单击“搜索”、“下一页/上一页”或其他按钮（例如排序箭头）。这可能会导致重复的请求被发送到后端，从而可能导致系统过载。为了防止这种情况，建议在单击按钮或操作后暂时禁用它，并仅在操作完成后重新启用它。
• 数据一致性:
  • 维护一致的数据可能具有挑战性，尤其是在数据集不断变化以及应用分页时。理想情况下，所有页面都应该被缓存以确保一致性。如果再次从数据存储中获取每个页面并应用特定的排序，页面的组成可能会变得混乱 – 如果同时将新数据添加到第 1 页，则出现在第 1 页上的记录可能会重新出现在第 2 页上。
  • 同样的原则也适用于操作按钮，其可见性可能取决于某些属性。如果启用某个操作的属性在数据检索和用户单击按钮之间发生变化，则系统应妥善处理此问题，并在无法再执行该操作时显示相应的错误消息。
• 安全和审计:
  • 至关重要的是，概览屏幕和所有相关操作均受到授权配置文件的保护，确保只有具有所需权限的用户才能访问屏幕并执行特定操作。
  • 数据隔离：概览屏幕中显示的结果应仅限于用户有权查看的数据。如果应用水平数据隔离，则可能需要为无权查看这些属性的用户隐藏或禁用某些列。