筆者結(jié)合后臺(tái)設(shè)計(jì)的工作經(jīng)歷甥桂，總結(jié)在后臺(tái)列表設(shè)計(jì)工作中會(huì)遇到的一些常見問題及設(shè)計(jì)思考走净。本文主要介紹“列字段過多時(shí)如何處理券时、列表操作、列表如何排序”三個(gè)問題的一些思考伏伯。初次發(fā)文橘洞，不足之處請(qǐng)多多包涵~

列表定義及作用

列表是一種信息集合的方式，可承載文字说搅、列表炸枣、圖片、段落弄唧，常用于后臺(tái)數(shù)據(jù)展示頁(yè)面适肠。列表設(shè)計(jì)主要體現(xiàn)在可讀性與易管理操作兩個(gè)方面，用戶可快速地管理數(shù)據(jù)（查看候引、查詢侯养、操作、分析澄干、等操作）逛揩。

常見列表結(jié)構(gòu)

列表結(jié)構(gòu)設(shè)計(jì)上柠傍，可根據(jù)列字段內(nèi)容選取合適列表結(jié)構(gòu)，例如適用于數(shù)據(jù)平鋪展示的基礎(chǔ)型列表息尺，強(qiáng)調(diào)層級(jí)關(guān)系携兵、從屬關(guān)系、遞進(jìn)關(guān)系的主從型列表（如子母表）搂誉，或合并單元格展示的綜合型列表等徐紧，關(guān)于列表結(jié)構(gòu)分析網(wǎng)上有眾多分享文章，此處不作過多闡述炭懊。

列表設(shè)計(jì)常見問題

簡(jiǎn)單梳理后臺(tái)列表設(shè)計(jì)會(huì)遇到的一些問題及可參考的設(shè)計(jì)方法并级，根據(jù)具體業(yè)務(wù)場(chǎng)景選取最合適的解決方案。

常見問題1：列字段過多時(shí)怎么辦侮腹？

我們都知道列表設(shè)計(jì)要盡量避免橫向滾動(dòng)條的出現(xiàn)嘲碧，橫滾會(huì)降低可讀性及操作效率，但是日常工作中我們還是會(huì)看到產(chǎn)品經(jīng)理提過來的列字段是屏幕寬度展示不下的父阻，這個(gè)時(shí)候可以通過以下幾種方法來解決：

（1）刪減字段愈涩。刪減無用字段，留下重要的字段加矛。刪減階段需要與產(chǎn)品經(jīng)理一起合作履婉，還原業(yè)務(wù)場(chǎng)景，為列表展示字段做減法斟览。

（2）合并字段毁腿。針對(duì)復(fù)雜列表你會(huì)發(fā)現(xiàn)，刪減后的字段還是很多苛茂，這時(shí)候你可以考慮是否可以合并字段已烤，將屬性差不多的字段合為一列，舉個(gè)簡(jiǎn)單栗子妓羊，如下圖“商品圖片胯究、商品名稱、sku屬性”列字段可合并為“商品信息”一個(gè)列字段完成展示躁绸，使信息關(guān)系更緊密唐片，并且可節(jié)省列表橫向空間。

合并字段

（3）主從型結(jié)構(gòu)展示涨颜。列表具有較強(qiáng)的層級(jí)關(guān)系费韭、從屬關(guān)系、遞進(jìn)關(guān)系庭瑰，可選用主從型結(jié)構(gòu)列表展示星持，也可有效避免橫向滾動(dòng)。

主從型結(jié)構(gòu)展示

（4）列設(shè)置弹灭。針對(duì)B端或G端業(yè)務(wù)督暂，同一個(gè)列表會(huì)面向多種受眾角色揪垄，經(jīng)辦崗、審核崗逻翁、監(jiān)管崗等等饥努， 每種用戶角色對(duì)列表的字段需求有相同也有不同之處，眾口難調(diào)八回，列設(shè)置功能可有效解決這種情況酷愧，市面上CRM管理系統(tǒng)基本都支持自定義列設(shè)置來滿足不同用戶的列表需求，在產(chǎn)品設(shè)計(jì)上也只需要設(shè)計(jì)一套通用的列表缠诅，適用于不同的角色溶浴。

自定義列設(shè)置

（5）固定首列及操作列。如果真的必須出現(xiàn)橫向滾動(dòng)管引，建議固定首列及操作列的方法士败，來滿足操作效率。

常見問題2：列表操作如何設(shè)計(jì)褥伴？

（1）直接羅列谅将。列表操作直接顯現(xiàn)在列表上，支持用戶不需要查看詳情頁(yè)重慢，直接根據(jù)列表字段就可以快速作出判斷并且高頻發(fā)生的操作饥臂，操作效率高。但是當(dāng)操作很多的時(shí)候伤锚，還是需要將更多的操作收納到一個(gè)組內(nèi)擅笔，將高頻操作放在組操作之外志衣。

操作直接羅列

（2）操作隱藏屯援。在列表頁(yè)將所有操作隱藏起來。比較適用于一些操作頻率使用較低或操作風(fēng)險(xiǎn)較高的列表念脯。

操作隱藏

（3）批量操作狞洋。當(dāng)列表批量操作場(chǎng)景為主要場(chǎng)景時(shí)，可不放置單行操作绿店，將所有操作都放在批量操作模塊吉懊。不過對(duì)于不同狀態(tài)數(shù)據(jù)的批量操作邏輯會(huì)比較復(fù)雜，會(huì)存在數(shù)據(jù)過濾的邏輯假勿。

常見問題3：列表如何排序借嗽？

此處探討的排序非數(shù)據(jù)查詢排序，而是用戶對(duì)數(shù)據(jù)位置排序的功能需求转培。

（1）拖拽排序恶导。針對(duì)數(shù)據(jù)體量小，可選用鼠標(biāo)拖拽交互進(jìn)行排序浸须，所見即所得惨寿。但是不適用數(shù)據(jù)體量大的列表邦泄。

拖拽排序

（2）上/下移動(dòng)排序。更適用于局部上下順序調(diào)整裂垦，不適用調(diào)整較大范圍顺囊。

（3）序號(hào)排序。針對(duì)數(shù)據(jù)體量大蕉拢，選用序號(hào)排序特碳，操作效率更高。下圖是曾經(jīng)做過的關(guān)于數(shù)據(jù)量較大的列表排序需求企量，就選用了手動(dòng)輸入序號(hào)的方式测萎，完成列表數(shù)據(jù)的排序。

序號(hào)排序

初次發(fā)文届巩，不足之處請(qǐng)多多包涵~

謝謝 ：）

參考文章：

《B端產(chǎn)品常用web列表設(shè)計(jì)模式總結(jié)》

《列表設(shè)計(jì)的一些思路》