編輯導語：數據處理恐怕是產品人們繞不過的話題。面對繁瑣的數據，我們又有什麼小竅門可以使用呢？本篇文章裏，作者就利用中繼器和Excel來設計列表、並記錄了web端列表設計的過程。讓我們一起來看一下吧。
相信許多從事B端的產品小夥伴都會對列表項設計中大量的繁瑣數據展示有所感觸，這篇文章就通過記錄一個web端列表設計的實例過程，來向大家展示——如何使用中繼器和一些Excel的小工具幫助我們提升原型設計中的效率。
內容較長，但相信會對你有所幫助。當然方法和思路同樣適用於從事C端的小夥伴。
B端產品相較於C端會更多地、更直接地涉及到大量數據的處理設計，因為在B端產品中，許多情況下我們都要通過對大量收集到的數據進行處理分析，從而提升目標用户的業務效率。
那麼列表則是對於數據分析展現最常見的一種產品模塊了。
這裏有個tips：對於任何產品的設計，我們最好都在分析了功能模塊的特點之後再進行原型繪製，否則埋頭苦幹可能會造成效率的浪費，重則導致設計方向的錯誤。
那麼web端列表展示頁面有什麼樣的特點呢？
產品原型構思上：
- 大量重複的常見組件對於展示內容的選擇、篩選；
- 不同頁面的設計區別主要在於對於後台數據字段的篩選展示。
對於特點1，其實這些組件包括的功能主要就是篩選、搜索、時間組件等，我們可以通過類似Axure Shop這種網站，再結合一些競品去找到適合你產品的組件進行一些修改，之後就可以一直服用了。
對於特點2，列表項的內容展示難點一是在於展示字段的設置，這部分需要對業務有比較透徹的瞭解，這裏不多做贅述。
另一點則是如何快速地將你選擇的模擬出選擇字段填入列表、去營造一個比較真實的原型。因為有時候，僅僅通過輔助説明並不能很好地展現你深思熟慮後的字段設計，而模擬能讓大家在評審時能更快速精準地理解意圖，這就是這篇文章主要解決的問題。
講了這麼多前戲，終於點到了文章的標題，如何用中繼器來做列表？
一、什麼是中繼器？中繼器提供了給重複使用的組件賦值的可能性，這樣對於某些大量重複使用的組件，我們就不需要點開每一個組建區寫它單獨的值了。這是一個在特定需求下大量提高效率的方式。
二、為什麼列表原型選用中繼器？第一，為了解決對齊量太大的問題。
如果不用中繼器，我們看到這個GIF，我們就要針對每一個存在的數字進行排列。當數量太大的時候工作量就大，而且每次操作都不容易。
第二，解決了數字定義的麻煩，不再需要一次次地手輸。
可以實現組件的篩選功能和列表自帶的應用場景。對於一個10*10以上的矩陣列表，採用中繼器就已經能節省大量效率。可以先看如下效果對比。
首先在10*10左右的內容量下的對比（數據及字段經過一定處理，不用太在意細節）：
可以看到這個是我選中所有原件後的效果，每一個有意義的文字都是由單一組件構成的，在這種情況下效率的低下有如下原因：
- 對齊的效率略低，雖然可以使用水平垂直等功能，但單個原件的位置移動總會引起整體一輪操作重排；
- 修改原件內容需要一一修改，如果採用複製黏貼使每列內容：首行展示字段設計思路，後面複製行佔位，則後續每一次複製更改常需要重新排列對齊各組件。如需對一列的10個內容進行差異化賦值，更全面真實展現字段內容，則需要一一賦值；
- 複用性不高：下一次設計類似列表頁面的時候，套用通用性低，還面臨需要對每個組件進行修改的問題。
那麼如果採用中繼器是什麼效果呢？
選中之後，只有標題欄和標題設計的字段，外加一箇中繼器列表，而後續的迭代修改我們只需改變標題欄文本框的字段、再加上修改中繼器賦值框內的值、和組件分佈在每行的位置就可以起到修改設計的結果了。如圖：
雖然在10*10的數據量下，第一次的列表設計效率沒有那麼驚人，但是在以下這幾個點會有顯著提升：
- 對於後續迭代的效率提升；
- 後續類似涉及模塊組件複用的修改設計非常方便。
更別説使用中繼器還能實現中繼器自帶的各種排序和篩選功能，對整體頁面的交互提供基礎。
你們可能會説，用中繼器修改不也是通過更改賦值框內的數據嗎、不還是需要大量寫入操作嗎？
小夥伴別怕，這個其實就是中繼器最厲害的地方了，中繼器的數值框是支持複製黏貼的。在下文我也會告訴大家本文最核心的地方，通過Excel生成100*100數據量的隨機數據，真實模擬生產效果，還請大家耐心看下去。
那麼在這之前先給大家看一下100*100的最終效果，不僅是數字，文字，特殊符號都能進行隨機排列哦。
100行列表隨機仿真內容展示：
對於該中繼器列表進行排序、搜索的效果：
那具體怎麼操作呢？接下來會一步一步教大家實現。
01拖入一個‘表格’組件將其調節成1行*你想要的列數，並在每列填入你需要的列表字段。如下圖（暫且忽略圖中小閃電交互組件）：
目的：這個表格將作為列表的標題欄，後續上下拖動列表查看內用時，保證第一行列表位置固定。
02拖入‘中繼器組件’，並在頁面中雙擊該中繼器進入其編輯頁。
插入與步驟一表格中列數對應的文本標籤，全選水平對齊，垂直方向則一一對應列表標題欄字段位置。
並將整個中繼器原件緊貼步驟1表格（下圖中繼器編輯頁中豎線是我作為每列分割線使用）：
完成編輯，退出編輯頁，我們就可以得到如下3行內容一摸一樣的列表了。
03要生成100行數據的話，我們應該怎麼辦？先説一下最常見的傳統方法：選中中繼器，對其樣式內進行添加。
眾所周知，我們可以手動對新的一行輸入4、5、6、7、8、9、10來達到生成10行一樣內容列表的目的。但是100行呢？
這裏我們第一次引入Excel的運用——Excel下拉遞增功能。
新建一個Excel sheet，對A1、A2單元格分別輸入1、2，然後選中2個單元格，並將鼠標指向右下角。
當出現黑色小十字時下拉至100行，這樣我們就生成了一列1—100的一百行數據。全選複製然後黏貼至中繼器的Column0中，就可以擁有100行一模一樣的列表行內容了。
在這裏，我們利用了Excel方便的數據生成能力和中繼器支持的黏貼複製功能。
04然後我們要對中繼器的每一行內容賦值。編輯中繼器第一列，然後使每一行column在交互中和我們1-10個文本標籤對應。對應好之後我們就可以得到如下的圖片：
到這一步之後，我們只需要對每一列輸入我們想要的數值就可以了。
05那麼現在到了模擬真實列表的最關鍵步驟了。如何讓每一列的內容都儘可能隨機分佈，讓整個列表所呈現的內容更豐滿、實現更多的內容組合性？
這裏我們需要再一次引入Excel來幫助我們，相較於前一步簡單的1—100的數字生成，我們現在要利用到Excel的隨機數生成函數。
那麼現在有以下兩種情況，分析標題欄中我們設置想要展示的字段內容可以分為兩類：
- 2,3,4,5行等參數類的隨機數；
- 文字類的隨機，這裏的隨記指的是打亂分部順序的隨機。
首先我們來講對於第一類生成大量隨機數值的情況：
新建一張Excel sheet表，在A1行輸入引號內的內容“=rand”，然後按住左下角的小十字（Excel）下拉至100行，你就會得到100行隨機生成的0-1的小數。
這是Excel隨機生成數據的函數，也是後面更復雜情況的最關鍵的基礎。
如現在你需要得到的數值不是0—100而是0—2500，你只需要在“0—100隨機生成函數”的基礎上乘（*）一個加權數值就可以得到你想要範圍的隨機數了。
該需求下為設置一個單元格為引號內全部內容”=rand*2500″然後再次右下角下拉至100行即可。
對於更復雜一些的需求，如我有一個100分值的計分項，而我只想生成的隨機數在40-100範圍浮動，那麼在新的A3單元格輸入函數“=rand*100*0.6+40”再次下拉即可。
其中40是補償值，其實這個就是用二元一次函數y=kx+b表達你想要的值。下方截圖，註釋説明。
對於這三列生成的數字小數點保留的較長，我們可以根據需要自行設置單元格格式
06現在我們已經學會了數字類的隨機分佈，那麼那些文字類的怎麼辦呢？
如我們想對“杭州、三亞、上海、北京、天津、長沙、成都這8個城市名稱在100行中任意排序”，其實我們也只需要兩行Excel就可以搞定了。
1）設置參照行：一列由函數“=rand”生成的100行隨機數
2）另一列由8行分別包含8個城市名字為一組的單元格，複製這八行內容，分別粘貼在尾部12次構成96行總的城市數。
但是現在城市分佈是按我們制定順序分佈的。為了打亂順序起到隨機的效果，我們只需選中第一列參考列的100個數然後在菜單中找到排序，選擇升序或者降序任意一個，然後在彈出窗選擇下圖畫紅圈選項確認，我們的文字列就業被打亂了。
成功實現了一次之後，其餘的隨機文字字段列分佈都是一樣的方式。
而且我們可以將後續其他文字項放在A3、A4、A5等單元格，這樣一次排序參照列A就可以實現全局數據的隨機，最後將Excel所有內容複製粘貼到中繼器數值編輯表內，我們就可以模擬出相對真實的列表數據啦。
通過這篇文章，相信大家對於怎麼製作大量數據的列表有了一定了解。這還只是一個基礎，有了這個大列表，我們就可以再此基礎上做出模糊篩選、列內容排序等功能了。
另外對於該類展示頁面，聽説圖表和列表一起展示才更配哦。之後也會給大家做一篇如何利用echart做出以下GIF動圖中效果的文章。
本文由 @是9分吶 原創發佈於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於 CC0 協議