編輯導(dǎo)語：數(shù)據(jù)處理恐怕是產(chǎn)品人們繞不過的話題。面對繁瑣的數(shù)據(jù)，我們又有什么小竅門可以使用呢？本篇文章里，作者就利用中繼器和Excel來設(shè)計(jì)列表、并記錄了web端列表設(shè)計(jì)的過程。讓我們一起來看一下吧。

相信許多從事B端的產(chǎn)品小伙伴都會對列表項(xiàng)設(shè)計(jì)中大量的繁瑣數(shù)據(jù)展示有所感觸，這篇文章就通過記錄一個web端列表設(shè)計(jì)的實(shí)例過程，來向大家展示——如何使用中繼器和一些Excel的小工具幫助我們提升原型設(shè)計(jì)中的效率。

內(nèi)容較長，但相信會對你有所幫助。當(dāng)然方法和思路同樣適用于從事C端的小伙伴。

B端產(chǎn)品相較于C端會更多地、更直接地涉及到大量數(shù)據(jù)的處理設(shè)計(jì)，因?yàn)樵贐端產(chǎn)品中，許多情況下我們都要通過對大量收集到的數(shù)據(jù)進(jìn)行處理分析，從而提升目標(biāo)用戶的業(yè)務(wù)效率。

那么列表則是對于數(shù)據(jù)分析展現(xiàn)最常見的一種產(chǎn)品模塊了。

這里有個tips：對于任何產(chǎn)品的設(shè)計(jì)，我們最好都在分析了功能模塊的特點(diǎn)之后再進(jìn)行原型繪制，否則埋頭苦干可能會造成效率的浪費(fèi)，重則導(dǎo)致設(shè)計(jì)方向的錯誤。

那么web端列表展示頁面有什么樣的特點(diǎn)呢？

產(chǎn)品原型構(gòu)思上：

1. 大量重復(fù)的常見組件對于展示內(nèi)容的選擇、篩選；
2. 不同頁面的設(shè)計(jì)區(qū)別主要在于對于后臺數(shù)據(jù)字段的篩選展示。

對于特點(diǎn)1，其實(shí)這些組件包括的功能主要就是篩選、搜索、時間組件等，我們可以通過類似Axure Shop這種網(wǎng)站，再結(jié)合一些競品去找到適合你產(chǎn)品的組件進(jìn)行一些修改，之后就可以一直服用了。

對于特點(diǎn)2，列表項(xiàng)的內(nèi)容展示難點(diǎn)一是在于展示字段的設(shè)置，這部分需要對業(yè)務(wù)有比較透徹的了解，這里不多做贅述。

另一點(diǎn)則是如何快速地將你選擇的模擬出選擇字段填入列表、去營造一個比較真實(shí)的原型。因?yàn)橛袝r候，僅僅通過輔助說明并不能很好地展現(xiàn)你深思熟慮后的字段設(shè)計(jì)，而模擬能讓大家在評審時能更快速精準(zhǔn)地理解意圖，這就是這篇文章主要解決的問題。

講了這么多前戲，終于點(diǎn)到了文章的標(biāo)題，如何用中繼器來做列表？

一、什么是中繼器？

中繼器提供了給重復(fù)使用的組件賦值的可能性，這樣對于某些大量重復(fù)使用的組件，我們就不需要點(diǎn)開每一個組建區(qū)寫它單獨(dú)的值了。這是一個在特定需求下大量提高效率的方式。

二、為什么列表原型選用中繼器？

第一，為了解決對齊量太大的問題。

如果不用中繼器，我們看到這個GIF，我們就要針對每一個存在的數(shù)字進(jìn)行排列。當(dāng)數(shù)量太大的時候工作量就大，而且每次操作都不容易。

第二，解決了數(shù)字定義的麻煩，不再需要一次次地手輸。

可以實(shí)現(xiàn)組件的篩選功能和列表自帶的應(yīng)用場景。對于一個10*10以上的矩陣列表，采用中繼器就已經(jīng)能節(jié)省大量效率。可以先看如下效果對比。

首先在10*10左右的內(nèi)容量下的對比（數(shù)據(jù)及字段經(jīng)過一定處理，不用太在意細(xì)節(jié)）：

可以看到這個是我選中所有原件后的效果，每一個有意義的文字都是由單一組件構(gòu)成的，在這種情況下效率的低下有如下原因：

1. 對齊的效率略低，雖然可以使用水平垂直等功能，但單個原件的位置移動總會引起整體一輪操作重排；
2. 修改原件內(nèi)容需要一一修改，如果采用復(fù)制黏貼使每列內(nèi)容：首行展示字段設(shè)計(jì)思路，后面復(fù)制行占位，則后續(xù)每一次復(fù)制更改常需要重新排列對齊各組件。如需對一列的10個內(nèi)容進(jìn)行差異化賦值，更全面真實(shí)展現(xiàn)字段內(nèi)容，則需要一一賦值；
3. 復(fù)用性不高：下一次設(shè)計(jì)類似列表頁面的時候，套用通用性低，還面臨需要對每個組件進(jìn)行修改的問題。

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

選中之后，只有標(biāo)題欄和標(biāo)題設(shè)計(jì)的字段，外加一個中繼器列表，而后續(xù)的迭代修改我們只需改變標(biāo)題欄文本框的字段、再加上修改中繼器賦值框內(nèi)的值、和組件分布在每行的位置就可以起到修改設(shè)計(jì)的結(jié)果了。如圖：

雖然在10*10的數(shù)據(jù)量下，第一次的列表設(shè)計(jì)效率沒有那么驚人，但是在以下這幾個點(diǎn)會有顯著提升：

• 對于后續(xù)迭代的效率提升；
• 后續(xù)類似涉及模塊組件復(fù)用的修改設(shè)計(jì)非常方便。

更別說使用中繼器還能實(shí)現(xiàn)中繼器自帶的各種排序和篩選功能，對整體頁面的交互提供基礎(chǔ)。

你們可能會說，用中繼器修改不也是通過更改賦值框內(nèi)的數(shù)據(jù)嗎、不還是需要大量寫入操作嗎？

小伙伴別怕，這個其實(shí)就是中繼器最厲害的地方了，中繼器的數(shù)值框是支持復(fù)制黏貼的。在下文我也會告訴大家本文最核心的地方，通過Excel生成100*100數(shù)據(jù)量的隨機(jī)數(shù)據(jù)，真實(shí)模擬生產(chǎn)效果，還請大家耐心看下去。

那么在這之前先給大家看一下100*100的最終效果，不僅是數(shù)字，文字，特殊符號都能進(jìn)行隨機(jī)排列哦。

100行列表隨機(jī)仿真內(nèi)容展示：

對于該中繼器列表進(jìn)行排序、搜索的效果：

那具體怎么操作呢？接下來會一步一步教大家實(shí)現(xiàn)。

01

拖入一個‘表格’組件將其調(diào)節(jié)成1行*你想要的列數(shù)，并在每列填入你需要的列表字段。如下圖（暫且忽略圖中小閃電交互組件）：

目的：這個表格將作為列表的標(biāo)題欄，后續(xù)上下拖動列表查看內(nèi)用時，保證第一行列表位置固定。

02

拖入‘中繼器組件’，并在頁面中雙擊該中繼器進(jìn)入其編輯頁。

插入與步驟一表格中列數(shù)對應(yīng)的文本標(biāo)簽，全選水平對齊，垂直方向則一一對應(yīng)列表標(biāo)題欄字段位置。

并將整個中繼器原件緊貼步驟1表格（下圖中繼器編輯頁中豎線是我作為每列分割線使用）：

完成編輯，退出編輯頁，我們就可以得到如下3行內(nèi)容一摸一樣的列表了。

03

要生成100行數(shù)據(jù)的話，我們應(yīng)該怎么辦？先說一下最常見的傳統(tǒng)方法：選中中繼器，對其樣式內(nèi)進(jìn)行添加。

眾所周知，我們可以手動對新的一行輸入4、5、6、7、8、9、10來達(dá)到生成10行一樣內(nèi)容列表的目的。但是100行呢？

這里我們第一次引入Excel的運(yùn)用——Excel下拉遞增功能。

新建一個Excel sheet，對A1、A2單元格分別輸入1、2，然后選中2個單元格，并將鼠標(biāo)指向右下角。

當(dāng)出現(xiàn)黑色小十字時下拉至100行，這樣我們就生成了一列1—100的一百行數(shù)據(jù)。全選復(fù)制然后黏貼至中繼器的Column0中，就可以擁有100行一模一樣的列表行內(nèi)容了。

在這里，我們利用了Excel方便的數(shù)據(jù)生成能力和中繼器支持的黏貼復(fù)制功能。

04

然后我們要對中繼器的每一行內(nèi)容賦值。編輯中繼器第一列，然后使每一行column在交互中和我們1-10個文本標(biāo)簽對應(yīng)。對應(yīng)好之后我們就可以得到如下的圖片：

到這一步之后，我們只需要對每一列輸入我們想要的數(shù)值就可以了。

05

那么現(xiàn)在到了模擬真實(shí)列表的最關(guān)鍵步驟了。如何讓每一列的內(nèi)容都盡可能隨機(jī)分布，讓整個列表所呈現(xiàn)的內(nèi)容更豐滿、實(shí)現(xiàn)更多的內(nèi)容組合性？

這里我們需要再一次引入Excel來幫助我們，相較于前一步簡單的1—100的數(shù)字生成，我們現(xiàn)在要利用到Excel的隨機(jī)數(shù)生成函數(shù)。

那么現(xiàn)在有以下兩種情況，分析標(biāo)題欄中我們設(shè)置想要展示的字段內(nèi)容可以分為兩類：

1. 2,3,4,5行等參數(shù)類的隨機(jī)數(shù)；
2. 文字類的隨機(jī)，這里的隨記指的是打亂分部順序的隨機(jī)。

首先我們來講對于第一類生成大量隨機(jī)數(shù)值的情況：

新建一張Excel sheet表，在A1行輸入引號內(nèi)的內(nèi)容“=rand()”，然后按住左下角的小十字（Excel）下拉至100行，你就會得到100行隨機(jī)生成的0-1的小數(shù)。

這是Excel隨機(jī)生成數(shù)據(jù)的函數(shù)，也是后面更復(fù)雜情況的最關(guān)鍵的基礎(chǔ)。

如現(xiàn)在你需要得到的數(shù)值不是0—100而是0—2500，你只需要在“0—100隨機(jī)生成函數(shù)”的基礎(chǔ)上乘（*）一個加權(quán)數(shù)值就可以得到你想要范圍的隨機(jī)數(shù)了。

該需求下為設(shè)置一個單元格為引號內(nèi)全部內(nèi)容”=rand()*2500″然后再次右下角下拉至100行即可。

對于更復(fù)雜一些的需求，如我有一個100分值的計(jì)分項(xiàng)，而我只想生成的隨機(jī)數(shù)在40-100范圍浮動，那么在新的A3單元格輸入函數(shù)“=rand（）*100*0.6+40”再次下拉即可。

其中40是補(bǔ)償值，其實(shí)這個就是用二元一次函數(shù)y=kx+b表達(dá)你想要的值。下方截圖，注釋說明。

對于這三列生成的數(shù)字小數(shù)點(diǎn)保留的較長，我們可以根據(jù)需要自行設(shè)置單元格格式

06

現(xiàn)在我們已經(jīng)學(xué)會了數(shù)字類的隨機(jī)分布，那么那些文字類的怎么辦呢？

如我們想對“杭州、三亞、上海、北京、天津、長沙、成都這8個城市名稱在100行中任意排序”，其實(shí)我們也只需要兩行Excel就可以搞定了。

1）設(shè)置參照行：一列由函數(shù)“=rand()”生成的100行隨機(jī)數(shù)

2）另一列由8行分別包含8個城市名字為一組的單元格，復(fù)制這八行內(nèi)容，分別粘貼在尾部12次構(gòu)成96行總的城市數(shù)。

但是現(xiàn)在城市分布是按我們制定順序分布的。為了打亂順序起到隨機(jī)的效果，我們只需選中第一列參考列的100個數(shù)然后在菜單中找到排序，選擇升序或者降序任意一個，然后在彈出窗選擇下圖畫紅圈選項(xiàng)確認(rèn)，我們的文字列就業(yè)被打亂了。

成功實(shí)現(xiàn)了一次之后，其余的隨機(jī)文字字段列分布都是一樣的方式。

而且我們可以將后續(xù)其他文字項(xiàng)放在A3、A4、A5等單元格，這樣一次排序參照列A就可以實(shí)現(xiàn)全局?jǐn)?shù)據(jù)的隨機(jī)，最后將Excel所有內(nèi)容復(fù)制粘貼到中繼器數(shù)值編輯表內(nèi)，我們就可以模擬出相對真實(shí)的列表數(shù)據(jù)啦。

通過這篇文章，相信大家對于怎么制作大量數(shù)據(jù)的列表有了一定了解。這還只是一個基礎(chǔ)，有了這個大列表，我們就可以再此基礎(chǔ)上做出模糊篩選、列內(nèi)容排序等功能了。

另外對于該類展示頁面，聽說圖表和列表一起展示才更配哦。之后也會給大家做一篇如何利用echart做出以下GIF動圖中效果的文章。

本文由 @是9分吶 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議