在B端系統(tǒng)中，列表是一個(gè)非常常用的功能。不論是列表頁(yè)的設(shè)計(jì)還是單獨(dú)的列表，都會(huì)涉及到列表的邏輯。這篇文章，我們來(lái)梳理一下。

本文所講的B端產(chǎn)品集中在后臺(tái)系統(tǒng)領(lǐng)域，一般后臺(tái)系統(tǒng)的頁(yè)面分為表單頁(yè)，詳情頁(yè)、列表頁(yè)、表盤(pán)頁(yè)面。

• 表單頁(yè)：主要用于添加、修改數(shù)據(jù)對(duì)象的操作型頁(yè)面，會(huì)包含多個(gè)表單控件的處理
• 詳情頁(yè)：用于展示某條數(shù)據(jù)對(duì)象的詳細(xì)內(nèi)容、數(shù)據(jù)的頁(yè)面
• 列表頁(yè)：用于展示大量同類(lèi)型的數(shù)據(jù)，包括對(duì)該數(shù)據(jù)的排序、篩選、查看、刪除等
• 表盤(pán)頁(yè)：用于展示數(shù)據(jù)和圖表等頁(yè)面，也叫做儀表盤(pán)，即數(shù)據(jù)分析

那么如何設(shè)計(jì)好每一個(gè)列表頁(yè)面之間的邏輯呢？

首先要明白當(dāng)前列表主要表達(dá)的內(nèi)容是什么，比如在WMS系統(tǒng)中，有庫(kù)存列表、入庫(kù)列表、出庫(kù)列表、庫(kù)位管理列表，根據(jù)名字就可以得知這個(gè)列表所要展示給用戶(hù)的內(nèi)容是什么；

B 端产品经理如何快速成长？

产品与业务架构主要是将整个业务工作流进行分层，梳理，然后抽象出一个个需求，将业务需求与产品合情合理的映射起来，最终使业务数据在产品中流动，执行，记录，使用。

查看详情 >

其次，需要理清楚每一個(gè)列表之間的關(guān)聯(lián)關(guān)系，比如，入庫(kù)列表跟庫(kù)存列表之間是以商品為載體，庫(kù)存列表的主體是商品，以商品為維度進(jìn)行庫(kù)存的統(tǒng)計(jì)，而入庫(kù)列表則是以每一條入庫(kù)記錄為主體，二者的關(guān)系是一對(duì)多，也可以理解為，入庫(kù)列表的主鍵為入庫(kù)編號(hào)，庫(kù)存列表的主鍵為商品編號(hào)，一對(duì)多的關(guān)系怎么設(shè)計(jì)數(shù)據(jù)庫(kù)結(jié)構(gòu)呢？

簡(jiǎn)單來(lái)講：

1:1關(guān)系一個(gè)表實(shí)現(xiàn)

1:N關(guān)系需要兩個(gè)表實(shí)現(xiàn)，把1的主鍵放在N的表里作為外鍵

N:N關(guān)系需要三個(gè)表實(shí)現(xiàn)，需要將兩個(gè)表的主鍵組成第三個(gè)表格

舉個(gè)例子：

某自學(xué)考試社會(huì)助學(xué)點(diǎn)有教師若干名，招生人員若干名，學(xué)生若干名。

教師和招生人員的基本屬性為：姓名，性別，職稱(chēng)。

學(xué)生的基本屬性為：姓名，性別，入學(xué)成績(jī)。

招生人員負(fù)責(zé)招收學(xué)生，記錄招生人數(shù)。

教師負(fù)責(zé)輔導(dǎo)學(xué)生學(xué)習(xí)，依據(jù)其職稱(chēng)和輔導(dǎo)時(shí)間產(chǎn)生輔導(dǎo)費(fèi)用。

根據(jù)上述信息整理出如下E-R圖，可見(jiàn)招生人員與學(xué)生之間是一對(duì)多的關(guān)系，學(xué)生與教師之間是多對(duì)多的關(guān)系，故招生和學(xué)生之間是兩張表，而學(xué)生和教師之間是三張表，兩部分合在一起，減去學(xué)生重復(fù)的表，總共是四張表。

整理出的四張表格如下，加粗部分為該表格的主鍵和外鍵。

• 招生人員（招生人員姓名，性別，招生人員職稱(chēng)）
• 教師（教師姓名，性別，教師職稱(chēng))
• 學(xué)生（學(xué)生姓名，性別，入學(xué)成績(jī)，招收人員姓名）
• 輔導(dǎo)（教師姓名，學(xué)生姓名，教師職稱(chēng)，輔導(dǎo)時(shí)間）

建表的結(jié)構(gòu)懂了，下面就是列表數(shù)據(jù)的問(wèn)題了，我們知道一個(gè)列表頁(yè)面展示的數(shù)據(jù)是非常多的，產(chǎn)品設(shè)計(jì)原型的時(shí)候其實(shí)不能太過(guò)死板，所以學(xué)了數(shù)據(jù)庫(kù)的產(chǎn)品剛開(kāi)始也會(huì)存在一定的弊端，會(huì)把每一個(gè)列表頁(yè)當(dāng)作一張表，其實(shí)不然，列表頁(yè)是給用戶(hù)看的，用戶(hù)想看到什么，我們就給他查詢(xún)什么展示出來(lái)，所以一個(gè)列表頁(yè)面并非就是一張數(shù)據(jù)表，而是技術(shù)人員通過(guò)聯(lián)表查詢(xún)將多張表格的數(shù)據(jù)查詢(xún)出來(lái)展示在一張列表頁(yè)面，也就是用戶(hù)看到的一張張的表格。

清楚表的規(guī)則之后，就能夠很好的理清楚每一個(gè)列表頁(yè)面的信息、列表之間的關(guān)聯(lián)關(guān)系，從而更好的跟技術(shù)人員進(jìn)行溝通，雖然產(chǎn)品可以不懂技術(shù)，但是知道一些基礎(chǔ)的技術(shù)知識(shí)，總是對(duì)工作有益，當(dāng)時(shí)，學(xué)會(huì)了一定的技術(shù)知識(shí)，也不能跟產(chǎn)品設(shè)計(jì)的思路混淆。