本文主要介紹了“列字段過多時(shí)如何處理、列表操作、列表如何排序”三個(gè)問題的一些思考。

筆者結(jié)合后臺設(shè)計(jì)的工作經(jīng)歷，總結(jié)在后臺列表設(shè)計(jì)工作中會遇到的一些常見問題及設(shè)計(jì)思考。初次發(fā)文，不足之處請多多包涵~

一、列表定義及作用

列表是一種信息集合的方式，可承載文字、列表、圖片、段落，常用于后臺數(shù)據(jù)展示頁面。列表設(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)層級關(guān)系、從屬關(guān)系、遞進(jìn)關(guān)系的主從型列表（如子母表），或合并單元格展示的綜合型列表等，關(guān)于列表結(jié)構(gòu)分析網(wǎng)上有眾多分享文章，此處不作過多闡述。

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

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

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

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

（1）刪減字段

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

（2）合并字段

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

合并字段

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

列表具有較強(qiáng)的層級關(guān)系、從屬關(guān)系、遞進(jìn)關(guān)系，可選用主從型結(jié)構(gòu)列表展示，也可有效避免橫向滾動。

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

（4）列設(shè)置

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

自定義列設(shè)置

（5）固定首列及操作列

如果真的必須出現(xiàn)橫向滾動，建議固定首列及操作列的方法，來滿足操作效率。

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

（1）直接羅列

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

操作直接羅列

（2）操作隱藏

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

操作隱藏

（3）批量操作

當(dāng)列表批量操作場景為主要場景時(shí)，可不放置單行操作，將所有操作都放在批量操作模塊。不過對于不同狀態(tài)數(shù)據(jù)的批量操作邏輯會比較復(fù)雜，會存在數(shù)據(jù)過濾的邏輯。

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

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

（1）拖拽排序

針對數(shù)據(jù)體量小，可選用鼠標(biāo)拖拽交互進(jìn)行排序，所見即所得。但是不適用數(shù)據(jù)體量大的列表。

拖拽排序

（2）上/下移動排序

更適用于局部上下順序調(diào)整，不適用調(diào)整較大范圍。

（3）序號排序

針對數(shù)據(jù)體量大，選用序號排序，操作效率更高。下圖是曾經(jīng)做過的關(guān)于數(shù)據(jù)量較大的列表排序需求，就選用了手動輸入序號的方式，完成列表數(shù)據(jù)的排序。

序號排序

初次發(fā)文，不足之處請多多包涵~謝謝 ：）

#參考文章#

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

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

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

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