中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在 Web 端后臺產品設計中，列表組件是最常見的組件，也是后臺產品設計中的基礎設計。有時，后臺平臺中可高達70%的頁面都是由列表頁組成。結合以往經驗，今天將列表組件相關內容整理如下。

一、組件意義

在 Web 端后端產品中，列表是一種將存儲在數據庫中的數據以“擬物化”的方式有序呈現的載體，方便用戶進行管理、統計。

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

二、組件內容

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

1. 標題

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

2. 篩選區域

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

3. 列表區域

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

表頭，由事物的屬性組成，也是每個數據結構中的信息項組成。

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

4. 分頁

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

三、組件設計

在解釋完組件的內容后，接下來說說列表組件的設計與樣式。

1. 篩選區域

篩選區域，由篩選項、操作按鈕組成。

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

篩選項的信息內容，來源列表數據。列表數據項都可作為篩選項的信息進行篩選定位?？紤]實用性與空間問題，一般會根據需求做取舍。

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

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

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

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

2. 列表區域

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

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

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

單元格的列表樣式多樣，可根據數據結構選擇適合的樣式。

（1）普通樣式

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

（2）層級樣式

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

3. 分頁

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

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

四、組件體驗細節

1. 篩選展開/收起

當篩選區域內容過多時，可展示第一行的篩選項，其余收起。

2. 列表對齊

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

對齊方式可根據產品的設計統一，可為左對齊、居中對齊等。列表信息項類型多樣時，還可針對類型調整對齊方式進行區分。

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

3. 列表操作反饋

帶操作的列表需考慮操作反饋設計。

列表編輯數據等操作，在操作后，無論成功與否，都需對應的操作反饋（操作提示、跳轉頁面、彈窗處理等）。

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

4. 列表信息項過多時

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

（1）僅展示基礎信息項（核心信息項）

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

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

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

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

5. 單元格信息內容過多時

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

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

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

五、總結

列表組件，看似個簡單羅列數據的工具，但實際要做出一個高效的、便捷的列表，需要產品們去思考很多細節與設計。本文也僅從 Web?端后臺產品來聊列表組件，而在移動端、Web 門戶等都有著不同設計與細節，希望后續有機會補充。

個人經驗輸出，若有建議或問題，歡迎提出，謝謝。

本文由 @Cherie 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議