本文以SaaS平臺(tái)的數(shù)據(jù)篩選及數(shù)據(jù)列表作為分析的對(duì)象，結(jié)合案例，對(duì)數(shù)據(jù)列表的設(shè)計(jì)進(jìn)行了探究。

我們知道，數(shù)據(jù)列表承載著業(yè)務(wù)上的數(shù)據(jù)。針對(duì)不同場(chǎng)景、不同業(yè)務(wù)、不同戰(zhàn)略下的SaaS系統(tǒng)，客戶通過SaaS平臺(tái)實(shí)施業(yè)務(wù)管理，而每列每行的數(shù)據(jù)，就是業(yè)務(wù)顆粒度。每個(gè)顆粒度可能是一個(gè)訂單、一個(gè)商品、一個(gè)服務(wù)、一個(gè)潛在客戶、一條線索。如何對(duì)顆粒度進(jìn)行有效管理呢？

本文采用的分析方式是通過歸納、抽象的方法，得到SaaS系統(tǒng)的常見的列表設(shè)計(jì)方式，并基于抽象得到的模型進(jìn)行適當(dāng)?shù)臄U(kuò)展，提供關(guān)于SaaS平臺(tái)的列表設(shè)計(jì)創(chuàng)新解決方案。

一、常見的SaaS平臺(tái)列表設(shè)計(jì)及分析

本文以幾個(gè)機(jī)構(gòu)的SaaS平臺(tái)為例進(jìn)行說明。

他們分別是：有贊、易訂貨、校寶在線、知曉云、銷售易CRM，分別涉及到的行業(yè)是電商業(yè)務(wù)、零售業(yè)務(wù)、教育業(yè)務(wù)、數(shù)據(jù)后臺(tái)、銷售業(yè)務(wù)。

1. 有贊

有贊的管理后臺(tái)，是比較傳統(tǒng)一類的列表搜索模式。即采用了篩選區(qū)+列表展示區(qū)的模式。但又有一些不同的設(shè)計(jì)理念。

有贊管理后臺(tái)-訂單列表

有贊管理后臺(tái)-訂單列表

基于電商業(yè)務(wù)下，價(jià)格、交易額、利潤(rùn)、商品數(shù)量、訂單狀態(tài)等業(yè)務(wù)字段較為重要，需要對(duì)用戶進(jìn)行有效展示，增加可操作性。

在列表展示區(qū)，列字段增加了上下的圖標(biāo)。點(diǎn)擊該圖標(biāo)，進(jìn)行升序、降序上的排列。

不同地方在于，例如圖中所示，增加了序號(hào)的排序方式。序號(hào)上可以輸入數(shù)字，客戶可基于序號(hào)的大小進(jìn)行排序。

除此之外，還可以對(duì)商品進(jìn)行分組排序、熱門排序（根據(jù)瀏覽量、銷量等字段設(shè)置）。這是基于電商業(yè)務(wù)層面上較個(gè)性化的地方。這是字段差異化的地方之一。

差異化地方之二：訂單

由于每個(gè)訂單顯示不同的狀態(tài)（待付款、待發(fā)貨、已發(fā)貨、已完成、已關(guān)閉、退款中）。有贊的設(shè)計(jì)方式是，并不會(huì)把訂單的狀態(tài)放到篩選區(qū)域，而是采用平鋪的多個(gè)列表，用戶分別點(diǎn)擊不同列表tab切換到不同狀態(tài)。

為什么要這樣做？我們認(rèn)為這是基于業(yè)務(wù)流的抽象，把訂單的篩選狀態(tài)進(jìn)行了釋放。

簡(jiǎn)單來(lái)說，如果訂單中涉及到較為重要的業(yè)務(wù)流層面（例如：a->b->c->d..)，可采用平鋪（線性展示）的方式，用戶可不需再次切換篩選的方式，知道各個(gè)訂單的詳細(xì)狀態(tài)。而這部分，有贊并沒有給到升降序的排列方式。我們可以推斷，在列表顆粒度過小情況下，是可以不需要排序。

2. 易訂貨

易訂貨的列表設(shè)計(jì)，是在共性的基礎(chǔ)上采取了一些變化。

易訂貨管理后臺(tái)-訂單列表

易訂貨管理后臺(tái)-訂單列表-高級(jí)篩選

我們可以獲得以下的一些認(rèn)識(shí):

在訂單模塊：

1）搜索區(qū)域雖然存在，但只可以通過訂單時(shí)間、訂單號(hào)、客戶名稱這三個(gè)選項(xiàng)進(jìn)行篩選，匯聚在一行內(nèi)。所以，占據(jù)的空間并不會(huì)很大。

2）更多的篩選項(xiàng)，點(diǎn)擊【高級(jí)篩選】文案后彈出。高級(jí)篩選彈窗展示的是更多的篩選項(xiàng)。

針對(duì)列表區(qū)：

• 采用了傳統(tǒng)的列表字段展示方式；
• 部分字段可以進(jìn)行升降序排列；
• 通過列表首行右側(cè)的設(shè)置圖標(biāo)，可以對(duì)列字段是否顯示、列字段的排序進(jìn)行設(shè)置。設(shè)置方法是勾選、點(diǎn)擊上下移動(dòng)箭頭。

列表區(qū)內(nèi)的設(shè)計(jì)，采用了部分可點(diǎn)擊的超文本鏈接、字色等方式。例如：客戶名稱可點(diǎn)擊，點(diǎn)擊后跳轉(zhuǎn)到該客戶信息詳情；點(diǎn)擊訂單狀態(tài)、跳轉(zhuǎn)到了發(fā)貨訂單列表頁(yè)。在該列表頁(yè)上也采用了簡(jiǎn)單的排序。

易訂貨管理后臺(tái)-商品列表-篩選

經(jīng)過觀察發(fā)現(xiàn)，易訂貨的列表設(shè)計(jì)，把更多的篩選項(xiàng)通過彈窗的方式進(jìn)行展示。而把常用的、重要的幾個(gè)篩選項(xiàng)集中在一行高度展示。有效減少了篩選項(xiàng)對(duì)屏幕空間的占用。

3. 校寶在線

在校寶在線管理后臺(tái)，采用了多種篩選機(jī)制的列表展示。

校寶在線管理后臺(tái)-員工列表

校寶在線管理后臺(tái)-列表

主要特點(diǎn)：多行標(biāo)簽+下拉框篩選兩種類型相結(jié)合。標(biāo)簽選項(xiàng)可單選、多選。

列表的特點(diǎn)遵循了傳統(tǒng)的設(shè)計(jì)樣式，部分字段可升序降序、針對(duì)某行的數(shù)據(jù)可操作（編輯、刪除、結(jié)班）等。我們可以看到，這是教培業(yè)務(wù)上的點(diǎn)融合到設(shè)計(jì)中。

4. 知曉云

小程序開發(fā)中應(yīng)用到了知曉云的數(shù)據(jù)托管，該數(shù)據(jù)后臺(tái)的列表跟前面所分析的案例也略有不同。

知曉云管理后臺(tái)-數(shù)據(jù)列表

知曉云管理后臺(tái)-數(shù)據(jù)列表-字段管理

針對(duì)篩選項(xiàng)，放進(jìn)了【查詢】的入口里。點(diǎn)擊【查詢】彈窗中，即可搜索。空間使用效率較高。

列字段展示的特點(diǎn)：

• 可通過【列展示】彈窗，對(duì)列字段進(jìn)行是否顯示、排序的設(shè)置；設(shè)置方法為拖動(dòng)
• 展示列字段過多時(shí)，可拖動(dòng)底部滾動(dòng)條。無(wú)法使用鼠標(biāo)滾動(dòng)的方式進(jìn)行滑動(dòng)。

我們發(fā)現(xiàn)，列字段的展示先后順序，并無(wú)上述案例中所采用的箭頭移動(dòng)字段的方式。而是直接通過拖動(dòng)列字段的先后順序，進(jìn)行展示。

5. 銷售易

銷售易的列表設(shè)計(jì)，使用到較多的列字段設(shè)置和篩選的方式，兩者結(jié)合程度較高。

銷售易CRM

銷售易CRM-向下圖標(biāo)

銷售易CRM-設(shè)置-顯示列表

圖中可以看到，每個(gè)列字段的篩選機(jī)制中，采用了升降序的粗略排序方法+精準(zhǔn)排序方法的結(jié)合。

例如：針對(duì)客戶級(jí)別的排序中，則分為了A(重點(diǎn)客戶)B(普通客戶)C(非優(yōu)先級(jí)客戶)空四種篩選方式。而緯度的精準(zhǔn)排序，則給定了一個(gè)緯度范圍。

對(duì)比易訂貨發(fā)現(xiàn)，其實(shí)兩個(gè)平臺(tái)都有列字段顯示、隱藏、排序功能。但設(shè)計(jì)方法并不一樣。在操作步驟、可視化策略的使用上，兩個(gè)平臺(tái)各有差異。

根據(jù)對(duì)產(chǎn)品的實(shí)際過程體驗(yàn)，針對(duì)其中特別功能：鎖定/非鎖定的設(shè)置方式，我們可以對(duì)此進(jìn)行產(chǎn)品規(guī)則的倒推。

產(chǎn)品規(guī)則如下：

• 鎖定的列字段最多三個(gè)。
• 鎖定的列字段要排在列表字段中最前位置。
• 相同鎖定的列字段，則按照設(shè)置的先后順序進(jìn)行展示）解除鎖定后，該列字段依然顯示在原來(lái)的位置。
• 該位置排序方式：根據(jù)【設(shè)置-顯示字段】的排序進(jìn)行。
• 【設(shè)置-顯示字段】的非鎖定狀態(tài)字段挪動(dòng)到鎖定字段前面，排序方案遵循第二點(diǎn)。即：先展示全部的鎖定字段，再按照非鎖定字段的先后順序排序即可。

觀察銷售易列表，我們發(fā)現(xiàn)許多設(shè)計(jì)亮點(diǎn)。例如：傳統(tǒng)在列表上方的篩選區(qū)域不見了，取而代之的是，把列表篩選功能巧妙的嵌入到了列字段中。

體驗(yàn)上：

1）鼠標(biāo)移動(dòng)到了列字段旁的下拉圖標(biāo)，即可展開搜索列表，使用比較順暢。

2）列表的滑動(dòng)模式：如果列字段過多，一般解決方案是，在底部增加一個(gè)滑塊進(jìn)行拖動(dòng)。但這里會(huì)產(chǎn)生另外一個(gè)不好的體驗(yàn)：伴隨著對(duì)列表展示數(shù)據(jù)的不同（10，20,50,100,200..），要查看那些在非可視區(qū)的列字段內(nèi)容，則需要把整個(gè)列表往下滑。銷售易的解決方案是，通過鼠標(biāo)滾輪的滑動(dòng)，則可以對(duì)那些非鎖定狀態(tài)的字段進(jìn)行左右滑動(dòng)。

3）多種挪動(dòng)列字段的方式：

• 用戶可以在【設(shè)置-顯示字段】里，對(duì)列字段進(jìn)行排序。
• 用戶甚至可以直接在列表某字段上方，長(zhǎng)按字段并進(jìn)行拖動(dòng)的方式。（這里有一個(gè)Bug:當(dāng)想要把非鎖定狀態(tài)下的列字段，拖動(dòng)到所有非鎖定列字段最前面時(shí)，其實(shí)是做不到的。實(shí)際拖動(dòng)到的是非鎖定列字段的第二位。）
• 雙擊單個(gè)區(qū)域，可靈活編輯某個(gè)行列交叉的內(nèi)容。直接編輯的顆粒度非常大。（一般的解決方案是會(huì)針對(duì)整行進(jìn)行編輯）

銷售易整體上的設(shè)計(jì)所應(yīng)用到了以下的抽象：

傳統(tǒng)的列表上方的篩選區(qū)域，由于和列字段是一一對(duì)應(yīng)的關(guān)系。因此，把這兩個(gè)功能進(jìn)行了聚合。把篩選列的各個(gè)功能分別融入到列字段中。

這樣的模式優(yōu)點(diǎn)是：

1）沒有了篩選區(qū)，給列表區(qū)騰出了更多的展示空間。（我們知道，如果存在了篩選區(qū)，并且篩選區(qū)基本上是固定的，在PC端上也是把許多區(qū)域占據(jù)了。這里有非常多的解決方案，上文也進(jìn)行了分析）。

2）按需搜索，無(wú)須對(duì)無(wú)關(guān)緊要的列字段進(jìn)行展示了。

3）界面干凈、利于統(tǒng)一。

（這里有業(yè)務(wù)場(chǎng)景限制，只有當(dāng)彼此嚴(yán)格對(duì)應(yīng)是才可以使用該抽象）

其實(shí)從列表設(shè)計(jì)的方法中，我們看到了excel的影子。例如：鎖定模式和excel的凍結(jié)窗格、雙擊編輯某個(gè)列數(shù)據(jù)和excel雙擊編輯單元格、列的篩選和excel的篩選模式，以上的這些基本上是異曲同工?？梢哉f，銷售易采取的數(shù)據(jù)管理表格的思想，借鑒了excel里的一些設(shè)計(jì)方法。

為什么要這么做，這里并不進(jìn)行討論。數(shù)據(jù)表格的設(shè)計(jì)涉及到業(yè)務(wù)、產(chǎn)品效率層面，而這個(gè)是為什么不同SaaS平臺(tái)的搜索列表模式都會(huì)或多或少區(qū)別的原因。

二、篩選及列表的抽象

根據(jù)上述的分析，我們可以得到一個(gè)基本的產(chǎn)品設(shè)計(jì)模型：

SaaS篩選及列表的抽象模型

圖中可以知道，數(shù)據(jù)的處理和管理，最終的目標(biāo)是為了能提高客戶使用及決策的效率。

我們可描述為：用戶通過篩選和列表的展示，可以高效獲取到他們所要的內(nèi)容。通過展示精細(xì)化顆粒度高的展示、實(shí)時(shí)幫助客戶處理編輯數(shù)據(jù)、提供對(duì)數(shù)據(jù)進(jìn)行便捷操作體驗(yàn)，并通過數(shù)據(jù)呈現(xiàn)、輔助決策等手段，提升客戶處理商業(yè)數(shù)據(jù)的效率。這也是優(yōu)化數(shù)據(jù)列表價(jià)值的原因之一。

基于此，我們可以再進(jìn)一步進(jìn)行擴(kuò)展：

根據(jù)篩選和列表的耦合、獨(dú)立矩陣，進(jìn)行劃分不同模式的列表設(shè)計(jì)方案。例如：只為企業(yè)某項(xiàng)特別業(yè)務(wù)數(shù)據(jù)列表服務(wù)的篩選項(xiàng)，則是高度耦合于列表。以此類推。

主要模式有以下3種：純耦合模式（強(qiáng)、中、弱）、耦合+獨(dú)立模式、智能（獨(dú)立）模式。

如圖所示：

純耦合模式（強(qiáng)、中、弱）

耦合+獨(dú)立模式

智能（獨(dú)立）模式

文章所分析的各個(gè)平臺(tái)的模式，可以認(rèn)為是模式一（純耦合）、模式二（耦合+獨(dú)立）的方式。

不同的SaaS列表的設(shè)計(jì)，往往是基于業(yè)務(wù)、數(shù)據(jù)、資源、操作等層面，所謂的最優(yōu)選項(xiàng)也會(huì)在資源和成本壓力下被否決。我們可以認(rèn)為，沒有最優(yōu)的、只有最適合的數(shù)據(jù)列表設(shè)計(jì)方案。

#專欄作家#

阿藝師傅，微信公眾號(hào)：鋅產(chǎn)品，人人都是產(chǎn)品經(jīng)理專欄作家。曾擔(dān)任國(guó)內(nèi)某top知識(shí)付費(fèi)平臺(tái)B端產(chǎn)品經(jīng)理，負(fù)責(zé)過億級(jí)用戶平臺(tái)的產(chǎn)品設(shè)計(jì)的工作。對(duì)系統(tǒng)設(shè)計(jì)、系統(tǒng)思考等方面較感興趣。

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

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