编辑导语：数据处理恐怕是产品人们绕不过的话题。面对繁琐的数据，我们又有什么小窍门可以使用呢？本篇文章里，作者就利用中继器和Excel来设计列表、并记录了web端列表设计的过程。让我们一起来看一下吧。

相信许多从事B端的产品小伙伴都会对列表项设计中大量的繁琐数据展示有所感触，这篇文章就通过记录一个web端列表设计的实例过程，来向大家展示——如何使用中继器和一些Excel的小工具帮助我们提升原型设计中的效率。

内容较长，但相信会对你有所帮助。当然方法和思路同样适用于从事C端的小伙伴。

B端产品相较于C端会更多地、更直接地涉及到大量数据的处理设计，因为在B端产品中，许多情况下我们都要通过对大量收集到的数据进行处理分析，从而提升目标用户的业务效率。

那么列表则是对于数据分析展现最常见的一种产品模块了。

这里有个tips：对于任何产品的设计，我们**都在分析了功能模块的特点之后再进行原型绘制，否则埋头苦干可能会造成效率的浪费，重则导致设计方向的错误。

那么web端列表展示页面有什么样的特点呢？

产品原型构思上：

1. 大量重复的常见组件对于展示内容的选择、筛选；
2. 不同页面的设计区别主要在于对于后台数据字段的筛选展示。

对于特点1，其实这些组件包括的功能主要就是筛选、搜索、时间组件等，我们可以通过类似Axure Shop这种网站，再结合一些竞品去找到适合你产品的组件进行一些修改，之后就可以一直服用了。

对于特点2，列表项的内容展示难点一是在于展示字段的设置，这部分需要对业务有比较透彻的了解，这里不多做赘述。

另一点则是如何快速地将你选择的模拟出选择字段填入列表、去营造一个比较真实的原型。因为有时候，仅仅通过辅助说明并不能很好地展现你深思熟虑后的字段设计，而模拟能让大家在评审时能更快速精准地理解意图，这就是这篇文章主要解决的问题。

讲了这么多前戏，终于点到了文章的标题，如何用中继器来做列表？

一、什么是中继器？

中继器提供了给重复使用的组件赋值的可能性，这样对于某些大量重复使用的组件，我们就不需要点开每一个组建区写它单独的值了。这是一个在特定需求下大量提高效率的方式。

二、为什么列表原型选用中继器？

第一，为了解决对齐量太大的问题。

如果不用中继器，我们看到这个GIF，我们就要针对每一个存在的数字进行排列。当数量太大的时候工作量就大，而且每次操作都不容易。

第二，解决了数字定义的麻烦，不再需要一次次地手输。

可以实现组件的筛选功能和列表自带的应用场景。对于一个10*10以上的矩阵列表，采用中继器就已经能节省大量效率。可以先看如下效果对比。

首先在10*10左右的内容量下的对比（数据及字段经过一定处理，不用太在意细节）：

可以看到这个是我选中所有原件后的效果，每一个有意义的文字都是由单一组件构成的，在这种情况下效率的低下有如下原因：

1. 对齐的效率略低，虽然可以使用水平垂直等功能，但单个原件的位置移动总会引起整体一轮操作重排；
2. 修改原件内容需要一一修改，如果采用复制黏贴使每列内容：首行展示字段设计思路，后面复制行占位，则后续每一次复制更改常需要重新排列对齐各组件。如需对一列的10个内容进行差异化赋值，更全面真实展现字段内容，则需要一一赋值；
3. 复用性不高：下一次设计类似列表页面的时候，套用通用性低，还面临需要对每个组件进行修改的问题。

那么如果采用中继器是什么效果呢？

选中之后，只有标题栏和标题设计的字段，外加一个中继器列表，而后续的迭代修改我们只需改变标题栏文本框的字段、再加上修改中继器赋值框内的值、和组件分布在每行的位置就可以起到修改设计的结果了。如图：

虽然在10*10的数据量下，第一次的列表设计效率没有那么惊人，但是在以下这几个点会有显著提升：

• 对于后续迭代的效率提升；
• 后续类似涉及模块组件复用的修改设计非常方便。

更别说使用中继器还能实现中继器自带的各种排序和筛选功能，对整体页面的交互提供基础。

你们可能会说，用中继器修改不也是通过更改赋值框内的数据吗、不还是需要大量写入操作吗？

小伙伴别怕，这个其实就是中继器最厉害的地方了，中继器的数值框是支持复制黏贴的。在下文我也会告诉大家本文最核心的地方，通过Excel生成100*100数据量的随机数据，真实模拟生产效果，还请大家耐心看下去。

那么在这之前先给大家看一下100*100的最终效果，不仅是数字，文字，特殊符号都能进行随机排列哦。

100行列表随机仿真内容展示：

对于该中继器列表进行排序、搜索的效果：

那具体怎么操作呢？接下来会一步一步教大家实现。