列表頁是 B 端產(chǎn)品的核心頁面類型之一，承擔(dān)著數(shù)據(jù)展示、信息檢索、操作入口等關(guān)鍵功能，直接影響用戶的數(shù)據(jù)處理效率與決策體驗(yàn)。優(yōu)質(zhì)的列表頁設(shè)計(jì)需基于業(yè)務(wù)場(chǎng)景與用戶需求，匹配合適的布局與模板，讓復(fù)雜數(shù)據(jù)變得清晰易懂、操作高效。本文從基礎(chǔ)布局、核心模板、設(shè)計(jì)技巧三個(gè)維度，拆解 B 端列表頁的設(shè)計(jì)邏輯，為設(shè)計(jì)師提供可落地的實(shí)踐方案。
基礎(chǔ)布局決定了列表頁的整體信息架構(gòu)，需根據(jù)數(shù)據(jù)過濾條件的數(shù)量、頁面空間大小等因素選擇，核心分為單列布局與雙欄布局兩類，均遵循 “用戶先篩選后瀏覽” 的核心邏輯。
單列布局將數(shù)據(jù)過濾、數(shù)據(jù)統(tǒng)計(jì)、數(shù)據(jù)列表按縱向順序堆疊，用戶遵循自上而下的線性瀏覽路徑，無需切換視線，操作成本極低，是應(yīng)用最廣泛的基礎(chǔ)布局。
- 過濾條件較少（≤5 個(gè)），無需復(fù)雜篩選邏輯（如僅需關(guān)鍵詞搜索、狀態(tài)篩選）；
- 頁面空間有限（如彈窗列表、移動(dòng)端列表），需聚焦核心數(shù)據(jù)展示；
- 用戶使用場(chǎng)景以快速瀏覽、簡(jiǎn)單操作為主（如查看待辦列表、已完成訂單）。
- 數(shù)據(jù)過濾模塊置于頁面頂部，采用橫向排列，核心篩選條件（如關(guān)鍵詞搜索）優(yōu)先展示，次要條件可折疊在 “高級(jí)篩選” 中；
- 數(shù)據(jù)統(tǒng)計(jì)模塊緊跟過濾模塊，用數(shù)字卡片直觀展示關(guān)鍵指標(biāo)（如 “全部應(yīng)用 57 個(gè)”“發(fā)布成功 12 個(gè)”），幫助用戶快速掌握數(shù)據(jù)全貌；
- 數(shù)據(jù)列表區(qū)域占頁面主要視覺空間，列數(shù)控制在 3-5 列，避免信息過載；
- 批量操作按鈕（如 “批量刪除”“批量導(dǎo)出”）固定在列表頂部，與篩選模塊區(qū)分開，方便用戶篩選后快速操作。
員工考勤列表頁采用單列布局，頂部設(shè)置 “關(guān)鍵詞搜索”“考勤日期篩選” 兩個(gè)核心過濾條件，下方展示 “本月考勤統(tǒng)計(jì)”（正常出勤 22 天、請(qǐng)假 3 天），再往下是考勤詳情列表，用戶可快速瀏覽每位員工的考勤狀態(tài)，操作邏輯清晰。
雙欄布局將數(shù)據(jù)過濾模塊單獨(dú)置于左側(cè)側(cè)欄，右側(cè)展示數(shù)據(jù)統(tǒng)計(jì)與數(shù)據(jù)列表，適合過濾條件較多的場(chǎng)景，既能保留完整的篩選功能，又不影響數(shù)據(jù)展示區(qū)域的完整性。
- 過濾條件豐富（≥6 個(gè)），需多維度組合篩選（如類目、負(fù)責(zé)人、狀態(tài)、時(shí)間范圍等）；
- 橫向頁面空間充裕（如 PC 端工作臺(tái)、數(shù)據(jù)管理后臺(tái)）；
- 用戶需頻繁切換篩選條件，且希望篩選狀態(tài)持續(xù)可見（如運(yùn)營(yíng)人員篩選不同類目的產(chǎn)品數(shù)據(jù)）。
- 左側(cè)側(cè)欄寬度固定（建議 200-250px），支持折疊 / 展開，折疊后不影響右側(cè)數(shù)據(jù)展示；
- 側(cè)欄內(nèi)按篩選維度分組（如 “基礎(chǔ)篩選”“高級(jí)篩選”），每組設(shè)置清晰標(biāo)題，選項(xiàng)按邏輯排序；
- 右側(cè)數(shù)據(jù)統(tǒng)計(jì)與列表區(qū)域保持與單列布局一致的設(shè)計(jì)邏輯，確保視覺統(tǒng)一性；
- 篩選條件變更后，右側(cè)列表實(shí)時(shí)刷新，無需用戶額外點(diǎn)擊 “查詢”，提升操作效率。
電商產(chǎn)品管理后臺(tái)的商品列表頁采用雙欄布局，左側(cè)側(cè)欄包含 “商品類目”“上架狀態(tài)”“價(jià)格區(qū)間”“所屬店鋪” 等 10 余個(gè)篩選條件，右側(cè)展示 “商品總數(shù)”“在售商品數(shù)” 等統(tǒng)計(jì)數(shù)據(jù)及商品列表，運(yùn)營(yíng)人員可快速組合篩選條件，定位目標(biāo)商品。
根據(jù)數(shù)據(jù)展示形式與用戶使用目的，B 端列表頁可分為四大核心模板，每個(gè)模板都有明確的適用場(chǎng)景與設(shè)計(jì)側(cè)重點(diǎn)，設(shè)計(jì)師可根據(jù)業(yè)務(wù)特性靈活選擇。
查詢表格模板以表格形式展示數(shù)據(jù)，每個(gè)條目包含多個(gè)字段（如名稱、狀態(tài)、數(shù)量、操作等），用戶可快速對(duì)比不同條目的詳細(xì)信息，適合需要精準(zhǔn)查詢與數(shù)據(jù)比對(duì)的場(chǎng)景。
- 數(shù)據(jù)條目需展示的字段較多（≥5 個(gè)），且用戶需快速查看關(guān)鍵參數(shù)（如應(yīng)用管理中的 “應(yīng)用名稱、狀態(tài)、類型、調(diào)用量、操作”）；
- 用戶有明確的查詢目標(biāo)，需通過多字段篩選定位條目（如財(cái)務(wù)人員查詢特定時(shí)間段的報(bào)銷單）；
- 需支持?jǐn)?shù)據(jù)排序、導(dǎo)出、批量操作等功能（如導(dǎo)出表格數(shù)據(jù)、批量審核條目）。
- 表格列頭清晰標(biāo)注字段名稱，支持點(diǎn)擊排序（升序 / 降序），排序狀態(tài)用箭頭明確標(biāo)識(shí)；
- 字段內(nèi)容過長(zhǎng)時(shí)，采用 “截?cái)囡@示 + hover 展開” 的方式（如備注文字保留 15 字，hover 顯示完整內(nèi)容），避免表格列寬過寬；
- 操作列放置在表格最右側(cè)，按鈕數(shù)量控制在 3 個(gè)以內(nèi)，多余操作收納在 “更多” 下拉菜單中，保持表格整潔；
- 支持表格列自定義（如用戶可隱藏不需要的字段），適配不同用戶的使用習(xí)慣；
- 奇偶行采用不同背景色區(qū)分，提升表格可讀性，減少視覺疲勞。
應(yīng)用管理列表頁采用查詢表格模板，展示 “應(yīng)用名稱、應(yīng)用狀態(tài)、應(yīng)用類型、容器數(shù)量、調(diào)用量、操作” 等 6 個(gè)字段，用戶可通過狀態(tài)篩選 “已發(fā)布”“未發(fā)布” 的應(yīng)用，點(diǎn)擊列頭排序調(diào)用量，操作列提供 “鏈路報(bào)警”“監(jiān)控” 等功能，滿足精準(zhǔn)管理需求。
標(biāo)準(zhǔn)列表模板以條目卡片形式展示數(shù)據(jù)概覽，每個(gè)條目包含核心信息（如名稱、關(guān)鍵指標(biāo)、狀態(tài)），點(diǎn)擊條目可跳轉(zhuǎn)至詳情頁，適合需要快速瀏覽總體情況并深入查看細(xì)節(jié)的場(chǎng)景。
- 數(shù)據(jù)條目需突出核心信息，無需展示全部字段（如實(shí)驗(yàn)管理中的 “實(shí)驗(yàn)名稱、模型數(shù)、指標(biāo)數(shù)、狀態(tài)”）；
- 頁面需兼具數(shù)據(jù)統(tǒng)計(jì)與條目展示功能（如顯示 “全部應(yīng)用 57 個(gè)”“我創(chuàng)建的 32 個(gè)”）；
- 可作為簡(jiǎn)易工作臺(tái)，用戶需快速定位條目并進(jìn)入詳情頁操作（如運(yùn)營(yíng)人員查看活動(dòng)列表并進(jìn)入編輯頁）。
- 每個(gè)條目卡片包含 “標(biāo)題 + 核心指標(biāo) + 操作按鈕”，標(biāo)題突出顯示，核心指標(biāo)用數(shù)字卡片或標(biāo)簽展示（如 “發(fā)布成功” 狀態(tài)標(biāo)簽）；
- 頁面頂部設(shè)置統(tǒng)計(jì)模塊，用數(shù)字直觀展示不同分類的條目數(shù)量（如 “開發(fā)階段 0 個(gè)、預(yù)發(fā)階段 2 個(gè)、發(fā)布成功 1 個(gè)”）；
- 操作按鈕（如編輯、復(fù)制、刪除）放置在條目右側(cè)，hover 時(shí)顯示，避免占用過多視覺空間；
- 支持下拉加載更多條目，避免一次性加載大量數(shù)據(jù)導(dǎo)致頁面卡頓，加載狀態(tài)用 “加載中” 提示明確告知。
實(shí)驗(yàn)管理列表頁采用標(biāo)準(zhǔn)列表模板，每個(gè)條目展示實(shí)驗(yàn)名稱、模型數(shù)（2903）、指標(biāo)數(shù)（3720）、發(fā)布成功狀態(tài)，用戶可快速瀏覽所有實(shí)驗(yàn)的核心情況，點(diǎn)擊條目進(jìn)入詳情頁查看完整數(shù)據(jù)，或直接點(diǎn)擊 “編輯”“刪除” 按鈕進(jìn)行操作。
卡片列表模板將每個(gè)條目設(shè)計(jì)為獨(dú)立卡片，通過圖文結(jié)合的方式展示信息，視覺表現(xiàn)力強(qiáng)，適合無需按特定順序?yàn)g覽、需突出條目獨(dú)立性的場(chǎng)景。
- 條目需展示個(gè)性化信息（如產(chǎn)品介紹、活動(dòng)詳情），且希望視覺呈現(xiàn)更具吸引力；
- 用戶無需對(duì)比數(shù)據(jù)，僅需瀏覽選擇目標(biāo)條目（如開發(fā)者選擇工具應(yīng)用、運(yùn)營(yíng)人員選擇活動(dòng)模板）；
- 頁面空間充足，需豐富視覺層次（如平臺(tái)首頁的應(yīng)用推薦、工具列表）。
- 每個(gè)卡片包含明確的標(biāo)題、簡(jiǎn)要描述、核心功能按鈕（如 “開始使用”“查看文檔”），信息層級(jí)清晰；
- 卡片尺寸統(tǒng)一，間距均勻，可采用網(wǎng)格布局（如 2 列、3 列），適配不同屏幕尺寸；
- 描述文字控制在兩行以內(nèi)，避免卡片過高影響瀏覽效率；
- 支持卡片 hover 效果（如輕微上浮、陰影加深），提升交互體驗(yàn)；
- 可根據(jù)業(yè)務(wù)需求添加標(biāo)簽、圖標(biāo)等元素（如應(yīng)用類型標(biāo)簽、熱門推薦圖標(biāo)），幫助用戶快速識(shí)別條目屬性。
開發(fā)者工具列表頁采用卡片列表模板，每個(gè)卡片展示工具名稱（如語雀、云鳳蝶）、簡(jiǎn)要描述（如 “專業(yè)的云端知識(shí)庫(kù)”“流暢的可視化搭建工具”）、功能按鈕（“開始使用”“查看文檔”），用戶可隨意瀏覽，點(diǎn)擊感興趣的工具卡片進(jìn)入詳情頁，視覺體驗(yàn)舒適且操作直觀。
搜索列表模板以搜索為核心，用戶通過關(guān)鍵詞輸入或多維度篩選，快速查找目標(biāo)條目，適合數(shù)據(jù)量龐大、條目類型多樣的場(chǎng)景，滿足用戶的模糊查詢需求。
- 數(shù)據(jù)條目類型豐富（如文章、項(xiàng)目、應(yīng)用、文檔），用戶需跨類型搜索；
- 用戶無明確查詢目標(biāo)，需通過關(guān)鍵詞模糊查找（如設(shè)計(jì)師搜索 “Ant Design” 相關(guān)的設(shè)計(jì)資源）；
- 需支持多維度高級(jí)篩選（如類目、負(fù)責(zé)人、好評(píng)度、活躍用戶等），精準(zhǔn)縮小查詢范圍。
- 頁面頂部設(shè)置突出的搜索框，占位提示明確（如 “搜索小程序開發(fā)入駐 ISV 權(quán)限”），支持回車快速搜索；
- 搜索框下方設(shè)置分類標(biāo)簽（如 “文章、項(xiàng)目、應(yīng)用”），用戶可切換搜索范圍，篩選結(jié)果實(shí)時(shí)更新；
- 高級(jí)篩選模塊可折疊，包含多維度篩選條件（如類目、負(fù)責(zé)人、狀態(tài)），滿足精準(zhǔn)查詢需求；
- 搜索結(jié)果條目展示核心信息（如標(biāo)題、發(fā)布者、發(fā)布時(shí)間、簡(jiǎn)介），簡(jiǎn)介部分截取關(guān)鍵內(nèi)容，幫助用戶快速判斷是否為目標(biāo)條目；
- 支持結(jié)果排序（如按發(fā)布時(shí)間、熱度排序），并顯示條目相關(guān)數(shù)據(jù)（如點(diǎn)贊數(shù)、評(píng)論數(shù)），輔助用戶決策。
設(shè)計(jì)資源平臺(tái)的搜索列表頁，用戶輸入 “Ant Design” 關(guān)鍵詞后，可切換 “文章、項(xiàng)目、應(yīng)用” 分類標(biāo)簽，通過高級(jí)篩選選擇所屬類目、負(fù)責(zé)人，搜索結(jié)果展示資源標(biāo)題、發(fā)布者、發(fā)布時(shí)間、簡(jiǎn)介及點(diǎn)贊數(shù)，用戶可快速找到所需的設(shè)計(jì)資源。
- 核心篩選條件（如關(guān)鍵詞、狀態(tài)）直接展示，次要條件收納在 “高級(jí)篩選” 中，避免篩選區(qū)域過于冗長(zhǎng)；
- 篩選條件變更后，列表實(shí)時(shí)刷新，無需用戶額外點(diǎn)擊 “查詢”，提升操作效率；
- 保留用戶最近的篩選記錄，下次進(jìn)入頁面時(shí)自動(dòng)加載，減少重復(fù)操作。
- 高頻操作按鈕突出顯示（如 “新建”“導(dǎo)出”），低頻操作收納在下拉菜單中，簡(jiǎn)化視覺層級(jí)；
- 批量操作需先勾選條目，再點(diǎn)擊操作按鈕，勾選狀態(tài)清晰可見，支持 “全選 / 取消全選”；
- 操作后給予明確反饋（如 “刪除成功”“導(dǎo)出完成”），讓用戶感知操作結(jié)果。
- PC 端支持多列布局（如卡片列表 3 列、查詢表格 5 列），移動(dòng)端自動(dòng)適配為單列布局，確保在不同終端都能正常瀏覽；
- 移動(dòng)端列表支持下拉刷新、上拉加載，操作按鈕適配觸摸交互（如增大點(diǎn)擊區(qū)域）。
B 端列表頁設(shè)計(jì)的核心是 “場(chǎng)景匹配”—— 根據(jù)數(shù)據(jù)復(fù)雜度選擇布局，根據(jù)業(yè)務(wù)需求選擇模板，最終實(shí)現(xiàn) “數(shù)據(jù)清晰、操作高效、體驗(yàn)流暢” 的目標(biāo)。在實(shí)際設(shè)計(jì)過程中，需結(jié)合用戶調(diào)研與業(yè)務(wù)邏輯，靈活調(diào)整布局與模板的細(xì)節(jié)，讓列表頁真正成為用戶處理數(shù)據(jù)、決策分析的高效工具。隨著 B 端產(chǎn)品的迭代，列表頁設(shè)計(jì)也需持續(xù)優(yōu)化，融入智能化功能（如智能篩選、數(shù)據(jù)預(yù)警），進(jìn)一步提升用戶體驗(yàn)。
