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

一、組件意義

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

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

二、組件內(nèi)容

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

1. 標題

簡單明了的標題，給人一眼就得知這表格要代表的事物以及信息。

2. 篩選區(qū)域

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

3. 列表區(qū)域

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

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

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

4. 分頁

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

三、組件設(shè)計

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

1. 篩選區(qū)域

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

篩選項的樣式多樣，由文本搜索、選項（級聯(lián)選項、標簽選項）、時間控件、日期控件等。

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

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

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

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

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

2. 列表區(qū)域

列表表頭的信息項可按重要性排序。重要屬性可參考閱讀習慣，由左到右進行排序。

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

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

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

（1）普通樣式

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

（2）層級樣式

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

3. 分頁

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

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

四、組件體驗細節(jié)

1. 篩選展開/收起

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

2. 列表對齊

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

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

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

3. 列表操作反饋

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

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

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

4. 列表信息項過多時

事物的屬性過多時，由于屏幕寬度限制，無法全屏展示所有信息項。可考慮2種處理方式。

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

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

（2）超出屏幕部門，進行滾動處理

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

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

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

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

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

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

五、總結(jié)

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

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

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

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