B端產(chǎn)品經(jīng)理如何設計列表邏輯

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

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

表單頁(yè)：主要用于添加、修改數據對象的操作型頁(yè)面，會(huì )包含多個(gè)表單控件的處理

詳情頁(yè)：用于展示某條數據對象的詳細內容、數據的頁(yè)面

列表頁(yè)：用于展示大量同類(lèi)型的數據，包括對該數據的排序、篩選、查看、刪除等

表盤(pán)頁(yè)：用于展示數據和圖表等頁(yè)面，也叫做儀表盤(pán)，即數據分析

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

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

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

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

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

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

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

舉個(gè)例子：

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

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

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

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

教師負責輔導學(xué)生學(xué)習，依據其職稱(chēng)和輔導時(shí)間產(chǎn)生輔導費用。

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

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

招生人員（招生人員姓名，性別，招生人員職稱(chēng)）

教師（教師姓名，性別，教師職稱(chēng))

學(xué)生（學(xué)生姓名，性別，入學(xué)成績(jì)，招收人員姓名）

輔導（教師姓名，學(xué)生姓名，教師職稱(chēng)，輔導時(shí)間）

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

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

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。