B端產(chǎn)品通用功能：web列表頁設(shè)計

時間：2023-09-29 18:00:01 | 來源：網(wǎng)站運營

時間：2023-09-29 18:00:01 來源：網(wǎng)站運營

B端產(chǎn)品通用功能：web列表頁設(shè)計：

B端產(chǎn)品有許多通用功能，例如：角色、權(quán)限管理、數(shù)據(jù)字典管理，列表，報表。這些功能模塊在任何B端產(chǎn)品設(shè)計中都是相同的。看了楊堃老師的文章決定梳理下這些功能組件。

此前我在設(shè)計列表時，通常參照系統(tǒng)已有的列表，沒有過多思考，直接復(fù)用，在體驗市面上其他產(chǎn)品并閱讀相關(guān)文章后，結(jié)合自己在實際工作中遇到的列表進(jìn)行了總結(jié)，以供大家參考，希望能對大家有所幫助。

列表的作用簡單來說就是幫助用戶快速查詢到想要的數(shù)據(jù)，我們將圍繞此來展開講述列表頁的設(shè)計。

列表設(shè)計總結(jié)

操作

操作區(qū)通常頁最頂部或者靠近列表頁的地方，用來進(jìn)行新增、審批、導(dǎo)入導(dǎo)出等操作。

• 導(dǎo)入/導(dǎo)出

導(dǎo)出可根據(jù)篩選條件導(dǎo)出相應(yīng)數(shù)據(jù)，也可導(dǎo)出某條數(shù)據(jù)（例如賬單：導(dǎo)出的excel內(nèi)容通常來說相比列表頁更加豐富）。

導(dǎo)入數(shù)據(jù)時通常采用新頁面或者彈窗的形式引導(dǎo)用戶上傳文件。

步驟一：下載Excel模板，根據(jù)模板要求填寫；

步驟二：上傳，每次上傳條數(shù)做限制，數(shù)據(jù)量大容易造成超時；

步驟三：若上傳的文件有不符合格式的內(nèi)容，將問題數(shù)據(jù)下載修改并重新上傳；










合同大師

查詢

查詢區(qū)主要幫助用戶快速定位數(shù)據(jù)，展現(xiàn)形式主要為tab頁、時間選擇器、單行輸入框、下拉選擇器、復(fù)選框等。

• tab頁可以讓用戶快速定位到想查詢的范圍，無需過多思考

• 時間選擇器可根據(jù)需要提供快捷選項：最近一周，最近一個月，最近三個月，精確到日期或者時分秒看具體需求
• 單行輸入框

可對單據(jù)類、ID類、名稱類等進(jìn)行查詢，通前兩類為精準(zhǔn)查詢，名稱類可模糊查詢處理

• 下拉選擇器

使用下拉選擇器時，如果枚舉值交少，僅有2-3個，建議復(fù)選框的形式平鋪，選項太多可使用有搜索功能的選擇器，或者級聯(lián)選擇器。







在篩選項的選擇上，需要結(jié)合列表數(shù)據(jù)進(jìn)行綜合考慮。一般來說檢索項越多越能幫助用戶精準(zhǔn)定位數(shù)據(jù)，但是過多的檢索項也會對用戶造成干擾。此處結(jié)合用戶使用場景即可。

列表

列表區(qū)是整體頁面的核心區(qū)域，通常分為數(shù)據(jù)展示和數(shù)據(jù)操作兩部分。

數(shù)據(jù)展示

列表展示字段較少的情況下可全部展示，而字段較多的情況下，需要有所取舍，挑出關(guān)鍵數(shù)據(jù)項展示，如果展示過多字段用戶需要橫向滾動來查看數(shù)據(jù)，影響使用體驗，此時可通過自定義表頭解決，提供兩種交互方式供大家參考。

合同大師

通過勾選顯示想要的字段，利用拖拽的方式調(diào)整表頭順序，優(yōu)點：拖拽的交互更利于排序 缺點：若表頭較多，下拉框的形式去勾選不方便查找。

udesk

左側(cè)顯示全部可用字段，用戶可以通過搜索篩選快速定位想要的字段，通過《 》按鈕增加刪減，右側(cè)通過選中字段，點擊上下箭頭進(jìn)行排序，優(yōu)點：方便定位想顯示的字段 缺點：排序不變，需要一下下點擊上移或下移。

• 展示數(shù)量

每個頁面到底展示多少條數(shù)據(jù)合理呢，為了減輕數(shù)據(jù)加載壓力，并減少用戶上下滾動，可以采用分頁解決，可默認(rèn)展示10條數(shù)據(jù)，通過分頁來自定義每頁展示的條數(shù)，也可跳轉(zhuǎn)到指定頁數(shù)。

每頁展示數(shù)量過多時可以選擇凍結(jié)表頭，便于用戶知曉當(dāng)前查閱的是什么數(shù)據(jù)，有些數(shù)據(jù)可以一眼看出，有些則需要對照表頭，否則數(shù)據(jù)量過大時用戶需要反復(fù)滑動。







排序

通常來說，數(shù)值、時間這類數(shù)據(jù)需要進(jìn)行排序，提供正序倒序功能即可，默認(rèn)排序方式根據(jù)具體應(yīng)用場景。

操作

操作列通常放在列表最右側(cè)，包含修改、刪除、啟用、禁用等相關(guān)操作。

• 展現(xiàn)形式

文字鏈接、按鈕或者icon的形式。文字鏈接與按鈕比較常見，icon通常使用于用戶熟悉且能望圖生義的操作，例如：修改刪除等，若操作項較多可折疊部分操作。




泛微