发布时间：2022-4-25 分类： 电商动态
经过近一年的背景产品经验，我踩了很多坑，尝试了很多错误，学到了很多东西，现在我已经形成了自己的一套规格。本文将总结一些结果，希望对大家有所帮助。
后端产品有一个非常重要和共同的元素，这是一个表。表单具有详细输入和数据显示功能。这似乎很简单。事实上，有很多细节。在效率最重要的后端产品中，如何设计可以高效查看和编辑的表格，测试每个后端产品经理的基本技能。通过本文的说明，根据本文的规范设计表格，基本上可以做出一个不会出错的表格。
表单主要负责查看和编辑两个基本功能。如何让用户轻松，高效，舒适地查看数据和编辑数据需要很多辅助功能。下面，我们将重点介绍这两个主要功能并讨论具体的功能点。
原型预览：http://www.pmgrow.top/sheet/
原型下载：https://pan.baidu.com/s/1eTxGbHg
第一部分：查看
1、行
(1)默认每页行数
如果行数太大，页面加载速度会很慢;当行数太小时，用户需要连续翻页，降低浏览效率。每页的默认行数需要根据用户的实际使用场景确定。使用20或50是安全的。
(2)默认每屏行数
每个屏幕可显示的行数。如果行数太大，行高值小，单线观看效果差;当行数太小时，用户需要连续滚动页面，降低浏览效率。行数与页面分辨率有关，需要在考虑主要用户（笔记本或台式机，屏幕尺寸，主分辨率）的使用场景后确定。
(3)每页行数多于每屏行数时的处理方式
在大多数情况下，每页的行数大于每个屏幕的行数。在这种情况下，当向下滚动页面以查看表格的内容并滚动到页面的中间或底部时，用户将发现这样的问题，标题是不可见的。当用户看到一条数据时，知道它是哪个数据并不直观，因此需要向上滚动才能查看标题。特别是在具有大量列的表的情况下，经常发生这样的场景，页面不断地上下滚动，并且观看效率低。
要解决这个问题，通常有两种方法可以解决它：
固定标题：当标题滚动到页面顶部时，它始终固定在此位置，用户可以轻松查看标题和数据之间的对应关系。
表格的垂直滚动条：向表格添加垂直滚动条，并通过拖动垂直滚动条查看表格的内容。标题不受拖动的影响。
2、列
(1)列隐藏、排序
当表中的列数较大时，所有列都无法在一个屏幕中显示，用户需要通过水平滚动条拖动和查看不同的列。在不同场景中的不同用户，感兴趣的列不一样。为了满足这一需求，我们需要允许用户自定义列：显示哪些列以及首先列出哪些列。用户可以隐藏他们不关心的列，并将感兴趣的列放在最左侧，以便他们可以在进入页面时看到他们最关心的内容。
(2)固定列
至少有一列不允许用户隐藏和排序它们。此列通常是表格数据之间的唯一区别，例如订单列表的订单号。
(3)列宽
列宽需要确定合理的默认值，以便表内容具有良好的显示效果。不能太窄，大量数据会显示不完整;不太宽，很多空白区域会降低浏览效率。
列宽值的确定通常遵循以下原则：
标题无法换行，列宽应至少大于标题。
当列内容的长度固定时，例如电话号码（11位），列宽应大于固定宽度。
当列内容的长度不固定时，应考虑大多数情况下的长度。如果签名是个性化的，我们将允许10~50个字符，但经过数据分析，大多数签名的长度小于20。我们可以将列宽设置为20，以确保在大多数情况下完全显示。
在极少数情况下，我们设置的默认列宽不满足数据的完整显示，并且数据的完整显示对用户很重要。针对这种情况，我们提供自定义列宽功能，允许用户调整列宽以获得所需的印象。
(4)数据截断
当数据长度大于列宽时，我们需要截断数据内容。截断后，添加……最后，当鼠标移入时，显示浮动图层附近的全部内容。
浮层的位置：当数据在纵向紧密组合时，浮动层显示在左右两侧;当数据在横向紧密结合时，浮动层显示在上侧和下侧。这可以防止浮动层阻塞需要组合的数据。
3、分页
分页的功能相对简单。通常，可以满足这些功能：上一页，下一页，第一页，最后一页，快速跳转到页面，以及调整页数（20,50,100,200）
4、排序
(1)初始排序
加载页面后，数据的排序顺序称为初始排序。初始排序应该是用户最关心的排序。例如，在时间敏感列表中，默认排序应该是时间减少的。重要金额列表，默认排序应该是降序金额。
(2)排序切换规则
当表中的多个列具有排序功能时，您需要考虑排序开关的逻辑。只能同时应用一种，旧的排序在应用新排序时应该无效。
排序需要通过单击激活和切换。激活新排序时，默认为升序或降序，需要根据用户的焦点确定（通常默认为降序）。在激活新排序之后，应该以“降序递增”的方式循环切换排序。单击切换顺序。
(3)不同字段的升降序逻辑
字段类型通常包括文本，值和日期。文本升序由“数字 - 特殊符号-a-z-A-Z-中文字符 - 其他字符”执行，该值由数值执行，日期由时间值执行，反之亦然。应该注意的是，上下逻辑有一些数值需要特殊处理，例如排名。在普通值的降序中，大数字在前面，小数在后面，但排名的降序应该是小数第一个和后面的大数字。
5、查找
(1)查找范围
找到值需要匹配的范围。如果表单具有订单号和两个收件人字段，我们可以将搜索范围设置为这两个字段。输入查找值后，您可以找到订单号或收件人可以与查找值匹配的内容。
(2)匹配方式
找到值与找到的内容之间的匹配项，包括精度，模糊，前缀等。同样是检查女孩，准确只会找到女孩，模糊可以找到女朋友，漂亮女孩等，前缀只能找到漂亮女孩。
(3)排序规则
当我们使用模糊查找女孩时，我们可能会发现很多匹配的内容。如果我们只想找一个女孩，我们可能需要翻页才能找到女孩。为了解决这个问题，一种解决方案是允许用户选择搜索是准确的还是模糊的。另一种解决方案是使用模糊搜索将完全相同的结果放在第一行，其余内容按原始方式排序。
6、对齐方式
为了使表格内容的显示更加美观和高效，我们需要确定表格内容的对齐方式。通常使用文本左对齐和右右对齐。
7、详情入口
表单有时会扮演详细条目的角色。该表显示摘要数据并单击新页面以查看详细信息数据。因此，我们需要设计一个允许用户单击进入操作页面的单击区域。通常有两种解决方案：1。使用差异化字段作为链接（视觉上不同），例如订单号。 2.设置单独的“查看”功能。在表格中输入。前者节省空间，但感觉很弱;后者具有强烈的存在感，但需要占据一个独立的空间。我们需要根据具体情况确定解决方案。
8、筛选
该表通常默认显示所有数据。当我们只需要找到符合特定条件的内容时，我们需要使用过滤器。
筛选通常包括多种条件。
(1)条件
使用[field] - [比较关系] - [value]方法。如[订单金额] [大于] [100]，
[收件人] [是] [张三，李思]等。比较关系通常包括是，否，是，否，大于，小于，等于，大于或等于，小于或等于，等于。
(2)组合筛选
过滤器由多个条件组成，我们需要添加多个条件来执行过滤器。当该筛选中的条件相对固定并经常使用时，每次重新选择条件是低效的。因此，我们需要提供一个过滤器保存功能。配置过滤器后，可以保存并应用过滤器，而无需在下次重新编辑。过滤可以节省命名，重命名和编辑条件。
(3)筛选的可见性
筛选后，您需要使用户可以看到使用的条件。用户可以直观地形成筛选条件和过滤内容之间的对应关系。当然，当有很多过滤条件时，它会占用相对较大的页面空间，我们还应该提供隐藏的过滤功能。
第二部分：操作
1、单项操作
对于单项操作，例如删除，开始，暂停等。这些操作应放在最表格的右侧，这是一个固定的列。如果有更多操作，则需要将额外操作折叠为“更多”，并在表面上仅留下1或2个常用操作。
2、编辑
浏览表单内容时，我们需要在查看后编辑一些数据。此时，我们需要为用户提供快速编辑方式。如果要编辑的项目较少，我们可以在将鼠标移动到编辑项目时显示编辑样式。单击“编辑项目”
时进入编辑状态并直接修改保存。当有更多项目要编辑时，您可以在操作栏中进行编辑。单击“编辑”将所有编辑项目置于编辑模式。修改后，单击“保存”以保存它。值得注意的是，最好能够响应键盘操作，键盘输入可以触发保存操作。
3、勾选
(1)全选
选择所有选择后，可以批量选择所有项目。但是在多页面的情况下，完整选择通常有两个要求：选择当前页面并选择全部。我们应该为用户提供实现这两个选项的选择。
(2)跨页选择
有时我们需要在不同页面上勾选项目。检查第一页上的几个项目后，当您翻页然后检查其他项目时，通常无法快速了解选项。因此，当我们进行跨页面检查时，当切换到其他页面时，我们需要在表格的顶部显示所选项目，允许删除其中一个并清空所有项目。
(3)勾选状态的保持
在某些情况下，我们需要对同一批tick选项进行多项操作。因此，在检查完成之后，在执行第一操作之后，我们需要保持检查状态以便执行下一操作。
4、按钮
在表格顶部放置一个按钮以执行常见操作，通常在左侧（检查稍后操作的鼠标移动路径是否很短）。如果有更多按钮，则需要根据按钮类型折叠具有相同功能的按钮。有一些按钮用于带有复选标记的批处理操作。如果没有复选框，则需要禁用该按钮。
5、导出数据
表单通常用于显示数据，用户通常需要导出数据。在设计导出数据的功能时，我们需要考虑这些因素。
(1)文件格式
通常使用xlsx。此格式显示出良好的结果，良好的兼容性和易于后期处理。但是，当数量很大时，可以根据输出速度的考虑使用csv格式。
(2)文件名
文件名应该能够表达数据内容。通常，[Page] [Table Name] [Time]等字段用于确定表名。
(3)模板
导出文件的模板。通常，我们导出所有列的数据，即使列显示部分列的数据。在某些情况下，我们需要对模板进行一些样式处理以获得美学效果。
(4)导出耗时
导出数据的过程是制作数据然后下载数据。当导出的数据量很大时，生成数据需要很长时间。我们需要考虑出口所需的时间。一种简单的设计方法是单击导出的数据，然后进入导出以通知用户数据正在导出。
结语
确定规范的含义是为了降低协作中的通信成本。当产品，用户界面和前端都在同一套规范上达成一致时，开发效率将提高一倍。该产品不需要在原型图中添加常规交互，也不必考虑前端的可实现性。当您看到原型时，UI和开发可以快速了解您之前的规范的含义。通过这种方式，产品的能量可以更多地满足需求。
在学习过程中，很多参考了蚂蚁设计。我建议大家都知道。
从交互设计的角度解释了本文中的许多内容。由于我以前一直关注这些要求，因此交互的知识是不够的，因此，开发产品的交互式体验太差了。所以我主动学习了相关内容。对于中端和后端产品经理，尤其是当团队内的开发资源不足时，引入一组规范来标准化他们自己的产品是有用的。如果您的团队已经有正式规范，请在本文中正确使用它。产品经理的主要焦点仍然是需求。
本文最初由@流风发表。未经许可，禁止复制。
该地图来自Unsplash，基于CC0协议
