列表是一種數(shù)據(jù)項(xiàng)構(gòu)成的有限序列，即按照一定的線性順序，排列而成的數(shù)據(jù)項(xiàng)的集合，在這種數(shù)據(jù)結(jié)構(gòu)上進(jìn)行的基本操作包括對元素的的查找、插入和刪除。

一直設(shè)計(jì)列表都是從腦子里面固有的慣性出發(fā)，比如：之前的列表怎么設(shè)計(jì)的，新列表也這么設(shè)計(jì)好了，對自己的決策很少產(chǎn)生懷疑或思考，畢竟感覺是個(gè)簡單的列表。

后來某次評審被領(lǐng)導(dǎo)點(diǎn)撥：這個(gè)篩選項(xiàng)做成那樣是不是更好，列表那樣展示是不是很好，一臉羞愧，發(fā)現(xiàn)自身存在很多問題，比如無法確認(rèn)哪些元素該有，哪些元素該沒有，想到一個(gè)放一個(gè)，純屬憑感覺自由發(fā)揮，自此決心要研究下列表頁設(shè)計(jì)。

看了很多別人寫的文章，有一定的收獲，發(fā)現(xiàn)列表頁設(shè)計(jì)看著簡單，其實(shí)也有大學(xué)問，找時(shí)間梳理了下，希望對大家都有幫助 （基本覆蓋了設(shè)計(jì)列表時(shí)可能遇到的問題）。

什么是列表？

這里是百度百科對“列表”的解釋：列表是一種數(shù)據(jù)項(xiàng)構(gòu)成的有限序列，即按照一定的線性順序，排列而成的數(shù)據(jù)項(xiàng)的集合，在這種數(shù)據(jù)結(jié)構(gòu)上進(jìn)行的基本操作包括對元素的的查找、插入和刪除。

列表設(shè)計(jì)的原則

雖然列表設(shè)計(jì)沒有統(tǒng)一的方法論，但是設(shè)計(jì)任何產(chǎn)品的時(shí)候，最好心里把握一定的原則，這樣能保證有個(gè)主心骨，也不至于走偏，基于多年設(shè)計(jì)經(jīng)驗(yàn)，我總結(jié)了下列表設(shè)計(jì)需要遵循的三大原則（對所有列表適用）：

1. 基于業(yè)務(wù)：任何產(chǎn)品都是基于業(yè)務(wù)、基于場景而產(chǎn)生的，并不是空想出來的，這是大前提。
2. 追求效率：效率是指用戶能夠快速地找到自己想要的數(shù)據(jù)。
3. 輔助決策：保證列表所展示的每項(xiàng)信息對于用戶而言都是有用的，能夠起到幫助用戶決策的作用。

B端產(chǎn)品web列表應(yīng)如何設(shè)計(jì)

下面具體講講B端產(chǎn)品web列表應(yīng)該如何設(shè)計(jì)，主要從其包括的幾個(gè)模塊（篩選、排序、列表、操作項(xiàng)、分頁）分別說明：

1. 篩選

提取哪些內(nèi)容作為篩選條件：

（1）能定位到用戶想要的數(shù)據(jù)的（不一定需要ID）

即通過篩選條件，用戶能篩選到自己想要的數(shù)據(jù)，這里要特別說明的是，很多產(chǎn)品設(shè)計(jì)列表的時(shí)候可能會習(xí)慣性地放一個(gè)ID作為篩選條件，但其實(shí)不是所有場景下用戶都會使用ID搜索列表。

天貓商家可能需要通過商品ID去搜索商品，那是因?yàn)樯碳矣芯_找到某條商品數(shù)據(jù)的需求，且這個(gè)需求只能通過商品ID的搜索滿足（商品名稱很大概率上篩選出來的結(jié)果是多條）；但是像對于人才庫（見下圖），一般用戶通過姓名、手機(jī)號、郵箱就能定位某條數(shù)據(jù)，ID就沒有作為篩選條件存在的必要了。

人才庫

（2）符合用戶真實(shí)需求場景的

當(dāng)前列表所在的表單可能包括的字段有很多，不是每一個(gè)字段項(xiàng)都需要拿來作篩選條件，評估能作為篩選條件的標(biāo)準(zhǔn)即為：符合用戶真實(shí)需求場景，就是說用戶真實(shí)場景下會使用這些條件去搜尋自己想要的數(shù)據(jù)，用戶在當(dāng)前列表用不到的可以不作為篩選條件，天貓商家后臺“已賣出的寶貝”篩選條件中并沒有價(jià)格區(qū)間，商家篩選價(jià)格區(qū)間應(yīng)該是在客戶運(yùn)營的時(shí)候，而不是在訂單列表，所以此處無需提供價(jià)格區(qū)間篩選條件。

天貓>已賣出的寶貝

各篩選條件的位置應(yīng)如何設(shè)計(jì)？

（1）按用戶使用的頻率由高到低呈現(xiàn)

按頻率呈現(xiàn)的好處在于：用戶頻繁使用的篩選條件能一眼找到。

（2）符合用戶使用的習(xí)慣（從上到下，從左到右）

篩選條件過多時(shí)（個(gè)人覺得超過兩行），像上面的“天貓>已賣出的寶貝”遵循先從上到下，再從左到右的擺放順序，但是如果篩選條件≤兩行時(shí)，可以遵循先從左到右，再從上到下的順序，比較符合肉眼查找的順序，如上圖的“人才庫”。

篩選分類：

（1）文本類（名稱或ID等）

這是最常用的一種篩選條件，比如商品名稱、商品ID等。名稱類的一般支持模糊查詢，ID類的一般支持精確查詢。文本輸入框內(nèi)最好有提示文案，普通的如“請輸入商品名稱”，集合多種查詢條件的如“姓名/手機(jī)號/郵箱/標(biāo)簽”，一來方便用戶輸入時(shí)再次確認(rèn)當(dāng)前要輸入的內(nèi)容，二來提醒當(dāng)前輸入框支持輸入的內(nèi)容，三來提醒用戶需要的操作（輸入/選擇）。最后，需要提供回車執(zhí)行搜索功能。

（2）固定選項(xiàng)類

一般為下拉選項(xiàng)，選項(xiàng)過少時(shí)，可平鋪展開（如下圖，可將處理狀態(tài)直接平鋪展開），平鋪展開的好處是用戶能直接看到選項(xiàng)內(nèi)容，方便用戶識別選項(xiàng)，且提高了用戶篩選的效率（節(jié)省了篩選操作）。

此類選項(xiàng)一般不提供“勾選即執(zhí)行搜索”功能，理由：用戶可能還需要綜合其他篩選條件一起查詢，執(zhí)行搜索的過程（動畫或加載時(shí)長）可能分散用戶精力或打斷用戶剛才的輸入。

天貓>異常包裹列表（原）

天貓>異常包裹列表（優(yōu)化后）

（3）時(shí)間類

時(shí)間類有兩個(gè)特殊的地方：

1）存在多個(gè)時(shí)間篩選條件的情況時(shí)，需區(qū)分好彼此之間的關(guān)系（互斥或可共存）。

沒有找到合適的案例，畫了下大概的樣式，為互斥關(guān)系時(shí)可以采用如下的樣式，為可共存關(guān)系時(shí)，直接將多個(gè)時(shí)間篩選條件列舉出來即可 （不過一般可共存的關(guān)系是可以滿足互斥的搜索場景的，不確定真實(shí)有沒有僅使用互斥場景的）。

時(shí)間相互之間為互斥關(guān)系

2）提供快捷選項(xiàng)（根據(jù)需求場景確定要不要提供）

時(shí)間類的快捷選項(xiàng)包括：昨天、最近七天、最近30天、本年等等，一般報(bào)表類的會使用比較多，像下圖的生意參謀，本質(zhì)上是提高用戶查找數(shù)據(jù)的效率，還是那句話，具體要不要提供還是要看真實(shí)的場景需不需要。

生意參謀

（4）快捷篩選類

一般會提供幾個(gè)常用的快捷選項(xiàng)方便用戶直接篩選出想要的結(jié)果/過濾不想要的結(jié)果，如“天貓>已賣出的寶貝”提供過濾已關(guān)閉訂單的快捷選項(xiàng)。

用戶使用此類選項(xiàng)的場景一般是在正常篩選條件之后，也就是說它是作為一個(gè)輔助選項(xiàng)，因此快捷選項(xiàng)點(diǎn)擊后需要同時(shí)執(zhí)行搜索操作，查出用戶想要的結(jié)果。

具體是否需要提供快捷篩選，還是看實(shí)際場景是否需要。

天貓>已賣出的寶貝

（5）篩選tab

我們經(jīng)常看到列表上有提供tab篩選的功能，如“待付款、待發(fā)貨、退款中”等，這些tab位置有可能是在正常篩選條件之下，有可能是在正常篩選條件之上，那么什么時(shí)候在上，什么時(shí)候在下呢？

基于業(yè)務(wù)，基于場景。

tab在上的情況：

用戶需要一眼能看到所有的概況并且很明確自己想要查找的目標(biāo)在哪個(gè)tab（想查找數(shù)據(jù)時(shí)，會直接到對應(yīng)tab下查找，不用思考）下時(shí)，tab在上，這個(gè)時(shí)間只需要告訴用戶查詢出來多少最終結(jié)果即可，如天貓>寶貝管理。

天貓>寶貝管理

tab在下的情況：

需要看到查詢的結(jié)果在各tab下的分布情況時(shí)，tab在下，如2號人事>候選人篩選。

2號人事>候選人篩選

tab上是否要展示當(dāng)前tab下的項(xiàng)目數(shù)：

看用戶對當(dāng)前列表是否有按數(shù)字匯總的需求，像待辦事項(xiàng)或想知道概況這種需要提供數(shù)字匯總結(jié)果，比如人事需要知道目前正式員工，試用員工多少；買家需要知道當(dāng)前待付款的有多少，待發(fā)貨的有多少。

其他：

• 篩選條件什么情況下需要提供保存功能：可能反復(fù)多次會使用多個(gè)相同篩選條件組合起來查找數(shù)據(jù)，該種情況下需要保存篩選條件，如人才庫的搜索；
• 篩選條件什么情況下需要提供重置功能：大多數(shù)情況下需要通過多種條件（個(gè)人覺得≥２）匹配才能找到自己想要的結(jié)果，人才庫也是個(gè)很好的例子；
• 篩選條件什么情況下需要隱藏部分條件：篩選條件過多（超過兩行），且部分條件很大概率情況下用不到，展示起來反而干擾大多數(shù)用戶搜尋其他篩選條件，可以將大概率用不到的條件先收起到，用戶需要時(shí)自行展開。
• 篩選條件什么情況下需要問號提示：篩選文案會讓人產(chǎn)生疑問時(shí)需要提示問號解釋說明。

京東>商品管理

2. 排序

哪些字段需要提供排序功能：需結(jié)合具體場景具體分析，需理解排序背后的用戶場景。一般來說，數(shù)字（如價(jià)格、銷量等）、權(quán)重（商品列表的綜合排序等）、時(shí)間（創(chuàng)建時(shí)間、入職時(shí)間等）這類字段需要提供排序功能，提供正序、倒序排序功能即可。

默認(rèn)排序：需考慮用戶第一次進(jìn)入列表的初始化狀態(tài)，保證用戶剛進(jìn)入頁面時(shí)大概率能直接看到自己想看的東西（畢竟篩選只是輔助功能）。

3. 列表

提取哪些內(nèi)容展示在列表：

• 首先明確當(dāng)前列表所要描述的主體，如商品、活動規(guī)則、訂單；
• 其次提取最能簡單描述這個(gè)主體的字段，如商品縮略圖、商品名稱、商品價(jià)格….
• 最后提取用戶期望從當(dāng)前列表能直接看到的信息（大概率）。

各字段的位置應(yīng)如何設(shè)計(jì)：

• 編號一般前置（不一定所有編號都需要展示，具體需要看編號有無業(yè)務(wù)使用場景）；
• 能直接代表所要描述的主體的字段前置，如商品名稱、活動規(guī)則名稱；
• 特殊的，比如優(yōu)先級、類型或狀態(tài)（可以采用圖標(biāo)表示的）可以前置，方便一目了然，如JIRA>Backlog；

JIRA>Backlog

• 按用戶關(guān)注度由高到低呈現(xiàn)；
• 符合常規(guī)思維邏輯。

即符合正常思考或看事物的邏輯，以“天貓>店鋪寶規(guī)則列表”為例，活動編號、活動名稱點(diǎn)據(jù)1、2列后，緊接著是“活動詳情”，“活動詳情”可以算作是對“活動名稱”的補(bǔ)充，“活動詳情”+“活動名稱”結(jié)合可以使用戶大概了解這個(gè)活動是干嘛的了，再接著是這個(gè)活動哪天開始，哪天結(jié)束（活動時(shí)間），當(dāng)前活動的狀態(tài)（狀態(tài)與活動時(shí)間是相對應(yīng)的，在活動時(shí)間之后比較順理成章）。

天貓>店鋪寶規(guī)則列表

一頁展示多少條合適：

常規(guī)的像excel一樣的列表，一頁最好能在一屏展示，避免用戶來回上下滾動，比如固定為展示10條；

特殊的像訂單列表，兩三個(gè)訂單可能就能占據(jù)一屏，而且每條的高度不確定，這種情況下不適用以上規(guī)則，一頁可能展示10條/20條，都可以。

列表可以有哪些展示形式：

• excel樣式：設(shè)計(jì)列表時(shí)一般都會不自覺地向excel的樣式靠攏，這的確也是大多數(shù)列表會采用的樣式；
• 信息聚攏式：沒有人規(guī)定一列僅能展示一個(gè)信息，因此為了高效地利用列表，也為了信息集中化，方便用戶集中瀏覽，可以將相同的信息聚攏，將列表靈活化，如商品列表、訂單列表。

天貓>訂單列表

• 擬物式：如銀行卡列表的設(shè)計(jì)，相較于普通的excel樣式，設(shè)計(jì)成微信>銀行卡（手機(jī)端）的樣式會更直觀，當(dāng)然Web端也可以采用類似的設(shè)計(jì)。

列表需要展示的字段太多怎么辦？

• 上面提到的信息聚攏是一種辦法；
• 提供自定義表頭功能（僅限用戶可能需要的字段很多的情況），默認(rèn)展示用戶關(guān)注度最高的字段內(nèi)容，如2號人事>花名冊；

2號人事>花名冊（未選擇表頭）

2號人事>花名冊（選擇表頭）

• 提供左右滾動功能，左右滾動時(shí)，需要固定列表最前面的幾列，方便用戶識別當(dāng)前信息歸屬哪個(gè)主體。

其他：列表上下滾動時(shí)，標(biāo)題欄需要固定，方便用戶識別某個(gè)內(nèi)容的含義。

4. 操作項(xiàng)

哪些操作項(xiàng)應(yīng)該放在列表：

通過列表所能提供的信息就能做的決策性操作，如修改商品名稱、修改商品庫存，大多數(shù)操作屬于這一類；相關(guān)信息的鏈接功能，如賣家通過點(diǎn)擊旺旺昵稱可直接與買家對話；點(diǎn)擊【詳情】可直接查看對應(yīng)信息的詳細(xì)信息。

操作項(xiàng)的位置應(yīng)如何設(shè)計(jì)：

• 一般在最后一列操作項(xiàng)；
• 與某列相關(guān)的操作可直接放置在該列中，目標(biāo)清晰，節(jié)省操作列的位置，也方便用戶操作，不用到最后一列找操作項(xiàng)，如上下架，添加備注。

淘寶>異常包裹管理

操作項(xiàng)太多怎么辦：

一般操作列放兩個(gè)常用的操作出來，同行或同列展示，剩余的操作（特別是敏感性操作，如刪除）隱藏起來，點(diǎn)擊【更多】進(jìn)行展示。

淘寶>寶貝管理

批量操作：

• 是否所有的單個(gè)操作都需要提供批量操作？不一定，看真實(shí)業(yè)務(wù)場景需要。

• 有了批量操作是否可以不提供單個(gè)操作？不沖突，畢竟批量操作還多一個(gè)勾選操作。

5. 分頁

分頁需要展示哪些信息：

• 當(dāng)前結(jié)果頁的結(jié)果總條數(shù)；
• 當(dāng)前頁所在的位置；
• 快捷跳轉(zhuǎn)至某頁的功能。

總結(jié)

不是每一個(gè)列表都會覆蓋以上說的所有的東西，做產(chǎn)品不能簡單的拿來主義，要思考別人那么做背后的意義以及自己產(chǎn)品的真實(shí)業(yè)務(wù)場景，任何東西都是適合自己的就是最好的。

以上，講的不一定是對的。

作者：青檸，微信公眾號：一只進(jìn)化中的產(chǎn)品汪（pm_move_forward），歡迎交流。

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

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