起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識如何用中繼器和Excel做一個功能強大、數據量大的B端列表
編輯導語：數據處理恐怕是產品人們繞不過的話題。面對繁瑣的數據，我們又有什么小竅門可以使用呢？本篇文章里，作者就利用中繼器和Excel來設計列表、并記錄了web端列表設計的過程。讓我們一起來看一下吧。
相信許多從事B端的產品小伙伴都會對列表項設計中大量的繁瑣數據展示有所感觸，這篇文章就通過記錄一個web端列表設計的實例過程，來向大家展示——如何使用中繼器和一些Excel的小工具幫助我們提升原型設計中的效率。
內容較長，但相信會對你有所幫助。當然方法和思路同樣適用于從事C端的小伙伴。
B端產品相較于C端會更多地、更直接地涉及到大量數據的處理設計，因為在B端產品中，許多情況下我們都要通過對大量收集到的數據進行處理分析，從而提升目標用戶的業(yè)務效率。
那么列表則是對于數據分析展現最常見的一種產品模塊了。
這里有個tips：對于任何產品的設計，我們最好都在分析了功能模塊的特點之后再進行原型繪制，否則埋頭苦干可能會造成效率的浪費，重則導致設計方向的錯誤。
那么web端列表展示頁面有什么樣的特點呢？
產品原型構思上：
- 大量重復的常見組件對于展示內容的選擇、篩選；
- 不同頁面的設計區(qū)別主要在于對于后臺數據字段的篩選展示。
對于特點1，其實這些組件包括的功能主要就是篩選、搜索、時間組件等，我們可以通過類似Axure Shop這種網站，再結合一些競品去找到適合你產品的組件進行一些修改，之后就可以一直服用了。
對于特點2，列表項的內容展示難點一是在于展示字段的設置，這部分需要對業(yè)務有比較透徹的了解，這里不多做贅述。
另一點則是如何快速地將你選擇的模擬出選擇字段填入列表、去營造一個比較真實的原型。因為有時候，僅僅通過輔助說明并不能很好地展現你深思熟慮后的字段設計，而模擬能讓大家在評審時能更快速精準地理解意圖，這就是這篇文章主要解決的問題。
講了這么多前戲，終于點到了文章的標題，如何用中繼器來做列表？
一、什么是中繼器？
中繼器提供了給重復使用的組件賦值的可能性，這樣對于某些大量重復使用的組件，我們就不需要點開每一個組建區(qū)寫它單獨的值了。這是一個在特定需求下大量提高效率的方式。
二、為什么列表原型選用中繼器？
第一，為了解決對齊量太大的問題。
如果不用中繼器，我們看到這個GIF，我們就要針對每一個存在的數字進行排列。當數量太大的時候工作量就大，而且每次操作都不容易。
第二，解決了數字定義的麻煩，不再需要一次次地手輸。
可以實現組件的篩選功能和列表自帶的應用場景。對于一個10*10以上的矩陣列表，采用中繼器就已經能節(jié)省大量效率?？梢韵瓤慈缦滦Ч麑Ρ取?/p>
首先在10*10左右的內容量下的對比（數據及字段經過一定處理，不用太在意細節(jié)）：
可以看到這個是我選中所有原件后的效果，每一個有意義的文字都是由單一組件構成的，在這種情況下效率的低下有如下原因：
- 對齊的效率略低，雖然可以使用水平垂直等功能，但單個原件的位置移動總會引起整體一輪操作重排；
- 修改原件內容需要一一修改，如果采用復制黏貼使每列內容：首行展示字段設計思路，后面復制行占位，則后續(xù)每一次復制更改常需要重新排列對齊各組件。如需對一列的10個內容進行差異化賦值，更全面真實展現字段內容，則需要一一賦值；
- 復用性不高：下一次設計類似列表頁面的時候，套用通用性低，還面臨需要對每個組件進行修改的問題。
那么如果采用中繼器是什么效果呢？
選中之后，只有標題欄和標題設計的字段，外加一個中繼器列表，而后續(xù)的迭代修改我們只需改變標題欄文本框的字段、再加上修改中繼器賦值框內的值、和組件分布在每行的位置就可以起到修改設計的結果了。如圖：
雖然在10*10的數據量下，第一次的列表設計效率沒有那么驚人，但是在以下這幾個點會有顯著提升：
- 對于后續(xù)迭代的效率提升；
- 后續(xù)類似涉及模塊組件復用的修改設計非常方便。
更別說使用中繼器還能實現中繼器自帶的各種排序和篩選功能，對整體頁面的交互提供基礎。
你們可能會說，用中繼器修改不也是通過更改賦值框內的數據嗎、不還是需要大量寫入操作嗎？
小伙伴別怕，這個其實就是中繼器最厲害的地方了，中繼器的數值框是支持復制黏貼的。在下文我也會告訴大家本文最核心的地方，通過Excel生成100*100數據量的隨機數據，真實模擬生產效果，還請大家耐心看下去。
那么在這之前先給大家看一下100*100的最終效果，不僅是數字，文字，特殊符號都能進行隨機排列哦。
100行列表隨機仿真內容展示：
對于該中繼器列表進行排序、搜索的效果：
那具體怎么操作呢？接下來會一步一步教大家實現。
01
拖入一個‘表格’組件將其調節(jié)成1行*你想要的列數，并在每列填入你需要的列表字段。如下圖（暫且忽略圖中小閃電交互組件）：
目的：這個表格將作為列表的標題欄，后續(xù)上下拖動列表查看內用時，保證第一行列表位置固定。
02
拖入‘中繼器組件’，并在頁面中雙擊該中繼器進入其編輯頁。
插入與步驟一表格中列數對應的文本標簽，全選水平對齊，垂直方向則一一對應列表標題欄字段位置。
并將整個中繼器原件緊貼步驟1表格（下圖中繼器編輯頁中豎線是我作為每列分割線使用）：
完成編輯，退出編輯頁，我們就可以得到如下3行內容一摸一樣的列表了。
03
要生成100行數據的話，我們應該怎么辦？先說一下最常見的傳統(tǒng)方法：選中中繼器，對其樣式內進行添加。
眾所周知，我們可以手動對新的一行輸入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個數然后在菜單中找到排序，選擇升序或者降序任意一個，然后在彈出窗選擇下圖畫紅圈選項確認，我們的文字列就業(yè)被打亂了。
成功實現了一次之后，其余的隨機文字字段列分布都是一樣的方式。
而且我們可以將后續(xù)其他文字項放在A3、A4、A5等單元格，這樣一次排序參照列A就可以實現全局數據的隨機，最后將Excel所有內容復制粘貼到中繼器數值編輯表內，我們就可以模擬出相對真實的列表數據啦。
通過這篇文章，相信大家對于怎么制作大量數據的列表有了一定了解。這還只是一個基礎，有了這個大列表，我們就可以再此基礎上做出模糊篩選、列內容排序等功能了。
另外對于該類展示頁面，聽說圖表和列表一起展示才更配哦。之后也會給大家做一篇如何利用echart做出以下GIF動圖中效果的文章。
本文由 @是9分吶 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于 CC0 協議
- 目前還沒評論，等你發(fā)揮！
