在 Web 端后臺(tái)產(chǎn)品設(shè)計(jì)中，列表組件是最常見的組件，也是后臺(tái)產(chǎn)品設(shè)計(jì)中的基礎(chǔ)設(shè)計(jì)。有時(shí)，后臺(tái)平臺(tái)中可高達(dá)70%的頁面都是由列表頁組成。結(jié)合以往經(jīng)驗(yàn)，今天將列表組件相關(guān)內(nèi)容整理如下。

一、組件意義

在 Web 端后端產(chǎn)品中，列表是一種將存儲(chǔ)在數(shù)據(jù)庫(kù)中的數(shù)據(jù)以“擬物化”的方式有序呈現(xiàn)的載體，方便用戶進(jìn)行管理、統(tǒng)計(jì)。

在數(shù)據(jù)庫(kù)中，數(shù)據(jù)以結(jié)構(gòu)化形式存在。當(dāng)數(shù)據(jù)載入列表這個(gè)載體中，一行數(shù)據(jù)則可代表著一個(gè)任務(wù)、一份公文、一個(gè)用戶、一個(gè)商品等等。用戶在理解列表物化后，在操作平臺(tái)上直接管理數(shù)據(jù)。

二、組件內(nèi)容

列表組件，往往由標(biāo)題、篩選區(qū)域、列表區(qū)域、分頁，搭配組成。

1. 標(biāo)題

簡(jiǎn)單明了的標(biāo)題，給人一眼就得知這表格要代表的事物以及信息。

2. 篩選區(qū)域

篩選區(qū)域，是輔助列表做信息篩選定位。列表信息往往數(shù)量很多，用戶可通過篩選項(xiàng)迅速定位某一類、某一條信息。對(duì)于信息項(xiàng)簡(jiǎn)單、數(shù)據(jù)量少的列表，篩選區(qū)域并非必要。

3. 列表區(qū)域

列表區(qū)域，是由表頭、單元格、尾部組成，將列表數(shù)據(jù)整齊有序地展示出來。

表頭，由事物的屬性組成，也是每個(gè)數(shù)據(jù)結(jié)構(gòu)中的信息項(xiàng)組成。

單元格，則是每個(gè)事物具體屬性的數(shù)據(jù)與操作。

4. 分頁

尾部，常見是分頁設(shè)計(jì)。列表數(shù)據(jù)量往往過多，在 Web 端設(shè)計(jì)時(shí)很少一頁無盡展示到底，內(nèi)容冗長(zhǎng)且體驗(yàn)感差。而分頁設(shè)計(jì)，既讓用戶對(duì)瀏覽內(nèi)容有預(yù)期，得知當(dāng)前位置以及確切的內(nèi)容數(shù)量。

三、組件設(shè)計(jì)

在解釋完組件的內(nèi)容后，接下來說說列表組件的設(shè)計(jì)與樣式。

1. 篩選區(qū)域

篩選區(qū)域，由篩選項(xiàng)、操作按鈕組成。

篩選項(xiàng)的樣式多樣，由文本搜索、選項(xiàng)（級(jí)聯(lián)選項(xiàng)、標(biāo)簽選項(xiàng)）、時(shí)間控件、日期控件等。

篩選項(xiàng)的信息內(nèi)容，來源列表數(shù)據(jù)。列表數(shù)據(jù)項(xiàng)都可作為篩選項(xiàng)的信息進(jìn)行篩選定位?？紤]實(shí)用性與空間問題，一般會(huì)根據(jù)需求做取舍。

• 考慮事物的唯一標(biāo)識(shí)、編碼，方便用戶迅速定位某條信息，如任務(wù)編碼、用戶編碼、案件編碼；
• 考慮事物容易記憶的的信息項(xiàng)，相比數(shù)字串，文本更方便記憶，如商品名稱、任務(wù)名稱；
• 考慮事物的分類類型，方便用戶迅速定位某一類信息，如商品類別、任務(wù)狀態(tài)；
• 從事物性質(zhì)與需求考慮，挑選專有的信息項(xiàng)作為篩選項(xiàng)。時(shí)效性強(qiáng)的事物，可用時(shí)間控件、日期控件作篩選；地域性相關(guān)的事物，可用行政區(qū)域級(jí)聯(lián)選項(xiàng)作篩選。

當(dāng)然，若事物的屬性分類多，不同用戶有著不同的篩選需求，則可提供基礎(chǔ)篩選項(xiàng)，用戶可自定義添加需要篩選項(xiàng)。

篩選區(qū)域一般帶有“查詢”、“重置”的操作。

篩選的交互設(shè)計(jì)，是在做出篩選項(xiàng)選擇、搜索后（多項(xiàng)并查），點(diǎn)擊“查詢”，對(duì)列表數(shù)據(jù)進(jìn)行篩選定位；篩選后，點(diǎn)擊“重置”可清空篩選內(nèi)容。

2. 列表區(qū)域

列表表頭的信息項(xiàng)可按重要性排序。重要屬性可參考閱讀習(xí)慣，由左到右進(jìn)行排序。

考慮到事物的屬性多，用戶有著展示不同信息項(xiàng)的需求，可提供自定義表頭。列表默認(rèn)展示基礎(chǔ)信息項(xiàng)，一般在表頭附近提供自定義表頭，可進(jìn)行表頭信息項(xiàng)的選擇、排序。

若列表有操作列，一般放置于列表最右邊。

單元格的列表樣式多樣，可根據(jù)數(shù)據(jù)結(jié)構(gòu)選擇適合的樣式。

（1）普通樣式

常見樣式，每行數(shù)據(jù)都代表著獨(dú)立的一個(gè)事物數(shù)據(jù)。

（2）層級(jí)樣式

主要用于有從屬關(guān)系的數(shù)據(jù)列表展示，但不建議層級(jí)過多，一般控制在3層左右。

3. 分頁

分頁，常見由4種基本元素組成：上頁+頁碼+下頁（首頁+上頁+頁碼+下頁+尾頁）、總頁碼、跳轉(zhuǎn)頁、“確認(rèn)”按鈕。根據(jù)這些基本元素在不同的場(chǎng)景會(huì)有不同的組合。

• 上頁、下頁、首頁、尾頁：方便用戶中途快速定位；
• 頁碼：一般展示5個(gè)連續(xù)頁碼，考慮一般用戶最多連續(xù)查看的頻率在于5頁左右；
• 總頁碼：標(biāo)明總數(shù)，給用戶心里預(yù)期；
• 跳轉(zhuǎn)頁：提供定位某個(gè)頁面操作，支持輸入并提供確定按鈕。

四、組件體驗(yàn)細(xì)節(jié)

1. 篩選展開/收起

當(dāng)篩選區(qū)域內(nèi)容過多時(shí)，可展示第一行的篩選項(xiàng)，其余收起。

2. 列表對(duì)齊

列表信息對(duì)齊，可帶來視覺上的整齊與清晰，更方便閱讀。

對(duì)齊方式可根據(jù)產(chǎn)品的設(shè)計(jì)統(tǒng)一，可為左對(duì)齊、居中對(duì)齊等。列表信息項(xiàng)類型多樣時(shí)，還可針對(duì)類型調(diào)整對(duì)齊方式進(jìn)行區(qū)分。

• 文本信息：左對(duì)齊，符合從左到右的閱讀習(xí)慣；
• 數(shù)據(jù)信息：右對(duì)齊，方便數(shù)字進(jìn)行直觀的對(duì)比；
• 固定內(nèi)容：居中對(duì)齊，更好的信息呈現(xiàn)及表格空間的節(jié)??；
• 表頭與信息內(nèi)容對(duì)齊方式一致，一致性以達(dá)到簡(jiǎn)化，降低視覺噪音。

3. 列表操作反饋

帶操作的列表需考慮操作反饋設(shè)計(jì)。

列表編輯數(shù)據(jù)等操作，在操作后，無論成功與否，都需對(duì)應(yīng)的操作反饋（操作提示、跳轉(zhuǎn)頁面、彈窗處理等）。

列表選擇操作，選中列表行可采取高亮或有底色的反饋。

4. 列表信息項(xiàng)過多時(shí)

事物的屬性過多時(shí)，由于屏幕寬度限制，無法全屏展示所有信息項(xiàng)?？煽紤]2種處理方式。

（1）僅展示基礎(chǔ)信息項(xiàng)（核心信息項(xiàng)）

根據(jù)需求，若事物的屬性并非都是核心數(shù)據(jù)，可考慮只展示核心的、有價(jià)值的信息項(xiàng)。

（2）超出屏幕部門，進(jìn)行滾動(dòng)處理

若展示數(shù)據(jù)超出屏幕寬度，可考慮滾動(dòng)條滾動(dòng)設(shè)計(jì)，但由于滾動(dòng)條設(shè)計(jì)隱藏性較深，設(shè)計(jì)時(shí)可按重要性從左排序。

而操作列可固定在屏幕最右側(cè)位置，或提前到表格左側(cè)。

5. 單元格信息內(nèi)容過多時(shí)

單元格內(nèi)容過多時(shí)，可針對(duì)表格樣式進(jìn)行處理。

若表格樣式為固定行高，則信息超出單元格部分以“…”省略，可在鼠標(biāo) hover 時(shí)浮動(dòng)展示完整的信息內(nèi)容，或進(jìn)入詳情頁查看完整信息內(nèi)容。

若表格樣式為最小行高，則設(shè)計(jì)信息量多的單元格進(jìn)行換行撐開，但該設(shè)計(jì)在信息量參差不齊時(shí)，容易影響美觀。

五、總結(jié)

列表組件，看似個(gè)簡(jiǎn)單羅列數(shù)據(jù)的工具，但實(shí)際要做出一個(gè)高效的、便捷的列表，需要產(chǎn)品們?nèi)ニ伎己芏嗉?xì)節(jié)與設(shè)計(jì)。本文也僅從 Web?端后臺(tái)產(chǎn)品來聊列表組件，而在移動(dòng)端、Web 門戶等都有著不同設(shè)計(jì)與細(xì)節(jié)，希望后續(xù)有機(jī)會(huì)補(bǔ)充。

個(gè)人經(jīng)驗(yàn)輸出，若有建議或問題，歡迎提出，謝謝。

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

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