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

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

一、常見的SaaS平臺列表設(shè)計及分析

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

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

1. 有贊

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

有贊管理后臺-訂單列表

有贊管理后臺-訂單列表

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

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

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

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

差異化地方之二：訂單

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

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

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

2. 易訂貨

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

易訂貨管理后臺-訂單列表

易訂貨管理后臺-訂單列表-高級篩選

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

在訂單模塊：

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

2）更多的篩選項，點擊【高級篩選】文案后彈出。高級篩選彈窗展示的是更多的篩選項。

針對列表區(qū)：

• 采用了傳統(tǒng)的列表字段展示方式；

• 部分字段可以進(jìn)行升降序排列；

• 通過列表首行右側(cè)的設(shè)置圖標(biāo)，可以對列字段是否顯示、列字段的排序進(jìn)行設(shè)置。設(shè)置方法是勾選、點擊上下移動箭頭。

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

易訂貨管理后臺-商品列表-篩選

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

3. 校寶在線

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

校寶在線管理后臺-員工列表

校寶在線管理后臺-列表

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

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

4. 知曉云

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

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

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

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

列字段展示的特點：

• 可通過【列展示】彈窗，對列字段進(jìn)行是否顯示、排序的設(shè)置；設(shè)置方法為拖動

• 展示列字段過多時，可拖動底部滾動條。無法使用鼠標(biāo)滾動的方式進(jìn)行滑動。

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

5. 銷售易

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

銷售易CRM

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

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

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

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

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

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

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

• 鎖定的列字段最多三個。

• 鎖定的列字段要排在列表字段中最前位置。

• 相同鎖定的列字段，則按照設(shè)置的先后順序進(jìn)行展示）解除鎖定后，該列字段依然顯示在原來的位置。

• 該位置排序方式：根據(jù)【設(shè)置-顯示字段】的排序進(jìn)行。

• 【設(shè)置-顯示字段】的非鎖定狀態(tài)字段挪動到鎖定字段前面，排序方案遵循第二點。即：先展示全部的鎖定字段，再按照非鎖定字段的先后順序排序即可。

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

體驗上：

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

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

3）多種挪動列字段的方式：

• 用戶可以在【設(shè)置-顯示字段】里，對列字段進(jìn)行排序。

• 用戶甚至可以直接在列表某字段上方，長按字段并進(jìn)行拖動的方式。（這里有一個Bug:當(dāng)想要把非鎖定狀態(tài)下的列字段，拖動到所有非鎖定列字段最前面時，其實是做不到的。實際拖動到的是非鎖定列字段的第二位。）

• 雙擊單個區(qū)域，可靈活編輯某個行列交叉的內(nèi)容。直接編輯的顆粒度非常大。（一般的解決方案是會針對整行進(jìn)行編輯）

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

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

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

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

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

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

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

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

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

二、篩選及列表的抽象

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

SaaS篩選及列表的抽象模型

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

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

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

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

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

如圖所示：

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

耦合+獨立模式

智能（獨立）模式

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

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