饿了么后台表格设计

酸梅干超人6天前发布

103人在学·0条笔记

B端表格的重要性与挑战

在B端产品设计领域，表格是极为常见的元素，于数据管理层面有着至关重要的地位。它宛如一座稳固的数据桥梁，能高效且清晰地展示海量数据，为用户对比、分析和执行复杂操作提供便利。尽管表格看似通用且基础，却是保障数据准确、高效管理以及实现用户与系统顺畅交互的关键所在。

然而，设计 B 端表格需要兼顾多方细节。一方面，信息过多可能导致表格拥挤，影响用户阅读和操作效率。例如，当表格条目数多达数百个录入项时，用户易迷失于冗长混杂的数据中，难以迅速定位和获取关键信息；另一方面，操作复杂会降低用户体验，如列数过多、操作栏选项过多等问题，都需精心设计来优化。

此外，在实际设计过程中，表格设计存在逐渐固化的现象，设计师容易陷入惯性思维，依赖标准模式和组件，未必会在表格设计上投入过多精力，进而容易忽略一些基础细节，而中后台业务场景复杂多样，即便只是忽略少数细节，都可能像在精密的仪器中掺入了沙子，影响整体体验。

接下来，我们将结合资金钱效相关的业务场景，探讨如何依据实际业务场景，在表格设计中挖掘设计点和突破口，以提升产品基础体验。

#02 优化策略

01 提高表格阅读效率和准确率

洞察1：高频出现的树形数据阅读结构

在我们的业务场景中，存在许多需要层层下钻、查看大量数据的场景。这是因为我们的业务管理体系本身就是分层次的，即信息和数据按照一定的层级结构组织。这种层级结构决定了用户在使用中台产品时，需要按照这种层级结构来查看和分析数据，以实现更直观、高效的操作。例如，数据分级、下钻的结构。

洞察2：用户需在同一张表中同时处理大量数据

一名运营人员可能需要负责多个城市的运营工作，每个城市平均有 40 多个商圈的数据需要处理。这意味着在一张表格中，运营人员需要同时阅读和处理上百个商圈的数据，随着数据指标项的增多，数据量将会成倍增长。

优化思路

1) 减少不必要的点击，提高数据处理效率

2) 表格纵向滚动优化-表头吸顶

用户在看数时，需要对所负责的战区/城市/商圈进行上下数据对比，对纵向阅读、保持数据层级关系和连贯性的有诉求。

3) 金融、数据类信息居右对齐，方便对比

在此场景下，对于用户来说，关心数字数值的大小比关心它的位置更需要，所以将数值型的数字向右对齐，方便比对数值。我们比较数字时，首先看个位，然后是十位、百位。大多数人们也是这样学习算术的——从右边开始，向左移动，动态地传递数据。

4) 数字采用等宽字体

前文提到，用户的数据表格里经常需要上下进行比较，而非等宽字体的不同数字宽度不一致，会让不同位置的数字无法在一条线上，尤其是有千位分隔符时，会大大降低数字比对的效率。而诸如 Alibaba Sans 102、Helvetica Neue 这类的等宽数字，在数值上下对比时，相同位置的数字在同一条竖线上，更加容易对比。